Share common time formatting for NP.

frontend/vue/components/Public/Player.vue

@@ -54,11 +54,11 @@
                 </div>
 
                 <div
-                    v-if="currentTimeElapsedDisplay != null"
+                    v-if="currentTrackElapsedDisplay != null"
                     class="time-display"
                 >
                     <div class="time-display-played text-secondary">
-                        {{ currentTimeElapsedDisplay }}
+                        {{ currentTrackElapsedDisplay }}
                     </div>
                     <div class="time-display-progress">
                         <div class="progress">
@@ -70,7 +70,7 @@
                         </div>
                     </div>
                     <div class="time-display-total text-secondary">
-                        {{ currentTimeTotalDisplay }}
+                        {{ currentTrackDurationDisplay }}
                     </div>
                 </div>
             </div>
@@ -147,7 +147,6 @@ import AudioPlayer from '~/components/Common/AudioPlayer';
 import PlayButton from "~/components/Common/PlayButton";
 import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useLocalStorage} from "@vueuse/core";
-import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
 import useNowPlaying from "~/functions/useNowPlaying";
 import playerProps from "~/components/Public/playerProps";
@@ -159,7 +158,12 @@ const props = defineProps({
 
 const emit = defineEmits(['np_updated']);
 
-const {np, currentTrackElapsed, currentTrackDuration} = useNowPlaying(props);
+const {
+    np,
+    currentTrackPercent,
+    currentTrackDurationDisplay,
+    currentTrackElapsedDisplay
+} = useNowPlaying(props);
 
 const currentStream = shallowRef({
     'name': '',
@@ -204,40 +208,6 @@ const streams = computed(() => {
     return allStreams;
 });
 
-const currentTrackPercent = computed(() => {
-    let $currentTrackElapsed = currentTrackElapsed.value;
-    let $currentTrackDuration = currentTrackDuration.value;
-
-    if (!$currentTrackDuration) {
-        return 0;
-    }
-    if ($currentTrackElapsed > $currentTrackDuration) {
-        return 100;
-    }
-
-    return ($currentTrackElapsed / $currentTrackDuration) * 100;
-});
-
-const currentTimeElapsedDisplay = computed(() => {
-    let $currentTrackElapsed = currentTrackElapsed.value;
-    let $currentTrackDuration = currentTrackDuration.value;
-
-    if (!$currentTrackDuration) {
-        return null;
-    }
-
-    if ($currentTrackElapsed > $currentTrackDuration) {
-        $currentTrackElapsed = $currentTrackDuration;
-    }
-
-    return formatTime($currentTrackElapsed);
-});
-
-const currentTimeTotalDisplay = computed(() => {
-    let $currentTrackDuration = currentTrackDuration.value;
-    return ($currentTrackDuration) ? formatTime($currentTrackDuration) : null;
-});
-
 const $player = ref(); // Template ref
 
 const volume = useLocalStorage('player_volume', 55, {

frontend/vue/components/Stations/Profile/NowPlayingPanel.vue

@@ -85,10 +85,11 @@
                                             : {{ np.now_playing.playlist }}</small>
                                     </div>
                                     <div
-                                        v-if="timeDisplay"
                                         class="nowplaying-progress"
                                     >
-                                        <small>{{ timeDisplay }}</small>
+                                        <small>
+                                            {{ currentTrackElapsedDisplay }} / {{ currentTrackDurationDisplay }}
+                                        </small>
                                     </div>
                                 </div>
                             </div>
@@ -200,7 +201,6 @@ import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
 import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
-import formatTime from "~/functions/formatTime";
 import nowPlayingPanelProps from "~/components/Stations/Profile/nowPlayingPanelProps";
 import useNowPlaying from "~/functions/useNowPlaying";
 
@@ -208,7 +208,11 @@ const props = defineProps({
     ...nowPlayingPanelProps,
 });
 
-const {np, currentTrackDuration, currentTrackElapsed} = useNowPlaying(props);
+const {
+    np,
+    currentTrackDurationDisplay,
+    currentTrackElapsedDisplay
+} = useNowPlaying(props);
 
 const {$ngettext} = useTranslate();
 
@@ -224,19 +228,4 @@ const langListeners = computed(() => {
 const isLiquidsoap = computed(() => {
     return props.backendType === BACKEND_LIQUIDSOAP;
 });
-
-const timeDisplay = computed(() => {
-    let currentTrackDurationValue = currentTrackDuration.value ?? null;
-    let currentTrackElapsedValue = currentTrackElapsed.value ?? null;
-
-    if (!currentTrackDurationValue) {
-        return null;
-    }
-
-    if (currentTrackElapsedValue > currentTrackDurationValue) {
-        currentTrackElapsedValue = currentTrackDurationValue;
-    }
-
-    return formatTime(currentTrackElapsedValue) + ' / ' + formatTime(currentTrackDurationValue);
-});
 </script>

frontend/vue/functions/useNowPlaying.js

@@ -1,8 +1,9 @@
 import NowPlaying from '~/components/Entity/NowPlaying';
-import {onMounted, ref, shallowRef, watch} from "vue";
+import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useEventSource, useIntervalFn} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";
 import {has} from "lodash";
+import formatTime from "~/functions/formatTime";
 
 export const nowPlayingProps = {
     nowPlayingUri: {
@@ -133,10 +134,47 @@ export default function useNowPlaying(props) {
         );
     });
 
+    const currentTrackPercent = computed(() => {
+        let $currentTrackElapsed = currentTrackElapsed.value;
+        let $currentTrackDuration = currentTrackDuration.value;
+
+        if (!$currentTrackDuration) {
+            return 0;
+        }
+        if ($currentTrackElapsed > $currentTrackDuration) {
+            return 100;
+        }
+
+        return ($currentTrackElapsed / $currentTrackDuration) * 100;
+    });
+
+    const currentTrackDurationDisplay = computed(() => {
+        let $currentTrackDuration = currentTrackDuration.value;
+        return ($currentTrackDuration) ? formatTime($currentTrackDuration) : null;
+    });
+
+    const currentTrackElapsedDisplay = computed(() => {
+        let $currentTrackElapsed = currentTrackElapsed.value;
+        let $currentTrackDuration = currentTrackDuration.value;
+
+        if (!$currentTrackDuration) {
+            return null;
+        }
+
+        if ($currentTrackElapsed > $currentTrackDuration) {
+            $currentTrackElapsed = $currentTrackDuration;
+        }
+
+        return formatTime($currentTrackElapsed);
+    });
+    
     return {
         np,
         currentTime,
         currentTrackDuration,
-        currentTrackElapsed
+        currentTrackElapsed,
+        currentTrackPercent,
+        currentTrackDurationDisplay,
+        currentTrackElapsedDisplay
     };
 }