Fullscreen improvements

2017-10-18 23:55:53 +11:00 · 2017-10-18 23:55:53 +11:00 · 57517a9dcc
commit 57517a9dcc
parent 751708ff23
6 changed files with 122 additions and 124 deletions
--- a/demo/index.html
+++ b/demo/index.html
@ -22,13 +22,15 @@
 <body>
    <header>
        <h1>Plyr</h1>
-        <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+        <p>A simple, accessible HTML5 media player by
+            <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a>
+        </p>
        <nav>
            <ul>
                <li>
                    <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
                        <svg class="icon">
-                            <use xlink:href="#icon-github" />
+                            <use xlink:href="#icon-github"></use>
                        </svg>Download on GitHub
                    </a>
                </li>
@ -36,7 +38,7 @@
                    <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
                        target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
                        <svg class="icon">
-                            <use xlink:href="#icon-twitter" />
+                            <use xlink:href="#icon-twitter"></use>
                        </svg>Tweet
                    </a>
                </li>
@ -54,10 +56,16 @@
                    <button type="button" class="btn" data-source="audio">Audio</button>
                </li>
                <li>
-                    <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
+                    <button type="button" class="btn btn--youtube" data-source="youtube">
+                        <svg class="icon">
+                            <use xlink:href="#icon-youtube"></use>
+                        </svg>YouTube</button>
                </li>
                <li>
-                    <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
+                    <button type="button" class="btn btn--vimeo" data-source="vimeo">
+                        <svg class="icon">
+                            <use xlink:href="#icon-vimeo"></use>
+                        </svg>Vimeo</button>
                </li>
            </ul>
        </nav>
@ -91,7 +99,7 @@
                    <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
                    <span class="color--youtube">
                        <svg class="icon">
-                            <use xlink:href="#icon-youtube"/>
+                            <use xlink:href="#icon-youtube"></use>
                        </svg> YouTube
                    </span>
                </small>
@ -101,7 +109,7 @@
                    <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
                    <span class="color--vimeo">
                        <svg class="icon">
-                            <use xlink:href="#icon-vimeo"/>
+                            <use xlink:href="#icon-vimeo"></use>
                        </svg> Vimeo
                    </span>
                </small>
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- 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;
+            // Check for native support
+            var nativeSupport = support.fullscreen;

-                if (nativeSupport || (player.config.fullscreen.fallback && !utils.inFrame())) {
-                    log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
+            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);
-                    }
-
-                    // Add styling hook
-                    utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.enabled, true);
-                } else {
-                    log('Fullscreen not supported and fallback disabled');
-                }
-
-                // Toggle state
-                if (player.elements.buttons && player.elements.buttons.fullscreen) {
-                    utils.toggleState(player.elements.buttons.fullscreen, false);
-                }
-
-                // Setup focus trap
-                focusTrap();
+                // 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');
            }
+
+            // 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)
                );

@ -3914,11 +3905,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,
@ -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;
--- 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;
+        }
+    }
+}
--- 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;