diff --git a/package.json b/package.json
index 2adeb395..26154eb0 100644
--- a/package.json
+++ b/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",
diff --git a/src/scripts/ViewerControlsVideo.vue b/src/scripts/ViewerControlsVideo.vue
index 5a0236a9..8969a785 100644
--- a/src/scripts/ViewerControlsVideo.vue
+++ b/src/scripts/ViewerControlsVideo.vue
@@ -12,6 +12,7 @@
+
@@ -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);
}
}
};
diff --git a/src/scripts/default.js b/src/scripts/default.js
index 9d0334f4..c9d1d3ae 100644
--- a/src/scripts/default.js
+++ b/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'
}
});
-});
\ No newline at end of file
+});
diff --git a/src/scripts/helper.js b/src/scripts/helper.js
index f6ad6bef..134ff4ce 100644
--- a/src/scripts/helper.js
+++ b/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 : {
diff --git a/yarn.lock b/yarn.lock
index ff57a7f2..02cb6a67 100644
--- a/yarn.lock
+++ b/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"