Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 647d563

Browse files
peterpeterparkerpeterpeterparker
authored
Merge pull request #13 from deckgo/remote-play-pause
Remote play pause
2 parents 858e678 + 00ed643 commit 647d563

File tree

7 files changed

+144
-40
lines changed

7 files changed

+144
-40
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@deckdeckgo/core": "^1.0.0-rc.1-1",
3939
"@deckdeckgo/highlight-code": "^1.0.0-rc.1",
4040
"@deckdeckgo/qrcode": "^1.0.0-rc.1",
41-
"@deckdeckgo/remote": "^1.0.0-rc.1",
41+
"@deckdeckgo/remote": "^1.0.0-rc.2",
4242
"@deckdeckgo/slide-author": "^1.0.0-rc.1",
4343
"@deckdeckgo/slide-chart": "^1.0.0-rc.1",
4444
"@deckdeckgo/slide-code": "^1.0.0-rc.1",

‎src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,9 @@ <h2 slot="title">Get started now 🔥</h2>
234234
</ion-content>
235235

236236
<ion-fab vertical="bottom" horizontal="end" slot="fixed" id="navigation">
237+
<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>
238+
<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>
239+
237240
<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>
238241
<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>
239242
<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‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import './css/signup.css';
1414
import '@webcomponents/custom-elements';
1515

1616
import * as manifestData from './manifest.json';
17+
1718
window.ROOM_NAME = manifestData.name;
1819

1920
import './scripts/loading.js';
@@ -27,33 +28,36 @@ import './scripts/menu.js';
2728
import './scripts/history.js';
2829
import './scripts/fullscreen.js';
2930
import './scripts/resize.js';
31+
import './scripts/actionPlayPause.js';
32+
33+
import {defineCustomElements as ionicElements} from '@ionic/core/loader';
3034

31-
import { defineCustomElements as ionicElements } from '@ionic/core/loader';
3235
ionicElements(window);
3336

34-
import { defineCustomElements as ioniconsElements } from 'ionicons/dist/loader';
37+
import {defineCustomElements as ioniconsElements} from 'ionicons/dist/loader';
38+
3539
ioniconsElements(window);
3640

3741
// Init DeckDeckGo elements
38-
import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader';
39-
40-
import {defineCustomElements as deckDeckGoSlideTitleElements } from '@deckdeckgo/slide-title/dist/loader';
41-
import {defineCustomElements as deckDeckGoSlideContentElements } from '@deckdeckgo/slide-content/dist/loader';
42-
import {defineCustomElements as deckDeckGoSlideAuthorElements } from '@deckdeckgo/slide-author/dist/loader';
43-
import {defineCustomElements as deckDeckGoSlideChartElements } from '@deckdeckgo/slide-chart/dist/loader';
44-
import {defineCustomElements as deckDeckGoSlideYoutubeElements } from '@deckdeckgo/slide-youtube/dist/loader';
45-
import {defineCustomElements as deckDeckGoSlideSplitElements } from '@deckdeckgo/slide-split/dist/loader';
46-
import {defineCustomElements as deckDeckGoSlideCodeElements } from '@deckdeckgo/slide-code/dist/loader';
47-
import {defineCustomElements as deckDeckGoSlideGifElements } from '@deckdeckgo/slide-gif/dist/loader';
48-
import {defineCustomElements as deckDeckGoSlideQRCodeElements } from '@deckdeckgo/slide-qrcode/dist/loader';
49-
50-
import { defineCustomElements as deckDeckGoRemoteElements } from '@deckdeckgo/remote/dist/loader';
51-
import { defineCustomElements as deckDeckGoChartsElements } from '@deckdeckgo/charts/dist/loader';
52-
import { defineCustomElements as deckDeckGoQRCodeElements } from '@deckdeckgo/qrcode/dist/loader';
53-
import { defineCustomElements as deckDeckGoHighlightCodeElements } from '@deckdeckgo/highlight-code/dist/loader';
42+
import {defineCustomElements as deckDeckGoElements} from '@deckdeckgo/core/dist/loader';
43+
44+
import {defineCustomElements as deckDeckGoSlideTitleElements} from '@deckdeckgo/slide-title/dist/loader';
45+
import {defineCustomElements as deckDeckGoSlideContentElements} from '@deckdeckgo/slide-content/dist/loader';
46+
import {defineCustomElements as deckDeckGoSlideAuthorElements} from '@deckdeckgo/slide-author/dist/loader';
47+
import {defineCustomElements as deckDeckGoSlideChartElements} from '@deckdeckgo/slide-chart/dist/loader';
48+
import {defineCustomElements as deckDeckGoSlideYoutubeElements} from '@deckdeckgo/slide-youtube/dist/loader';
49+
import {defineCustomElements as deckDeckGoSlideSplitElements} from '@deckdeckgo/slide-split/dist/loader';
50+
import {defineCustomElements as deckDeckGoSlideCodeElements} from '@deckdeckgo/slide-code/dist/loader';
51+
import {defineCustomElements as deckDeckGoSlideGifElements} from '@deckdeckgo/slide-gif/dist/loader';
52+
import {defineCustomElements as deckDeckGoSlideQRCodeElements} from '@deckdeckgo/slide-qrcode/dist/loader';
53+
54+
import {defineCustomElements as deckDeckGoRemoteElements} from '@deckdeckgo/remote/dist/loader';
55+
import {defineCustomElements as deckDeckGoChartsElements} from '@deckdeckgo/charts/dist/loader';
56+
import {defineCustomElements as deckDeckGoQRCodeElements} from '@deckdeckgo/qrcode/dist/loader';
57+
import {defineCustomElements as deckDeckGoHighlightCodeElements} from '@deckdeckgo/highlight-code/dist/loader';
5458

