ES6-ified

src/js/fullscreen.js

@@ -0,0 +1,129 @@
+// ==========================================================================
+// 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.undefined(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.undefined(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.type === 'audio' || !this.config.fullscreen.enabled) {
+            return;
+        }
+
+        // Check for native support
+        const nativeSupport = fullscreen.enabled;
+
+        if (nativeSupport || (this.config.fullscreen.fallback && !utils.inFrame())) {
+            this.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.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;