date ok

package-lock.json

@@ -14,7 +14,6 @@
         "@nextcloud/l10n": "^2.2.0",
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/vue": "8.0.0-beta.4",
-        "date-format-parse": "^0.2.7",
         "vue": "^2",
         "vue-fragment": "^1.6.0",
         "vue-material-design-icons": "^5.2.0",
@@ -8358,19 +8357,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

package.json

@@ -23,7 +23,6 @@
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/vue": "8.0.0-beta.4",
-    "date-format-parse": "^0.2.7",
     "vue": "^2",
     "vue-fragment": "^1.6.0",
     "vue-material-design-icons": "^5.2.0",

src/components/Feed/List.vue

@@ -14,7 +14,7 @@
 						:url="episode.episodeImage" />
 				</template>
 				<template #subname>
-					{{ format(new Date(episode.episodeDuration*1000), 'H:mm:ss') }}
+					{{ formatTimer(new Date(episode.episodeDuration*1000)) }}
 				</template>
 				<template #actions>
 					<NcActionButton @click="play(episode)">
@@ -31,10 +31,9 @@
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
+import { formatTimeAgo, formatTimer } from '../../utils/time.js'
 import Play from 'vue-material-design-icons/Play.vue'
 import axios from '@nextcloud/axios'
-import { format } from 'date-format-parse'
-import { formatTimeAgo } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
@@ -74,7 +73,7 @@ export default {
 		}
 	},
 	methods: {
-		format,
+		formatTimer,
 		formatTimeAgo,
 		play(episode) {
 			this.$store.commit('player/play', episode)

src/components/Player/Bar.vue

@@ -4,16 +4,18 @@
 			autoplay
 			preload
 			:src="episode.episodeUrl"
+			@durationchange="duration = audio.duration"
 			@loadeddata="loading = false"
 			@pause="paused = audio.paused"
 			@play="paused = audio.paused"
 			@seeked="currentTime = audio.currentTime"
+			@timeupdate="currentTime = audio.currentTime"
 			@volumechange="volume = audio.volume" />
 		<NcLoadingIcon v-if="loading" />
 		<div v-if="!loading"
 			class="progress"
-			@click="(event) => audio.fastSeek(event.x * audio.duration / event.target.offsetWidth)">
-			<NcProgressBar size="medium" :value="currentTime * 100 / audio.duration" />
+			@click="(event) => audio.fastSeek(event.x * duration / event.target.offsetWidth)">
+			<NcProgressBar size="medium" :value="currentTime * 100 / duration" />
 		</div>
 		<div v-if="!loading" class="player">
 			<img :src="episode.episodeImage">
@@ -28,9 +30,9 @@
 			<Pause v-if="!paused" :size="50" @click="() => audio.pause()" />
 			<Play v-if="paused" :size="50" @click="() => audio.play()" />
 			<div class="time">
-				<span class="current">{{ currentTime }}</span>
+				<span class="current">{{ formatTimer(new Date(currentTime*1000)) }}</span>
 				<span class="divider">/</span>
-				<span class="length">{{ audio.duration }}</span>
+				<span class="length">{{ formatTimer(new Date(duration*1000)) }}</span>
 			</div>
 			<div class="volume">
 				<VolumeHigh v-if="audio.volume > 0.7" :size="30" />
@@ -50,6 +52,7 @@ import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
 import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
 import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'
+import { formatTimer } from '../../utils/time.js'
 
 export default {
 	name: 'Bar',
@@ -66,6 +69,7 @@ export default {
 	data() {
 		return {
 			currentTime: 0,
+			duration: 0,
 			loading: true,
 			paused: true,
 			volume: 0,
@@ -82,6 +86,9 @@ export default {
 			return atob(this.$route.params.url)
 		},
 	},
+	methods: {
+		formatTimer,
+	},
 }
 </script>
 

src/utils/time.js

@@ -25,3 +25,15 @@ export const formatTimeAgo = (date) => {
 		duration /= division.amount
 	}
 }
+
+export const formatTimer = (date) => {
+	const minutes = date.getUTCMinutes().toString().padStart(2, 0)
+	const seconds = date.getUTCSeconds().toString().padStart(2, 0)
+	let timer = `${minutes}:${seconds}`
+
+	if (date.getUTCHours()) {
+		timer = `${date.getUTCHours()}:${timer}`
+	}
+
+	return timer
+}