@@ -141,7 +253,7 @@
href=""
:aria-label="labels.restart"
class="left floated timer discrete start"
- @click.prevent="setCurrentTime(0)"
+ @click.prevent="emit('touch-progress', 0)"
>{{ currentTimeFormatted }}
{{ durationFormatted }}
@@ -154,11 +266,11 @@
@@ -169,7 +281,7 @@
:title="labels.play"
:aria-label="labels.play"
class="control"
- @click.prevent.stop="resumePlayback"
+ @click.prevent.stop="resume"
>
@@ -179,7 +291,7 @@
:title="labels.pause"
:aria-label="labels.pause"
class="control"
- @click.prevent.stop="pausePlayback"
+ @click.prevent.stop="pause"
>
@@ -189,7 +301,7 @@
:aria-label="labels.next"
class="control"
:disabled="hasNext || null"
- @click.prevent.stop="$store.dispatch('queue/next')"
+ @click.prevent.stop="next"
>
@@ -211,7 +323,7 @@
-
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 73b87ab9f..047d5b72a 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -334,6 +334,7 @@ import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
import { useThrottleFn, useTimeoutFn, useToggle } from '@vueuse/core'
import { computed, watch } from 'vue'
import { useGettext } from 'vue3-gettext'
+import useQueue from '~/composables/useQueue'
export default {
components: {
@@ -357,17 +358,7 @@ export default {
store.commit('ui/queueFocused', ['queue', 'player'].indexOf(store.state.ui.queueFocused) > -1 ? null : 'player')
}
- const shuffledMessage = $pgettext('Content/Queue/Message', 'Queue shuffled!')
- const shuffle = useThrottleFn(() => {
- if (queueIsEmpty.value) return
- useTimeoutFn(async () => {
- await store.dispatch('queue/shuffle')
- store.commit('ui/addMessage', {
- content: shuffledMessage,
- date: new Date()
- })
- }, 100)
- }, 101, false)
+ const { shuffle } = useQueue()
const seek = (step) => {
if (step > 0) {
diff --git a/front/src/composables/usePlayer.ts b/front/src/composables/usePlayer.ts
new file mode 100644
index 000000000..4791efcc4
--- /dev/null
+++ b/front/src/composables/usePlayer.ts
@@ -0,0 +1,47 @@
+import { useStore } from "~/store"
+import { computed } from "vue"
+
+export default () => {
+ const store = useStore()
+ const looping = computed(() => store.state.player.looping)
+ const playing = computed(() => store.state.player.playing)
+ const loading = computed(() => store.state.player.isLoadingAudio)
+ const errored = computed(() => store.state.player.errored)
+ const focused = computed(() => store.state.ui.queueFocused === 'player')
+
+ const volume = computed(() => store.state.player.volume)
+
+ const duration = computed(() => store.state.player.duration)
+ const currentTime = computed(() => store.state.player.currentTime)
+
+ const durationFormatted = computed(() => store.getters['player/durationFormatted'])
+ const currentTimeFormatted = computed(() => store.getters['player/currentTimeFormatted'])
+
+ const progress = computed(() => store.getters['player/progress'])
+ const bufferProgress = computed(() => store.state.player.bufferProgress)
+
+ const pause = () => store.dispatch('player/pausePlayback')
+ const resume = () => store.dispatch('player/resumePlayback')
+
+ return {
+ looping,
+ playing,
+ loading,
+ errored,
+ focused,
+
+ volume,
+
+ duration,
+ currentTime,
+
+ durationFormatted,
+ currentTimeFormatted,
+
+ progress,
+ bufferProgress,
+
+ pause,
+ resume
+ }
+}
\ No newline at end of file
diff --git a/front/src/composables/useQueue.ts b/front/src/composables/useQueue.ts
new file mode 100644
index 000000000..ab88e957f
--- /dev/null
+++ b/front/src/composables/useQueue.ts
@@ -0,0 +1,107 @@
+import { useTimeoutFn, useThrottleFn } from "@vueuse/core"
+import { useTimeAgo, useNow } from '@vueuse/core'
+import { useGettext } from "vue3-gettext"
+import { useStore } from "~/store"
+import { ref, computed } from "vue"
+import { Track } from "~/types"
+import { sum } from 'lodash-es'
+
+export default () => {
+ const store = useStore()
+ const { $pgettext } = useGettext()
+
+ const currentTrack = computed(() => store.getters['queue/currentTrack'])
+ const currentIndex = computed(() => store.state.queue.currentIndex)
+ const hasNext = computed(() => store.getters['queue/hasNext'])
+ const isEmpty = computed(() => store.getters['queue/isEmpty'])
+
+ const removeTrack = (index: number) => store.dispatch('queue/cleanTrack', index)
+ const clear = () => store.dispatch('queue/clean')
+
+ const next = () => store.dispatch('queue/next')
+ const previous = () => store.dispatch('queue/previous')
+
+ const focused = computed(() => store.state.ui.queueFocused === 'queue')
+
+ //
+ // Track list
+ //
+ const tracksChangeBuffer = ref
(null)
+ const tracks = computed({
+ get: () => store.state.queue.tracks,
+ set: (value) => (tracksChangeBuffer.value = value)
+ })
+
+ const reorder = (oldIndex: number, newIndex: number) => {
+ store.commit('queue/reorder', {
+ tracks: tracksChangeBuffer.value ?? tracks.value,
+ oldIndex,
+ newIndex
+ })
+
+ tracksChangeBuffer.value = null
+ }
+
+ //
+ // Shuffle
+ //
+ const isShuffling = ref(false)
+
+ const forceShuffle = useThrottleFn(() => {
+ isShuffling.value = true
+
+ useTimeoutFn(async () => {
+ await store.dispatch('queue/shuffle')
+ store.commit('ui/addMessage', {
+ content: $pgettext('Content/Queue/Message', 'Queue shuffled!'),
+ date: new Date()
+ })
+
+ isShuffling.value = false
+ }, 100)
+ })
+
+ const shuffle = useThrottleFn(() => {
+ if (isShuffling.value || isEmpty.value) {
+ return
+ }
+
+ return forceShuffle()
+ }, 101, false)
+
+ //
+ // Time left
+ //
+ const now = useNow()
+ const endsIn = useTimeAgo(computed(() => {
+ const seconds = sum(
+ tracks.value
+ .slice(currentIndex.value)
+ .map((track) => track.uploads?.[0]?.duration ?? 0)
+ )
+
+ const date = new Date(now.value)
+ date.setSeconds(date.getSeconds() + seconds)
+ return date
+ }))
+
+ return {
+ currentTrack,
+ hasNext,
+ isEmpty,
+
+ removeTrack,
+ clear,
+ next,
+ previous,
+
+ tracks,
+ reorder,
+
+ shuffle,
+ forceShuffle,
+
+ endsIn,
+ focused
+ }
+}
\ No newline at end of file
diff --git a/front/src/store/queue.ts b/front/src/store/queue.ts
index 10776aa9d..3f603d58f 100644
--- a/front/src/store/queue.ts
+++ b/front/src/store/queue.ts
@@ -111,9 +111,11 @@ const store: Module = {
cleanTrack ({ state, dispatch, commit }, index) {
// are we removing current playin track
const current = index === state.currentIndex
+
if (current) {
dispatch('player/stop', null, { root: true })
}
+
commit('splice', { start: index, size: 1 })
if (index < state.currentIndex) {
commit('currentIndex', state.currentIndex - 1)
@@ -127,6 +129,7 @@ const store: Module = {
// we play next track, which now have the same index
commit('currentIndex', index)
}
+
if (state.currentIndex + 1 === state.tracks.length) {
dispatch('radios/populateQueue', null, { root: true })
}
@@ -171,14 +174,11 @@ const store: Module = {
// so we replay automatically on next track append
commit('ended', true)
},
- async shuffle ({ dispatch, state }, callback) {
+ async shuffle ({ dispatch, state }) {
const shuffled = shuffle(state.tracks)
state.tracks.length = 0
- const params: { tracks: Track[], callback?: () => unknown } = { tracks: shuffled }
- if (callback) {
- params.callback = callback
- }
- await dispatch('appendMany', params)
+
+ await dispatch('appendMany', { tracks: shuffled })
await dispatch('currentIndex', 0)
}
}
diff --git a/front/src/types.ts b/front/src/types.ts
index eb868a1c5..da8bf23a1 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -67,6 +67,7 @@ export interface Track {
copyright?: string
license?: License
tags: string[]
+ uploads: Upload[]
album?: Album
artist?: Artist
@@ -169,6 +170,7 @@ export interface Upload {
filename?: string
source?: string
uuid: string
+ duration?: number
}
// FileSystem Logs