@angular/youtube-player 16.0.0-next.4 → 16.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{esm2020 → esm2022}/youtube-module.mjs +5 -5
- package/{esm2020 → esm2022}/youtube-player.mjs +4 -4
- package/{fesm2020 → fesm2022}/youtube-player.mjs +7 -30
- package/fesm2022/youtube-player.mjs.map +1 -0
- package/index.d.ts +1 -1
- package/package.json +5 -11
- package/fesm2015/youtube-player.mjs +0 -592
- package/fesm2015/youtube-player.mjs.map +0 -1
- package/fesm2020/youtube-player.mjs.map +0 -1
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/youtube-player_public_index.mjs +0 -0
|
@@ -1,592 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { PLATFORM_ID, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import { isPlatformBrowser } from '@angular/common';
|
|
4
|
-
import { Subject, BehaviorSubject, of, combineLatest, pipe, Observable, fromEventPattern, merge } from 'rxjs';
|
|
5
|
-
import { take, startWith, map, combineLatest as combineLatest$1, skipWhile, scan, distinctUntilChanged, tap, mergeMap, takeUntil, publish, switchMap, withLatestFrom, filter } from 'rxjs/operators';
|
|
6
|
-
|
|
7
|
-
/// <reference types="youtube" />
|
|
8
|
-
const DEFAULT_PLAYER_WIDTH = 640;
|
|
9
|
-
const DEFAULT_PLAYER_HEIGHT = 390;
|
|
10
|
-
/**
|
|
11
|
-
* Angular component that renders a YouTube player via the YouTube player
|
|
12
|
-
* iframe API.
|
|
13
|
-
* @see https://developers.google.com/youtube/iframe_api_reference
|
|
14
|
-
*/
|
|
15
|
-
class YouTubePlayer {
|
|
16
|
-
/** YouTube Video ID to view */
|
|
17
|
-
get videoId() {
|
|
18
|
-
return this._videoId.value;
|
|
19
|
-
}
|
|
20
|
-
set videoId(videoId) {
|
|
21
|
-
this._videoId.next(videoId);
|
|
22
|
-
}
|
|
23
|
-
/** Height of video player */
|
|
24
|
-
get height() {
|
|
25
|
-
return this._height.value;
|
|
26
|
-
}
|
|
27
|
-
set height(height) {
|
|
28
|
-
this._height.next(height || DEFAULT_PLAYER_HEIGHT);
|
|
29
|
-
}
|
|
30
|
-
/** Width of video player */
|
|
31
|
-
get width() {
|
|
32
|
-
return this._width.value;
|
|
33
|
-
}
|
|
34
|
-
set width(width) {
|
|
35
|
-
this._width.next(width || DEFAULT_PLAYER_WIDTH);
|
|
36
|
-
}
|
|
37
|
-
/** The moment when the player is supposed to start playing */
|
|
38
|
-
set startSeconds(startSeconds) {
|
|
39
|
-
this._startSeconds.next(startSeconds);
|
|
40
|
-
}
|
|
41
|
-
/** The moment when the player is supposed to stop playing */
|
|
42
|
-
set endSeconds(endSeconds) {
|
|
43
|
-
this._endSeconds.next(endSeconds);
|
|
44
|
-
}
|
|
45
|
-
/** The suggested quality of the player */
|
|
46
|
-
set suggestedQuality(suggestedQuality) {
|
|
47
|
-
this._suggestedQuality.next(suggestedQuality);
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Extra parameters used to configure the player. See:
|
|
51
|
-
* https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5#Parameters
|
|
52
|
-
*/
|
|
53
|
-
get playerVars() {
|
|
54
|
-
return this._playerVars.value;
|
|
55
|
-
}
|
|
56
|
-
set playerVars(playerVars) {
|
|
57
|
-
this._playerVars.next(playerVars);
|
|
58
|
-
}
|
|
59
|
-
/** Whether cookies inside the player have been disabled. */
|
|
60
|
-
get disableCookies() {
|
|
61
|
-
return this._disableCookies.value;
|
|
62
|
-
}
|
|
63
|
-
set disableCookies(value) {
|
|
64
|
-
this._disableCookies.next(!!value);
|
|
65
|
-
}
|
|
66
|
-
constructor(_ngZone, platformId) {
|
|
67
|
-
this._ngZone = _ngZone;
|
|
68
|
-
this._youtubeContainer = new Subject();
|
|
69
|
-
this._destroyed = new Subject();
|
|
70
|
-
this._playerChanges = new BehaviorSubject(undefined);
|
|
71
|
-
this._videoId = new BehaviorSubject(undefined);
|
|
72
|
-
this._height = new BehaviorSubject(DEFAULT_PLAYER_HEIGHT);
|
|
73
|
-
this._width = new BehaviorSubject(DEFAULT_PLAYER_WIDTH);
|
|
74
|
-
this._startSeconds = new BehaviorSubject(undefined);
|
|
75
|
-
this._endSeconds = new BehaviorSubject(undefined);
|
|
76
|
-
this._suggestedQuality = new BehaviorSubject(undefined);
|
|
77
|
-
this._playerVars = new BehaviorSubject(undefined);
|
|
78
|
-
this._disableCookies = new BehaviorSubject(false);
|
|
79
|
-
/** Outputs are direct proxies from the player itself. */
|
|
80
|
-
this.ready = this._getLazyEmitter('onReady');
|
|
81
|
-
this.stateChange = this._getLazyEmitter('onStateChange');
|
|
82
|
-
this.error = this._getLazyEmitter('onError');
|
|
83
|
-
this.apiChange = this._getLazyEmitter('onApiChange');
|
|
84
|
-
this.playbackQualityChange = this._getLazyEmitter('onPlaybackQualityChange');
|
|
85
|
-
this.playbackRateChange = this._getLazyEmitter('onPlaybackRateChange');
|
|
86
|
-
this._isBrowser = isPlatformBrowser(platformId);
|
|
87
|
-
}
|
|
88
|
-
ngOnInit() {
|
|
89
|
-
// Don't do anything if we're not in a browser environment.
|
|
90
|
-
if (!this._isBrowser) {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
let iframeApiAvailableObs = of(true);
|
|
94
|
-
if (!window.YT || !window.YT.Player) {
|
|
95
|
-
if (this.showBeforeIframeApiLoads && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
96
|
-
throw new Error('Namespace YT not found, cannot construct embedded youtube player. ' +
|
|
97
|
-
'Please install the YouTube Player API Reference for iframe Embeds: ' +
|
|
98
|
-
'https://developers.google.com/youtube/iframe_api_reference');
|
|
99
|
-
}
|
|
100
|
-
const iframeApiAvailableSubject = new Subject();
|
|
101
|
-
this._existingApiReadyCallback = window.onYouTubeIframeAPIReady;
|
|
102
|
-
window.onYouTubeIframeAPIReady = () => {
|
|
103
|
-
if (this._existingApiReadyCallback) {
|
|
104
|
-
this._existingApiReadyCallback();
|
|
105
|
-
}
|
|
106
|
-
this._ngZone.run(() => iframeApiAvailableSubject.next(true));
|
|
107
|
-
};
|
|
108
|
-
iframeApiAvailableObs = iframeApiAvailableSubject.pipe(take(1), startWith(false));
|
|
109
|
-
}
|
|
110
|
-
const hostObservable = this._disableCookies.pipe(map(cookiesDisabled => (cookiesDisabled ? 'https://www.youtube-nocookie.com' : undefined)));
|
|
111
|
-
// An observable of the currently loaded player.
|
|
112
|
-
const playerObs = createPlayerObservable(this._youtubeContainer, this._videoId, hostObservable, iframeApiAvailableObs, this._width, this._height, this._playerVars, this._ngZone).pipe(tap(player => {
|
|
113
|
-
// Emit this before the `waitUntilReady` call so that we can bind to
|
|
114
|
-
// events that happen as the player is being initialized (e.g. `onReady`).
|
|
115
|
-
this._playerChanges.next(player);
|
|
116
|
-
}), waitUntilReady(player => {
|
|
117
|
-
// Destroy the player if loading was aborted so that we don't end up leaking memory.
|
|
118
|
-
if (!playerIsReady(player)) {
|
|
119
|
-
player.destroy();
|
|
120
|
-
}
|
|
121
|
-
}), takeUntil(this._destroyed), publish());
|
|
122
|
-
// Set up side effects to bind inputs to the player.
|
|
123
|
-
playerObs.subscribe(player => {
|
|
124
|
-
this._player = player;
|
|
125
|
-
if (player && this._pendingPlayerState) {
|
|
126
|
-
this._initializePlayer(player, this._pendingPlayerState);
|
|
127
|
-
}
|
|
128
|
-
this._pendingPlayerState = undefined;
|
|
129
|
-
});
|
|
130
|
-
bindSizeToPlayer(playerObs, this._width, this._height);
|
|
131
|
-
bindSuggestedQualityToPlayer(playerObs, this._suggestedQuality);
|
|
132
|
-
bindCueVideoCall(playerObs, this._videoId, this._startSeconds, this._endSeconds, this._suggestedQuality, this._destroyed);
|
|
133
|
-
// After all of the subscriptions are set up, connect the observable.
|
|
134
|
-
playerObs.connect();
|
|
135
|
-
}
|
|
136
|
-
ngAfterViewInit() {
|
|
137
|
-
this._youtubeContainer.next(this.youtubeContainer.nativeElement);
|
|
138
|
-
}
|
|
139
|
-
ngOnDestroy() {
|
|
140
|
-
if (this._player) {
|
|
141
|
-
this._player.destroy();
|
|
142
|
-
window.onYouTubeIframeAPIReady = this._existingApiReadyCallback;
|
|
143
|
-
}
|
|
144
|
-
this._playerChanges.complete();
|
|
145
|
-
this._videoId.complete();
|
|
146
|
-
this._height.complete();
|
|
147
|
-
this._width.complete();
|
|
148
|
-
this._startSeconds.complete();
|
|
149
|
-
this._endSeconds.complete();
|
|
150
|
-
this._suggestedQuality.complete();
|
|
151
|
-
this._youtubeContainer.complete();
|
|
152
|
-
this._playerVars.complete();
|
|
153
|
-
this._destroyed.next();
|
|
154
|
-
this._destroyed.complete();
|
|
155
|
-
}
|
|
156
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#playVideo */
|
|
157
|
-
playVideo() {
|
|
158
|
-
if (this._player) {
|
|
159
|
-
this._player.playVideo();
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
this._getPendingState().playbackState = YT.PlayerState.PLAYING;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#pauseVideo */
|
|
166
|
-
pauseVideo() {
|
|
167
|
-
if (this._player) {
|
|
168
|
-
this._player.pauseVideo();
|
|
169
|
-
}
|
|
170
|
-
else {
|
|
171
|
-
this._getPendingState().playbackState = YT.PlayerState.PAUSED;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#stopVideo */
|
|
175
|
-
stopVideo() {
|
|
176
|
-
if (this._player) {
|
|
177
|
-
this._player.stopVideo();
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
// It seems like YouTube sets the player to CUED when it's stopped.
|
|
181
|
-
this._getPendingState().playbackState = YT.PlayerState.CUED;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#seekTo */
|
|
185
|
-
seekTo(seconds, allowSeekAhead) {
|
|
186
|
-
if (this._player) {
|
|
187
|
-
this._player.seekTo(seconds, allowSeekAhead);
|
|
188
|
-
}
|
|
189
|
-
else {
|
|
190
|
-
this._getPendingState().seek = { seconds, allowSeekAhead };
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#mute */
|
|
194
|
-
mute() {
|
|
195
|
-
if (this._player) {
|
|
196
|
-
this._player.mute();
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
199
|
-
this._getPendingState().muted = true;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#unMute */
|
|
203
|
-
unMute() {
|
|
204
|
-
if (this._player) {
|
|
205
|
-
this._player.unMute();
|
|
206
|
-
}
|
|
207
|
-
else {
|
|
208
|
-
this._getPendingState().muted = false;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#isMuted */
|
|
212
|
-
isMuted() {
|
|
213
|
-
if (this._player) {
|
|
214
|
-
return this._player.isMuted();
|
|
215
|
-
}
|
|
216
|
-
if (this._pendingPlayerState) {
|
|
217
|
-
return !!this._pendingPlayerState.muted;
|
|
218
|
-
}
|
|
219
|
-
return false;
|
|
220
|
-
}
|
|
221
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#setVolume */
|
|
222
|
-
setVolume(volume) {
|
|
223
|
-
if (this._player) {
|
|
224
|
-
this._player.setVolume(volume);
|
|
225
|
-
}
|
|
226
|
-
else {
|
|
227
|
-
this._getPendingState().volume = volume;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getVolume */
|
|
231
|
-
getVolume() {
|
|
232
|
-
if (this._player) {
|
|
233
|
-
return this._player.getVolume();
|
|
234
|
-
}
|
|
235
|
-
if (this._pendingPlayerState && this._pendingPlayerState.volume != null) {
|
|
236
|
-
return this._pendingPlayerState.volume;
|
|
237
|
-
}
|
|
238
|
-
return 0;
|
|
239
|
-
}
|
|
240
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate */
|
|
241
|
-
setPlaybackRate(playbackRate) {
|
|
242
|
-
if (this._player) {
|
|
243
|
-
return this._player.setPlaybackRate(playbackRate);
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
this._getPendingState().playbackRate = playbackRate;
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getPlaybackRate */
|
|
250
|
-
getPlaybackRate() {
|
|
251
|
-
if (this._player) {
|
|
252
|
-
return this._player.getPlaybackRate();
|
|
253
|
-
}
|
|
254
|
-
if (this._pendingPlayerState && this._pendingPlayerState.playbackRate != null) {
|
|
255
|
-
return this._pendingPlayerState.playbackRate;
|
|
256
|
-
}
|
|
257
|
-
return 0;
|
|
258
|
-
}
|
|
259
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getAvailablePlaybackRates */
|
|
260
|
-
getAvailablePlaybackRates() {
|
|
261
|
-
return this._player ? this._player.getAvailablePlaybackRates() : [];
|
|
262
|
-
}
|
|
263
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getVideoLoadedFraction */
|
|
264
|
-
getVideoLoadedFraction() {
|
|
265
|
-
return this._player ? this._player.getVideoLoadedFraction() : 0;
|
|
266
|
-
}
|
|
267
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getPlayerState */
|
|
268
|
-
getPlayerState() {
|
|
269
|
-
if (!this._isBrowser || !window.YT) {
|
|
270
|
-
return undefined;
|
|
271
|
-
}
|
|
272
|
-
if (this._player) {
|
|
273
|
-
return this._player.getPlayerState();
|
|
274
|
-
}
|
|
275
|
-
if (this._pendingPlayerState && this._pendingPlayerState.playbackState != null) {
|
|
276
|
-
return this._pendingPlayerState.playbackState;
|
|
277
|
-
}
|
|
278
|
-
return YT.PlayerState.UNSTARTED;
|
|
279
|
-
}
|
|
280
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getCurrentTime */
|
|
281
|
-
getCurrentTime() {
|
|
282
|
-
if (this._player) {
|
|
283
|
-
return this._player.getCurrentTime();
|
|
284
|
-
}
|
|
285
|
-
if (this._pendingPlayerState && this._pendingPlayerState.seek) {
|
|
286
|
-
return this._pendingPlayerState.seek.seconds;
|
|
287
|
-
}
|
|
288
|
-
return 0;
|
|
289
|
-
}
|
|
290
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getPlaybackQuality */
|
|
291
|
-
getPlaybackQuality() {
|
|
292
|
-
return this._player ? this._player.getPlaybackQuality() : 'default';
|
|
293
|
-
}
|
|
294
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getAvailableQualityLevels */
|
|
295
|
-
getAvailableQualityLevels() {
|
|
296
|
-
return this._player ? this._player.getAvailableQualityLevels() : [];
|
|
297
|
-
}
|
|
298
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getDuration */
|
|
299
|
-
getDuration() {
|
|
300
|
-
return this._player ? this._player.getDuration() : 0;
|
|
301
|
-
}
|
|
302
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getVideoUrl */
|
|
303
|
-
getVideoUrl() {
|
|
304
|
-
return this._player ? this._player.getVideoUrl() : '';
|
|
305
|
-
}
|
|
306
|
-
/** See https://developers.google.com/youtube/iframe_api_reference#getVideoEmbedCode */
|
|
307
|
-
getVideoEmbedCode() {
|
|
308
|
-
return this._player ? this._player.getVideoEmbedCode() : '';
|
|
309
|
-
}
|
|
310
|
-
/** Gets an object that should be used to store the temporary API state. */
|
|
311
|
-
_getPendingState() {
|
|
312
|
-
if (!this._pendingPlayerState) {
|
|
313
|
-
this._pendingPlayerState = {};
|
|
314
|
-
}
|
|
315
|
-
return this._pendingPlayerState;
|
|
316
|
-
}
|
|
317
|
-
/** Initializes a player from a temporary state. */
|
|
318
|
-
_initializePlayer(player, state) {
|
|
319
|
-
const { playbackState, playbackRate, volume, muted, seek } = state;
|
|
320
|
-
switch (playbackState) {
|
|
321
|
-
case YT.PlayerState.PLAYING:
|
|
322
|
-
player.playVideo();
|
|
323
|
-
break;
|
|
324
|
-
case YT.PlayerState.PAUSED:
|
|
325
|
-
player.pauseVideo();
|
|
326
|
-
break;
|
|
327
|
-
case YT.PlayerState.CUED:
|
|
328
|
-
player.stopVideo();
|
|
329
|
-
break;
|
|
330
|
-
}
|
|
331
|
-
if (playbackRate != null) {
|
|
332
|
-
player.setPlaybackRate(playbackRate);
|
|
333
|
-
}
|
|
334
|
-
if (volume != null) {
|
|
335
|
-
player.setVolume(volume);
|
|
336
|
-
}
|
|
337
|
-
if (muted != null) {
|
|
338
|
-
muted ? player.mute() : player.unMute();
|
|
339
|
-
}
|
|
340
|
-
if (seek != null) {
|
|
341
|
-
player.seekTo(seek.seconds, seek.allowSeekAhead);
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
/** Gets an observable that adds an event listener to the player when a user subscribes to it. */
|
|
345
|
-
_getLazyEmitter(name) {
|
|
346
|
-
// Start with the stream of players. This way the events will be transferred
|
|
347
|
-
// over to the new player if it gets swapped out under-the-hood.
|
|
348
|
-
return this._playerChanges.pipe(
|
|
349
|
-
// Switch to the bound event. `switchMap` ensures that the old event is removed when the
|
|
350
|
-
// player is changed. If there's no player, return an observable that never emits.
|
|
351
|
-
switchMap(player => {
|
|
352
|
-
return player
|
|
353
|
-
? fromEventPattern((listener) => {
|
|
354
|
-
player.addEventListener(name, listener);
|
|
355
|
-
}, (listener) => {
|
|
356
|
-
// The API seems to throw when we try to unbind from a destroyed player and it doesn't
|
|
357
|
-
// expose whether the player has been destroyed so we have to wrap it in a try/catch to
|
|
358
|
-
// prevent the entire stream from erroring out.
|
|
359
|
-
try {
|
|
360
|
-
if (player.removeEventListener) {
|
|
361
|
-
player.removeEventListener(name, listener);
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
catch (_a) { }
|
|
365
|
-
})
|
|
366
|
-
: of();
|
|
367
|
-
}),
|
|
368
|
-
// By default we run all the API interactions outside the zone
|
|
369
|
-
// so we have to bring the events back in manually when they emit.
|
|
370
|
-
(source) => new Observable(observer => source.subscribe({
|
|
371
|
-
next: value => this._ngZone.run(() => observer.next(value)),
|
|
372
|
-
error: error => observer.error(error),
|
|
373
|
-
complete: () => observer.complete(),
|
|
374
|
-
})),
|
|
375
|
-
// Ensures that everything is cleared out on destroy.
|
|
376
|
-
takeUntil(this._destroyed));
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
YouTubePlayer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayer, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
-
YouTubePlayer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0-next.2", type: YouTubePlayer, selector: "youtube-player", inputs: { videoId: "videoId", height: "height", width: "width", startSeconds: "startSeconds", endSeconds: "endSeconds", suggestedQuality: "suggestedQuality", playerVars: "playerVars", disableCookies: "disableCookies", showBeforeIframeApiLoads: "showBeforeIframeApiLoads" }, outputs: { ready: "ready", stateChange: "stateChange", error: "error", apiChange: "apiChange", playbackQualityChange: "playbackQualityChange", playbackRateChange: "playbackRateChange" }, viewQueries: [{ propertyName: "youtubeContainer", first: true, predicate: ["youtubeContainer"], descendants: true }], ngImport: i0, template: '<div #youtubeContainer></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
381
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayer, decorators: [{
|
|
382
|
-
type: Component,
|
|
383
|
-
args: [{
|
|
384
|
-
selector: 'youtube-player',
|
|
385
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
386
|
-
encapsulation: ViewEncapsulation.None,
|
|
387
|
-
// This div is *replaced* by the YouTube player embed.
|
|
388
|
-
template: '<div #youtubeContainer></div>',
|
|
389
|
-
}]
|
|
390
|
-
}], ctorParameters: function () {
|
|
391
|
-
return [{ type: i0.NgZone }, { type: Object, decorators: [{
|
|
392
|
-
type: Inject,
|
|
393
|
-
args: [PLATFORM_ID]
|
|
394
|
-
}] }];
|
|
395
|
-
}, propDecorators: { videoId: [{
|
|
396
|
-
type: Input
|
|
397
|
-
}], height: [{
|
|
398
|
-
type: Input
|
|
399
|
-
}], width: [{
|
|
400
|
-
type: Input
|
|
401
|
-
}], startSeconds: [{
|
|
402
|
-
type: Input
|
|
403
|
-
}], endSeconds: [{
|
|
404
|
-
type: Input
|
|
405
|
-
}], suggestedQuality: [{
|
|
406
|
-
type: Input
|
|
407
|
-
}], playerVars: [{
|
|
408
|
-
type: Input
|
|
409
|
-
}], disableCookies: [{
|
|
410
|
-
type: Input
|
|
411
|
-
}], showBeforeIframeApiLoads: [{
|
|
412
|
-
type: Input
|
|
413
|
-
}], ready: [{
|
|
414
|
-
type: Output
|
|
415
|
-
}], stateChange: [{
|
|
416
|
-
type: Output
|
|
417
|
-
}], error: [{
|
|
418
|
-
type: Output
|
|
419
|
-
}], apiChange: [{
|
|
420
|
-
type: Output
|
|
421
|
-
}], playbackQualityChange: [{
|
|
422
|
-
type: Output
|
|
423
|
-
}], playbackRateChange: [{
|
|
424
|
-
type: Output
|
|
425
|
-
}], youtubeContainer: [{
|
|
426
|
-
type: ViewChild,
|
|
427
|
-
args: ['youtubeContainer']
|
|
428
|
-
}] } });
|
|
429
|
-
/** Listens to changes to the given width and height and sets it on the player. */
|
|
430
|
-
function bindSizeToPlayer(playerObs, widthObs, heightObs) {
|
|
431
|
-
return combineLatest([playerObs, widthObs, heightObs]).subscribe(([player, width, height]) => player && player.setSize(width, height));
|
|
432
|
-
}
|
|
433
|
-
/** Listens to changes from the suggested quality and sets it on the given player. */
|
|
434
|
-
function bindSuggestedQualityToPlayer(playerObs, suggestedQualityObs) {
|
|
435
|
-
return combineLatest([playerObs, suggestedQualityObs]).subscribe(([player, suggestedQuality]) => player && suggestedQuality && player.setPlaybackQuality(suggestedQuality));
|
|
436
|
-
}
|
|
437
|
-
/**
|
|
438
|
-
* Returns an observable that emits the loaded player once it's ready. Certain properties/methods
|
|
439
|
-
* won't be available until the iframe finishes loading.
|
|
440
|
-
* @param onAbort Callback function that will be invoked if the player loading was aborted before
|
|
441
|
-
* it was able to complete. Can be used to clean up any loose references.
|
|
442
|
-
*/
|
|
443
|
-
function waitUntilReady(onAbort) {
|
|
444
|
-
return mergeMap(player => {
|
|
445
|
-
if (!player) {
|
|
446
|
-
return of(undefined);
|
|
447
|
-
}
|
|
448
|
-
if (playerIsReady(player)) {
|
|
449
|
-
return of(player);
|
|
450
|
-
}
|
|
451
|
-
// Since removeEventListener is not on Player when it's initialized, we can't use fromEvent.
|
|
452
|
-
// The player is not initialized fully until the ready is called.
|
|
453
|
-
return new Observable(emitter => {
|
|
454
|
-
let aborted = false;
|
|
455
|
-
let resolved = false;
|
|
456
|
-
const onReady = (event) => {
|
|
457
|
-
resolved = true;
|
|
458
|
-
if (!aborted) {
|
|
459
|
-
event.target.removeEventListener('onReady', onReady);
|
|
460
|
-
emitter.next(event.target);
|
|
461
|
-
}
|
|
462
|
-
};
|
|
463
|
-
player.addEventListener('onReady', onReady);
|
|
464
|
-
return () => {
|
|
465
|
-
aborted = true;
|
|
466
|
-
if (!resolved) {
|
|
467
|
-
onAbort(player);
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
}).pipe(take(1), startWith(undefined));
|
|
471
|
-
});
|
|
472
|
-
}
|
|
473
|
-
/** Create an observable for the player based on the given options. */
|
|
474
|
-
function createPlayerObservable(youtubeContainer, videoIdObs, hostObs, iframeApiAvailableObs, widthObs, heightObs, playerVarsObs, ngZone) {
|
|
475
|
-
const playerOptions = combineLatest([videoIdObs, hostObs, playerVarsObs]).pipe(withLatestFrom(combineLatest([widthObs, heightObs])), map(([constructorOptions, sizeOptions]) => {
|
|
476
|
-
const [videoId, host, playerVars] = constructorOptions;
|
|
477
|
-
const [width, height] = sizeOptions;
|
|
478
|
-
return videoId ? { videoId, playerVars, width, height, host } : undefined;
|
|
479
|
-
}));
|
|
480
|
-
return combineLatest([youtubeContainer, playerOptions, of(ngZone)]).pipe(skipUntilRememberLatest(iframeApiAvailableObs), scan(syncPlayerState, undefined), distinctUntilChanged());
|
|
481
|
-
}
|
|
482
|
-
/** Skips the given observable until the other observable emits true, then emit the latest. */
|
|
483
|
-
function skipUntilRememberLatest(notifier) {
|
|
484
|
-
return pipe(combineLatest$1(notifier), skipWhile(([_, doneSkipping]) => !doneSkipping), map(([value]) => value));
|
|
485
|
-
}
|
|
486
|
-
/** Destroy the player if there are no options, or create the player if there are options. */
|
|
487
|
-
function syncPlayerState(player, [container, videoOptions, ngZone]) {
|
|
488
|
-
if (player &&
|
|
489
|
-
videoOptions &&
|
|
490
|
-
(player.playerVars !== videoOptions.playerVars || player.host !== videoOptions.host)) {
|
|
491
|
-
// The player needs to be recreated if the playerVars are different.
|
|
492
|
-
player.destroy();
|
|
493
|
-
}
|
|
494
|
-
else if (!videoOptions) {
|
|
495
|
-
if (player) {
|
|
496
|
-
// Destroy the player if the videoId was removed.
|
|
497
|
-
player.destroy();
|
|
498
|
-
}
|
|
499
|
-
return;
|
|
500
|
-
}
|
|
501
|
-
else if (player) {
|
|
502
|
-
return player;
|
|
503
|
-
}
|
|
504
|
-
// Important! We need to create the Player object outside of the `NgZone`, because it kicks
|
|
505
|
-
// off a 250ms setInterval which will continually trigger change detection if we don't.
|
|
506
|
-
const newPlayer = ngZone.runOutsideAngular(() => new YT.Player(container, videoOptions));
|
|
507
|
-
newPlayer.videoId = videoOptions.videoId;
|
|
508
|
-
newPlayer.playerVars = videoOptions.playerVars;
|
|
509
|
-
newPlayer.host = videoOptions.host;
|
|
510
|
-
return newPlayer;
|
|
511
|
-
}
|
|
512
|
-
/**
|
|
513
|
-
* Call cueVideoById if the videoId changes, or when start or end seconds change. cueVideoById will
|
|
514
|
-
* change the loaded video id to the given videoId, and set the start and end times to the given
|
|
515
|
-
* start/end seconds.
|
|
516
|
-
*/
|
|
517
|
-
function bindCueVideoCall(playerObs, videoIdObs, startSecondsObs, endSecondsObs, suggestedQualityObs, destroyed) {
|
|
518
|
-
const cueOptionsObs = combineLatest([startSecondsObs, endSecondsObs]).pipe(map(([startSeconds, endSeconds]) => ({ startSeconds, endSeconds })));
|
|
519
|
-
// Only respond to changes in cue options if the player is not running.
|
|
520
|
-
const filteredCueOptions = cueOptionsObs.pipe(filterOnOther(playerObs, player => !!player && !hasPlayerStarted(player)));
|
|
521
|
-
// If the video id changed, there's no reason to run 'cue' unless the player
|
|
522
|
-
// was initialized with a different video id.
|
|
523
|
-
const changedVideoId = videoIdObs.pipe(filterOnOther(playerObs, (player, videoId) => !!player && player.videoId !== videoId));
|
|
524
|
-
// If the player changed, there's no reason to run 'cue' unless there are cue options.
|
|
525
|
-
const changedPlayer = playerObs.pipe(filterOnOther(combineLatest([videoIdObs, cueOptionsObs]), ([videoId, cueOptions], player) => !!player &&
|
|
526
|
-
(videoId != player.videoId || !!cueOptions.startSeconds || !!cueOptions.endSeconds)));
|
|
527
|
-
merge(changedPlayer, changedVideoId, filteredCueOptions)
|
|
528
|
-
.pipe(withLatestFrom(combineLatest([playerObs, videoIdObs, cueOptionsObs, suggestedQualityObs])), map(([_, values]) => values), takeUntil(destroyed))
|
|
529
|
-
.subscribe(([player, videoId, cueOptions, suggestedQuality]) => {
|
|
530
|
-
if (!videoId || !player) {
|
|
531
|
-
return;
|
|
532
|
-
}
|
|
533
|
-
player.videoId = videoId;
|
|
534
|
-
player.cueVideoById(Object.assign({ videoId,
|
|
535
|
-
suggestedQuality }, cueOptions));
|
|
536
|
-
});
|
|
537
|
-
}
|
|
538
|
-
function hasPlayerStarted(player) {
|
|
539
|
-
const state = player.getPlayerState();
|
|
540
|
-
return state !== YT.PlayerState.UNSTARTED && state !== YT.PlayerState.CUED;
|
|
541
|
-
}
|
|
542
|
-
function playerIsReady(player) {
|
|
543
|
-
return 'getPlayerStatus' in player;
|
|
544
|
-
}
|
|
545
|
-
/** Combines the two observables temporarily for the filter function. */
|
|
546
|
-
function filterOnOther(otherObs, filterFn) {
|
|
547
|
-
return pipe(withLatestFrom(otherObs), filter(([value, other]) => filterFn(other, value)), map(([value]) => value));
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
/**
|
|
551
|
-
* @license
|
|
552
|
-
* Copyright Google LLC All Rights Reserved.
|
|
553
|
-
*
|
|
554
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
555
|
-
* found in the LICENSE file at https://angular.io/license
|
|
556
|
-
*/
|
|
557
|
-
const COMPONENTS = [YouTubePlayer];
|
|
558
|
-
class YouTubePlayerModule {
|
|
559
|
-
}
|
|
560
|
-
YouTubePlayerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
561
|
-
YouTubePlayerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayerModule, declarations: [YouTubePlayer], exports: [YouTubePlayer] });
|
|
562
|
-
YouTubePlayerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayerModule });
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.2", ngImport: i0, type: YouTubePlayerModule, decorators: [{
|
|
564
|
-
type: NgModule,
|
|
565
|
-
args: [{
|
|
566
|
-
declarations: COMPONENTS,
|
|
567
|
-
exports: COMPONENTS,
|
|
568
|
-
}]
|
|
569
|
-
}] });
|
|
570
|
-
|
|
571
|
-
/**
|
|
572
|
-
* @license
|
|
573
|
-
* Copyright Google LLC All Rights Reserved.
|
|
574
|
-
*
|
|
575
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
576
|
-
* found in the LICENSE file at https://angular.io/license
|
|
577
|
-
*/
|
|
578
|
-
|
|
579
|
-
/**
|
|
580
|
-
* @license
|
|
581
|
-
* Copyright Google LLC All Rights Reserved.
|
|
582
|
-
*
|
|
583
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
584
|
-
* found in the LICENSE file at https://angular.io/license
|
|
585
|
-
*/
|
|
586
|
-
|
|
587
|
-
/**
|
|
588
|
-
* Generated bundle index. Do not edit.
|
|
589
|
-
*/
|
|
590
|
-
|
|
591
|
-
export { YouTubePlayer, YouTubePlayerModule };
|
|
592
|
-
//# sourceMappingURL=youtube-player.mjs.map
|