mirror of
https://github.com/koel/koel
synced 2024-12-05 02:09:54 +00:00
97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template>
|
|
<section id="playlists">
|
|
<h1>Playlists
|
|
<i
|
|
:class="{ creating }"
|
|
@click.prevent.stop="toggleContextMenu"
|
|
class="fa fa-plus-circle create"
|
|
role="button"
|
|
title="Create a new playlist"
|
|
data-testid="sidebar-create-playlist-btn"
|
|
></i>
|
|
</h1>
|
|
|
|
<form v-if="creating" @submit.prevent="createPlaylist" name="create-simple-playlist-form" class="create">
|
|
<input
|
|
@keyup.esc.prevent="creating = false"
|
|
placeholder="↵ to save"
|
|
name="name"
|
|
required
|
|
type="text"
|
|
v-koel-focus
|
|
v-model="newName"
|
|
>
|
|
</form>
|
|
|
|
<ul>
|
|
<PlaylistItem type="favorites" :playlist="{ name: 'Favorites', songs: favoriteState.songs }"/>
|
|
<PlaylistItem type="recently-played" :playlist="{ name: 'Recently Played', songs: [] }"/>
|
|
<PlaylistItem
|
|
:playlist="playlist"
|
|
:key="playlist.id"
|
|
type="playlist"
|
|
v-for="playlist in playlistState.playlists"
|
|
/>
|
|
</ul>
|
|
|
|
<ContextMenu ref="contextMenu" @createPlaylist="creating = true"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineAsyncComponent, nextTick, reactive, ref } from 'vue'
|
|
import { favoriteStore, playlistStore } from '@/stores'
|
|
import router from '@/router'
|
|
|
|
const PlaylistItem = defineAsyncComponent(() => import('@/components/playlist/PlaylistSidebarItem.vue'))
|
|
const ContextMenu = defineAsyncComponent(() => import('@/components/playlist/CreateNewPlaylistContextMenu.vue'))
|
|
|
|
const contextMenu = ref<InstanceType<typeof ContextMenu>>()
|
|
|
|
const playlistState = reactive(playlistStore.state)
|
|
const favoriteState = reactive(favoriteStore.state)
|
|
const creating = ref(false)
|
|
const newName = ref('')
|
|
|
|
const createPlaylist = async () => {
|
|
creating.value = false
|
|
|
|
const playlist = await playlistStore.store(newName.value)
|
|
newName.value = ''
|
|
// Activate the new playlist right away
|
|
await nextTick()
|
|
router.go(`playlist/${playlist.id}`)
|
|
}
|
|
|
|
const toggleContextMenu = async (event: MouseEvent) => {
|
|
await nextTick()
|
|
if (creating.value) {
|
|
creating.value = false
|
|
} else {
|
|
contextMenu.value?.open(event.pageY, event.pageX)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#playlists {
|
|
.control.create {
|
|
margin: -8px -10px -10px;
|
|
font-size: 16px;
|
|
transition: .3s;
|
|
padding: 10px;
|
|
|
|
&.creating {
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
|
|
form.create {
|
|
padding: 8px 16px;
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|