Skip to content

youtube-player: hiding the youtube controls #18331

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

Closed
wants to merge 3 commits into from
Closed

youtube-player: hiding the youtube controls #18331

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fea5dcf
Add playerVars @Inputs
mcroker Jan 29, 2020
b067fef
Add playerVars @Inputs (reverse unintended formatting changes)
mcroker Jan 29, 2020
5e86a20
Add playerVars @Inputs (fix circleci lint issue)
mcroker Jan 29, 2020
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
42 changes: 32 additions & 10 deletions src/youtube-player/youtube-player.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,24 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
}
private _height = new BehaviorSubject<number>(DEFAULT_PLAYER_HEIGHT);

/** PlayerVars of video player */
@Input()
get controls(): YT.Controls | undefined { return this._playerVars.value.controls; }
set controls(controls: YT.Controls | undefined) {
this._playerVars.next({ ...this._playerVars.value, controls } || {});
}
@Input()
get autoplay(): YT.AutoPlay | undefined { return this._playerVars.value.autoplay; }
set autoplay(autoplay: YT.AutoPlay | undefined) {
this._playerVars.next({ ...this._playerVars.value, autoplay } || {});
}
@Input()
get disablekb(): YT.KeyboardControls | undefined { return this._playerVars.value.disablekb; }
set disablekb(disablekb: YT.KeyboardControls | undefined) {
this._playerVars.next({ ...this._playerVars.value, disablekb } || {});
}
private _playerVars = new BehaviorSubject<YT.PlayerVars>({});

/** Width of video player */
@Input()
get width(): number | undefined { return this._width.value; }
Expand Down Expand Up @@ -171,7 +189,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {

// @breaking-change 10.0.0 Remove null check for `platformId`.
this._isBrowser =
platformId ? isPlatformBrowser(platformId) : typeof window === 'object' && !!window;
platformId ? isPlatformBrowser(platformId) : typeof window === 'object' && !!window;
}

ngOnInit() {
Expand Down Expand Up @@ -208,6 +226,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
iframeApiAvailableObs,
this._width,
this._height,
this._playerVars,
this.createEventsBoundInZone(),
this._ngZone
).pipe(waitUntilReady(player => {
Expand Down Expand Up @@ -269,6 +288,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {

this._videoId.complete();
this._height.complete();
this._playerVars.complete();
this._width.complete();
this._startSeconds.complete();
this._endSeconds.complete();
Expand Down Expand Up @@ -436,10 +456,10 @@ function bindSuggestedQualityToPlayer(
* it was able to complete. Can be used to clean up any loose references.
*/
function waitUntilReady(onAbort: (player: UninitializedPlayer) => void):
OperatorFunction<UninitializedPlayer | undefined, Player | undefined> {
OperatorFunction<UninitializedPlayer|undefined, Player | undefined> {
return flatMap(player => {
if (!player) {
return observableOf<Player|undefined>(undefined);
return observableOf<Player | undefined>(undefined);
}
if (playerIsReady(player)) {
return observableOf(player as Player);
Expand Down Expand Up @@ -479,22 +499,24 @@ function createPlayerObservable(
iframeApiAvailableObs: Observable<boolean>,
widthObs: Observable<number>,
heightObs: Observable<number>,
playerVarsObs: Observable<YT.PlayerVars>,
events: YT.Events,
ngZone: NgZone
): Observable<UninitializedPlayer | undefined> {

const playerOptions =
videoIdObs
.pipe(
withLatestFrom(combineLatest([widthObs, heightObs])),
map(([videoId, [width, height]]) => videoId ? ({videoId, width, height, events}) : undefined),
withLatestFrom(combineLatest([widthObs, heightObs, playerVarsObs])),
map(([videoId, [width, height, playerVars]]) =>
videoId ? ({ videoId, width, height, playerVars, events }) : undefined),
);

return combineLatest([youtubeContainer, playerOptions, of(ngZone)])
.pipe(
skipUntilRememberLatest(iframeApiAvailableObs),
scan(syncPlayerState, undefined),
distinctUntilChanged());
.pipe(
skipUntilRememberLatest(iframeApiAvailableObs),
scan(syncPlayerState, undefined),
distinctUntilChanged());
}

/** Skips the given observable until the other observable emits true, then emit the latest. */
Expand Down Expand Up @@ -543,7 +565,7 @@ function bindCueVideoCall(
destroyed: Observable<void>,
) {
const cueOptionsObs = combineLatest([startSecondsObs, endSecondsObs])
.pipe(map(([startSeconds, endSeconds]) => ({startSeconds, endSeconds})));
.pipe(map(([startSeconds, endSeconds]) => ({ startSeconds, endSeconds })));

// Only respond to changes in cue options if the player is not running.
const filteredCueOptions = cueOptionsObs
Expand Down