Use tabular nums and fixed width for no jitter on time
This commit is contained in:
@@ -523,8 +523,8 @@ function renderPlayerControls (state) {
|
||||
))
|
||||
|
||||
// Show video playback progress
|
||||
const currentTimeStr = formatTime(state.playing.currentTime)
|
||||
const durationStr = formatTime(state.playing.duration)
|
||||
const currentTimeStr = formatTime(state.playing.currentTime, state.playing.duration)
|
||||
const durationStr = formatTime(state.playing.duration, state.playing.duration)
|
||||
elements.push((
|
||||
<span key='time' className='time float-left'>
|
||||
{currentTimeStr} / {durationStr}
|
||||
@@ -646,17 +646,18 @@ function cssBackgroundImageDarkGradient () {
|
||||
'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)) {
|
||||
return '0:00'
|
||||
}
|
||||
|
||||
let totalHours = Math.floor(total / 3600)
|
||||
let hours = Math.floor(time / 3600)
|
||||
let minutes = Math.floor(time % 3600 / 60)
|
||||
if (hours > 0) {
|
||||
if (totalHours > 0) {
|
||||
minutes = zeroFill(2, minutes)
|
||||
}
|
||||
let seconds = zeroFill(2, Math.floor(time % 60))
|
||||
|
||||
return (hours > 0 ? hours + ':' : '') + minutes + ':' + seconds
|
||||
return (totalHours > 0 ? hours + ':' : '') + minutes + ':' + seconds
|
||||
}
|
||||
|
||||
@@ -615,6 +615,7 @@ body.drag .app::after {
|
||||
font-size: 13px;
|
||||
margin: 9px 8px 8px 8px;
|
||||
opacity: 0.8;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.player .controls .icon.closed-caption {
|
||||
|
||||
Reference in New Issue
Block a user