feat: refresh video and reflect its url in slide

Author: peterpeterparker

webcomponents/core/src/components/extra/deckdeckgo-youtube/deckdeckgo-youtube.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Method, Prop, h} from '@stencil/core';
+import {Component, Element, Method, Prop, h, Watch} from '@stencil/core';
 
 import {DeckdeckgoExtra} from '../deckdeckgo-extra';
 
@@ -61,6 +61,11 @@ export class DeckdeckgoYoutube implements DeckdeckgoExtra {
     return this.createIFrame();
   }
 
+  @Watch('src')
+  async onSrcUpdate() {
+    await this.createIFrame();
+  }
+
   private createIFrame(): Promise<void> {
     return new Promise<void>((resolve) => {
       if (!this.src) {
@@ -70,11 +75,15 @@ export class DeckdeckgoYoutube implements DeckdeckgoExtra {
 
       const iframe: HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
 
-      if (iframe) {
+      if (iframe && !iframe.parentElement) {
         resolve();
         return;
       }
 
+      if (iframe) {
+        iframe.parentElement.removeChild(iframe);
+      }
+
       const element: HTMLIFrameElement = document.createElement('iframe');
 
       const allow: Attr = document.createAttribute('allow');

webcomponents/core/src/components/slides/deckdeckgo-slide-youtube/deckdeckgo-slide-youtube.tsx

@@ -16,7 +16,7 @@ export class DeckdeckgoSlideYoutube implements DeckdeckgoSlide {
 
   @Event() slideDidLoad: EventEmitter<void>;
 
-  @Prop() src: string;
+  @Prop({reflectToAttr: true}) src: string;
   @Prop() width: number;
   @Prop() height: number;
 

webcomponents/core/src/index.html

@@ -215,10 +215,37 @@ <h1 slot="title">Manual code</h1>
     });
   }
 
+  function updateVideo() {
+    return new Promise(async (resolve) => {
+      const deck = document.getElementById('slider');
+
+      if (!deck) {
+        resolve();
+        return;
+      }
+
+      const index = await deck.getActiveIndex();
+
+      const youtubeSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
+
+      if (!youtubeSlideElement || youtubeSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase()) {
+        resolve();
+        return;
+      }
+
+      youtubeSlideElement.src = 'https://www.youtube.com/watch?v=-6Zc8Co2H3w';
+
+      console.log(youtubeSlideElement);
+
+      resolve();
+    });
+  }
+
   document.addEventListener('pagerClick', function() { console.log('Pager clicked'); });
 </script>
 
 <div style="position: fixed; bottom: 0; right: 0; padding: 32px;">
+  <button onclick="updateVideo()">Update video</button>
   <button onclick="toggleVideo()">Toggle video</button>
   <button onclick="slidePrev()">Prev</button>
   <button onclick="slideNext()">Next</button>