@justinribeiro/lite-youtube - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

lite-youtube.d.ts

@@ -19,4 +19,3 @@ export declare class LiteYTEmbed extends HTMLElement {
     set videoPlay(name: string);
-    get videoStartAt(): number;
-    set videoStartAt(time: number);
+    get videoStartAt(): string;
     get autoLoad(): boolean;
@@ -27,2 +26,3 @@ get noCookie(): boolean;
     get params(): string;
+    set params(opts: string);
     private setupDom;
@@ -34,2 +34,4 @@ private setupComponent;
     private initIntersectionObserver;
+    private attemptShortAutoPlay;
+    private isYouTubeShort;
     private static addPrefetch;
@@ -36,0 +38,0 @@ private static warmConnections;

lite-youtube.js

@@ -41,7 +41,4 @@ export class LiteYTEmbed extends HTMLElement {
     get videoStartAt() {
-        return Number(this.getAttribute('videoStartAt') || '0');
+        return this.getAttribute('videoStartAt') || '0';
     }
-    set videoStartAt(time) {
-        this.setAttribute('videoStartAt', String(time));
-    }
     get autoLoad() {
@@ -63,2 +60,5 @@ return this.hasAttribute('autoload');
     }
+    set params(opts) {
+        this.setAttribute('params', opts);
+    }
     setupDom() {
@@ -79,2 +79,8 @@ const shadowDom = this.attachShadow({ mode: 'open' });
 
+        @media (max-width: 40em) {
+          :host([short]) {
+            padding-bottom: calc(100% / (9 / 16));
+          }
+        }
+
         #frame, #fallbackPlaceholder, iframe {
@@ -170,3 +176,3 @@ position: absolute;
         this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);
-        if (this.autoLoad) {
+        if (this.autoLoad || this.isYouTubeShort()) {
             this.initIntersectionObserver();
@@ -178,3 +184,5 @@ }
             case 'videoid':
-            case 'playlistid': {
+            case 'playlistid':
+            case 'videoTitle':
+            case 'videoPlay': {
                 if (oldVal !== newVal) {
@@ -196,3 +204,3 @@ this.setupComponent();
         if (!this.isIframeLoaded) {
-            const autoplay = isIntersectionObserver ? 0 : 1;
+            let autoplay = isIntersectionObserver ? 0 : 1;
             const wantsNoCookie = this.noCookie ? '-nocookie' : '';
@@ -206,2 +214,6 @@ let embedTarget;
             }
+            if (this.isYouTubeShort()) {
+                this.params = `loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`;
+                autoplay = 1;
+            }
             const iframeHTML = `
@@ -215,2 +227,3 @@ <iframe frameborder="0"
             this.isIframeLoaded = true;
+            this.attemptShortAutoPlay();
             this.dispatchEvent(new CustomEvent('liteYoutubeIframeLoaded', {
@@ -253,9 +266,19 @@ detail: {
     }
-    static addPrefetch(kind, url, as) {
+    attemptShortAutoPlay() {
+        if (this.isYouTubeShort()) {
+            setTimeout(() => {
+                this.shadowRoot
+                    .querySelector('iframe')
+                    ?.contentWindow?.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
+            }, 2000);
+        }
+    }
+    isYouTubeShort() {
+        return (this.getAttribute('short') === '' &&
+            window.matchMedia('(max-width: 40em)').matches);
+    }
+    static addPrefetch(kind, url) {
         const linkElem = document.createElement('link');
         linkElem.rel = kind;
         linkElem.href = url;
-        if (as) {
-            linkElem.as = as;
-        }
         linkElem.crossOrigin = 'true';
@@ -262,0 +285,0 @@ document.head.append(linkElem);

package.json

@@ -28,3 +28,3 @@ {
   "license": "MIT",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "lite-youtube.js",
@@ -39,17 +39,14 @@ "module": "lite-youtube.js",
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^2.5.33",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
+    "@open-wc/eslint-config": "^7.0.0",
+    "@open-wc/testing": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "@web/dev-server": "^0.1.24",
     "@web/test-runner": "^0.13.18",
-    "concurrently": "^6.3.0",
-    "eslint": "^6.8.0",
-    "eslint-config-google": "^0.14.0",
+    "concurrently": "^7.0.0",
+    "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-lit": "^1.2.0",
     "istanbul-badges-readme": "^1.4.0",
     "prettier": "^2.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.7.0"
   },
@@ -56,0 +53,0 @@ "eslintConfig": {

README.md

@@ -1,4 +0,4 @@
-[![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) [![min+gzip](https://badgen.net/bundlephobia/minzip/@justinribeiro/lite-youtube)](https://bundlephobia.com/result?p=@justinribeiro/lite-youtube) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)
+[![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) ![min+gzip](https://img.shields.io/badge/min%2Bgzip-2.2kb-blue) ![min+br](https://img.shields.io/badge/min%2Bbr-1.7kb-blue) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)
 
-![Statements](https://img.shields.io/badge/statements-97.7%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-86.66%25-yellow.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-88.46%25-yellow.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-97.7%25-brightgreen.svg?style=flat)
+![Statements](https://img.shields.io/badge/statements-98.22%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-91.17%25-brightgreen.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-98.22%25-brightgreen.svg?style=flat)
 
@@ -23,4 +23,5 @@ # \<lite-youtube\>
 - _new in v1.3_: Adds `loading=lazy` to image placeholder for more perf with `posterloading` attr if you'd like to use eager
+- _new in v1.4_: Adds `short` attr for enabling experimental YouTube Shorts mobile interaction support. See (example video)[https://www.youtube.com/watch?v=aw7CRQTuRfo] for details.
 
-## Install
+## Install via package manager
 
@@ -30,3 +31,3 @@ This web component is built with ES modules in mind and is
 
-Install code-block:
+To install, use your package manager of choice:
 
@@ -50,3 +51,3 @@ ```sh
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.2/lite-youtube.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.js"></script>
 ```
@@ -60,2 +61,13 @@
 
+## Playlist Usage
+
+Setting the YouTube playlistid allows the playlist interface to load on interaction. Note, this still requires a videoid for to load a placeholder thumbnail as YouTube does not return a thumbnail for playlists in the API.
+
+```html
+  <lite-youtube
+    videoid="VLrYOji75Vc"
+    playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
+  ></lite-youtube>
+```
+
 ## Add Video Title
@@ -65,14 +77,14 @@
 <lite-youtube
+  videotitle="This is a video title"
   videoid="guJLfqTFfIw"
-  videotitle="This is a video title"
 ></lite-youtube>
 ```
 
-## Change "Play" for Locale</h3>
+## Update interface for Locale</h3>
 
 ```html
 <lite-youtube
-  videoid="guJLfqTFfIw"
   videoplay="Mirar"
   videotitle="Mis hijos se burlan de mi español"
+  videoid="guJLfqTFfIw"
 >
@@ -98,7 +110,8 @@ </lite-youtube>
 
-## Set a video start time
+## Enable YouTube Shorts interaction on mobile
 
+See [the example video](https://www.youtube.com/watch?v=aw7CRQTuRfo) of how this feature works for additional details.
+
 ```html
-<!-- Start at 5 seconds -->
-<lite-youtube videoid="guJLfqTFfIw" videoStartAt="5"></lite-youtube>
+<lite-youtube videoid="vMImN9gghao" short></lite-youtube>
 ```
@@ -114,6 +127,24 @@
 
+## Set a video start time
+
+```html
+<!-- Start at 5 seconds -->
+<lite-youtube videoid="guJLfqTFfIw" videoStartAt="5"></lite-youtube>
+```
+
+## Fine tune the poster quality for a video
+
+```html
+<lite-youtube
+  videoid="guJLfqTFfIw"
+  posterquality="maxresdefault"
+></lite-youtube>
+```
+
 ## YouTube QueryParams
 
-Use any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like
+Use any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like.
 
+> Note: the exception to this rule is the autoplay param; because of the nature of the performance loading and the inconsistency of usage, that parameter generally does not work. See [this comment](https://github.com/justinribeiro/lite-youtube/issues/66#issuecomment-1182110925) for details.
+
 ```html
@@ -124,2 +155,3 @@ <lite-youtube videoid="guJLfqTFfIw" params="controls=0&enablejsapi=1">
 
+
 ## Attributes
@@ -141,2 +173,3 @@
 | `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |
+| `short`     | Show 9:16 YouTube Shorts-style interaction on mobile devices | `false` |
 | `params`       | Set YouTube query parameters                                     | ``      |
@@ -143,0 +176,0 @@

No alert changes

Improved metrics

Total package byte prevSize

40857

increased by11.9%

Dev dependency count

13

decreased by-18.75%

Lines of code

320

increased by8.11%

Number of lines in readme file

175

increased by23.24%

No dependency changes