Fullscreen improvements

3 files changed, 104 insertions, 114 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 83ad0a86..59e8c8ef 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -113,9 +113,8 @@
 
         // Fullscreen settings
         fullscreen: {
-            enabled: true,
-            fallback: true,
-            allowAudio: false,
+            enabled: true, // Allow fullscreen?
+            fallback: true, // Fallback for vintage browsers
         },
 
         // Local storage
@@ -316,14 +315,13 @@
             fullscreen: {
                 enabled: 'plyr--fullscreen-enabled',
                 fallback: 'plyr--fullscreen-fallback',
-                active: 'plyr--fullscreen-active',
             },
             pip: {
-                enabled: 'plyr--pip-enabled',
+                supported: 'plyr--pip-supported',
                 active: 'plyr--pip-active',
             },
             airplay: {
-                enabled: 'plyr--airplay-enabled',
+                supported: 'plyr--airplay-supported',
                 active: 'plyr--airplay-active',
             },
             tabFocus: 'tab-focus',
@@ -2368,36 +2366,29 @@
 
         // Setup fullscreen
         function setupFullscreen() {
-            if (!player.supported.full) {
+            if (!player.supported.full || player.type === 'audio' || !player.config.fullscreen.enabled) {
                 return;
             }
 
-            if ((player.type !== 'audio' || player.config.fullscreen.allowAudio) && player.config.fullscreen.enabled) {
-                // Check for native support
-                var nativeSupport = support.fullscreen;
-
-                if (nativeSupport || (player.config.fullscreen.fallback && !utils.inFrame())) {
-                    log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
-
-                    // Add styling hook
-                    if (!nativeSupport) {
-                        utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.fallback, true);
-                    }
+            // Check for native support
+            var nativeSupport = support.fullscreen;
 
-                    // Add styling hook
-                    utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.enabled, true);
-                } else {
-                    log('Fullscreen not supported and fallback disabled');
-                }
+            if (nativeSupport || (player.config.fullscreen.fallback && !utils.inFrame())) {
+                log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
 
-                // Toggle state
-                if (player.elements.buttons && player.elements.buttons.fullscreen) {
-                    utils.toggleState(player.elements.buttons.fullscreen, false);
-                }
+                // Add styling hook to show button
+                utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.enabled, true);
+            } else {
+                log('Fullscreen not supported and fallback disabled');
+            }
 
-                // Setup focus trap
-                focusTrap();
+            // Toggle state
+            if (player.elements.buttons && player.elements.buttons.fullscreen) {
+                utils.toggleState(player.elements.buttons.fullscreen, false);
             }
+
+            // Setup focus trap
+            focusTrap();
         }
 
         // Setup captions
@@ -2892,14 +2883,14 @@
                 // Check for picture-in-picture support
                 utils.toggleClass(
                     player.elements.container,
-                    player.config.classNames.pip.enabled,
+                    player.config.classNames.pip.supported,
                     support.pip && player.type === 'video'
                 );
 
                 // Check for airplay support
                 utils.toggleClass(
                     player.elements.container,
-                    player.config.classNames.airplay.enabled,
+                    player.config.classNames.airplay.supported,
                     support.airplay && utils.inArray(types.html5, player.type)
                 );
 
@@ -3916,11 +3907,6 @@
                 // Restore class hooks
                 utils.toggleClass(
                     player.elements.container,
-                    player.config.classNames.fullscreen.active,
-                    player.fullscreen.active
-                );
-                utils.toggleClass(
-                    player.elements.container,
                     player.config.classNames.captions.active,
                     player.captions.enabled
                 );
@@ -4239,10 +4225,8 @@
             });
 
             // Fullscreen
