Remote play pause

package.json

@@ -38,7 +38,7 @@
     "@deckdeckgo/core": "^1.0.0-rc.1-1",
     "@deckdeckgo/highlight-code": "^1.0.0-rc.1",
     "@deckdeckgo/qrcode": "^1.0.0-rc.1",
-    "@deckdeckgo/remote": "^1.0.0-rc.1",
+    "@deckdeckgo/remote": "^1.0.0-rc.2",
     "@deckdeckgo/slide-author": "^1.0.0-rc.1",
     "@deckdeckgo/slide-chart": "^1.0.0-rc.1",
     "@deckdeckgo/slide-code": "^1.0.0-rc.1",

src/index.html

@@ -234,6 +234,9 @@ <h2 slot="title">Get started now 🔥</h2>
     </ion-content>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed" id="navigation">
+        <ion-fab-button id="play" color="primary" size="small" onclick="playPause('play', true)" style="display: none;"><ion-icon name="play" ariaLabel="Play video" style="font-size: 1.4em;"></ion-icon></ion-fab-button>
+        <ion-fab-button id="pause" color="primary" size="small" onclick="playPause('pause', true)" style="display: none;"><ion-icon name="pause" ariaLabel="Pause video" style="font-size: 1.4em;"></ion-icon></ion-fab-button>
+
         <ion-fab-button color="primary" size="small" onclick="previousSlide()"><ion-icon name="arrow-back" ariaLabel="Previous slide" style="font-size: 1.4em;"></ion-icon></ion-fab-button>
         <ion-fab-button color="primary" size="small" onclick="nextSlide()"><ion-icon name="arrow-forward" ariaLabel="Next slide" style="font-size: 1.4em;"></ion-icon></ion-fab-button>
         <ion-fab-button color="primary" size="small" onclick="presentSlidePicker()"><ion-icon name="list" md="md-list" ios="md-list" ariaLabel="Jump to a particular slide" style="font-size: 1.4em;"></ion-icon></ion-fab-button>

src/index.js

@@ -14,6 +14,7 @@ import './css/signup.css';
 import '@webcomponents/custom-elements';
 
 import * as manifestData from './manifest.json';
+
 window.ROOM_NAME = manifestData.name;
 
 import './scripts/loading.js';
@@ -27,33 +28,36 @@ import './scripts/menu.js';
 import './scripts/history.js';
 import './scripts/fullscreen.js';
 import './scripts/resize.js';
+import './scripts/actionPlayPause.js';
+
+import {defineCustomElements as ionicElements} from '@ionic/core/loader';
 
-import { defineCustomElements as ionicElements } from '@ionic/core/loader';
 ionicElements(window);
 
-import { defineCustomElements as ioniconsElements } from 'ionicons/dist/loader';
+import {defineCustomElements as ioniconsElements} from 'ionicons/dist/loader';
+
 ioniconsElements(window);
 
 // Init DeckDeckGo elements
-import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader';
-
-import {defineCustomElements as deckDeckGoSlideTitleElements } from '@deckdeckgo/slide-title/dist/loader';
-import {defineCustomElements as deckDeckGoSlideContentElements } from '@deckdeckgo/slide-content/dist/loader';
-import {defineCustomElements as deckDeckGoSlideAuthorElements } from '@deckdeckgo/slide-author/dist/loader';
-import {defineCustomElements as deckDeckGoSlideChartElements } from '@deckdeckgo/slide-chart/dist/loader';
-import {defineCustomElements as deckDeckGoSlideYoutubeElements } from '@deckdeckgo/slide-youtube/dist/loader';
-import {defineCustomElements as deckDeckGoSlideSplitElements } from '@deckdeckgo/slide-split/dist/loader';
-import {defineCustomElements as deckDeckGoSlideCodeElements } from '@deckdeckgo/slide-code/dist/loader';
-import {defineCustomElements as deckDeckGoSlideGifElements } from '@deckdeckgo/slide-gif/dist/loader';
-import {defineCustomElements as deckDeckGoSlideQRCodeElements } from '@deckdeckgo/slide-qrcode/dist/loader';
-
-import { defineCustomElements as deckDeckGoRemoteElements } from '@deckdeckgo/remote/dist/loader';
-import { defineCustomElements as deckDeckGoChartsElements } from '@deckdeckgo/charts/dist/loader';
-import { defineCustomElements as deckDeckGoQRCodeElements } from '@deckdeckgo/qrcode/dist/loader';
-import { defineCustomElements as deckDeckGoHighlightCodeElements } from '@deckdeckgo/highlight-code/dist/loader';
+import {defineCustomElements as deckDeckGoElements} from '@deckdeckgo/core/dist/loader';
+
+import {defineCustomElements as deckDeckGoSlideTitleElements} from '@deckdeckgo/slide-title/dist/loader';
+import {defineCustomElements as deckDeckGoSlideContentElements} from '@deckdeckgo/slide-content/dist/loader';
+import {defineCustomElements as deckDeckGoSlideAuthorElements} from '@deckdeckgo/slide-author/dist/loader';
+import {defineCustomElements as deckDeckGoSlideChartElements} from '@deckdeckgo/slide-chart/dist/loader';
+import {defineCustomElements as deckDeckGoSlideYoutubeElements} from '@deckdeckgo/slide-youtube/dist/loader';
+import {defineCustomElements as deckDeckGoSlideSplitElements} from '@deckdeckgo/slide-split/dist/loader';
+import {defineCustomElements as deckDeckGoSlideCodeElements} from '@deckdeckgo/slide-code/dist/loader';
+import {defineCustomElements as deckDeckGoSlideGifElements} from '@deckdeckgo/slide-gif/dist/loader';
+import {defineCustomElements as deckDeckGoSlideQRCodeElements} from '@deckdeckgo/slide-qrcode/dist/loader';
+
+import {defineCustomElements as deckDeckGoRemoteElements} from '@deckdeckgo/remote/dist/loader';
+import {defineCustomElements as deckDeckGoChartsElements} from '@deckdeckgo/charts/dist/loader';
+import {defineCustomElements as deckDeckGoQRCodeElements} from '@deckdeckgo/qrcode/dist/loader';
+import {defineCustomElements as deckDeckGoHighlightCodeElements} from '@deckdeckgo/highlight-code/dist/loader';
 
 // Init web-social-share
