fix(#12): lazy load youtube video

src/components.d.ts

@@ -52,6 +52,7 @@ export namespace Components {
   interface DeckgoSocial {
     'fullUrl': string;
     'github': string;
+    'lazyLoadContent': () => Promise<void>;
     'linkedin': string;
     'medium': string;
     'twitter': string;
@@ -66,6 +67,7 @@ export namespace Components {
 
   interface DeckgoYoutube {
     'height': number;
+    'lazyLoadContent': () => Promise<void>;
     'src': string;
     'updateIFrame': (width: number, height: number) => Promise<void>;
     'width': number;

src/components/extra/deckdeckgo-extra.tsx

@@ -0,0 +1,35 @@
+export interface DeckdeckgoExtra {
+  lazyLoadContent(): Promise<void>;
+}
+
+export class DeckdeckgoExtraUtils {
+
+  static lazyLoadContent(el: HTMLElement, tag: string): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      const promises = [];
+
+      const elements: HTMLElement[] = this.getAllElements(el, tag);
+
+      if (elements && elements.length > 0) {
+
+        elements.forEach((element: HTMLElement) => {
+          promises.push((element as any).lazyLoadContent());
+        });
+
+        await Promise.all(promises);
+
+        resolve();
+      }
+
+      resolve();
+    });
+  }
+
+  private static getAllElements(el: HTMLElement, tag: string): HTMLElement[] {
+    const allSlottedElements: NodeListOf<HTMLElement> = el.querySelectorAll(tag);
+    const allShadowsElements: NodeListOf<HTMLElement> = el.shadowRoot.querySelectorAll(tag);
+
+    return Array.from(allSlottedElements).concat(Array.from(allShadowsElements));
+  }
+
+}

src/components/extra/deckdeckgo-gif/deckdeckgo-gif.tsx

@@ -1,13 +1,14 @@
 import {Component, Element, Prop, Method} from '@stencil/core';
 
 import {DeckdeckgoUtils} from '../../utils/deckdeckgo-utils';
+import {DeckdeckgoExtra} from '../deckdeckgo-extra';
 
 @Component({
   tag: 'deckgo-gif',
   styleUrl: 'deckdeckgo-gif.scss',
   shadow: true
 })
-export class DeckdeckgoGif {
+export class DeckdeckgoGif implements DeckdeckgoExtra {
 
   @Element() el: HTMLElement;
 

src/components/extra/deckdeckgo-social/deckdeckgo-social.tsx

@@ -1,12 +1,13 @@
-import {Component, Prop, State, Watch} from '@stencil/core';
+import {Component, Method, Prop, State, Watch} from '@stencil/core';
 
+import {DeckdeckgoExtra} from '../deckdeckgo-extra';
 
 @Component({
   tag: 'deckgo-social',
   styleUrl: 'deckdeckgo-social.scss',
   shadow: true
 })
-export class DeckdeckgoSocial {
+export class DeckdeckgoSocial implements DeckdeckgoExtra {
 
   @State() url: string;
 
@@ -24,6 +25,13 @@ export class DeckdeckgoSocial {
     this.concatFullUrl();
   }
 
+  @Method()
+  lazyLoadContent(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      resolve();
+    });
+  }
+
   @Watch('twitter')
   concatTwitterUrl() {
     if (!this.twitter) {

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

@@ -1,12 +1,13 @@
 import {Component, Element, Method, Prop} from '@stencil/core';
 
+import {DeckdeckgoExtra} from '../deckdeckgo-extra';
 
 @Component({
   tag: 'deckgo-youtube',
   styleUrl: 'deckdeckgo-youtube.scss',
   shadow: true
 })
-export class DeckdeckgoYoutube {
+export class DeckdeckgoYoutube implements DeckdeckgoExtra {
 
   @Element() el: HTMLElement;
 
@@ -16,8 +17,6 @@ export class DeckdeckgoYoutube {
 
   async componentDidLoad() {
     await this.addPreconnectLink();
-
-    await this.createIFrame();
   }
 
   private addPreconnectLink(): Promise<void> {
@@ -54,13 +53,24 @@ export class DeckdeckgoYoutube {
     }
   }
 
+  @Method()
+  lazyLoadContent(): Promise<void> {
+    return this.createIFrame();
+  }
+
   private createIFrame(): Promise<void> {
     return new Promise<void>((resolve) => {
       if (!this.src) {
         resolve();
         return;
       }
 
+      const iframe: HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
+      if (iframe) {
+        resolve();
+        return;
+      }
+
       const element: HTMLIFrameElement = document.createElement('iframe');
 
       const allow: Attr = document.createAttribute('allow');

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -88,7 +88,7 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
     } else {
       return new Promise<void>((resolve) => {
         resolve();
-      })
+      });
     }
   }
 

src/components/slides/deckdeckgo-slide.tsx

@@ -1,4 +1,5 @@
 import {DeckdeckgoUtils} from '../utils/deckdeckgo-utils';
+import {DeckdeckgoExtraUtils} from '../extra/deckdeckgo-extra';
 
 export interface DeckdeckgoSlide {
   beforeSwipe(_swipeLeft: boolean): Promise<boolean>;
@@ -95,31 +96,16 @@ export class DeckdeckgoSlideUtils {
 
   static lazyLoadContent(el: HTMLElement): Promise<void> {
     return new Promise<void>(async (resolve) => {
-      await DeckdeckgoUtils.lazyLoadImages(el);
+      const promises = [];
 
-      const gifs: HTMLElement[] = this.getAllElements(el, 'deckgo-gif');
+      promises.push(DeckdeckgoUtils.lazyLoadImages(el));
+      promises.push(DeckdeckgoExtraUtils.lazyLoadContent(el, 'deckgo-gif'));
+      promises.push(DeckdeckgoExtraUtils.lazyLoadContent(el, 'deckgo-youtube'));
 
-      if (gifs && gifs.length > 0) {
-        const promises = [];
-
-        gifs.forEach((gif: HTMLDeckgoGifElement) => {
-            promises.push(gif.lazyLoadContent());
-        });
-
-        await Promise.all(promises);
-
-        resolve();
-      }
+      await Promise.all(promises);
 
       resolve();
     });
   }
 
-  private static getAllElements(el: HTMLElement, tag: string): HTMLElement[] {
-    const allSlottedElements: NodeListOf<HTMLElement> = el.querySelectorAll(tag);
-    const allShadowsElements: NodeListOf<HTMLElement> = el.shadowRoot.querySelectorAll(tag);
-
-    return Array.from(allSlottedElements).concat(Array.from(allShadowsElements));
-  }
-
 }