feat(search): add noscript injector to lightdom for search indexing (#…

…115)

lite-youtube.ts

@@ -242,6 +242,7 @@ export class LiteYTEmbed extends HTMLElement {
     if (this.autoLoad || this.isYouTubeShort() || this.autoPause) {
       this.initIntersectionObserver();
     }
+    this.injectSearchNoScript();
   }
 
   /**
@@ -267,39 +268,55 @@ export class LiteYTEmbed extends HTMLElement {
     }
   }
 
+  // h/t @paulirish et al
+  // https://github.com/paulirish/lite-youtube-embed/issues/105
+  // differs in that we inject into the lightdom above any other nodes so our
+  // slots or fallbacks still work
+  private injectSearchNoScript(): void {
+    const eleNoScript = document.createElement('noscript');
+    this.prepend(eleNoScript);
+    eleNoScript.innerHTML = this.generateIframe();
+  }
+
+  private generateIframe(isIntersectionObserver = false): string {
+    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}?`;
+    }
+
+    // autopause needs the postMessage() in the iframe, so you have to enable
+    // the jsapi
+    if (this.autoPause) {
+      this.params = `enablejsapi=1`;
+    }
+
+    // Oh wait, you're a YouTube short, so let's try to make you more workable
+    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}"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+  src="https://www.youtube${wantsNoCookie}.com/embed/${embedTarget}autoplay=${autoplay}&${this.params}"
+></iframe>`;
+  }
+
   /**
    * Inject the iframe into the component body
    * @param {boolean} isIntersectionObserver
    */
   private addIframe(isIntersectionObserver = false): void {
     if (!this.isIframeLoaded) {
       // Don't autoplay the intersection observer injection, it's weird
-      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}?`;
-      }
-
-      // autopause needs the postMessage() in the iframe, so you have to enable
-      // the jsapi
-      if (this.autoPause) {
-        this.params = `enablejsapi=1`;
-      }
 
-      // Oh wait, you're a YouTube short, so let's try to make you more workable
-      if (this.isYouTubeShort()) {
-        this.params = `loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`;
-        autoplay = 1;
-      }
+      const iframeHTML = this.generateIframe(isIntersectionObserver);
 
-      const iframeHTML = `
-<iframe credentialless frameborder="0" title="${this.videoTitle}"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
-  src="https://www.youtube${wantsNoCookie}.com/embed/${embedTarget}autoplay=${autoplay}&${this.params}"
-></iframe>`;
       this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
       this.domRefFrame.classList.add('activated');
       this.isIframeLoaded = true;

package.json

@@ -44,6 +44,7 @@
     "@typescript-eslint/parser": "^8.14.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-config-prettier": "^9.1.0",
@@ -80,4 +81,4 @@
     "singleQuote": true,
     "arrowParens": "avoid"
   }
-}
+}

test/lite-youtube.test.ts

@@ -247,6 +247,14 @@ describe('<lite-youtube>', () => {
     await expect(frameShadowVisible).to.equal('no');
   });
 
+  it('has noscript search range in lightdom', async () => {
+    const el = await fixture<LiteYTEmbed>(
+      html`<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>`,
+    );
+    await elementUpdated(el);
+    await expect(el).to.contain('noscript');
+  });
+
   it('is valid A11y via aXe', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     await expect(el).shadowDom.to.be.accessible();

yarn.lock

@@ -1071,6 +1071,11 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
+assertion-error@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
+  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
+
 ast-types@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.4.tgz#ee0d77b343263965ecc3fb62da16e7222b2b6782"
@@ -1268,6 +1273,17 @@ chai-a11y-axe@^1.5.0:
   dependencies:
     axe-core "^4.3.3"
 
+chai@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-5.1.2.tgz#3afbc340b994ae3610ca519a6c70ace77ad4378d"
+  integrity sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==
+  dependencies:
+    assertion-error "^2.0.1"
+    check-error "^2.1.1"
+    deep-eql "^5.0.1"
+    loupe "^3.1.0"
+    pathval "^2.0.0"
+
 chalk-template@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk-template/-/chalk-template-0.4.0.tgz#692c034d0ed62436b9062c1707fadcd0f753204b"
@@ -1292,6 +1308,11 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+check-error@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
+  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
+
 chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
@@ -1549,6 +1570,11 @@ decamelize@^4.0.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
   integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
 
+deep-eql@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
+  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
+
 deep-equal@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.1.0.tgz#5ba60402cf44ab92c2c07f3f3312c3d857a0e1dd"
@@ -3239,6 +3265,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+loupe@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.2.tgz#c86e0696804a02218f2206124c45d8b15291a240"
+  integrity sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==
+
 lru-cache@^7.14.1:
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
@@ -3672,6 +3703,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pathval@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
+  integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==
+
 pattern-key-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pattern-key-compare/-/pattern-key-compare-1.0.0.tgz#eb564d520cc8a25d9fe0c2dc57bc969a946fc45c"