Bug fixes

3 files changed, 76 insertions, 48 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 957276aa..0d8884f4 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -42,6 +42,7 @@
         iconUrl:                '',
         clickToPlay:            true,
         hideControls:           true,
+        showPosterOnEnd:        true,
         tooltips: {
             controls:           false,
             seek:               true
@@ -1827,9 +1828,9 @@
         // Seek to time
         // The input parameter can be an event or a number
         function _seek(input) {
-            var targetTime = 0,
-                paused = plyr.media.paused,
-                duration = _getDuration();
+            var targetTime  = 0,
+                paused      = plyr.media.paused,
+                duration    = _getDuration();
 
             // Explicit position
             if (typeof input === 'number') {
@@ -1850,10 +1851,8 @@
                 targetTime = duration;
             }
 
-            // Update progress 
-            if (plyr.progress && plyr.progress.played) {
-                plyr.progress.played.value = ((100 / duration) * targetTime);
-            }
+            // Update seek range and progress 
+            _updateSeekDisplay(targetTime);
 
             // Set the current time
             // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
@@ -1901,10 +1900,18 @@
         // Get the duration (or custom if set)
         function _getDuration() {
             // It should be a number, but parse it just incase
-            var duration = parseInt(config.duration);
+            var duration = parseInt(config.duration),
+
+            // True duration
+            mediaDuration = 0;
+
+            // Only if duration available
+            if(plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
+                mediaDuration = plyr.media.duration;
+            }
 
             // If custom duration is funky, use regular duration
-            return (isNaN(duration) ? plyr.media.duration : duration);
+            return (isNaN(duration) ? mediaDuration : duration);
         }
 
         // Check playing state
@@ -2271,10 +2278,33 @@
             _updateProgress(event);
         }
 
+        // Update seek range and progress 
+        function _updateSeekDisplay(time) {
+            // Default to 0
+            if (typeof time !== 'number') {
+                time = 0;
+            }
+
+            var duration    = _getDuration(),
+                value       = _getPercentage(time, duration);
+
+            // Update progress 
+            if (plyr.progress && plyr.progress.played) {
+                plyr.progress.played.value = value;
+            }
+
+            // Update seek range input
+            if (plyr.buttons && plyr.buttons.seek) {
+                plyr.buttons.seek.value = value;
+            }
+        }
+
         // Update hover tooltip for seeking
         function _updateSeekTooltip(event) {
+            var duration = _getDuration();
+
             // Bail if setting not true
-            if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) {
+            if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
                 return;
             }
 
@@ -2305,7 +2335,7 @@
             }
 
             // Display the time a click would seek to
-            _updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip);
+            _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
 
             // Set position
             plyr.progress.tooltip.style.left = percent + "%";
@@ -2423,13 +2453,8 @@
             // Pause playback
             _pause();
 
-            // Set seek input to 0
-            if (plyr.buttons && plyr.buttons.seek) {
-                plyr.buttons.seek.value = 0;
-            }
-            if (plyr.progress && plyr.progress.played) {
-                plyr.progress.played.value = 0;
-            }
+            // Update seek range and progress
+            _updateSeekDisplay();
 
             // Cancel current network requests
             _cancelRequests();
@@ -2722,6 +2747,15 @@
 
                 // Reset UI
                 _checkPlaying();
+
+                // Show poster on end
+                if(config.showPosterOnEnd) {
+                    // Seek to 0
+                    _seek(0);
+
+                    // Re-load media
+                    plyr.media.load();
+                }
             });
 
             // Check for buffer progress
diff --git a/src/less/plyr.less b/src/less/plyr.less
index c2b5e55b..779f5eea 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -206,7 +206,6 @@
     font-size: @plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     span {
         border-radius: 2px;
@@ -436,7 +435,6 @@
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
     line-height: 1.3;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
@@ -498,9 +496,9 @@
     }
 }
 
-.plyr__progress--buffer[value],
-.plyr__progress--played[value],
-.plyr__volume--display[value] {
+.plyr__progress--buffer,
+.plyr__progress--played,
+.plyr__volume--display {
     position: absolute;
     left: 0;
     top: 50%;
@@ -530,8 +528,8 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played[value],
-.plyr__volume--display[value] {
+.plyr__progress--played,
+.plyr__volume--display {
     z-index: 1;
     color: @plyr-range-selected-bg;
     background: transparent;
@@ -553,7 +551,7 @@
         display: none;
     }
 }
-.plyr__progress--buffer[value] {
+.plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width .2s ease;
     }
@@ -564,18 +562,18 @@
         transition: width .2s ease;
     }            
 }
-.plyr--video .plyr__progress--buffer[value],
-.plyr--video .plyr__volume--display[value] {
+.plyr--video .plyr__progress--buffer,
+.plyr--video .plyr__volume--display {
     background: @plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer[value] { 
+.plyr--video .plyr__progress--buffer { 
     color: @plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer[value],
-.plyr--audio .plyr__volume--display[value] {
+.plyr--audio .plyr__progress--buffer,
+.plyr--audio .plyr__volume--display {
     background: @plyr-audio-range-track-bg;
 }
-.plyr--audio .plyr__progress--buffer[value] {
+.plyr--audio .plyr__progress--buffer {
     color: @plyr-audio-progress-buffered-bg;
 }
 
@@ -609,7 +607,6 @@
     vertical-align: middle;
     font-size: @plyr-font-size-small;
     line-height: .95;
-    -webkit-font-smoothing: subpixel-antialiased;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 465df084..79703bde 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -206,7 +206,6 @@
     font-size: $plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     span {
         border-radius: 2px;
@@ -436,7 +435,6 @@
     color: $plyr-tooltip-color;
     font-size: $plyr-font-size-small;
     line-height: 1.3;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
@@ -498,9 +496,9 @@
     }
 }
 
-.plyr__progress--buffer[value],
-.plyr__progress--played[value],
-.plyr__volume--display[value] {
+.plyr__progress--buffer,
+.plyr__progress--played,
+.plyr__volume--display {
     position: absolute;
     left: 0;
     top: 50%;
@@ -530,8 +528,8 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played[value],
-.plyr__volume--display[value] {
+.plyr__progress--played,
+.plyr__volume--display {
     z-index: 1;
     color: $plyr-range-selected-bg;
     background: transparent;
@@ -553,7 +551,7 @@
         display: none;
     }
 }
-.plyr__progress--buffer[value] {
+.plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width .2s ease;
     }
@@ -564,18 +562,18 @@
         transition: width .2s ease;
     }            
 }
-.plyr--video .plyr__progress--buffer[value],
-.plyr--video .plyr__volume--display[value] {
+.plyr--video .plyr__progress--buffer,
+.plyr--video .plyr__volume--display {
     background: $plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer[value] { 
+.plyr--video .plyr__progress--buffer { 
     color: $plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer[value],
-.plyr--audio .plyr__volume--display[value] {
+.plyr--audio .plyr__progress--buffer,
+.plyr--audio .plyr__volume--display {
     background: $plyr-audio-range-track-bg;
 }
-.plyr--audio .plyr__progress--buffer[value] {
+.plyr--audio .plyr__progress--buffer {
     color: $plyr-audio-progress-buffered-bg;
 }
 
@@ -609,7 +607,6 @@
     vertical-align: middle;
     font-size: $plyr-font-size-small;
     line-height: .95;
-    -webkit-font-smoothing: subpixel-antialiased;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {