@justinribeiro/lite-youtube - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

lite-youtube.d.ts

@@ -27,7 +27,11 @@ export declare class LiteYTEmbed extends HTMLElement {
     set params(opts: string);
+    set posterQuality(opts: string);
     private setupDom;
     private setupComponent;
     attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
+    private injectSearchNoScript;
+    private generateIframe;
     private addIframe;
     private initImagePlaceholder;
+    private testPosterImage;
     private initIntersectionObserver;
@@ -34,0 +38,0 @@ private attemptShortAutoPlay;

lite-youtube.js

@@ -65,2 +65,5 @@ export class LiteYTEmbed extends HTMLElement {
     }
+    set posterQuality(opts) {
+        this.setAttribute('posterquality', opts);
+    }
     setupDom() {
@@ -176,3 +179,6 @@ const shadowDom = this.attachShadow({ mode: 'open' });
     setupComponent() {
-        this.initImagePlaceholder();
+        const hasImgSlot = this.shadowRoot.querySelector('slot[name=image]');
+        if (hasImgSlot.assignedNodes().length === 0) {
+            this.initImagePlaceholder();
+        }
         this.domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
@@ -183,2 +189,3 @@ this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);
         }
+        this.injectSearchNoScript();
     }
@@ -195,21 +202,25 @@ attributeChangedCallback(name, oldVal, newVal) {
     }
-    addIframe(isIntersectionObserver = false) {
-        if (!this.isIframeLoaded) {
-            let autoplay = isIntersectionObserver ? 0 : 1;
-            const wantsNoCookie = this.noCookie ? '-nocookie' : '';
-            let embedTarget;
-            if (this.playlistId) {
-                embedTarget = `?listType=playlist&list=${this.playlistId}&`;
-            }
-            else {
-                embedTarget = `${this.videoId}?`;
-            }
-            if (this.autoPause) {
-                this.params = `enablejsapi=1`;
-            }
-            if (this.isYouTubeShort()) {
-                this.params = `loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`;
-                autoplay = 1;
-            }
-            const iframeHTML = `
+    injectSearchNoScript() {
+        const eleNoScript = document.createElement('noscript');
+        this.prepend(eleNoScript);
+        eleNoScript.innerHTML = this.generateIframe();
+    }
+    generateIframe(isIntersectionObserver = false) {
+        let autoplay = isIntersectionObserver ? 0 : 1;
+        const wantsNoCookie = this.noCookie ? '-nocookie' : '';
+        let embedTarget;
+        if (this.playlistId) {
+            embedTarget = `?listType=playlist&list=${this.playlistId}&`;
+        }
+        else {
+            embedTarget = `${this.videoId}?`;
+        }
+        if (this.autoPause) {
+            this.params = `enablejsapi=1`;
+        }
+        if (this.isYouTubeShort()) {
+            this.params = `loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`;
+            autoplay = 1;
+        }
+        return `
 <iframe credentialless frameborder="0" title="${this.videoTitle}"
@@ -219,2 +230,6 @@ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
 ></iframe>`;
+    }
+    addIframe(isIntersectionObserver = false) {
+        if (!this.isIframeLoaded) {
+            const iframeHTML = this.generateIframe(isIntersectionObserver);
             this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
@@ -234,11 +249,29 @@ this.domRefFrame.classList.add('activated');
     initImagePlaceholder() {
-        const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
-        const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
-        this.domRefImg.fallback.loading = this.posterLoading;
-        this.domRefImg.webp.srcset = posterUrlWebp;
-        this.domRefImg.jpeg.srcset = posterUrlJpeg;
-        this.domRefImg.fallback.src = posterUrlJpeg;
+        this.testPosterImage();
         this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
         this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
     }
+    async testPosterImage() {
+        setTimeout(() => {
+            const webpUrl = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
+            const img = new Image();
+            img.fetchPriority = 'low';
+            img.referrerPolicy = 'origin';
+            img.src = webpUrl;
+            img.onload = async (e) => {
+                const target = e.target;
+                const noPoster = target?.naturalHeight == 90 && target?.naturalWidth == 120;
+                if (noPoster) {
+                    this.posterQuality = 'hqdefault';
+                }
+                const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
+                this.domRefImg.webp.srcset = posterUrlWebp;
+                const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
+                this.domRefImg.fallback.loading = this.posterLoading;
+                this.domRefImg.jpeg.srcset = posterUrlJpeg;
+                this.domRefImg.fallback.src = posterUrlJpeg;
+                this.domRefImg.fallback.loading = this.posterLoading;
+            };
+        }, 100);
+    }
     initIntersectionObserver() {
@@ -245,0 +278,0 @@ const options = {

package.json

@@ -28,3 +28,3 @@ {
   "license": "MIT",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
@@ -44,8 +44,9 @@ "main": "lite-youtube.js",
     "@types/node": "^22.9.0",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.19.0",
+    "chai": "^5.1.2",
     "concurrently": "^9.1.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
@@ -68,5 +69,3 @@ "istanbul-badges-readme": "^1.9.0",
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
+      "@typescript-eslint/no-unused-vars": "error",
       "import/no-unresolved": "off",
@@ -86,2 +85,2 @@ "import/extensions": [
   }
-}
+}

README.md

@@ -26,2 +26,3 @@ [![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)
 - _new in v1.6_: Adds `autoPause` for pausing videos scrolled off screen; adds `--lite-youtube-aspect-ratio` CSS custom property create custom aspect ratio videos; adds `--lite-youtube-frame-shadow-visible` CSS custom property to disable frame shadow (flat look); adds a named slot `image` that allows for setting custom poster image; adds `credentialless` for COEP
+- _new in v1.7_: Adds support for 404 fallback posters; add noscript injector to lightdom for search indexing
 
@@ -28,0 +29,0 @@ ## Install via package manager

No alert changes

Improved metrics

Total package byte prevSize

53190

increased by11.58%

Lines of code

380

increased by10.79%

Number of lines in readme file

260

increased by0.39%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes