Merge pull request #562 from demoneaux/video-progress

Add support for video progress time in player controls.

renderer/index.css

@@ -827,6 +827,11 @@ body.drag .app::after {
   outline: none;
 }
 
+.player-controls .time {
+  float: left;
+  line-height: 33px;
+}
+
 .player .playback-bar:hover .loading-bar {
   height: 5px;
 }

renderer/views/player.js

@@ -426,6 +426,14 @@ function renderPlayerControls (state) {
     </div>
   `)
 
+  // Show video playback progress
+  var videoProgress = formatPlaybackProgress(state.playing.currentTime, state.playing.duration)
+  elements.push(hx`
+    <span.time>
+      ${videoProgress[0]} / ${videoProgress[1]}
+    </span>
+  `)
+
   // Finally, the big button in the center plays or pauses the video
   elements.push(hx`
     <i class='icon play-pause' onclick=${dispatcher('playPause')}>
@@ -540,3 +548,40 @@ function cssBackgroundImageDarkGradient () {
   return 'radial-gradient(circle at center, ' +
     'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)'
 }
+
+// Format the playback time of the video
+function formatPlaybackProgress (currentTime, duration) {
+  if (
+    typeof currentTime !== 'number' || typeof duration !== 'number' ||
+    isNaN(currentTime) || isNaN(duration)
+  ) {
+    return ['00:00', '00:00']
+  }
+
+  var durationHours = formatTimePart(duration / 3600)
+  var durationMinutes = formatTimePart(duration % 3600 / 60)
+  var durationSeconds = formatTimePart(duration % 60)
+
+  var durationString =
+    (durationHours !== '00' ? durationHours + ':' : '') +
+    durationMinutes + ':' +
+    durationSeconds
+
+  var currentTimeHours = durationHours !== '00' && formatTimePart(currentTime / 3600)
+  var currentTimeMinutes = formatTimePart(currentTime % 3600 / 60)
+  var currentTimeSeconds = formatTimePart(currentTime % 60)
+
+  var currentTimeString =
+    (currentTimeHours ? currentTimeHours + ':' : '') +
+    currentTimeMinutes + ':' +
+    currentTimeSeconds
+
+  return [currentTimeString, durationString]
+}
+
+function formatTimePart (num) {
+  num = Math.floor(num)
+  return num < 100
+    ? ('00' + num).slice(-2)
+    : num
+}