Restore scroll position when exiting fullscreen (fixes #236)

changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v1.6.15
+- Restore scroll position when exiting full screen (fixes #236)
+
 ## v1.6.14
 - SVG sprite loading automatically for an easier setup
 - Touch devices now show controls on touch rather than pausing playback

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.14",
+  "version": "1.6.15",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.14/plyr.js` to `https://cdn.plyr.io/1.6.14/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.15/plyr.js` to `https://cdn.plyr.io/1.6.15/plyr.js`
 
 ### npm
 
@@ -71,11 +71,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.14/plyr.css">
-<script src="https://cdn.plyr.io/1.6.14/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.15/plyr.css">
+<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
 ```
 
-The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.14/plyr.svg`.
+The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.15/plyr.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
@@ -163,7 +163,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.6.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.14
+// plyr.js v1.6.15
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -26,10 +26,11 @@
     /*global YT,$f*/
 
     // Globals
-    var fullscreen;
+    var fullscreen, 
+    scroll = { x: 0, y: 0 },
 
     // Default config
-    var defaults = {
+    defaults = {
         enabled:                true,
         debug:                  false,
         autoplay:               false,
@@ -43,7 +44,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/1.6.14/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/1.6.15/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -1953,6 +1954,19 @@
             _toggleControls(plyr.media.paused);
         }
 
+        // 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);
+        }
+
         // Toggle fullscreen
         function _toggleFullscreen(event) {
             // Check for native support
@@ -1966,6 +1980,10 @@
             else if (nativeSupport) {
                 // Request fullscreen
                 if (!fullscreen.isFullScreen(plyr.container)) {
+                    // Save scroll position
+                    _saveScrollPosition();
+
+                    // Request full screen
                     fullscreen.requestFullScreen(plyr.container);
                 }
                 // Bail from fullscreen
@@ -2010,6 +2028,11 @@
 
             // Trigger an event
             _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
+
+            // Restore scroll position
+            if (!plyr.isFullscreen && nativeSupport) {
+                _restoreScrollPosition();
+            }
         }
 
         // Bail from faux-fullscreen