fix duration format and add hours

packages/client/src/components/media-banner.vue

@@ -31,16 +31,6 @@ defineProps<{
 	media: foundkey.entities.DriveFile;
 }>();
 
-const audioEl = $ref<HTMLAudioElement | null>();
-let hide = $ref(true);
-
-function volumechange(): void {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
-}
-
-onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/wavesurfer.vue

@@ -4,16 +4,16 @@
 	<div class="controls">
 		<button class="play" @click="playPause()">
 			<i class="fas fa-pause" v-if="playing"></i>
-			<i class="fas fa-play" v-if="!playing"></i>
+			<i class="fas fa-play" v-else></i>
 		</button>
 		<button class="stop" @click="stop()">
 			<i class="fas fa-stop"></i>
 		</button>
-		<input class="progress" type="range" min="0" :max="duration" step="0.1" v-model="position" @change="player.seekTo(position / duration)" @mousedown="isSeeking = true" @mouseup="isSeeking = false" />
+		<input class="progress" type="range" min="0" :max="duration" step="0.1" v-model="position" @input="player.seekTo(position / duration)" @mousedown="initSeek()" @mouseup="endSeek()" />
 		<span>
 			{{ formatTime(duration) }}
 		</span>
-		<input class="volume" type="range" min="0" max="1" step="0.1" v-model="volume" @change="player.setVolume(volume)" />
+		<input class="volume" type="range" min="0" max="1" step="0.1" v-model="volume" @input="player.setVolume(volume)" />
 		<a class="download" :href="src" target="_blank">
 			<i class="fas fa-download"></i>
 		</a>
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import * as foundkey from 'foundkey-js';
 import WaveSurfer from 'wavesurfer.js';
 import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor';
@@ -31,19 +31,19 @@ const props = defineProps<{
 	src: foundkey.entities.DriveFile
 }>();
 
-let playing = ref(false);
-let position = ref(0);
-let volume = ref(1);
-let isSeeking = ref(false);
-let duration = ref(1);
-let display = ref<HTMLDivElement>(null);
-let player = ref(null);
+let playing = $ref(false);
+let position = $ref(0);
+let volume = $ref(1);
+let isSeeking = $ref(false);
+let duration = $ref(1);
+let display = $ref<HTMLDivElement>(null);
+let player = $ref(null);
 
 const theme = JSON.parse(localStorage.theme);
 
 onMounted(() => {
-	player.value = WaveSurfer.create({
-		container: display.value,
+	player = WaveSurfer.create({
+		container: display,
 		barGab: 1,
 		barWidth: 2,
 		barRadius: 2,
@@ -61,44 +61,65 @@ onMounted(() => {
 		]
 	});
 
-	player.value.load(props.src.url);
+	player.load(props.src.url);
 
-	player.value.on('ready', () => {
-		volume.value = player.value.getVolume();
-		duration.value = player.value.getDuration();
+	player.on('ready', () => {
+		volume = player.getVolume();
+		duration = player.getDuration();
 	});
 
-	player.value.on('finish', () => {
-		playing.value = player.value.isPlaying();
+	player.on('finish', () => {
+		playing = player.isPlaying();
 	});
 
-	player.value.on('audioprocess', () => {
-		if (!isSeeking.value) {
-			position.value = player.value.getCurrentTime();
+	player.on('audioprocess', () => {
+		if (!isSeeking) {
+			position = player.getCurrentTime();
 		}
 	});
 });
 
 function formatTime(value) {
-	let min = Math.floor(value / 60);
+	let hour = 0;
+	if ((value / 60) > 0) {
+		hour = Math.floor(value / 3600);
+	}
+	let min = Math.floor((value / 60) - hour * 60);
 	let sec = Math.floor(value - (min * 60));
 	if (sec < 10) {
 		sec = '0' + sec;
 	}
 	if (min < 10) {
-		sec = '0' + min;
+		min = '0' + min;
+	}
+	if (hour > 0) {
+		return hour + ':' + min + ':' + sec;
 	}
 	return min + ':' + sec;
 }
 
 function playPause() {
-	player.value.playPause();
-	playing.value = player.value.isPlaying();
+	player.playPause();
+	playing = player.isPlaying();
 }
 
 function stop() {
-	player.value.stop();
-	playing.value = player.value.isPlaying();
+	player.stop();
+	playing = player.isPlaying();
+}
+
+function initSeek() {
+	isSeeking = true;
+	if (playing) {
+		player.playPause();
+	}
+}
+
+function endSeek() {
+	isSeeking = false;
+	if (playing) {
+		player.playPause();
+	}
 }
 
 </script>