From 06af43c95e3d13262e05c940acb4ead05277c357 Mon Sep 17 00:00:00 2001
From: Omar Roth <omarroth@hotmail.com>
Date: Sun, 5 Aug 2018 08:58:03 -0500
Subject: [PATCH] Add timeDisplay to player

---
 assets/css/default.css        |  6 ++++++
 src/invidious/views/embed.ecr | 33 ++++++++++++++++++---------------
 src/invidious/views/watch.ecr | 35 +++++++++++++++++++----------------
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 868f4446c..a0c14193a 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -179,3 +179,9 @@ div {
 .video-js:hover .vjs-big-play-button {
   background-color: rgba(35, 35, 35, 0.75);
 }
+
+.video-js .vjs-current-time,
+.video-js .vjs-time-divider,
+.video-js .vjs-duration {
+  display: block;
+}
diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index ab3f18fa8..222b02f61 100644
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@@ -63,20 +63,23 @@ video, #my_video, .video-js, .vjs-default-skin
 
 <script>
 var options = {
-    preload: 'auto',
-    playbackRates: [0.5, 1, 1.5, 2],
-    controlBar: {
-      children: [
-         'playToggle',
-         'volumePanel',
-         'progressControl',
-         'remainingTimeDisplay',
-         'captionsButton',
-         'qualitySelector',
-         'playbackRateMenuButton',
-         'fullscreenToggle',
-      ],
-   },
+  preload: 'auto',
+  playbackRates: [0.5, 1, 1.5, 2],
+  controlBar: {
+    children: [
+      'playToggle',
+      'volumePanel',
+      'currentTimeDisplay',
+      'timeDivider',
+      'durationDisplay',
+      'progressControl',
+      'remainingTimeDisplay',
+      'captionsButton',
+      'qualitySelector',
+      'playbackRateMenuButton',
+      'fullscreenToggle'
+    ]
+  }
 };
 
 var shareOptions = {
@@ -87,7 +90,7 @@ var shareOptions = {
   description: "<%= description %>",
   image: '<%= thumbnail %>',
   embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
-  src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
+    src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
 };
 
 var player = videojs('player', options, function() {
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index af6ed5e90..89726ebe5 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -71,21 +71,24 @@
 
 <script>
 var options = {
-    aspectRatio: '16:9',
-    preload: 'auto',
-    playbackRates: [0.5, 1, 1.5, 2],
-    controlBar: {
-      children: [
-         'playToggle',
-         'volumePanel',
-         'progressControl',
-         'remainingTimeDisplay',
-         'captionsButton',
-         'qualitySelector',
-         'playbackRateMenuButton',
-         'fullscreenToggle',
-      ],
-   },
+  aspectRatio: '16:9',
+  preload: 'auto',
+  playbackRates: [0.5, 1, 1.5, 2],
+  controlBar: {
+    children: [
+      'playToggle',
+      'volumePanel',
+      'currentTimeDisplay',
+      'timeDivider',
+      'durationDisplay',
+      'progressControl',
+      'remainingTimeDisplay',
+      'captionsButton',
+      'qualitySelector',
+      'playbackRateMenuButton',
+      'fullscreenToggle'
+    ]
+  }
 };
 
 var shareOptions = {
@@ -96,7 +99,7 @@ var shareOptions = {
   description: "<%= description %>",
   image: '<%= thumbnail %>',
   embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
-  src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
+    src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
 };
 
 var player = videojs('player', options, function() {