feat: add liteYoutubeIframeLoaded event for iframe load (justinribeir…

…o#39)
cshawaus · Oct 5, 2021 · a870383 · a870383
1 parent e23de5b
commit a870383
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -124,3 +124,12 @@ flexibility.
 | `nocookie`     | Use youtube-nocookie.com as iframe embed uri | `false` |
 | `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |
 | `params`       | Set YouTube query parameters                                     | ``      |
+
+## Events
+
+The web component allows certain attributes to be give a little additional
+flexibility.
+
+| Event Name     | Description                                                      | Returns |
+| -------------- | ---------------------------------------------------------------- | ------- |
+| `liteYoutubeIframeLoaded` | When the iframe is loaded, allowing us of JS API  | `detail: { videoId: this.videoId }` |
diff --git a/demo/index.html b/demo/index.html
@@ -104,6 +104,7 @@ <h3>YouTube QueryParams</h3>
 &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; params=&quot;controls=0&amp;enablejsapi=1&quot;&gt;&lt;/lite-youtube&gt;
     </pre>
     <lite-youtube
+      id="test-jsapi"
       videoid="guJLfqTFfIw"
       params="controls=0&enablejsapi=1"
     ></lite-youtube>
@@ -124,6 +125,55 @@ <h3>YouTube QueryParams</h3>
     <lite-youtube
       videoid="guJLfqTFfIw"
       nocookie
-    ></lite-youtube
+    ></lite-youtube>
+
+    <script type="text/javascript">
+      // From https://developers.google.com/youtube/iframe_api_reference#Examples
+      const tag = document.createElement('script');
+      tag.id = 'iframe-demo';
+      tag.src = 'https://www.youtube.com/iframe_api';
+      const firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+      let player;
+
+      function onPlayerReady(event) {
+        document.querySelector('#test-jsapi').style.borderColor = '#FF6D00';
+        document.querySelector('#test-jsapi').style.borderWidth = '5px';
+        document.querySelector('#test-jsapi').style.borderStyle = 'solid';
+      }
+
+      function changeBorderColor(playerStatus) {
+        let color;
+        if (playerStatus == -1) {
+          color = "#37474F"; // unstarted = gray
+        } else if (playerStatus == 0) {
+          color = "#FFFF00"; // ended = yellow
+        } else if (playerStatus == 1) {
+          color = "#33691E"; // playing = green
+        } else if (playerStatus == 2) {
+          color = "#DD2C00"; // paused = red
+        } else if (playerStatus == 3) {
+          color = "#AA00FF"; // buffering = purple
+        } else if (playerStatus == 5) {
+          color = "#FF6DOO"; // video cued = orange
+        }
+        if (color) {
+          document.querySelector('#test-jsapi').style.borderColor = color;
+        }
+      }
+      function onPlayerStateChange(event) {
+        changeBorderColor(event.data);
+      }
+
+      document.addEventListener('liteYoutubeIframeLoaded', () => {
+        player = new YT.Player(document.querySelector('#test-jsapi').shadowRoot.querySelector('iframe'), {
+            events: {
+              'onReady': onPlayerReady,
+              'onStateChange': onPlayerStateChange
+            }
+        });
+      }, false);
+    </script>
   </body>
 </html>
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -274,6 +274,15 @@ export class LiteYTEmbed extends HTMLElement {
       this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
       this.domRefFrame.classList.add('lyt-activated');
       this.iframeLoaded = true;
+      this.dispatchEvent(
+        new CustomEvent('liteYoutubeIframeLoaded', {
+          detail: {
+            videoId: this.videoId,
+          },
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
     }
   }