Merge branch 'develop' into fix-html5-quality-settings

package.json

@@ -36,10 +36,10 @@
     },
     "devDependencies": {
         "babel-core": "^6.26.3",
-        "babel-eslint": "^10.0.0",
+        "babel-eslint": "^10.0.1",
         "@babel/preset-env": "^7.1.0",
         "del": "^3.0.0",
-        "eslint": "^5.6.0",
+        "eslint": "^5.7.0",
         "eslint-config-airbnb-base": "^13.1.0",
         "eslint-config-prettier": "^3.1.0",
         "eslint-plugin-import": "^2.14.0",
@@ -57,20 +57,20 @@
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-s3": "^0.11.0",
-        "gulp-sass": "^4.0.1",
+        "gulp-sass": "^4.0.2",
         "gulp-size": "^3.0.0",
         "gulp-sourcemaps": "^2.6.4",
         "gulp-svgmin": "^2.1.0",
         "gulp-svgstore": "^7.0.0",
         "gulp-uglify-es": "^1.0.4",
         "gulp-util": "^3.0.8",
-        "postcss-custom-properties": "^8.0.6",
+        "postcss-custom-properties": "^8.0.8",
         "prettier-eslint": "^8.8.2",
         "prettier-stylelint": "^0.4.2",
         "remark-cli": "^5.0.0",
         "remark-validate-links": "^7.1.0",
         "rollup-plugin-babel": "^4.0.3",
-        "rollup-plugin-commonjs": "^9.1.8",
+        "rollup-plugin-commonjs": "^9.2.0",
         "rollup-plugin-node-resolve": "^3.4.0",
         "run-sequence": "^2.2.1",
         "stylelint": "^9.6.0",
@@ -78,7 +78,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.2.0",
         "stylelint-order": "^1.0.0",
-        "stylelint-scss": "^3.3.1",
+        "stylelint-scss": "^3.3.2",
         "stylelint-selector-bem-pattern": "^2.0.0",
         "through2": "^2.0.3"
     },

readme.md

@@ -175,7 +175,7 @@ Any questions regarding the ads can be sent straight to vi.ai and any issues wit
 ### SASS
 
 You can use `bundle.scss` file included in `/src` as part of your build and change variables to suit your design. The SASS require you to
-use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you be should already!) as all declarations use the W3C definitions.
+use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should be already!) as all declarations use the W3C definitions.
 
 The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS
 you write. Check out the JavaScript source for more on this.

src/js/config/defaults.js

@@ -133,7 +133,7 @@ const defaults = {
         'settings',
         'pip',
         'airplay',
-        'download',
+        // 'download',
         'fullscreen',
     ],
     settings: ['captions', 'quality', 'speed'],
@@ -186,6 +186,7 @@ const defaults = {
 
     // URLs
     urls: {
+        download: null,
         vimeo: {
             sdk: 'https://player.vimeo.com/api/player.js',
             iframe: 'https://player.vimeo.com/video/{0}?{1}',

src/js/controls.js

@@ -111,10 +111,11 @@ const controls = {
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
         if ('href' in use) {
             use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
-        } else {
-            use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
         }
 
+        // Always set the older attribute even though it's "deprecated" (it'll be around for ages)
+        use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
+
         // Add <use> to <svg>
         icon.appendChild(use);
 
@@ -1228,11 +1229,15 @@ const controls = {
 
     // Set the download link
     setDownloadLink() {
-        // Set download link
+        const button = this.elements.buttons.download;
-        const { download } = this.elements.buttons;
+
-        if (is.element(download)) {
+        // Bail if no button
-            download.setAttribute('href', this.source);
+        if (!is.element(button)) {
+            return;
         }
+
+        // Set download link
+        button.setAttribute('href', this.download);
     },
 
     // Build the default HTML
@@ -1515,15 +1520,13 @@ const controls = {
         if (this.config.controls.includes('download')) {
             const attributes = {
                 element: 'a',
-                href: this.source,
+                href: this.download,
                 target: '_blank',
             };
 
-            if (this.isHTML5) {
+            const { download } = this.config.urls;
-                extend(attributes, {
+
-                    download: '',
+            if (!is.url(download) && this.isEmbed) {
-                });
-            } else if (this.isEmbed) {
                 extend(attributes, {
                     icon: `logo-${this.provider}`,
                     label: this.provider,

src/js/listeners.js

@@ -431,7 +431,7 @@ class Listeners {
             controls.updateSetting.call(player, 'quality', null, event.detail.quality);
         });
 
-        // Update download link
+        // Update download link when ready and if quality changes
         on.call(player, player.media, 'ready qualitychange', () => {
             controls.setDownloadLink.call(player);
         });
@@ -620,6 +620,9 @@ class Listeners {
                 return;
             }
 
+            // Record seek time so we can prevent hiding controls for a few seconds after seek
+            player.lastSeekTime = Date.now();
+
             // Was playing before?
             const play = seek.hasAttribute(attribute);
 

src/js/plyr.js

@@ -302,6 +302,9 @@ class Plyr {
         if (this.config.autoplay) {
             this.play();
         }
+
+        // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
+        this.lastSeekTime = 0;
     }
 
     // ---------------------------------------
@@ -680,6 +683,7 @@ class Plyr {
     set quality(input) {
         const config = this.config.quality;
         const options = this.options.quality;
+        const { duration, playing } = this;
 
         if (!options.length) {
             return;
@@ -713,6 +717,14 @@ class Plyr {
         if (updateStorage) {
             this.storage.set({ quality: quality });
         }
+        
+        // Seek to duration before changing quality
+        this.seek = duration;
+
+        // Continue
+        if (playing) {
+            this.play();
+        }
     }
 
     /**
@@ -798,6 +810,15 @@ class Plyr {
         return this.media.currentSrc;
     }
 
+    /**
+     * Get a download URL (either source or custom)
+     */
+    get download() {
+        const { download } = this.config.urls;
+
+        return is.url(download) ? download : this.source;
+    }
+
     /**
      * Set the poster image for a video
      * @param {input} - the URL for the new poster image

src/js/ui.js

@@ -247,8 +247,11 @@ const ui = {
         const { controls } = this.elements;
 
         if (controls && this.config.hideControls) {
-            // Show controls if force, loading, paused, or button interaction, otherwise hide
+            // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
-            this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover));
+            const recentTouchSeek = (this.touch && this.lastSeekTime + 2000 > Date.now());
+
+            // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
+            this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover || recentTouchSeek));
         }
     },
 };

src/js/utils/is.js

@@ -31,6 +31,11 @@ const isUrl = input => {
         return true;
     }
 
+    // Must be string from here
+    if (!isString(input)) {
+        return false;
+    }
+
     // Add the protocol if required
     let string = input;
     if (!input.startsWith('http://') || !input.startsWith('https://')) {