Merge pull request #1233 from emilbayes/nojitter-time

Use tabular nums and fixed width for no jitter on time
This commit is contained in:
Diego Rodríguez Baquero
2017-09-01 18:02:23 -05:00
committed by GitHub
2 changed files with 8 additions and 5 deletions

View File

@@ -523,8 +523,8 @@ function renderPlayerControls (state) {
)) ))
// Show video playback progress // Show video playback progress
const currentTimeStr = formatTime(state.playing.currentTime) const currentTimeStr = formatTime(state.playing.currentTime, state.playing.duration)
const durationStr = formatTime(state.playing.duration) const durationStr = formatTime(state.playing.duration, state.playing.duration)
elements.push(( elements.push((
<span key='time' className='time float-left'> <span key='time' className='time float-left'>
{currentTimeStr} / {durationStr} {currentTimeStr} / {durationStr}
@@ -646,17 +646,19 @@ function cssBackgroundImageDarkGradient () {
'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)' 'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)'
} }
function formatTime (time) { function formatTime (time, total) {
if (typeof time !== 'number' || Number.isNaN(time)) { if (typeof time !== 'number' || Number.isNaN(time)) {
return '0:00' return '0:00'
} }
let totalHours = Math.floor(total / 3600)
let totalMinutes = Math.floor(total % 3600 / 60)
let hours = Math.floor(time / 3600) let hours = Math.floor(time / 3600)
let minutes = Math.floor(time % 3600 / 60) let minutes = Math.floor(time % 3600 / 60)
if (hours > 0) { if (totalMinutes > 9) {
minutes = zeroFill(2, minutes) minutes = zeroFill(2, minutes)
} }
let seconds = zeroFill(2, Math.floor(time % 60)) let seconds = zeroFill(2, Math.floor(time % 60))
return (hours > 0 ? hours + ':' : '') + minutes + ':' + seconds return (totalHours > 0 ? hours + ':' : '') + minutes + ':' + seconds
} }

View File

@@ -615,6 +615,7 @@ body.drag .app::after {
font-size: 13px; font-size: 13px;
margin: 9px 8px 8px 8px; margin: 9px 8px 8px 8px;
opacity: 0.8; opacity: 0.8;
font-variant-numeric: tabular-nums;
} }
.player .controls .icon.closed-caption { .player .controls .icon.closed-caption {