sync: deckdeckgo-starter v1.0.0-beta.9

package.json

@@ -35,8 +35,8 @@
   "dependencies": {
     "@ionic/core": "^4.0.0-beta.16",
     "@webcomponents/custom-elements": "^1.2.1",
-    "deckdeckgo": "^1.0.0-beta.9",
-    "deckdeckgo-remote": "^1.0.0-alpha.2",
+    "deckdeckgo": "^1.0.0-beta.11",
+    "deckdeckgo-remote": "^1.0.0-alpha.3",
     "ionicons": "^4.4.8"
   },
   "keywords": [

src/scripts/remoteControl.js

@@ -5,19 +5,23 @@ remoteEvent = async (event) => {
             return;
         }
 
-        if (!document.getElementById('slider')) {
+        const slider = document.getElementById('slider');
+
+        if (!slider) {
             resolve();
             return;
         }
 
         const type = event.detail.type;
 
-        const slideAnimation = event.detail.slideAnimation;
-
         if (type === 'next_slide') {
-            await document.getElementById('slider').slideNext(slideAnimation, false);
+            const slideAnimation = event.detail.slideAnimation;
+            await slider.slideNext(slideAnimation, false);
         } else if (type === 'prev_slide') {
-            await document.getElementById('slider').slidePrev(slideAnimation, false);
+            const slideAnimation = event.detail.slideAnimation;
+            await slider.slidePrev(slideAnimation, false);
+        } else if (type === 'slide_action') {
+            await youtubePlayPause(event);
         }
 
         resolve();
@@ -34,6 +38,15 @@ reconnectRemoteControl = () => {
         }
 
         await deckgoRemoteElement.connect();
+
+        if (!document.getElementById('slider')) {
+            resolve();
+            return;
+        }
+
+        await document.getElementById('slider').slideTo(0, 300, false);
+
+        resolve();
     });
 };
 
@@ -51,23 +64,37 @@ initRemote = async () => {
         });
 
         window.addEventListener('resize', async () => {
-            await remoteSize();
+            await initRemoteSize();
         });
 
-        // In this specific website we want to offer many "rooms"
-        await initRoom();
-
-        deckgoRemoteElement.server = process.env.SIGNALING_SERVER;
+        await initDeck();
 
-        await remoteSize();
+        await initRemoteSize();
 
         await initDeckMove();
 
         resolve();
     });
 };
 
-function initRoom() {
+function initDeck() {
+    return new Promise(async (resolve) => {
+        const deck = document.getElementById('slider');
+
+        if (!deck) {
+            resolve();
+            return;
+        }
+
+        deck.addEventListener('slidesDidLoad', async (slides) => {
+            await initRemoteRoomServer(slides)
+        });
+
+        resolve();
+    });
+}
+
+function initRemoteRoomServer(slides) {
     return new Promise(async (resolve) => {
         const deckgoRemoteElement = document.querySelector("deckgo-remote");
 
@@ -76,6 +103,10 @@ function initRoom() {
             return;
         }
 
+        deckgoRemoteElement.slides = slides.detail;
+        deckgoRemoteElement.server = process.env.SIGNALING_SERVER;
+
+        // In this specific website we want to offer many "rooms"
         const roomNumber = Math.floor(Math.random() * 999);
         const roomName = 'DeckDeckGo.com #' + roomNumber + '';
         deckgoRemoteElement.room = roomName;
@@ -139,7 +170,7 @@ function initDeckMove() {
     });
 }
 
-function remoteSize() {
+function initRemoteSize() {
     return new Promise(async (resolve) => {
         const deckgoRemoteElement = document.querySelector("deckgo-remote");
 
@@ -158,7 +189,7 @@ function remoteSize() {
             return;
         }
 
-        deckgoRemoteElement.slides = deck.childElementCount;
+        deckgoRemoteElement.length = deck.childElementCount;
 
         resolve();
     });
@@ -229,3 +260,31 @@ function scrollRemote(event) {
         resolve();
     });
 }
+
+function youtubePlayPause(event) {
+    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;
+        }
+
+        if (event.detail.action === 'youtube_pause') {
+            await youtubeSlideElement.pause();
+        } else {
+            await youtubeSlideElement.play();
+        }
+
+        resolve();
+    });
+}