refactor(front): playlist detail and edit
This commit is contained in:
ArneBo
parent
7405d4009e
commit
17abed6b76
|
|
@ -216,43 +216,50 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
primary
|
||||
destructive
|
||||
@click="insertMany(queueTracks, true)"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.addDuplicate') }}
|
||||
</Button>
|
||||
</Alert>
|
||||
<template v-else-if="status === 'saved'">
|
||||
<i class="success bi- bi-check" />
|
||||
{{ t('components.playlists.Editor.message.sync') }}
|
||||
</template>
|
||||
<Button
|
||||
:disabled="queueTracks.length === 0"
|
||||
primary
|
||||
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
|
||||
:title="labels.copyTitle"
|
||||
icon="bi-plus"
|
||||
@click="insertMany(queueTracks, false)"
|
||||
<Alert
|
||||
v-else-if="status === 'saved'"
|
||||
green
|
||||
align-content="center"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
|
||||
</Button>
|
||||
<span>
|
||||
<i class="bi bi-check" />
|
||||
{{ t('components.playlists.Editor.message.sync') }}
|
||||
</span>
|
||||
</Alert>
|
||||
<Layout flex>
|
||||
<Button
|
||||
:disabled="queueTracks.length === 0"
|
||||
primary
|
||||
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
|
||||
:title="labels.copyTitle"
|
||||
icon="bi-plus"
|
||||
@click="insertMany(queueTracks, false)"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
|
||||
</Button>
|
||||
|
||||
<dangerous-button
|
||||
:disabled="tracks.length === 0"
|
||||
icon="bi-eraser-fill"
|
||||
style="float: right;"
|
||||
:action="clearPlaylist"
|
||||
:title="t('components.playlists.Editor.modal.clearPlaylist.header', { playlist: playlist?.name })"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.clear') }}
|
||||
<template #modal-content>
|
||||
{{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
<dangerous-button
|
||||
:disabled="tracks.length === 0"
|
||||
icon="bi-eraser-fill"
|
||||
style="float: right;"
|
||||
:action="clearPlaylist"
|
||||
:title="t('components.playlists.Editor.modal.clearPlaylist.header', { playlist: playlist?.name })"
|
||||
>
|
||||
{{ t('components.playlists.Editor.button.clear') }}
|
||||
</template>
|
||||
</dangerous-button>
|
||||
<div class="ui hidden divider" />
|
||||
<template #modal-content>
|
||||
{{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
{{ t('components.playlists.Editor.button.clear') }}
|
||||
</template>
|
||||
</dangerous-button>
|
||||
</Layout>
|
||||
<template v-if="tracks.length > 0">
|
||||
<p>
|
||||
{{ t('components.playlists.Editor.help.reorder') }}
|
||||
|
|
@ -276,12 +283,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original"
|
||||
v-lazy="store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
|
||||
alt=""
|
||||
class="ui mini image"
|
||||
style="width: 40px;"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
alt=""
|
||||
class="ui mini image"
|
||||
style="width: 40px;"
|
||||
src="../../assets/audio/default-cover.png"
|
||||
>
|
||||
</td>
|
||||
|
|
@ -290,14 +297,16 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
|
|||
{{ generateTrackCreditString(plt.track) }}
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<button
|
||||
class="ui circular danger basic icon button"
|
||||
<Button
|
||||
square-small
|
||||
round
|
||||
destructive
|
||||
@click.stop="removePlaylistTrack(index)"
|
||||
>
|
||||
<i
|
||||
class="trash icon"
|
||||
class="bi bi-trash"
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -107,18 +107,6 @@ const showDeleteModal = ref(false)
|
|||
<OptionsButton @click="toggleOpen" />
|
||||
</template>
|
||||
<template #items>
|
||||
<PopoverItem
|
||||
v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
|
||||
@click="edit = !edit"
|
||||
icon="bi-pencil"
|
||||
>
|
||||
<template v-if="edit">
|
||||
{{ t('views.playlists.Detail.button.stopEdit') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('views.playlists.Detail.button.edit') }}
|
||||
</template>
|
||||
</PopoverItem>
|
||||
<PopoverItem
|
||||
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
|
||||
icon="bi-code-slash"
|
||||
|
|
|
|||
|
|
@ -240,25 +240,20 @@ const deletePlaylist = async () => {
|
|||
v-else
|
||||
align-items="center"
|
||||
>
|
||||
<Layout flex :gap="8">
|
||||
<i class="bi bi-music-note-list" />
|
||||
{{ t('views.playlists.Detail.empty.noTracks') }}
|
||||
</Layout>
|
||||
<Spacer size-16 />
|
||||
<Button
|
||||
primary
|
||||
icon="bi-pencil"
|
||||
@click="edit = !edit"
|
||||
>
|
||||
{{ t('views.playlists.Detail.button.edit') }}
|
||||
</Button>
|
||||
<Layout flex :gap="8">
|
||||
<i class="bi bi-music-note-list" />
|
||||
{{ t('views.playlists.Detail.empty.noTracks') }}
|
||||
</Layout>
|
||||
<Spacer size-16 />
|
||||
<Button
|
||||
primary
|
||||
icon="bi-pencil"
|
||||
align-self="center"
|
||||
@click="edit = !edit"
|
||||
>
|
||||
{{ t('views.playlists.Detail.button.edit') }}
|
||||
</Button>
|
||||
</Alert>
|
||||
<library-widget
|
||||
:url="'playlists/' + playlist?.id + '/libraries/'"
|
||||
@loaded="emit('libraries-loaded', $event)"
|
||||
>
|
||||
{{ t('components.library.AlbumDetail.description.libraries') }}
|
||||
</library-widget>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue