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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85 import { computed } from 'vue'
import type { Album } from '../types'
import { useSubsonicApi } from '../subsonicApi'
import { useCacheStore } from '../store/cache'
import { usePlayerStore } from '../store/player'
import { useFavouriteStore } from '../store/favourite'
import { sleep } from '../utils'
export const AlbumList = ({
items,
tileSize = 200,
allowHScroll = false,
twoRows = false,
titleOnly = false,
}: {
items: Album[],
tileSize?: number,
allowHScroll?: boolean,
twoRows?: boolean,
titleOnly?: boolean,
}) => {
const
subsonicApi = useSubsonicApi(),
favouriteStore = useFavouriteStore(),
playerStore = usePlayerStore(),
cacheStore = useCacheStore(),
isFavourite = (id: string) => favouriteStore.get('album', id),
dragstart = (id: string, event: DragEvent) => (event.dataTransfer?.setData('application/x-album-id', id)),
playNow = async(id: string) => {
playerStore.setShuffle(false)
return playerStore.playTrackList((await subsonicApi.getAlbumDetails(id)).tracks!)
},
toggleFavourite = async(id: string) => {
favouriteStore.toggle('album', id)
await sleep(300)
const album = await subsonicApi.getAlbumDetails(id)
if (!album) return
if (isFavourite(id)) {
await cacheStore.cacheAlbum(album)
} else {
await cacheStore.clearAlbumCache(album)
}
}
return vine`
<Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll" :two-rows="twoRows">
<Tile
v-for="(item, index) in items"
:key="item.id || index"
:to="{ name: 'album', params: { id: item.id } }"
:title="item.name || 'Unknown Album'"
:image="item.image || ''"
draggable="true"
:title-only="titleOnly"
@dragstart="dragstart(item.id, $event)"
>
<template #text>
<span v-for="(artist, artistIndex) in item.artists" :key="artist.id">
<span v-if="artistIndex > 0" class="text-muted">, </span>
<router-link
:to="{ name: 'artist', params: { id: artist.id } }"
class="text-muted"
>
{{ artist.name }}
</router-link>
</span>
</template>
<template v-if="tileSize > 79" #context-menu>
<DropdownItem icon="play" class="on-top" @click="playNow(item.id)">
Play
</DropdownItem>
<DropdownItem :icon="isFavourite(item.id) ? 'heart-fill' : 'heart'" class="on-top" @click.stop="toggleFavourite(item.id)">
Ravorite
</DropdownItem>
</template>
</Tile>
</Tiles>
`
}