Prevent immediate hiding of controls on mobile

jamesoflol · jamesoflol · commit 69d0d6d7eec8 · 2018-10-23T10:08:46.000+11:00
diff --git a/src/js/listeners.js b/src/js/listeners.js
@@ -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);
 
diff --git a/src/js/plyr.js b/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;
     }
 
     // ---------------------------------------
diff --git a/src/js/ui.js b/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));
         }
     },
 };

Original file line number	Diff line number	Diff line change
`@@ -620,6 +620,9 @@ class Listeners {`
`620`	`620`	`return;`
`621`	`621`	`}`
`622`	`622`
	`623`	`+ // Record seek time so we can prevent hiding controls for a few seconds after seek`
	`624`	`+ player.lastSeekTime = Date.now();`
	`625`	`+`
`623`	`626`	`// Was playing before?`
`624`	`627`	`const play = seek.hasAttribute(attribute);`
`625`	`628`
Original file line number	Diff line number	Diff line change
`@@ -302,6 +302,9 @@ class Plyr {`
`302`	`302`	`if (this.config.autoplay) {`
`303`	`303`	`this.play();`
`304`	`304`	`}`
	`305`	`+`
	`306`	`+ // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek`
	`307`	`+ this.lastSeekTime = 0;`
`305`	`308`	`}`
`306`	`309`
`307`	`310`	`// ---------------------------------------`