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

Commit 22317eb

Browse files
peterpeterparkerpeterpeterparker
committed
feat(#22): add methods to start and pause the Youtube videos
1 parent 6b72899 commit 22317eb

File tree

5 files changed

+108
-2
lines changed

5 files changed

+108
-2
lines changed

‎doc/slides/slides.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,24 @@ The following theming options will affect this component if set on its host or p
352352
| --slide-padding-start | 32px | Padding left of the all slide |
353353
| --zIndex | 1 | The z-index of the slide |
354354

355+
#### Methods
356+
357+
The slide "Youtube" offers extra methods to play and pause the Youtube video clip. These methods are notably used by the [DeckDecGo]'s remote control.
358+
359+
##### Play the video
360+
361+
```
362+
const slide = deck.getElementsByTagName('deckgo-slide-youtube');
363+
await slide.play();
364+
```
365+
366+
##### Pause the video
367+
368+
```
369+
const slide = deck.getElementsByTagName('deckgo-slide-youtube');
370+
await slide.pause();
371+
```
372+
355373
### Slide: Code
356374

357375
The "Code" slide is a the slide to use if you would like to showcase code during your talk.

‎src/components.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ export namespace Components {
7070
'frameTitle': string;
7171
'height': number;
7272
'lazyLoadContent': () => Promise<void>;
73+
'pause': () => Promise<void>;
74+
'play': () => Promise<void>;
7375
'src': string;
7476
'updateIFrame': (width: number, height: number) => Promise<void>;
7577
'width': number;
@@ -177,6 +179,8 @@ export namespace Components {
177179
'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
178180
'height': number;
179181
'lazyLoadContent': () => Promise<void>;
182+
'pause': () => Promise<void>;
183+
'play': () => Promise<void>;
180184
'src': string;
181185
'width': number;
182186
}

‎src/components/extra/deckdeckgo-youtube/deckdeckgo-youtube.tsx‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export class DeckdeckgoYoutube implements DeckdeckgoExtra {
6969
}
7070

7171
const iframe: HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
72+
7273
if (iframe) {
7374
resolve();
7475
return;
@@ -110,13 +111,42 @@ export class DeckdeckgoYoutube implements DeckdeckgoExtra {
110111
const videoId: string = url.searchParams.get('v');
111112
if (videoId) {
112113
// In such a case return a link which could be embedded
113-
return 'https://www.youtube.com/embed/' + videoId;
114+
return 'https://www.youtube.com/embed/' + videoId + '?enablejsapi=1';
114115
} else {
115116
// Otherwise we try the provided url
116117
return this.src;
117118
}
118119
}
119120

121+
@Method()
122+
play(): Promise<void> {
123+
return this.playPauseVideo(true);
124+
}
125+
126+
@Method()
127+
pause(): Promise<void> {
128+
return this.playPauseVideo(false);
129+
}
130+
131+
private playPauseVideo(play: boolean): Promise<void> {
132+
return new Promise<void>(async (resolve) => {
133+
const iframe: HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
134+
135+
if (!iframe) {
136+
resolve();
137+
return;
138+
}
139+
140+
iframe.contentWindow.postMessage(JSON.stringify({
141+
event: 'command',
142+
func: play ? 'playVideo' : 'pauseVideo',
143+
args: ''
144+
}), '*');
145+
146+
resolve();
147+
})
148+
}
149+
120150
render() {
121151
return <div></div>
122152
}

‎src/components/slides/deckdeckgo-slide-youtube/deckdeckgo-slide-youtube.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,35 @@ export class DeckdeckgoSlideYoutube implements DeckdeckgoSlide {
4747
return DeckdeckgoSlideUtils.lazyLoadContent(this.el);
4848
}
4949

50+
@Method()
51+
async play() {
52+
await this.playPauseVideo(true);
53+
}
54+
55+
@Method()
56+
async pause() {
57+
await this.playPauseVideo(false);
58+
}
59+
60+
private playPauseVideo(play: boolean): Promise<void> {
61+
return new Promise<void>(async (resolve) => {
62+
const element: HTMLDeckgoYoutubeElement = this.el.shadowRoot.querySelector('deckgo-youtube');
63+
64+
if (!element) {
65+
resolve();
66+
return;
67+
}
68+
69+
if (play) {
70+
await element.play();
71+
} else {
72+
await element.pause();
73+
}
74+
75+
resolve();
76+
})
77+
}
78+
5079
private initFrameTitle(): Promise<string> {
5180
return new Promise<string>((resolve) => {
5281
const title: HTMLElement = this.el.querySelector('[slot=\'title\']');

‎src/index.html‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111
<body style="margin: 0;">
1212

13-
<deckgo-deck>
13+
<deckgo-deck id="slider">
1414
<deckgo-slide-title>
1515
<h1 slot="title">DeckDeckGo</h1>
1616
<p slot="content">
@@ -167,9 +167,34 @@ <h1 slot="title">Manual code</h1>
167167
elem[0].doPrint();
168168
}
169169
}
170+
171+
function playVideo() {
172+
return new Promise(async (resolve) => {
173+
const deck = document.getElementById('slider');
174+
175+
if (!deck) {
176+
resolve();
177+
return;
178+
}
179+
180+
const index = await deck.getActiveIndex();
181+
182+
const youtubeSlideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
183+
184+
if (!youtubeSlideElement || youtubeSlideElement.tagName !== 'deckgo-slide-youtube'.toUpperCase()) {
185+
resolve();
186+
return;
187+
}
188+
189+
await youtubeSlideElement.play();
190+
191+
resolve();
192+
});
193+
}
170194
</script>
171195

172196
<div style="position: fixed; bottom: 0; right: 0;">
197+
<button onclick="playVideo()">Play video</button>
173198
<button onclick="slidePrev()">Prev</button>
174199
<button onclick="slideNext()">Next</button>
175200
<button onclick="slideTo()">Slide to</button>

0 commit comments

Comments
 (0)