maher
54 lines
1.5 KiB
TypeScript
Executable File
54 lines
1.5 KiB
TypeScript
Executable File
import {PipAdapter} from '@common/player/state/pip/pip-adapter';
|
|
import {IS_CLIENT} from '@common/utils/platform';
|
|
|
|
export const createChromePipAdapter = (
|
|
host: HTMLVideoElement,
|
|
onChange: () => void
|
|
): PipAdapter => {
|
|
return {
|
|
isSupported: () => canUsePiPInChrome(),
|
|
isPip: () => {
|
|
return host === document.pictureInPictureElement;
|
|
},
|
|
enter: () => {
|
|
if (canUsePiPInChrome()) {
|
|
return host.requestPictureInPicture();
|
|
}
|
|
},
|
|
exit: () => {
|
|
if (canUsePiPInChrome()) {
|
|
return document.exitPictureInPicture();
|
|
}
|
|
},
|
|
bindEvents: () => {
|
|
if (canUsePiPInChrome()) {
|
|
host.addEventListener('enterpictureinpicture', onChange);
|
|
host.addEventListener('leavepictureinpicture', onChange);
|
|
}
|
|
},
|
|
unbindEvents: () => {
|
|
if (canUsePiPInChrome()) {
|
|
host.removeEventListener('enterpictureinpicture', onChange);
|
|
host.removeEventListener('leavepictureinpicture', onChange);
|
|
}
|
|
},
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Checks if the native HTML5 video player can enter picture-in-picture (PIP) mode when using
|
|
* the Chrome browser.
|
|
*
|
|
* @see https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
|
|
*/
|
|
let _canUsePiPInChrome: boolean | undefined;
|
|
const canUsePiPInChrome = (): boolean => {
|
|
if (!IS_CLIENT) return false;
|
|
if (_canUsePiPInChrome == null) {
|
|
const video = document.createElement('video');
|
|
_canUsePiPInChrome =
|
|
!!document.pictureInPictureEnabled && !video.disablePictureInPicture;
|
|
}
|
|
return _canUsePiPInChrome;
|
|
};
|