diff --git a/ui/controls.js b/ui/controls.js index 077fbd63e7..87d68271f2 100644 --- a/ui/controls.js +++ b/ui/controls.js @@ -650,6 +650,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget { * @export */ isPiPAllowed() { + if (this.castProxy_.isCasting()) { + return false; + } if ('documentPictureInPicture' in window && this.config_.preferDocumentPictureInPicture) { const video = /** @type {HTMLVideoElement} */(this.localVideo_); diff --git a/ui/pip_button.js b/ui/pip_button.js index d95d7c2335..93bd8d28e2 100644 --- a/ui/pip_button.js +++ b/ui/pip_button.js @@ -98,8 +98,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element { this.onLeavePictureInPicture_(); }); - this.eventManager.listen(this.controls, 'caststatuschanged', (e) => { - this.onCastStatusChange_(e); + this.eventManager.listen(this.controls, 'caststatuschanged', () => { + this.onTracksChanged_(); }); this.eventManager.listen(this.player, 'trackschanged', () => { @@ -164,25 +164,6 @@ shaka.ui.PipButton = class extends shaka.ui.Element { this.localization.resolve(currentPipState); } - /** - * @param {Event} e - * @private - */ - onCastStatusChange_(e) { - const isCasting = e['newStatus']; - - if (isCasting) { - // Picture-in-picture is not applicable if we're casting - if (this.controls.isPiPAllowed()) { - shaka.ui.Utils.setDisplay(this.pipButton_, false); - } - } else { - if (this.controls.isPiPAllowed()) { - shaka.ui.Utils.setDisplay(this.pipButton_, true); - } - } - } - /** * Display the picture-in-picture button only when the content contains video. @@ -194,6 +175,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element { async onTracksChanged_() { if (!this.controls.isPiPAllowed()) { shaka.ui.Utils.setDisplay(this.pipButton_, false); + if (this.controls.isPiPEnabled()) { + await this.controls.togglePiP(); + } } else if (this.player && this.player.isAudioOnly()) { shaka.ui.Utils.setDisplay(this.pipButton_, false); if (this.controls.isPiPEnabled()) {