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"