feat(#22): pause video after swipe of the Youtube slide

Author: peterpeterparker

src/components.d.ts

@@ -95,6 +95,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideAuthor {
+    'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'imgAlt': string;
     'imgSrc': string;
@@ -107,6 +108,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideCode {
+    'afterSwipe': () => Promise<void>;
     'anchor': string;
     'anchorZoom': string;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
@@ -126,6 +128,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideContent {
+    'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'lazyLoadContent': () => Promise<void>;
     'reveal': boolean;
@@ -138,6 +141,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideGif {
+    'afterSwipe': () => Promise<void>;
     'alt': string;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'fullscreen': boolean;
@@ -152,6 +156,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideSplit {
+    'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'lazyLoadContent': () => Promise<void>;
     'reveal': boolean;
@@ -164,6 +169,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideTitle {
+    'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'lazyLoadContent': () => Promise<void>;
     'reveal': boolean;
@@ -176,6 +182,7 @@ export namespace Components {
   }
 
   interface DeckgoSlideYoutube {
+    'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
     'height': number;
     'lazyLoadContent': () => Promise<void>;

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -163,7 +163,6 @@ export class DeckdeckgoDeck {
         return;
       }
 
-
       const couldSwipeLeft: boolean = deltaX.swipeLeft && this.activeIndex < this.length - 1;
       const couldSwipeRight: boolean = !deltaX.swipeLeft && this.activeIndex > 0;
 
@@ -340,7 +339,7 @@ export class DeckdeckgoDeck {
     if (!slideAnimation) {
       couldSwipe = true;
     } else {
-      couldSwipe = await this.couldSwipe(swipeLeft);
+      couldSwipe = await this.beforeSwipe(swipeLeft);
     }
 
     // We might want first to show hide stuffs in the slide before swiping
@@ -352,10 +351,12 @@ export class DeckdeckgoDeck {
       };
 
       await this.swipeSlide(deltaX, emitEvent);
+
+      await this.afterSwipe(swipeLeft);
     }
   }
 
-  private couldSwipe(swipeLeft: boolean): Promise<boolean> {
+  private beforeSwipe(swipeLeft: boolean): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {
       const slide: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (this.activeIndex + 1) + ')');
 
@@ -369,6 +370,27 @@ export class DeckdeckgoDeck {
     });
   }
 
+  private afterSwipe(swipeLeft: boolean): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      const indexPreviousSlide: number = swipeLeft ? this.activeIndex - 1 : this.activeIndex + 1;
+
+      if (isNaN(indexPreviousSlide) || indexPreviousSlide < 0 || indexPreviousSlide > this.length) {
+        resolve();
+        return;
+      }
+
+      const slide: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (indexPreviousSlide + 1) + ')');
+
+      if (!slide) {
+        // Might be a swipe after the first or last slide
+        resolve();
+      } else {
+        await (slide as any).afterSwipe();
+        resolve();
+      }
+    });
+  }
+
   private lazyLoadContent(index: number): Promise<void> {
     return new Promise<void>(async (resolve) => {
       const slide: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');

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

@@ -30,6 +30,11 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
     });
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

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

@@ -105,6 +105,11 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
     });
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   // DeckDeckGo
   private scrollToNext(swipeLeft: boolean): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {

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

@@ -32,6 +32,11 @@ export class DeckdeckgoSlideContent implements DeckdeckgoSlide {
     return DeckdeckgoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

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

@@ -34,6 +34,11 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
     });
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

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

@@ -32,6 +32,11 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
     return DeckdeckgoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

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

@@ -32,6 +32,11 @@ export class DeckdeckgoSlideTitle implements DeckdeckgoSlide {
     return DeckdeckgoSlideUtils.beforeSwipe(this.el, _swipeLeft, this.reveal);
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return DeckdeckgoSlideUtils.afterSwipe();
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

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

@@ -42,6 +42,15 @@ export class DeckdeckgoSlideYoutube implements DeckdeckgoSlide {
     });
   }
 
+  @Method()
+  afterSwipe(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      // Stop video after swipe to prev or next slide
+      await this.playPauseVideo(false);
+      resolve();
+    });
+  }
+
   @Method()
   lazyLoadContent(): Promise<void> {
     return DeckdeckgoSlideUtils.lazyLoadContent(this.el);

src/components/slides/deckdeckgo-slide.tsx

@@ -4,6 +4,8 @@ import {DeckdeckgoExtraUtils} from '../extra/deckdeckgo-extra';
 export interface DeckdeckgoSlide {
   beforeSwipe(_swipeLeft: boolean): Promise<boolean>;
 
+  afterSwipe(): Promise<void>;
+
   lazyLoadContent(): Promise<void>;
 }
 
@@ -84,6 +86,12 @@ export class DeckdeckgoSlideUtils {
     });
   }
 
+  static afterSwipe(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      resolve();
+    });
+  };
+
   // Source: http://detectmobilebrowsers.com
   static isMobile(): boolean {
     if (!window) {