1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { computed } from 'vue'
import type { Playlist } from '../types'
import { useSubsonicApi } from '../subsonicApi'
import { usePlayerStore } from '../store/player'
export const PlaylistList = ({
items,
allowHScroll = false,
isPlaylistView = false,
tileSize = 200,
}: {
items: Playlist[],
allowHScroll?: boolean,
isPlaylistView?: boolean,
tileSize?: number,
}) => {
const
api = useSubsonicApi(),
playerStore = usePlayerStore(),
playNow = async(id: string) => {
playerStore.setShuffle(false)
const playlist = await api.getPlaylist(id)
return playerStore.playTrackList(playlist.tracks!)
}
return vine`
<Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll">
<Tile
v-for="(item, index) in items"
:key="item.id || index"
:to="{ name: 'playlist', params: { id: item.id } }"
:title="item.name || 'Untitled Playlist'"
:image="item.image || ''"
>
<template #title>
<router-link :to="{ name: 'playlist', params: { id: item.id } }">
{{ item.name }}
</router-link>
</template>
<!-- Tracks info -->
<template #text>
<strong>{{ item.trackCount || 0 }}</strong> tracks
</template>
<!-- Context Menu -->
<template #context-menu>
<DropdownItem icon="play" @click="playNow(item.id)">
Play
</DropdownItem>
<DropdownItem v-if="isPlaylistView" icon="edit" @click="$emit('edit-playlist', item)">
Edit
</DropdownItem>
<DropdownItem v-if="isPlaylistView" icon="trash" @click.stop.prevent="$emit('remove-playlist', item.id)">
Remove
</DropdownItem>
</template>
</Tile>
</Tiles>
`
}