From 507baf3b4c244b3cbf41f3ce229d04ddd2ef49bf Mon Sep 17 00:00:00 2001 From: daviddalbusco Date: Thu, 6 Dec 2018 08:39:37 +0100 Subject: [PATCH] sync: deckdeckgo-starter v1.0.0-beta.9 --- package-lock.json | 20 ++++----- package.json | 4 +- src/scripts/remoteControl.js | 87 ++++++++++++++++++++++++++++++------ 3 files changed, 85 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 44322a9..9342bec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1623,27 +1623,27 @@ "dev": true }, "deckdeckgo": { - "version": "1.0.0-beta.9", - "resolved": "https://registry.npmjs.org/deckdeckgo/-/deckdeckgo-1.0.0-beta.9.tgz", - "integrity": "sha512-yMnBKaaOIzEynBuFuZdv0KdJ12zIo1zn8QGXbs6EjFlR1znuzIG/ELsthW6/97t14nIt6kStPXkbr8lmCbQbFw==", + "version": "1.0.0-beta.11", + "resolved": "https://registry.npmjs.org/deckdeckgo/-/deckdeckgo-1.0.0-beta.11.tgz", + "integrity": "sha512-tjCWCgbG9nFZ41YEVbcjo+DbS/ubYdUyh0236nHv0nWZf/wioxIJ8KfBb/rV52QEyhNkgXmnwBbNs0gAPMtPgg==", "requires": { "prismjs": "^1.15.0" } }, "deckdeckgo-remote": { - "version": "1.0.0-alpha.2", - "resolved": "https://registry.npmjs.org/deckdeckgo-remote/-/deckdeckgo-remote-1.0.0-alpha.2.tgz", - "integrity": "sha512-NjMZLK7EtJNQwdaRdjYfn0RumMowKhUkR+ggKCGMb9UuAZ35A6hC+1Hxfu7Vu5mlnQuAApHmm4/QI5HuFLn1+A==", + "version": "1.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/deckdeckgo-remote/-/deckdeckgo-remote-1.0.0-alpha.3.tgz", + "integrity": "sha512-1nGujZNUDAdAhgBVoEriiXLvDSBSR7b0S+VPm3klPyeWGLDhsBzXUjdeiReKY9PW+thSVQEfDKMctFsGApI4Xw==", "requires": { - "deckdeckgo-types": "^1.0.0-alpha.3", + "deckdeckgo-types": "^1.0.0-alpha.4", "rxjs": "^6.3.3", "socket.io-client": "^2.1.1" } }, "deckdeckgo-types": { - "version": "1.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/deckdeckgo-types/-/deckdeckgo-types-1.0.0-alpha.3.tgz", - "integrity": "sha512-f13ieIqsJj3A+Q1aHNY8jVtpGkC1fnMcFssVu050SSuaGVmFOT/Sq2Qu1hPZZx6MxEtYCN2PcF3UV4sHuIJiAQ==" + "version": "1.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/deckdeckgo-types/-/deckdeckgo-types-1.0.0-alpha.4.tgz", + "integrity": "sha512-APYRhA+npJrIMAItq+xqUvdUMhFAf+vGvg8gAkIjr6AHK0Gf94X0Ge+/3a5JCt/5o6bEy1zeGOErkrPr8RMpDQ==" }, "decode-uri-component": { "version": "0.2.0", diff --git a/package.json b/package.json index 92f1f91..7524907 100644 --- a/package.json +++ b/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": [ diff --git a/src/scripts/remoteControl.js b/src/scripts/remoteControl.js index 16338f3..020a4df 100644 --- a/src/scripts/remoteControl.js +++ b/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,15 +64,12 @@ 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(); @@ -67,7 +77,24 @@ initRemote = async () => { }); }; -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(); + }); +}