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

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 { download } = this.elements.buttons;
-        if (is.element(download)) {
-            download.setAttribute('href', this.source);
+        const button = this.elements.buttons.download;
+
+        // Bail if no button
+        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) {
-                extend(attributes, {
-                    download: '',
-                });
-            } else if (this.isEmbed) {
+            const { download } = this.config.urls;
+
+            if (!is.url(download) && 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
-            this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover));
+            // 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.)
+            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://')) {