diff options
Diffstat (limited to 'src/js/fullscreen.js')
-rw-r--r-- | src/js/fullscreen.js | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js new file mode 100644 index 00000000..366ea729 --- /dev/null +++ b/src/js/fullscreen.js @@ -0,0 +1,127 @@ +// ========================================================================== +// Plyr fullscreen API +// ========================================================================== + +import utils from './utils'; + +// Determine the prefix +const prefix = (() => { + let value = false; + + if (utils.is.function(document.cancelFullScreen)) { + value = ''; + } else { + // Check for fullscreen support by vendor prefix + [ + 'webkit', + 'o', + 'moz', + 'ms', + 'khtml', + ].some(pre => { + if (utils.is.function(document[`${pre}CancelFullScreen`])) { + value = pre; + return true; + } else if (utils.is.function(document.msExitFullscreen) && document.msFullscreenEnabled) { + // Special case for MS (when isn't it?) + value = 'ms'; + return true; + } + + return false; + }); + } + + return value; +})(); + +// Fullscreen API +const fullscreen = { + // Get the prefix + prefix, + + // Check if we can use it + enabled: document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled, + + // Yet again Microsoft awesomeness, + // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes + eventType: prefix === 'ms' ? 'MSFullscreenChange' : `${prefix}fullscreenchange`, + + // Is an element fullscreen + isFullScreen(element) { + if (!fullscreen.enabled) { + return false; + } + + const target = utils.is.nullOrUndefined(element) ? document.body : element; + + switch (prefix) { + case '': + return document.fullscreenElement === target; + + case 'moz': + return document.mozFullScreenElement === target; + + default: + return document[`${prefix}FullscreenElement`] === target; + } + }, + + // Make an element fullscreen + requestFullScreen(element) { + if (!fullscreen.enabled) { + return false; + } + + const target = utils.is.nullOrUndefined(element) ? document.body : element; + + return !prefix.length ? target.requestFullScreen() : target[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); + }, + + // Bail from fullscreen + cancelFullScreen() { + if (!fullscreen.enabled) { + return false; + } + + return !prefix.length ? document.cancelFullScreen() : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')](); + }, + + // Get the current element + element() { + if (!fullscreen.enabled) { + return null; + } + + return !prefix.length ? document.fullscreenElement : document[`${prefix}FullscreenElement`]; + }, + + // Setup fullscreen + setup() { + if (!this.supported.ui || this.isAudio || !this.config.fullscreen.enabled) { + return; + } + + // Check for native support + const nativeSupport = fullscreen.enabled; + + if (nativeSupport || (this.config.fullscreen.fallback && !utils.inFrame())) { + this.debug.log(`${nativeSupport ? 'Native' : 'Fallback'} fullscreen enabled`); + + // Add styling hook to show button + utils.toggleClass(this.elements.container, this.config.classNames.fullscreen.enabled, true); + } else { + this.debug.log('Fullscreen not supported and fallback disabled'); + } + + // Toggle state + if (this.elements.buttons && this.elements.buttons.fullscreen) { + utils.toggleState(this.elements.buttons.fullscreen, false); + } + + // Trap focus in container + utils.trapFocus.call(this); + }, +}; + +export default fullscreen; |