-            utils.proxy(player.elements.buttons.fullscreen, 'click', player.config.listeners.fullscreen, function(
-                event
-            ) {
-                player.toggleFullscreen(event);
+            utils.proxy(player.elements.buttons.fullscreen, 'click', player.config.listeners.fullscreen, function() {
+                player.toggleFullscreen();
             });
 
             // Picture-in-Picture
@@ -4398,9 +4382,7 @@
 
             // Handle user exiting fullscreen by escaping etc
             if (support.fullscreen) {
-                utils.on(document, fullscreen.eventType, function(event) {
-                    player.toggleFullscreen(event);
-                });
+                utils.on(document, fullscreen.eventType, function(event) { player.toggleFullscreen(event); });
             }
         }
 
@@ -5396,32 +5378,14 @@
     Plyr.prototype.toggleFullscreen = function(event) {
         var player = this;
 
-        // Save scroll position
-        function saveScrollPosition() {
-            scroll = {
-                x: window.pageXOffset || 0,
-                y: window.pageYOffset || 0,
-            };
-        }
-
-        // Restore scroll position
-        function restoreScrollPosition() {
-            window.scrollTo(scroll.x, scroll.y);
-        }
-
         // Check for native support
-        var nativeSupport = support.fullscreen;
-
-        if (nativeSupport) {
+        if (support.fullscreen) {
             // If it's a fullscreen change event, update the UI
             if (utils.is.event(event) && event.type === fullscreen.eventType) {
                 player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
             } else {
                 // Else it's a user request to enter or exit
-                if (!fullscreen.isFullScreen(player.elements.container)) {
-                    // Save scroll position
-                    saveScrollPosition();
-
+                if (!player.fullscreen.active) {
                     // Request full screen
                     fullscreen.requestFullScreen(player.elements.container);
                 } else {
@@ -5438,29 +5402,30 @@
             // Otherwise, it's a simple toggle
             player.fullscreen.active = !player.fullscreen.active;
 
+            // Add class hook
+            utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.fallback, player.fullscreen.active);
+
+            // Make sure we don't lose scroll position
+            if (player.fullscreen.active) {
+                scroll = {
+                    x: window.pageXOffset || 0,
+                    y: window.pageYOffset || 0,
+                };
+            } else {
+                window.scrollTo(scroll.x, scroll.y);
+            }
+
             // Bind/unbind escape key
             document.body.style.overflow = player.fullscreen.active ? 'hidden' : '';
         }
 
-        // Set class hook
-        utils.toggleClass(
-            player.elements.container,
-            player.config.classNames.fullscreen.active,
-            player.fullscreen.active
-        );
-
         // Set button state
         if (player.elements.buttons && player.elements.buttons.fullscreen) {
             utils.toggleState(player.elements.buttons.fullscreen, player.fullscreen.active);
         }
 
         // Trigger an event
-        player.core.trigger(player.media, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen', true);
-
-        // Restore scroll position
-        if (!player.fullscreen.active && nativeSupport) {
-            restoreScrollPosition();
-        }
+        player.core.trigger(player.media, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen');
 
         // Allow chaining
         return player;
diff --git a/src/less/mixins.less b/src/less/mixins.less
index a620a599..14e7d742 100644
--- a/src/less/mixins.less
+++ b/src/less/mixins.less
@@ -27,3 +27,46 @@
     border-color: @plyr-range-thumb-active-border-color;
     transform: scale(@plyr-range-thumb-active-scale);
 }
+
+// Fullscreen styles
+.plyr-fullscreen-active() {
+    height: 100%;
+    width: 100%;
+    background: #000;
+    border-radius: 0 !important;
+
+    video {
+        height: 100%;
+    }
+    .plyr__video-wrapper {
+        height: 100%;
+        width: 100%;
+    }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
+
+    // Vimeo requires some different styling
+    &.plyr--vimeo .plyr__video-wrapper {
+        height: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    // Display correct icon
+    .plyr__control .icon--exit-fullscreen {
+        display: block;
+
+        + svg {
+            display: none;
+        }
+    }
+
+    // Large captions in full screen on larger screens
+    @media (min-width: @plyr-bp-screen-lg) {
+        .plyr__captions {
+            font-size: @plyr-font-size-captions-large;
+        }
+    }
+}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 22e29aa2..6cf94410 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -308,12 +308,6 @@
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-(@plyr-control-spacing * 1.5));
 }
-// Large captions in full screen on larger screens
-@media (min-width: @plyr-bp-screen-lg) {
-    .plyr--fullscreen-active .plyr__captions {
-        font-size: @plyr-font-size-captions-large;
-    }
-}
 
 // Controls
 // --------------------------------------------------------------
@@ -409,7 +403,7 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
+    padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
     background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
@@ -506,7 +500,6 @@
 }
 
 // Change icons on state change
-.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,
 .plyr--muted .plyr__control .icon--muted,
 .plyr--captions-active .plyr__control .icon--captions-on {
     display: block;
@@ -518,15 +511,15 @@
 
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'],
 .plyr [data-plyr='pip'],
-.plyr [data-plyr='airplay'] {
+.plyr [data-plyr='airplay'],
+.plyr [data-plyr='fullscreen'] {
     display: none;
 }
 .plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'],
-.plyr--pip-enabled [data-plyr='pip'],
-.plyr--airplay-enabled [data-plyr='airplay'] {
+.plyr--pip-supported [data-plyr='pip'],
+.plyr--airplay-supported [data-plyr='airplay'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
 
@@ -922,34 +915,23 @@
 
 // Fullscreen
 // --------------------------------------------------------------
-.plyr--fullscreen-active {
-    height: 100%;
-    width: 100%;
-    background: #000;
-    border-radius: 0 !important;
-
-    video {
-        height: 100%;
-    }
-    .plyr__video-wrapper {
-        height: 100%;
-        width: 100%;
-    }
-    .plyr__video-embed {
-        // Revert overflow change
-        overflow: visible;
-    }
-
-    // Vimeo requires some different styling
-    &.plyr--vimeo .plyr__video-wrapper {
-        height: 0;
-        top: 50%;
-        transform: translateY(-50%);
-    }
+.plyr:fullscreen {
+    .plyr-fullscreen-active();
+}
+.plyr:-webkit-full-screen {
+    .plyr-fullscreen-active();
+}
+.plyr:-moz-full-screen {
+    .plyr-fullscreen-active();
+}
+.plyr:-ms-fullscreen {
+    .plyr-fullscreen-active();
 }
 
 // Fallback for unsupported browsers
-.plyr--fullscreen-fallback.plyr--fullscreen-active {
+.plyr--fullscreen-fallback {
+    .plyr-fullscreen-active();
+
     position: fixed;
     top: 0;
     left: 0;