Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(youtube-player): clean up internal observables #17835

Merged
merged 1 commit into from
Nov 28, 2019
Merged

fix(youtube-player): clean up internal observables #17835

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 27 additions & 18 deletions src/youtube-player/youtube-player.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,48 +93,48 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
get videoId(): string | undefined { return this._videoId; }
set videoId(videoId: string | undefined) {
this._videoId = videoId;
this._videoIdObs.emit(videoId);
this._videoIdObs.next(videoId);
}
private _videoId: string | undefined;
private _videoIdObs = new EventEmitter<string | undefined>();
private _videoIdObs = new Subject<string | undefined>();

/** Height of video player */
@Input()
get height(): number | undefined { return this._height; }
set height(height: number | undefined) {
this._height = height || DEFAULT_PLAYER_HEIGHT;
this._heightObs.emit(this._height);
this._heightObs.next(this._height);
}
private _height = DEFAULT_PLAYER_HEIGHT;
private _heightObs = new EventEmitter<number>();
private _heightObs = new Subject<number>();

/** Width of video player */
@Input()
get width(): number | undefined { return this._width; }
set width(width: number | undefined) {
this._width = width || DEFAULT_PLAYER_WIDTH;
this._widthObs.emit(this._width);
this._widthObs.next(this._width);
}
private _width = DEFAULT_PLAYER_WIDTH;
private _widthObs = new EventEmitter<number>();
private _widthObs = new Subject<number>();

/** The moment when the player is supposed to start playing */
@Input() set startSeconds(startSeconds: number | undefined) {
this._startSeconds.emit(startSeconds);
this._startSeconds.next(startSeconds);
}
private _startSeconds = new EventEmitter<number | undefined>();
private _startSeconds = new Subject<number | undefined>();

/** The moment when the player is supposed to stop playing */
@Input() set endSeconds(endSeconds: number | undefined) {
this._endSeconds.emit(endSeconds);
this._endSeconds.next(endSeconds);
}
private _endSeconds = new EventEmitter<number | undefined>();
private _endSeconds = new Subject<number | undefined>();

/** The suggested quality of the player */
@Input() set suggestedQuality(suggestedQuality: YT.SuggestedVideoQuality | undefined) {
this._suggestedQuality.emit(suggestedQuality);
this._suggestedQuality.next(suggestedQuality);
}
private _suggestedQuality = new EventEmitter<YT.SuggestedVideoQuality | undefined>();
private _suggestedQuality = new Subject<YT.SuggestedVideoQuality | undefined>();

/**
* Whether the iframe will attempt to load regardless of the status of the api on the
Expand All @@ -157,8 +157,8 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {

/** Whether we're currently rendering inside a browser. */
private _isBrowser: boolean;
private _youtubeContainer = new EventEmitter<HTMLElement>();
private _destroyed = new EventEmitter<undefined>();
private _youtubeContainer = new Subject<HTMLElement>();
private _destroyed = new Subject<void>();
private _player: Player | undefined;

constructor(
Expand Down Expand Up @@ -215,7 +215,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
this.createEventsBoundInZone(),
).pipe(waitUntilReady(), takeUntil(this._destroyed), publish());

/** Set up side effects to bind inputs to the player. */
// Set up side effects to bind inputs to the player.
playerObs.subscribe(player => this._player = player);

bindSizeToPlayer(playerObs, widthObs, heightObs);
Expand Down Expand Up @@ -256,15 +256,24 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
}

ngAfterViewInit() {
this._youtubeContainer.emit(this.youtubeContainer.nativeElement);
this._youtubeContainer.next(this.youtubeContainer.nativeElement);
}

ngOnDestroy() {
if (this._player) {
this._player.destroy();
window.onYouTubeIframeAPIReady = undefined;
this._destroyed.emit();
}

this._videoIdObs.complete();
this._heightObs.complete();
this._widthObs.complete();
this._startSeconds.complete();
this._endSeconds.complete();
this._suggestedQuality.complete();
this._youtubeContainer.complete();
this._destroyed.next();
this._destroyed.complete();
}

private _runInZone<T extends (...args: any[]) => void>(callback: T):
Expand Down Expand Up @@ -521,7 +530,7 @@ function bindCueVideoCall(
startSecondsObs: Observable<number | undefined>,
endSecondsObs: Observable<number | undefined>,
suggestedQualityObs: Observable<YT.SuggestedVideoQuality | undefined>,
destroyed: Observable<undefined>,
destroyed: Observable<void>,
) {
const cueOptionsObs = combineLatest([startSecondsObs, endSecondsObs])
.pipe(map(([startSeconds, endSeconds]) => ({startSeconds, endSeconds})));
Expand Down