diff --git a/package-lock.json b/package-lock.json index d365960..5bacfa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,9 +51,9 @@ "integrity": "sha512-SUwThFI2cAqu6bIoW5b6SuFcpWc2lL2GoTcsfk1OKITlBO9kRxj4ZC+YQacaQ/3yd+p64qyWpUhpeDg4oZA2kg==" }, "@deckdeckgo/remote": { - "version": "1.0.0-rc.1", - "resolved": "https://registry.npmjs.org/@deckdeckgo/remote/-/remote-1.0.0-rc.1.tgz", - "integrity": "sha512-/ixHRJfI4s2XJU4QQu3rk+KO5eMEj7tfU4XgmdyH9jnker0OdTF5pJPl1IKesACOzdzN34t7Jn2A4LPWYYm4Rw==", + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@deckdeckgo/remote/-/remote-1.0.0-rc.2.tgz", + "integrity": "sha512-/CCZ4dT3GzX7gXjfxe7TrACVzVwCs85JSM9esj723O0abMUDDuR1ootUhiZyd1p1c94HAmqFWtwzb7yBl4HzQg==", "requires": { "rxjs": "^6.5.2", "socket.io-client": "^2.2.0" diff --git a/package.json b/package.json index fbb7f76..41a4af3 100644 --- a/package.json +++ b/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", diff --git a/src/index.html b/src/index.html index e5df3f9..7280739 100644 --- a/src/index.html +++ b/src/index.html @@ -234,6 +234,9 @@

Get started now 🔥

+ + + diff --git a/src/index.js b/src/index.js index 97f9586..324ef54 100644 --- a/src/index.js +++ b/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); diff --git a/src/scripts/actionPlayPause.js b/src/scripts/actionPlayPause.js new file mode 100644 index 0000000..aa03042 --- /dev/null +++ b/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); + } + }); +}; diff --git a/src/scripts/actions.js b/src/scripts/actions.js index 3891071..c66a87c 100644 --- a/src/scripts/actions.js +++ b/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(); + }); +} diff --git a/src/scripts/remoteControl.js b/src/scripts/remoteControl.js index 55fa4e3..1039163 100644 --- a/src/scripts/remoteControl.js +++ b/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(); }); -} +};