@angular/youtube-player 17.0.0-next.7 → 17.0.0-rc.1

package/fesm2022/youtube-player.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { PLATFORM_ID, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { Subject, BehaviorSubject, of, combineLatest, pipe, Observable, fromEventPattern, merge } from 'rxjs';
-import { take, startWith, map, combineLatest as combineLatest$1, skipWhile, scan, distinctUntilChanged, tap, mergeMap, takeUntil, publish, switchMap, withLatestFrom, filter } from 'rxjs/operators';
+import { Subject, BehaviorSubject, fromEventPattern, of, Observable } from 'rxjs';
+import { switchMap, takeUntil } from 'rxjs/operators';
 
 /// <reference types="youtube" />
 const DEFAULT_PLAYER_WIDTH = 640;
@@ -13,69 +13,28 @@ const DEFAULT_PLAYER_HEIGHT = 390;
  * @see https://developers.google.com/youtube/iframe_api_reference
  */
 class YouTubePlayer {
-    /** YouTube Video ID to view */
-    get videoId() {
-        return this._videoId.value;
-    }
-    set videoId(videoId) {
-        this._videoId.next(videoId);
-    }
     /** Height of video player */
     get height() {
-        return this._height.value;
+        return this._height;
     }
     set height(height) {
-        this._height.next(height || DEFAULT_PLAYER_HEIGHT);
+        this._height = height || DEFAULT_PLAYER_HEIGHT;
     }
     /** Width of video player */
     get width() {
-        return this._width.value;
+        return this._width;
     }
     set width(width) {
-        this._width.next(width || DEFAULT_PLAYER_WIDTH);
-    }
-    /** The moment when the player is supposed to start playing */
-    set startSeconds(startSeconds) {
-        this._startSeconds.next(startSeconds);
-    }
-    /** The moment when the player is supposed to stop playing */
-    set endSeconds(endSeconds) {
-        this._endSeconds.next(endSeconds);
-    }
-    /** The suggested quality of the player */
-    set suggestedQuality(suggestedQuality) {
-        this._suggestedQuality.next(suggestedQuality);
-    }
-    /**
-     * Extra parameters used to configure the player. See:
-     * https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5#Parameters
-     */
-    get playerVars() {
-        return this._playerVars.value;
-    }
-    set playerVars(playerVars) {
-        this._playerVars.next(playerVars);
-    }
-    /** Whether cookies inside the player have been disabled. */
-    get disableCookies() {
-        return this._disableCookies.value;
-    }
-    set disableCookies(value) {
-        this._disableCookies.next(!!value);
+        this._width = width || DEFAULT_PLAYER_WIDTH;
     }
     constructor(_ngZone, platformId) {
         this._ngZone = _ngZone;
-        this._youtubeContainer = new Subject();
         this._destroyed = new Subject();
         this._playerChanges = new BehaviorSubject(undefined);
-        this._videoId = new BehaviorSubject(undefined);
-        this._height = new BehaviorSubject(DEFAULT_PLAYER_HEIGHT);
-        this._width = new BehaviorSubject(DEFAULT_PLAYER_WIDTH);
-        this._startSeconds = new BehaviorSubject(undefined);
-        this._endSeconds = new BehaviorSubject(undefined);
-        this._suggestedQuality = new BehaviorSubject(undefined);
-        this._playerVars = new BehaviorSubject(undefined);
-        this._disableCookies = new BehaviorSubject(false);
+        this._height = DEFAULT_PLAYER_HEIGHT;
+        this._width = DEFAULT_PLAYER_WIDTH;
+        /** Whether cookies inside the player have been disabled. */
+        this.disableCookies = false;
         /** Outputs are direct proxies from the player itself. */
         this.ready = this._getLazyEmitter('onReady');
         this.stateChange = this._getLazyEmitter('onStateChange');
@@ -85,71 +44,50 @@ class YouTubePlayer {
         this.playbackRateChange = this._getLazyEmitter('onPlaybackRateChange');
         this._isBrowser = isPlatformBrowser(platformId);
     }
-    ngOnInit() {
+    ngAfterViewInit() {
         // Don't do anything if we're not in a browser environment.
         if (!this._isBrowser) {
             return;
         }
-        let iframeApiAvailableObs = of(true);
         if (!window.YT || !window.YT.Player) {
             if (this.showBeforeIframeApiLoads && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw new Error('Namespace YT not found, cannot construct embedded youtube player. ' +
                     'Please install the YouTube Player API Reference for iframe Embeds: ' +
                     'https://developers.google.com/youtube/iframe_api_reference');
             }
-            const iframeApiAvailableSubject = new Subject();
             this._existingApiReadyCallback = window.onYouTubeIframeAPIReady;
             window.onYouTubeIframeAPIReady = () => {
-                if (this._existingApiReadyCallback) {
-                    this._existingApiReadyCallback();
-                }
-                this._ngZone.run(() => iframeApiAvailableSubject.next(true));
+                this._existingApiReadyCallback?.();
+                this._ngZone.run(() => this._createPlayer());
             };
-            iframeApiAvailableObs = iframeApiAvailableSubject.pipe(take(1), startWith(false));
         }
-        const hostObservable = this._disableCookies.pipe(map(cookiesDisabled => (cookiesDisabled ? 'https://www.youtube-nocookie.com' : undefined)));
-        // An observable of the currently loaded player.
-        const playerObs = createPlayerObservable(this._youtubeContainer, this._videoId, hostObservable, iframeApiAvailableObs, this._width, this._height, this._playerVars, this._ngZone).pipe(tap(player => {
-            // Emit this before the `waitUntilReady` call so that we can bind to
-            // events that happen as the player is being initialized (e.g. `onReady`).
-            this._playerChanges.next(player);
-        }), waitUntilReady(player => {
-            // Destroy the player if loading was aborted so that we don't end up leaking memory.
-            if (!playerIsReady(player)) {
-                player.destroy();
+        else {
+            this._createPlayer();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this._shouldRecreatePlayer(changes)) {
+            this._createPlayer();
+        }
+        else if (this._player) {
+            if (changes['width'] || changes['height']) {
+                this._setSize();
             }
-        }), takeUntil(this._destroyed), publish());
-        // Set up side effects to bind inputs to the player.
-        playerObs.subscribe(player => {
-            this._player = player;
-            if (player && this._pendingPlayerState) {
-                this._initializePlayer(player, this._pendingPlayerState);
+            if (changes['suggestedQuality']) {
+                this._setQuality();
             }
-            this._pendingPlayerState = undefined;
-        });
-        bindSizeToPlayer(playerObs, this._width, this._height);
-        bindSuggestedQualityToPlayer(playerObs, this._suggestedQuality);
-        bindCueVideoCall(playerObs, this._videoId, this._startSeconds, this._endSeconds, this._suggestedQuality, this._destroyed);
-        // After all of the subscriptions are set up, connect the observable.
-        playerObs.connect();
-    }
-    ngAfterViewInit() {
-        this._youtubeContainer.next(this.youtubeContainer.nativeElement);
+            if (changes['startSeconds'] || changes['endSeconds'] || changes['suggestedQuality']) {
+                this._cuePlayer();
+            }
+        }
     }
     ngOnDestroy() {
+        this._pendingPlayer?.destroy();
         if (this._player) {
             this._player.destroy();
             window.onYouTubeIframeAPIReady = this._existingApiReadyCallback;
         }
         this._playerChanges.complete();
-        this._videoId.complete();
-        this._height.complete();
-        this._width.complete();
-        this._startSeconds.complete();
-        this._endSeconds.complete();
-        this._suggestedQuality.complete();
-        this._youtubeContainer.complete();
-        this._playerVars.complete();
         this._destroyed.next();
         this._destroyed.complete();
     }
@@ -314,9 +252,57 @@ class YouTubePlayer {
         }
         return this._pendingPlayerState;
     }
-    /** Initializes a player from a temporary state. */
-    _initializePlayer(player, state) {
-        const { playbackState, playbackRate, volume, muted, seek } = state;
+    /**
+     * Determines whether a change in the component state
+     * requires the YouTube player to be recreated.
+     */
+    _shouldRecreatePlayer(changes) {
+        const change = changes['videoId'] || changes['playerVars'] || changes['disableCookies'];
+        return !!change && !change.isFirstChange();
+    }
+    /** Creates a new YouTube player and destroys the existing one. */
+    _createPlayer() {
+        this._player?.destroy();
+        this._pendingPlayer?.destroy();
+        // A player can't be created if the API isn't loaded,
+        // or there isn't a video or playlist to be played.
+        if (typeof YT === 'undefined' || (!this.videoId && !this.playerVars?.list)) {
+            return;
+        }
+        // Important! We need to create the Player object outside of the `NgZone`, because it kicks
+        // off a 250ms setInterval which will continually trigger change detection if we don't.
+        const player = this._ngZone.runOutsideAngular(() => new YT.Player(this.youtubeContainer.nativeElement, {
+            videoId: this.videoId,
+            host: this.disableCookies ? 'https://www.youtube-nocookie.com' : undefined,
+            width: this.width,
+            height: this.height,
+            playerVars: this.playerVars,
+        }));
+        const whenReady = () => {
+            // Only assign the player once it's ready, otherwise YouTube doesn't expose some APIs.
+            this._player = player;
+            this._pendingPlayer = undefined;
+            player.removeEventListener('onReady', whenReady);
+            this._playerChanges.next(player);
+            this._setSize();
+            this._setQuality();
+            if (this._pendingPlayerState) {
+                this._applyPendingPlayerState(player, this._pendingPlayerState);
+                this._pendingPlayerState = undefined;
+            }
+            // Only cue the player when it either hasn't started yet or it's cued,
+            // otherwise cuing it can interrupt a player with autoplay enabled.
+            const state = player.getPlayerState();
+            if (state === YT.PlayerState.UNSTARTED || state === YT.PlayerState.CUED || state == null) {
+                this._cuePlayer();
+            }
+        };
+        this._pendingPlayer = player;
+        player.addEventListener('onReady', whenReady);
+    }
+    /** Applies any state that changed before the player was initialized. */
+    _applyPendingPlayerState(player, pendingState) {
+        const { playbackState, playbackRate, volume, muted, seek } = pendingState;
         switch (playbackState) {
             case YT.PlayerState.PLAYING:
                 player.playVideo();
@@ -341,6 +327,27 @@ class YouTubePlayer {
             player.seekTo(seek.seconds, seek.allowSeekAhead);
         }
     }
+    /** Cues the player based on the current component state. */
+    _cuePlayer() {
+        if (this._player && this.videoId) {
+            this._player.cueVideoById({
+                videoId: this.videoId,
+                startSeconds: this.startSeconds,
+                endSeconds: this.endSeconds,
+                suggestedQuality: this.suggestedQuality,
+            });
+        }
+    }
+    /** Sets the player's size based on the current input values. */
+    _setSize() {
+        this._player?.setSize(this.width, this.height);
+    }
+    /** Sets the player's quality based on the current input values. */
+    _setQuality() {
+        if (this._player && this.suggestedQuality) {
+            this._player.setPlaybackQuality(this.suggestedQuality);
+        }
+    }
     /** Gets an observable that adds an event listener to the player when a user subscribes to it. */
     _getLazyEmitter(name) {
         // Start with the stream of players. This way the events will be transferred
@@ -357,9 +364,7 @@ class YouTubePlayer {
                     // expose whether the player has been destroyed so we have to wrap it in a try/catch to
                     // prevent the entire stream from erroring out.
                     try {
-                        if (player.removeEventListener) {
-                            player.removeEventListener(name, listener);
-                        }
+                        player?.removeEventListener?.(name, listener);
                     }
                     catch { }
                 })
@@ -367,7 +372,7 @@ class YouTubePlayer {
         }), 
         // By default we run all the API interactions outside the zone
         // so we have to bring the events back in manually when they emit.
-        (source) => new Observable(observer => source.subscribe({
+        source => new Observable(observer => source.subscribe({
             next: value => this._ngZone.run(() => observer.next(value)),
             error: error => observer.error(error),
             complete: () => observer.complete(),
@@ -375,10 +380,10 @@ class YouTubePlayer {
         // Ensures that everything is cleared out on destroy.
         takeUntil(this._destroyed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayer, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.6", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayer, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", 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, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #youtubeContainer></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayer, decorators: [{
             type: Component,
             args: [{
                     selector: 'youtube-player',
@@ -422,143 +427,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6",
                 type: Output
             }], youtubeContainer: [{
                 type: ViewChild,
-                args: ['youtubeContainer']
+                args: ['youtubeContainer', { static: true }]
             }] } });
-/** Listens to changes to the given width and height and sets it on the player. */
-function bindSizeToPlayer(playerObs, widthObs, heightObs) {
-    return combineLatest([playerObs, widthObs, heightObs]).subscribe(([player, width, height]) => player && player.setSize(width, height));
-}
-/** Listens to changes from the suggested quality and sets it on the given player. */
-function bindSuggestedQualityToPlayer(playerObs, suggestedQualityObs) {
-    return combineLatest([playerObs, suggestedQualityObs]).subscribe(([player, suggestedQuality]) => player && suggestedQuality && player.setPlaybackQuality(suggestedQuality));
-}
-/**
- * Returns an observable that emits the loaded player once it's ready. Certain properties/methods
- * won't be available until the iframe finishes loading.
- * @param onAbort Callback function that will be invoked if the player loading was aborted before
- * it was able to complete. Can be used to clean up any loose references.
- */
-function waitUntilReady(onAbort) {
-    return mergeMap(player => {
-        if (!player) {
-            return of(undefined);
-        }
-        if (playerIsReady(player)) {
-            return of(player);
-        }
-        // Since removeEventListener is not on Player when it's initialized, we can't use fromEvent.
-        // The player is not initialized fully until the ready is called.
-        return new Observable(emitter => {
-            let aborted = false;
-            let resolved = false;
-            const onReady = (event) => {
-                resolved = true;
-                if (!aborted) {
-                    event.target.removeEventListener('onReady', onReady);
-                    emitter.next(event.target);
-                }
-            };
-            player.addEventListener('onReady', onReady);
-            return () => {
-                aborted = true;
-                if (!resolved) {
-                    onAbort(player);
-                }
-            };
-        }).pipe(take(1), startWith(undefined));
-    });
-}
-/** Create an observable for the player based on the given options. */
-function createPlayerObservable(youtubeContainer, videoIdObs, hostObs, iframeApiAvailableObs, widthObs, heightObs, playerVarsObs, ngZone) {
-    const playerOptions = combineLatest([videoIdObs, hostObs, playerVarsObs]).pipe(withLatestFrom(combineLatest([widthObs, heightObs])), map(([constructorOptions, sizeOptions]) => {
-        const [videoId, host, playerVars] = constructorOptions;
-        const [width, height] = sizeOptions;
-        // If there's no video id or a list isn't supplied, bail out
-        if (!videoId && !(playerVars?.list && playerVars?.listType)) {
-            return undefined;
-        }
-        return { videoId, playerVars, width, height, host };
-    }));
-    return combineLatest([youtubeContainer, playerOptions, of(ngZone)]).pipe(skipUntilRememberLatest(iframeApiAvailableObs), scan(syncPlayerState, undefined), distinctUntilChanged());
-}
-/** Skips the given observable until the other observable emits true, then emit the latest. */
-function skipUntilRememberLatest(notifier) {
-    return pipe(combineLatest$1(notifier), skipWhile(([_, doneSkipping]) => !doneSkipping), map(([value]) => value));
-}
-/** Destroy the player if there are no options, or create the player if there are options. */
-function syncPlayerState(player, [container, videoOptions, ngZone]) {
-    if (player &&
-        videoOptions &&
-        (player.playerVars !== videoOptions.playerVars || player.host !== videoOptions.host)) {
-        // The player needs to be recreated if the playerVars are different.
-        player.destroy();
-    }
-    else if (!videoOptions) {
-        if (player) {
-            // Destroy the player if the videoId was removed.
-            player.destroy();
-        }
-        return;
-    }
-    else if (player) {
-        return player;
-    }
-    // Important! We need to create the Player object outside of the `NgZone`, because it kicks
-    // off a 250ms setInterval which will continually trigger change detection if we don't.
-    const newPlayer = ngZone.runOutsideAngular(() => new YT.Player(container, videoOptions));
-    newPlayer.videoId = videoOptions.videoId;
-    newPlayer.playerVars = videoOptions.playerVars;
-    newPlayer.host = videoOptions.host;
-    return newPlayer;
-}
-/**
- * Call cueVideoById if the videoId changes, or when start or end seconds change. cueVideoById will
- * change the loaded video id to the given videoId, and set the start and end times to the given
- * start/end seconds.
- */
-function bindCueVideoCall(playerObs, videoIdObs, startSecondsObs, endSecondsObs, suggestedQualityObs, destroyed) {
-    const cueOptionsObs = combineLatest([startSecondsObs, endSecondsObs]).pipe(map(([startSeconds, endSeconds]) => ({ startSeconds, endSeconds })));
-    // Only respond to changes in cue options if the player is not running.
-    const filteredCueOptions = cueOptionsObs.pipe(filterOnOther(playerObs, player => !!player && !hasPlayerStarted(player)));
-    // If the video id changed, there's no reason to run 'cue' unless the player
-    // was initialized with a different video id.
-    const changedVideoId = videoIdObs.pipe(filterOnOther(playerObs, (player, videoId) => !!player && player.videoId !== videoId));
-    // If the player changed, there's no reason to run 'cue' unless there are cue options.
-    const changedPlayer = playerObs.pipe(filterOnOther(combineLatest([videoIdObs, cueOptionsObs]), ([videoId, cueOptions], player) => !!player &&
-        (videoId != player.videoId || !!cueOptions.startSeconds || !!cueOptions.endSeconds)));
-    merge(changedPlayer, changedVideoId, filteredCueOptions)
-        .pipe(withLatestFrom(combineLatest([playerObs, videoIdObs, cueOptionsObs, suggestedQualityObs])), map(([_, values]) => values), takeUntil(destroyed))
-        .subscribe(([player, videoId, cueOptions, suggestedQuality]) => {
-        if (!videoId || !player) {
-            return;
-        }
-        player.videoId = videoId;
-        player.cueVideoById({
-            videoId,
-            suggestedQuality,
-            ...cueOptions,
-        });
-    });
-}
-function hasPlayerStarted(player) {
-    const state = player.getPlayerState();
-    return state !== YT.PlayerState.UNSTARTED && state !== YT.PlayerState.CUED;
-}
-function playerIsReady(player) {
-    return 'getPlayerStatus' in player;
-}
-/** Combines the two observables temporarily for the filter function. */
-function filterOnOther(otherObs, filterFn) {
-    return pipe(withLatestFrom(otherObs), filter(([value, other]) => filterFn(other, value)), map(([value]) => value));
-}
 
 const COMPONENTS = [YouTubePlayer];
 class YouTubePlayerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayerModule, declarations: [YouTubePlayer], exports: [YouTubePlayer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayerModule, declarations: [YouTubePlayer], exports: [YouTubePlayer] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: YouTubePlayerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: YouTubePlayerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: COMPONENTS,