koel/resources/assets/js/components/screens/FavoritesScreen.vue

88 lines
2.4 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="favoritesWrapper">
2022-04-15 17:00:08 +00:00
<ScreenHeader>
2022-04-15 14:24:30 +00:00
Songs You Love
2022-04-15 17:00:08 +00:00
<ControlsToggler :showing-controls="showingControls" @toggleControls="toggleControls"/>
2022-04-15 14:24:30 +00:00
<template v-slot:meta>
2022-04-23 21:24:02 +00:00
<span v-if="songs.length">
{{ pluralize(songs.length, 'song') }}
2022-04-15 14:24:30 +00:00
2022-04-23 21:24:02 +00:00
{{ duration }}
<template v-if="allowDownload">
2022-04-15 14:24:30 +00:00
2022-04-21 16:06:45 +00:00
<a class="download" href role="button" title="Download all songs in playlist" @click.prevent="download">
2022-04-15 14:24:30 +00:00
Download All
</a>
</template>
</span>
</template>
<template v-slot:controls>
2022-04-15 17:00:08 +00:00
<SongListControls
2022-04-21 16:06:45 +00:00
v-if="songs.length && (!isPhone || showingControls)"
2022-04-15 14:24:30 +00:00
:config="songListControlConfig"
:selectedSongs="selectedSongs"
2022-04-21 16:06:45 +00:00
:songs="songs"
@playAll="playAll"
@playSelected="playSelected"
2022-04-15 14:24:30 +00:00
/>
</template>
2022-04-15 17:00:08 +00:00
</ScreenHeader>
2022-04-15 14:24:30 +00:00
<SongList
v-if="songs.length"
ref="songList"
:items="songs"
type="favorites"
@press:delete="removeSelected"
@press:enter="onPressEnter"
/>
2022-04-15 14:24:30 +00:00
<ScreenEmptyState v-else>
2022-04-15 14:24:30 +00:00
<template v-slot:icon>
<i class="fa fa-frown-o"></i>
</template>
No favorites yet.
<span class="secondary d-block">
2022-04-21 16:06:45 +00:00
Click the&nbsp;
<i class="fa fa-heart-o"></i>&nbsp;
2022-04-15 14:24:30 +00:00
icon to mark a song as favorite.
</span>
</ScreenEmptyState>
2022-04-15 14:24:30 +00:00
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-04-15 14:24:30 +00:00
import { pluralize } from '@/utils'
2022-04-24 08:50:45 +00:00
import { favoriteStore, commonStore } from '@/stores'
import { downloadService } from '@/services'
2022-04-15 17:00:08 +00:00
import { useSongList } from '@/composables'
2022-04-21 16:06:45 +00:00
import { defineAsyncComponent, toRef } from 'vue'
2022-04-15 14:24:30 +00:00
2022-04-21 16:06:45 +00:00
const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const {
SongList,
SongListControls,
ControlsToggler,
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,
2022-04-15 17:00:08 +00:00
selectedSongs,
showingControls,
songListControlConfig,
isPhone,
onPressEnter,
2022-04-15 17:00:08 +00:00
playAll,
playSelected,
toggleControls
2022-04-21 16:06:45 +00:00
} = useSongList(toRef(favoriteStore.state, 'songs'))
2022-04-15 14:24:30 +00:00
2022-04-24 08:50:45 +00:00
const allowDownload = toRef(commonStore.state, 'allowDownload')
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const download = () => downloadService.fromFavorites()
const removeSelected = () => selectedSongs.value.length && favoriteStore.unlike(selectedSongs.value)
2022-04-15 14:24:30 +00:00
</script>