koel/resources/assets/js/components/song/AddToMenu.vue

139 lines
3.3 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<div class="add-to" data-testid="add-to-menu" tabindex="0">
2022-04-15 14:24:30 +00:00
<section class="existing-playlists">
<p>Add {{ pluralize(songs, 'song') }} to</p>
2022-04-15 14:24:30 +00:00
<ul v-koel-overflow-fade>
2022-04-15 14:24:30 +00:00
<template v-if="config.queue">
<template v-if="queue.length">
<li
v-if="currentSong"
class="queue-after-current"
data-testid="queue-after-current"
tabindex="0"
@click="queueSongsAfterCurrent"
>
After Current Song
</li>
<li class="bottom-queue" data-testid="queue-bottom" tabindex="0" @click="queueSongsToBottom">
Bottom of Queue
</li>
<li class="top-queue" data-testid="queue-top" tabindex="0" @click="queueSongsToTop">Top of Queue</li>
</template>
<li v-else data-testid="queue" tabindex="0" @click="queueSongsToBottom">Queue</li>
2022-04-15 14:24:30 +00:00
</template>
<li
v-if="config.favorites"
2022-04-15 14:24:30 +00:00
class="favorites"
data-testid="add-to-favorites"
2022-04-15 14:24:30 +00:00
tabindex="0"
@click="addSongsToFavorite"
2022-04-15 14:24:30 +00:00
>
Favorites
</li>
<li
v-for="playlist in playlists"
:key="playlist.id"
class="playlist"
data-testid="add-to-playlist"
tabindex="0"
@click="addSongsToExistingPlaylist(playlist)"
>
{{ playlist.name }}
</li>
2022-04-15 14:24:30 +00:00
</ul>
</section>
<Btn transparent @click.prevent="addSongsToNewPlaylist">New Playlist</Btn>
2022-04-15 14:24:30 +00:00
</div>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-03-19 22:48:12 +00:00
import { computed, toRef, toRefs, watch } from 'vue'
2022-11-18 18:44:20 +00:00
import { pluralize } from '@/utils'
import { playlistStore, queueStore } from '@/stores'
import { useSongMenuMethods } from '@/composables'
2022-04-15 14:24:30 +00:00
import Btn from '@/components/ui/Btn.vue'
2022-04-15 17:00:08 +00:00
const props = defineProps<{ songs: Song[], config: AddToMenuConfig }>()
const { songs, config } = toRefs(props)
2022-04-15 17:00:08 +00:00
const queue = toRef(queueStore.state, 'songs')
const currentSong = queueStore.current
const allPlaylists = toRef(playlistStore.state, 'playlists')
2024-01-24 22:39:47 +00:00
const playlists = computed(() => allPlaylists.value.filter(({ is_smart }) => !is_smart))
2022-04-15 17:00:08 +00:00
const emit = defineEmits<{ (e: 'closing'): void }>()
2022-04-15 17:00:08 +00:00
const close = () => emit('closing')
const {
queueSongsAfterCurrent,
queueSongsToBottom,
queueSongsToTop,
addSongsToFavorite,
addSongsToExistingPlaylist,
addSongsToNewPlaylist
2022-04-20 10:20:09 +00:00
} = useSongMenuMethods(songs, close)
2022-04-15 17:00:08 +00:00
watch(songs, () => songs.value.length || close())
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
.add-to {
width: 100%;
max-width: 256px;
min-width: 196px;
2022-04-15 14:24:30 +00:00
padding: .75rem;
> * + * {
margin-top: 1rem;
}
p {
margin-bottom: .5rem;
font-size: .9rem;
}
.new-playlist {
margin-top: .5rem;
}
ul {
position: relative;
2022-04-15 14:24:30 +00:00
max-height: 12rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
> li + li {
margin-top: .3rem;
}
}
li {
height: 2.25rem;
line-height: 2.25rem;
padding: 0 .75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 3px;
background: rgba(255, 255, 255, .05);
cursor: pointer;
&:hover {
background: var(--color-highlight);
color: var(--color-text-primary);
}
}
button {
2022-04-15 14:24:30 +00:00
width: 100%;
border: 1px solid rgba(255, 255, 255, .2);
2022-04-15 14:24:30 +00:00
}
}
</style>