Add time display to viewer controls

package.json

@@ -4,6 +4,8 @@
   "description": "Viewer for pictures and videos integrated in the files app",
   "dependencies": {
     "easygettext": "^2.12.0",
+    "@types/moment-duration-format": "^2.2.2",
+    "moment-duration-format": "^2.3.2",
     "swiper": "^4.5.1",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",

src/scripts/ViewerControlsVideo.vue

@@ -12,6 +12,7 @@
 				<!-- Swipe controls -->
 			</nav-controls>
 			<div class="viewer__controls__subgroup">
+				<span class="viewer__control__count" v-text="showTimeInfo()"></span>
 				<button class="viewer__control icon__replay" :disabled="currentTime === 0" @click="skipTo(0)" v-translate>Replay</button>
 				<button class="viewer__control icon__play" :class="[isPaused ? 'icon__play' : 'icon__pause']" @click="togglePlay()" v-translate>Play</button>
 				<button class="viewer__control" :class="[isMuted ? 'icon__volume_down' : 'icon__volume_up']" @click="toggleSound()" v-translate>Mute</button>
@@ -153,6 +154,12 @@ export default {
 		handleTimeupdate () {
 			this.currentTime = Math.round(this.$video.currentTime);
 		},
+
+		showTimeInfo() {
+			let current = this.getDisplayTime(this.currentTime);
+			let duration = this.totalDisplayTime;
+			return `${current} / ${duration}`;
+		}
 	},
 	mounted () {
 		this.$bus.$on('swiper:slideChangeTransitionEnd', () => {
@@ -207,6 +214,12 @@ export default {
 		},
 		$scrubber () {
 			return $('.viewer__control__scrubber').get(0);
+		},
+
+		totalDisplayTime () {
+			// this.duration is not rounded as opposed to this.currentTime
+			let duration = Math.round(this.duration);
+			return this.getDisplayTime(duration);
 		}
 	}
 };

src/scripts/default.js

@@ -18,6 +18,9 @@ Vue.use(VueRouter);
 
 // --- Global Components
 
+import moment from 'moment';
+import 'moment-duration-format';
+
 import {
 	helper,
 	directive
@@ -71,4 +74,4 @@ $(document).ready(() => {
 			name: 'Mediaviewer'
 		}
 	});
-});
+});

src/scripts/helper.js

@@ -1,4 +1,5 @@
 const appName = require('../../package.json').name;
+var moment = require("moment");
 
 const helper = {
 	methods: {
@@ -18,6 +19,16 @@ const helper = {
 
 		closeViewer () {
 			this.$router.push('/');
+		},
+
+		getDisplayTime (time) {
+			if (isNaN(time) || time === 0) {
+				return "00:00";
+			}
+			// when switching between previews, currentTime is not rounded somehow
+			time = Math.round(time);
+			var formatted = moment.duration(time, 'seconds').format("hh:mm:ss", { trim: "mid" });
+			return formatted;
 		}
 	},
 	computed : {

yarn.lock

@@ -720,6 +720,13 @@
   dependencies:
     "@types/babel-types" "*"
 
+"@types/moment-duration-format@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@types/moment-duration-format/-/moment-duration-format-2.2.2.tgz#da0c9501861661d19fdb62415907a93c44709a81"
+  integrity sha512-CuYswsMI3y5uR5sD9i/VUqIbZrsYN2eaCs7nH3qpDl2CZlNI48mjMf4ve2RpQ/65irprtnQVetfnea9my+jqcg==
+  dependencies:
+    moment ">=2.14.0"
+
 "@types/node@*":
   version "13.9.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.9.3.tgz#6356df2647de9eac569f9a52eda3480fa9e70b4d"
@@ -3555,6 +3562,16 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
+moment-duration-format@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/moment-duration-format/-/moment-duration-format-2.3.2.tgz#5fa2b19b941b8d277122ff3f87a12895ec0d6212"
+  integrity sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ==
+
+moment@>=2.14.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"