kalugin66/webtorrent-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use tabular nums and fixed width for no jitter on time

Browse Source
This commit is contained in:
Emil Bay
2017-08-28 19:02:26 +02:00
parent a51ab3573e
commit 90347c72e0
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/pages/player-page.js
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,18 @@ 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 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 (totalHours > 0) {
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
} }

1
static/main.css
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 {