From 90347c72e00e0b546a5fe8e27d2386892ee3bd30 Mon Sep 17 00:00:00 2001
From: Emil Bay <github@tixz.dk>
Date: Mon, 28 Aug 2017 19:02:26 +0200
Subject: [PATCH 1/2] Use tabular nums and fixed width for no jitter on time

---
 src/renderer/pages/player-page.js | 11 ++++++-----
 static/main.css                   |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js
index d561973bbd..c94405b544 100644
--- a/src/renderer/pages/player-page.js
+++ b/src/renderer/pages/player-page.js
@@ -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
 }
diff --git a/static/main.css b/static/main.css
index 1f1bd9bef1..d1258dd503 100644
--- a/static/main.css
+++ b/static/main.css
@@ -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 {

From 4b501ab90b468e7fb56bded47219f27c5a57e6e4 Mon Sep 17 00:00:00 2001
From: Emil Bay <github@tixz.dk>
Date: Mon, 28 Aug 2017 19:41:30 +0200
Subject: [PATCH 2/2] Fixed width minutes

---
 src/renderer/pages/player-page.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js
index c94405b544..abcf502a99 100644
--- a/src/renderer/pages/player-page.js
+++ b/src/renderer/pages/player-page.js
@@ -652,9 +652,10 @@ function formatTime (time, total) {
   }
 
   let totalHours = Math.floor(total / 3600)
+  let totalMinutes = Math.floor(total % 3600 / 60)
   let hours = Math.floor(time / 3600)
   let minutes = Math.floor(time % 3600 / 60)
-  if (totalHours > 0) {
+  if (totalMinutes > 9) {
     minutes = zeroFill(2, minutes)
   }
   let seconds = zeroFill(2, Math.floor(time % 60))