2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
2024-04-04 22:20:42 +00:00
|
|
|
<ScreenBase v-if="playlist">
|
|
|
|
<template #header>
|
2024-04-23 21:01:27 +00:00
|
|
|
<ScreenHeader :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
|
2024-04-04 22:20:42 +00:00
|
|
|
{{ playlist.name }}
|
|
|
|
<ControlsToggle v-if="songs.length" v-model="showingControls" />
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-04-04 22:20:42 +00:00
|
|
|
<template #thumbnail>
|
|
|
|
<PlaylistThumbnail :playlist="playlist">
|
|
|
|
<ThumbnailStack v-if="!playlist.cover" :thumbnails="thumbnails" />
|
|
|
|
</PlaylistThumbnail>
|
|
|
|
</template>
|
2022-07-16 09:52:39 +00:00
|
|
|
|
2024-04-04 22:20:42 +00:00
|
|
|
<template v-if="songs.length || playlist.is_collaborative" #meta>
|
|
|
|
<CollaboratorsBadge v-if="collaborators.length" :collaborators="collaborators" />
|
2024-05-19 05:49:42 +00:00
|
|
|
<span>{{ pluralize(songs, 'item') }}</span>
|
2024-04-04 22:20:42 +00:00
|
|
|
<span>{{ duration }}</span>
|
|
|
|
<a
|
2024-08-29 17:54:58 +00:00
|
|
|
v-if="downloadable"
|
2024-04-04 22:20:42 +00:00
|
|
|
role="button"
|
|
|
|
title="Download all songs in playlist"
|
|
|
|
@click.prevent="download"
|
|
|
|
>
|
|
|
|
Download All
|
|
|
|
</a>
|
|
|
|
</template>
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-04-04 22:20:42 +00:00
|
|
|
<template #controls>
|
|
|
|
<SongListControls
|
|
|
|
v-if="!isPhone || showingControls"
|
|
|
|
:config="controlsConfig"
|
|
|
|
@filter="applyFilter"
|
2024-04-23 21:01:27 +00:00
|
|
|
@refresh="fetchDetails(true)"
|
|
|
|
@delete-playlist="destroy"
|
2024-04-04 22:20:42 +00:00
|
|
|
@play-all="playAll"
|
|
|
|
@play-selected="playSelected"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</ScreenHeader>
|
|
|
|
</template>
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-04-04 22:20:42 +00:00
|
|
|
<SongListSkeleton v-show="loading" class="-m-6" />
|
2022-06-10 10:47:46 +00:00
|
|
|
<SongList
|
2022-07-30 15:08:20 +00:00
|
|
|
v-if="!loading && songs.length"
|
2022-06-10 10:47:46 +00:00
|
|
|
ref="songList"
|
2024-04-04 22:20:42 +00:00
|
|
|
class="-m-6"
|
2024-04-23 21:01:27 +00:00
|
|
|
@reorder="onReorder"
|
2022-10-08 10:54:25 +00:00
|
|
|
@sort="sort"
|
2022-06-10 10:47:46 +00:00
|
|
|
@press:delete="removeSelected"
|
|
|
|
@press:enter="onPressEnter"
|
2022-07-16 09:52:39 +00:00
|
|
|
@scroll-breakpoint="onScrollBreakpoint"
|
2022-06-10 10:47:46 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
<ScreenEmptyState v-if="!songs.length && !loading">
|
2022-12-02 16:17:37 +00:00
|
|
|
<template #icon>
|
2023-11-10 13:16:06 +00:00
|
|
|
<Icon :icon="faFile" />
|
2022-06-10 10:47:46 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<template v-if="playlist?.is_smart">
|
|
|
|
No songs match the playlist's
|
2022-09-08 05:06:49 +00:00
|
|
|
<a @click.prevent="editPlaylist">criteria</a>.
|
2022-06-10 10:47:46 +00:00
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
The playlist is currently empty.
|
|
|
|
<span class="d-block secondary">
|
2022-07-05 15:09:20 +00:00
|
|
|
Drag songs into its name in the sidebar or use the "Add To…" button to fill it up.
|
2022-06-10 10:47:46 +00:00
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
</ScreenEmptyState>
|
2024-04-04 22:20:42 +00:00
|
|
|
</ScreenBase>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
<script lang="ts" setup>
|
2022-07-15 07:23:55 +00:00
|
|
|
import { faFile } from '@fortawesome/free-regular-svg-icons'
|
2022-07-22 21:56:13 +00:00
|
|
|
import { differenceBy } from 'lodash'
|
2024-10-13 17:37:01 +00:00
|
|
|
import { ref, watch } from 'vue'
|
2024-04-23 11:24:29 +00:00
|
|
|
import { eventBus, pluralize } from '@/utils'
|
2024-10-13 17:37:01 +00:00
|
|
|
import { playlistStore, songStore } from '@/stores'
|
2024-01-25 16:21:26 +00:00
|
|
|
import { downloadService, playlistCollaborationService } from '@/services'
|
2024-04-23 11:24:29 +00:00
|
|
|
import {
|
2024-04-23 21:01:27 +00:00
|
|
|
useAuthorization,
|
|
|
|
useErrorHandler,
|
2024-04-23 11:24:29 +00:00
|
|
|
usePlaylistManagement,
|
|
|
|
useRouter,
|
|
|
|
useSongList,
|
2024-10-13 17:37:01 +00:00
|
|
|
useSongListControls,
|
2024-04-23 11:24:29 +00:00
|
|
|
} from '@/composables'
|
2022-04-15 17:00:08 +00:00
|
|
|
|
2022-07-07 18:05:46 +00:00
|
|
|
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
|
|
|
|
import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
|
2022-07-30 15:08:20 +00:00
|
|
|
import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
|
2024-01-26 14:24:46 +00:00
|
|
|
import CollaboratorsBadge from '@/components/playlist/PlaylistCollaboratorsBadge.vue'
|
2024-02-24 15:37:01 +00:00
|
|
|
import PlaylistThumbnail from '@/components/ui/PlaylistThumbnail.vue'
|
2024-04-04 22:20:42 +00:00
|
|
|
import ScreenBase from '@/components/screens/ScreenBase.vue'
|
2022-04-15 17:00:08 +00:00
|
|
|
|
2024-01-18 11:13:05 +00:00
|
|
|
const { currentUser } = useAuthorization()
|
|
|
|
const { triggerNotFound, getRouteParam, onScreenActivated } = useRouter()
|
2022-10-18 14:07:41 +00:00
|
|
|
|
2024-01-18 11:13:05 +00:00
|
|
|
const playlistId = ref<string>()
|
2022-04-21 16:06:45 +00:00
|
|
|
const playlist = ref<Playlist>()
|
2022-06-10 10:47:46 +00:00
|
|
|
const loading = ref(false)
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
const {
|
|
|
|
SongList,
|
2022-06-10 10:47:46 +00:00
|
|
|
ControlsToggle,
|
2022-07-16 09:52:39 +00:00
|
|
|
ThumbnailStack,
|
|
|
|
headerLayout,
|
2022-04-21 16:06:45 +00:00
|
|
|
songs,
|
2022-04-15 17:00:08 +00:00
|
|
|
songList,
|
2022-04-23 21:24:02 +00:00
|
|
|
duration,
|
2024-08-29 17:54:58 +00:00
|
|
|
downloadable,
|
2022-07-16 09:52:39 +00:00
|
|
|
thumbnails,
|
2024-05-19 05:49:42 +00:00
|
|
|
selectedPlayables,
|
2022-04-15 17:00:08 +00:00
|
|
|
showingControls,
|
|
|
|
isPhone,
|
2024-03-25 22:59:38 +00:00
|
|
|
context,
|
2024-01-29 21:58:50 +00:00
|
|
|
sortField,
|
2022-04-21 18:12:11 +00:00
|
|
|
onPressEnter,
|
2022-04-15 17:00:08 +00:00
|
|
|
playAll,
|
|
|
|
playSelected,
|
2022-12-17 12:09:22 +00:00
|
|
|
applyFilter,
|
2022-07-16 09:52:39 +00:00
|
|
|
onScrollBreakpoint,
|
2024-01-29 21:58:50 +00:00
|
|
|
sort: baseSort,
|
2024-10-13 17:37:01 +00:00
|
|
|
config: listConfig,
|
2024-06-02 17:15:31 +00:00
|
|
|
} = useSongList(ref<Playable[] | CollaborativeSong[]>([]), { type: 'Playlist' })
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-01-18 11:13:05 +00:00
|
|
|
const { SongListControls, config: controlsConfig } = useSongListControls('Playlist')
|
2024-05-19 05:49:42 +00:00
|
|
|
const { removeFromPlaylist } = usePlaylistManagement()
|
2022-10-24 15:27:17 +00:00
|
|
|
|
2024-10-13 17:37:01 +00:00
|
|
|
const sort = (field: MaybeArray<PlayableListSortField> | null, order: SortOrder) => {
|
|
|
|
listConfig.reorderable = field === 'position'
|
|
|
|
|
|
|
|
if (field !== 'position') {
|
|
|
|
return baseSort(field, order)
|
|
|
|
}
|
|
|
|
|
|
|
|
// To sort by position, we simply re-assign the songs array from the playlist, which maintains the original order.
|
|
|
|
songs.value = playlist.value!.playables!
|
|
|
|
}
|
|
|
|
|
2022-12-02 16:17:37 +00:00
|
|
|
const destroy = () => eventBus.emit('PLAYLIST_DELETE', playlist.value!)
|
2022-04-21 16:06:45 +00:00
|
|
|
const download = () => downloadService.fromPlaylist(playlist.value!)
|
2022-12-02 16:17:37 +00:00
|
|
|
const editPlaylist = () => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value!)
|
2022-04-15 17:00:08 +00:00
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
const removeSelected = async () => await removeFromPlaylist(playlist.value!, selectedPlayables.value)
|
2024-10-13 17:37:01 +00:00
|
|
|
const collaborators = ref<PlaylistCollaborator[]>([])
|
2022-04-21 18:12:11 +00:00
|
|
|
|
2024-01-25 16:21:26 +00:00
|
|
|
const fetchDetails = async (refresh = false) => {
|
2024-10-13 17:37:01 +00:00
|
|
|
if (loading.value) {
|
|
|
|
return
|
|
|
|
}
|
2023-08-20 22:35:58 +00:00
|
|
|
|
2024-01-25 16:21:26 +00:00
|
|
|
try {
|
|
|
|
[songs.value, collaborators.value] = await Promise.all([
|
|
|
|
songStore.fetchForPlaylist(playlist.value!, refresh),
|
2024-01-29 21:58:50 +00:00
|
|
|
playlist.value!.is_collaborative
|
|
|
|
? playlistCollaborationService.fetchCollaborators(playlist.value!)
|
2024-10-13 17:37:01 +00:00
|
|
|
: Promise.resolve<PlaylistCollaborator[]>([]),
|
2024-01-25 16:21:26 +00:00
|
|
|
])
|
|
|
|
|
2024-01-29 21:58:50 +00:00
|
|
|
sortField.value ??= (playlist.value?.is_smart ? 'title' : 'position')
|
|
|
|
sort(sortField.value, 'asc')
|
2024-04-23 11:24:29 +00:00
|
|
|
} catch (error: unknown) {
|
|
|
|
useErrorHandler().handleHttpError(error)
|
2024-01-25 16:21:26 +00:00
|
|
|
} finally {
|
|
|
|
loading.value = false
|
|
|
|
}
|
2022-04-15 17:00:08 +00:00
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
const onReorder = (target: Playable, type: MoveType) => {
|
|
|
|
playlistStore.moveItemsInPlaylist(playlist.value!, selectedPlayables.value, target, type)
|
2024-01-29 21:58:50 +00:00
|
|
|
}
|
|
|
|
|
2022-11-12 21:38:31 +00:00
|
|
|
watch(playlistId, async id => {
|
2024-10-13 17:37:01 +00:00
|
|
|
if (!id) {
|
|
|
|
return
|
|
|
|
}
|
2022-10-08 10:54:25 +00:00
|
|
|
|
2024-01-29 21:58:50 +00:00
|
|
|
// sort field will be determined later by the playlist's type
|
|
|
|
sortField.value = null
|
|
|
|
|
2022-10-18 14:07:41 +00:00
|
|
|
playlist.value = playlistStore.byId(id)
|
2024-03-25 22:59:38 +00:00
|
|
|
context.entity = playlist.value
|
2024-01-18 11:13:05 +00:00
|
|
|
|
|
|
|
// reset this config value to its default to not cause rows to be mal-rendered
|
|
|
|
listConfig.collaborative = false
|
|
|
|
|
|
|
|
if (playlist.value) {
|
2024-01-25 16:21:26 +00:00
|
|
|
await fetchDetails()
|
|
|
|
listConfig.collaborative = playlist.value.is_collaborative
|
2024-06-03 11:42:21 +00:00
|
|
|
listConfig.hasCustomOrderSort = !playlist.value.is_smart
|
2024-01-18 11:13:05 +00:00
|
|
|
controlsConfig.deletePlaylist = playlist.value.user_id === currentUser.value?.id
|
|
|
|
} else {
|
|
|
|
await triggerNotFound()
|
|
|
|
}
|
2022-10-08 10:54:25 +00:00
|
|
|
})
|
|
|
|
|
2024-01-18 11:13:05 +00:00
|
|
|
onScreenActivated('Playlist', () => (playlistId.value = getRouteParam('id')!))
|
2022-10-18 14:07:41 +00:00
|
|
|
|
2024-01-24 22:39:47 +00:00
|
|
|
eventBus
|
2024-01-25 16:21:26 +00:00
|
|
|
.on('PLAYLIST_UPDATED', async ({ id }) => id === playlistId.value && await fetchDetails())
|
|
|
|
.on('PLAYLIST_COLLABORATOR_REMOVED', async ({ id }) => id === playlistId.value && await fetchDetails())
|
2024-05-19 05:49:42 +00:00
|
|
|
.on('PLAYLIST_CONTENT_REMOVED', async ({ id }, removed) => {
|
2024-10-13 17:37:01 +00:00
|
|
|
if (id !== playlistId.value) {
|
|
|
|
return
|
|
|
|
}
|
2022-10-24 15:27:17 +00:00
|
|
|
songs.value = differenceBy(songs.value, removed, 'id')
|
2022-11-15 15:52:38 +00:00
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
</script>
|