lbry-desktop/ui/util/full-screen.js
2019-11-11 13:27:29 -05:00

49 lines
1.7 KiB
JavaScript

/*
Polyfill functions for the HTML5 fullscreen api:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
const prefixes = {
exitFullscreen: ['exitFullscreen', 'msExitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen'],
fullscreenChange: ['fullscreenChange', 'MSFullscreenChange', 'mozfullscreenchange', 'webkitfullscreenchange'],
fullscreenEnabled: ['fullscreenEnabled', 'msFullscreenEnabled', 'mozFullScreenEnabled', 'webkitFullscreenEnabled'],
fullscreenElement: ['fullscreenElement', 'msFullscreenElement', 'mozFullScreenElement', 'webkitFullscreenElement'],
requestFullscreen: ['requestFullscreen', 'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'],
};
const getPrefix = () => {
let prefixIndex = 0;
// validate prefix
prefixes.fullscreenEnabled.some((prefix, index) => {
if (document[prefix] || document[prefix] === false) {
prefixIndex = index;
return true;
}
});
// prefix vendor index
return prefixIndex;
};
export const fullscreenElement = () => {
const index = getPrefix();
const prefix = prefixes.fullscreenElement[index];
return document[prefix];
};
export const requestFullscreen = elem => {
const index = getPrefix();
const prefix = prefixes.requestFullscreen[index];
elem[prefix] && elem[prefix]();
};
export const exitFullscreen = () => {
const index = getPrefix();
const prefix = prefixes.exitFullscreen[index];
document[prefix] && document[prefix]();
};
export const onFullscreenChange = (target, action, callback) => {
const index = getPrefix();
const prefix = prefixes.fullscreenChange[index];
target[`${action}EventListener`](prefix, callback, false);
};