diff --git a/renderer/index.css b/renderer/index.css index f6a727ae..ecdfdaf5 100644 --- a/renderer/index.css +++ b/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; } diff --git a/renderer/views/player.js b/renderer/views/player.js index 5fee9449..14e68780 100644 --- a/renderer/views/player.js +++ b/renderer/views/player.js @@ -426,6 +426,14 @@ function renderPlayerControls (state) { `) + // Show video playback progress + var videoProgress = formatPlaybackProgress(state.playing.currentTime, state.playing.duration) + elements.push(hx` + + ${videoProgress[0]} / ${videoProgress[1]} + + `) + // Finally, the big button in the center plays or pauses the video elements.push(hx` @@ -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 +}