tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Share common time formatting for NP.

This commit is contained in:
Buster Neece 2023-01-10 13:26:40 -06:00
parent 20a9439f64
commit 0bab9de01c
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
3 changed files with 57 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/vue/components/Public/Player.vue
View File

@ -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, {

27
frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
View File

@ -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>

42
frontend/vue/functions/useNowPlaying.js
View File

@ -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
};
}