5559
// Init web-social-share
56-
import { defineCustomElements as webSocialShareElements } from 'web-social-share/dist/loader';
60+
import {defineCustomElements as webSocialShareElements} from 'web-social-share/dist/loader';
5761

5862
deckDeckGoElements(window).then(async () => {
5963
await deckDeckGoChartsElements(window);

‎src/scripts/actionPlayPause.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
playPause = (action, forwardToRemote) => {
2+
return new Promise(async (resolve) => {
3+
const deck = document.getElementById('slider');
4+
5+
if (!deck) {
6+
resolve();
7+
return;
8+
}
9+
10+
const index = await deck.getActiveIndex();
11+
12+
const actionSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
13+
14+
if (!actionSlideElement ||
15+
(actionSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase() &&
16+
actionSlideElement.tagName !== 'deckgo-slide-big-img'.toUpperCase())) {
17+
resolve();
18+
return;
19+
}
20+
21+
const playButton = document.getElementById('play');
22+
const pauseButton = document.getElementById('pause');
23+
24+
if (action === 'pause') {
25+
await actionSlideElement.pause();
26+
27+
if (playButton) {
28+
playButton.style.display = 'initial';
29+
}
30+
31+
if (pauseButton) {
32+
pauseButton.style.display = 'none';
33+
}
34+
} else {
35+
await actionSlideElement.play();
36+
37+
if (playButton) {
38+
playButton.style.display = 'none';
39+
}
40+
41+
if (pauseButton) {
42+
pauseButton.style.display = 'initial';
43+
}
44+
}
45+
46+
if (forwardToRemote) {
47+
await forwardPlayPauseToRemote(action);
48+
}
49+
});
50+
};

‎src/scripts/actions.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@ initActions = () => {
66
slider.addEventListener('slidesDidLoad', async (_slides) => {
77
await initActionButtons(slider)
88
});
9+
10+
slider.addEventListener('slideNextDidChange', async () => {
11+
await initActionPlayPause(slider);
12+
});
13+
14+
slider.addEventListener('slidePrevDidChange', async () => {
15+
await initActionPlayPause(slider);
16+
});
17+
18+
slider.addEventListener('slideToChange', async (event) => {
19+
await initActionPlayPause(slider);
20+
});
921
}
1022

1123
resolve();
@@ -37,3 +49,40 @@ function initActionButtons(slider) {
3749
resolve();
3850
});
3951
}
52+
53+
initActionPlayPause = (deck) => {
54+
return new Promise(async (resolve) => {
55+
const playButton = document.getElementById('play');
56+
const pauseButton = document.getElementById('pause');
57+
58+
const index = await deck.getActiveIndex();
59+
60+
const actionSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
61+
62+
if (!actionSlideElement ||
63+
(actionSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase() &&
64+
actionSlideElement.tagName !== 'deckgo-slide-big-img'.toUpperCase())) {
65+
66+
if (playButton) {
67+
playButton.style.display = 'none';
68+
}
69+
70+
if (pauseButton) {
71+
pauseButton.style.display = 'none';
72+
}
73+
74+
resolve();
75+
return;
76+
}
77+
78+
if (playButton) {
79+
playButton.style.display = 'initial';
80+
}
81+
82+
if (pauseButton) {
83+
pauseButton.style.display = 'none';
84+
}
85+
86+
resolve();
87+
});
88+
}

‎src/scripts/remoteControl.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,20 @@ remoteEvent = async (event) => {
1818
const slideAnimation = event.detail.slideAnimation;
1919
await slider.slideNext(slideAnimation, slideAnimation);
2020
await pushStateSlideIndex(slider);
21+
await initActionPlayPause(slider);
2122
} else if (type === 'prev_slide') {
2223
const slideAnimation = event.detail.slideAnimation;
2324
await slider.slidePrev(slideAnimation, slideAnimation);
2425
await pushStateSlideIndex(slider);
26+
await initActionPlayPause(slider);
2527
} else if (type === 'slide_action') {
26-
await youtubePlayPause(event);
28+
await slidePlayPause(event);
2729
} else if (type === 'slide_to') {
2830
const index = event.detail.index;
2931
if (index >= 0) {
3032
await slider.slideTo(index, 0);
3133
await pushStateSlideIndex(slider);
34+
await initActionPlayPause(slider);
3235
}
3336
}
3437

@@ -290,30 +293,25 @@ function scrollRemote(event) {
290293
});
291294
}
292295

293-
function youtubePlayPause(event) {
294-
return new Promise(async (resolve) => {
295-
const deck = document.getElementById('slider');
296-
297-
if (!deck) {
298-
resolve();
299-
return;
300-
}
301-
302-
const index = await deck.getActiveIndex();
296+
function slidePlayPause(event) {
297+
return playPause(event.detail.action, false);
298+
}
303299

304-
const youtubeSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
300+
forwardPlayPauseToRemote = (action) => {
301+
return new Promise(async (resolve) => {
302+
const deckgoRemoteElement = document.querySelector("deckgo-remote");
305303

306-
if (!youtubeSlideElement || youtubeSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase()) {
304+
if (!deckgoRemoteElement) {
307305
resolve();
308306
return;
309307
}
310308

311-
if (event.detail.action === 'youtube_pause') {
312-
await youtubeSlideElement.pause();
309+
if (action === 'pause') {
310+
await deckgoRemoteElement.pause();
313311
} else {
314-
await youtubeSlideElement.play();
312+
await deckgoRemoteElement.play();
315313
}
316314

317315
resolve();
318316
});
319-
}
317+
};

0 commit comments

Comments
 (0)