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 import { ref, watch } from 'vue'
import type { Artist, Album, Track } from '../types'
import { useSubsonicApi } from '../subsonicApi'
import { useMainStore } from '../store/main'
import { useFavouriteStore } from '../store/favourite'
import { AlbumList } from '../components/AlbumList.vine'
import { ArtistList } from '../components/ArtistList.vine'
import { TrackList } from '../components/TrackList.vine'
export const FavouritesView = ({ section = 'tracks' }: { section?: string }) => {
const
api = useSubsonicApi(),
favouriteStore = useFavouriteStore(),
state = ref< null | {
artists: Artist[],
albums: Album[],
tracks: Track[],
}>(null),
fetchFavourites = async () => {
const result = await api.getFavourites()
state.value = {
artists: result?.artists.filter((artist: Artist) => favouriteStore.artists[artist.id]),
albums: result?.albums.filter((album: Album) => favouriteStore.albums[album.id]),
tracks: result?.tracks.filter((track: Track) => favouriteStore.tracks[track.id]),
}
}
watch(
favouriteStore,
fetchFavourites,
{ deep: true, immediate: true }
)
return vine`
<div class="row align-items-center justify-content-space-between">
<span class="main-title">
<Icon icon="heart-fill" />
Favourites
</span>
<nav>
<router-link role="button" :to="{... $route, params: { section: 'tracks' }}">
<Icon icon="tracks" /> Tracks
</router-link>
<router-link role="button" :to="{... $route, params: { section: 'albums' }}">
<Icon icon="albums" /> Albums
</router-link>
<router-link role="button" :to="{... $route, params: { section: 'artists' }}">
<Icon icon="artists" /> Artists
</router-link>
</nav>
</div>
<template v-if="state">
<template v-if="section === 'tracks'">
<TrackList v-if="state.tracks.length > 0" :tracks="state.tracks" />
<EmptyIndicator v-else />
</template>
<template v-if="section === 'albums'">
<AlbumList v-if="state.albums.length > 0" :items="state.albums" tile-size="200" />
<EmptyIndicator v-else />
</template>
<template v-if="section === 'artists'">
<ArtistList v-if="state.artists.length > 0" :items="state.artists" tile-size="200" />
<EmptyIndicator v-else />
</template>
</template>
`;
}