-import { defineCustomElements as webSocialShareElements } from 'web-social-share/dist/loader';
+import {defineCustomElements as webSocialShareElements} from 'web-social-share/dist/loader';
 
 deckDeckGoElements(window).then(async () => {
     await deckDeckGoChartsElements(window);

src/scripts/actionPlayPause.js

@@ -0,0 +1,50 @@
+playPause = (action, forwardToRemote) => {
+    return new Promise(async (resolve) => {
+        const deck = document.getElementById('slider');
+
+        if (!deck) {
+            resolve();
+            return;
+        }
+
+        const index = await deck.getActiveIndex();
+
+        const actionSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
+
+        if (!actionSlideElement ||
+            (actionSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase() &&
+                actionSlideElement.tagName !== 'deckgo-slide-big-img'.toUpperCase())) {
+            resolve();
+            return;
+        }
+
+        const playButton = document.getElementById('play');
+        const pauseButton = document.getElementById('pause');
+
+        if (action === 'pause') {
+            await actionSlideElement.pause();
+
+            if (playButton) {
+                playButton.style.display = 'initial';
+            }
+
+            if (pauseButton) {
+                pauseButton.style.display = 'none';
+            }
+        } else {
+            await actionSlideElement.play();
+
+            if (playButton) {
+                playButton.style.display = 'none';
+            }
+
+            if (pauseButton) {
+                pauseButton.style.display = 'initial';
+            }
+        }
+
+        if (forwardToRemote) {
+            await forwardPlayPauseToRemote(action);
+        }
+    });
+};

src/scripts/actions.js

@@ -6,6 +6,18 @@ initActions = () => {
             slider.addEventListener('slidesDidLoad', async (_slides) => {
                 await initActionButtons(slider)
             });
+
+            slider.addEventListener('slideNextDidChange', async () => {
+                await initActionPlayPause(slider);
+            });
+
+            slider.addEventListener('slidePrevDidChange', async () => {
+                await initActionPlayPause(slider);
+            });
+
+            slider.addEventListener('slideToChange', async (event) => {
+                await initActionPlayPause(slider);
+            });
         }
 
         resolve();
@@ -37,3 +49,40 @@ function initActionButtons(slider) {
         resolve();
     });
 }
+
+initActionPlayPause = (deck) => {
+    return new Promise(async (resolve) => {
+        const playButton = document.getElementById('play');
+        const pauseButton = document.getElementById('pause');
+
+        const index = await deck.getActiveIndex();
+
+        const actionSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
+
+        if (!actionSlideElement ||
+            (actionSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase() &&
+                actionSlideElement.tagName !== 'deckgo-slide-big-img'.toUpperCase())) {
+
+            if (playButton) {
+                playButton.style.display = 'none';
+            }
+
+            if (pauseButton) {
+                pauseButton.style.display = 'none';
+            }
+
+            resolve();
+            return;
+        }
+
+        if (playButton) {
+            playButton.style.display = 'initial';
+        }
+
+        if (pauseButton) {
+            pauseButton.style.display = 'none';
+        }
+
+        resolve();
+    });
+}

src/scripts/remoteControl.js

@@ -18,17 +18,20 @@ remoteEvent = async (event) => {
             const slideAnimation = event.detail.slideAnimation;
             await slider.slideNext(slideAnimation, slideAnimation);
             await pushStateSlideIndex(slider);
+            await initActionPlayPause(slider);
         } else if (type === 'prev_slide') {
             const slideAnimation = event.detail.slideAnimation;
             await slider.slidePrev(slideAnimation, slideAnimation);
             await pushStateSlideIndex(slider);
+            await initActionPlayPause(slider);
         } else if (type === 'slide_action') {
-            await youtubePlayPause(event);
+            await slidePlayPause(event);
         } else if (type === 'slide_to') {
             const index = event.detail.index;
             if (index >= 0) {
                 await slider.slideTo(index, 0);
                 await pushStateSlideIndex(slider);
+                await initActionPlayPause(slider);
             }
         }
 
@@ -290,30 +293,25 @@ function scrollRemote(event) {
     });
 }
 
-function youtubePlayPause(event) {
-    return new Promise(async (resolve) => {
-        const deck = document.getElementById('slider');
-
-        if (!deck) {
-            resolve();
-            return;
-        }
-
-        const index = await deck.getActiveIndex();
+function slidePlayPause(event) {
+    return playPause(event.detail.action, false);
+}
 
-        const youtubeSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
+forwardPlayPauseToRemote = (action) => {
+    return new Promise(async (resolve) => {
+        const deckgoRemoteElement = document.querySelector("deckgo-remote");
 
-        if (!youtubeSlideElement || youtubeSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase()) {
+        if (!deckgoRemoteElement) {
             resolve();
             return;
         }
 
-        if (event.detail.action === 'youtube_pause') {
-            await youtubeSlideElement.pause();
+        if (action === 'pause') {
+            await deckgoRemoteElement.pause();
         } else {
-            await youtubeSlideElement.play();
+            await deckgoRemoteElement.play();
         }
 
         resolve();
     });
-}
+};