kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
fix(front): playlist description and header component
ArneBo
rodzic
d7402c29ab
commit
2b3831d4d3
front/src/views/playlists
|
|
@ -17,6 +17,7 @@ import HumanDate from '~/components/common/HumanDate.vue'
|
|||
import TrackTable from '~/components/audio/track/Table.vue'
|
||||
import PlayButton from '~/components/audio/PlayButton.vue'
|
||||
import Layout from '~/components/ui/Layout.vue'
|
||||
import Header from '~/components/ui/Header.vue'
|
||||
import Spacer from '~/components/ui/Spacer.vue'
|
||||
import Loader from '~/components/ui/Loader.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
|
@ -125,6 +126,7 @@ const deletePlaylist = async () => {
|
|||
|
||||
<template>
|
||||
<Layout
|
||||
v-title="playlist?.name"
|
||||
stack
|
||||
main
|
||||
>
|
||||
|
|
@ -132,116 +134,92 @@ const deletePlaylist = async () => {
|
|||
v-if="isLoading"
|
||||
v-title="labels.playlist"
|
||||
/>
|
||||
<Layout
|
||||
<Header
|
||||
v-if="!isLoading && playlist"
|
||||
v-title="playlist.name"
|
||||
flex
|
||||
:h1="playlist.name"
|
||||
page-heading
|
||||
>
|
||||
<div class="playlist-grid">
|
||||
<img
|
||||
v-for="(url, idx) in images"
|
||||
:key="idx"
|
||||
v-lazy="url"
|
||||
:alt="playlist.name"
|
||||
:style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
|
||||
>
|
||||
<template #image>
|
||||
<div class="playlist-grid">
|
||||
<img
|
||||
v-for="(url, idx) in images"
|
||||
:key="idx"
|
||||
v-lazy="url"
|
||||
:alt="playlist.name"
|
||||
:style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<div class="meta">
|
||||
{{ playlist.tracks_count }}
|
||||
{{ t('views.playlists.Detail.header.tracks') }}
|
||||
<i class="bi bi-dot" />
|
||||
<Duration :seconds="playlist.duration" />
|
||||
</div>
|
||||
<Layout
|
||||
stack
|
||||
style="flex: 1; gap: 8px;"
|
||||
flex
|
||||
gap-8
|
||||
>
|
||||
<Spacer />
|
||||
<h1>{{ playlist.name }}</h1>
|
||||
<div class="meta">
|
||||
{{ playlist.tracks_count }}
|
||||
{{ t('views.playlists.Detail.header.tracks') }}
|
||||
<i class="bi bi-dot" />
|
||||
<Duration :seconds="playlist.duration" />
|
||||
</div>
|
||||
<Layout
|
||||
flex
|
||||
gap-8
|
||||
>
|
||||
{{ t('views.playlists.Detail.meta.attribution') }}
|
||||
<ActorLink
|
||||
:actor="playlist.actor"
|
||||
:avatar="false"
|
||||
:discrete="true"
|
||||
/>
|
||||
<i class="bi bi-dot" />
|
||||
{{ t('views.playlists.Detail.meta.updated') }}
|
||||
<HumanDate
|
||||
:date="playlist.modification_date"
|
||||
/>
|
||||
</Layout>
|
||||
<RenderedDescription
|
||||
:description="playlist.description"
|
||||
:max-length="200"
|
||||
:show-more="true"
|
||||
{{ t('views.playlists.Detail.meta.attribution') }}
|
||||
<ActorLink
|
||||
:actor="playlist.actor"
|
||||
:avatar="false"
|
||||
:discrete="true"
|
||||
/>
|
||||
<i class="bi bi-dot" />
|
||||
{{ t('views.playlists.Detail.meta.updated') }}
|
||||
<HumanDate
|
||||
:date="playlist.modification_date"
|
||||
/>
|
||||
<Layout
|
||||
flex
|
||||
class="header-buttons"
|
||||
>
|
||||
<PlayButton
|
||||
split
|
||||
:is-playable="playlist.is_playable"
|
||||
:tracks="tracks"
|
||||
>
|
||||
{{ t('views.playlists.Detail.button.playAll') }}
|
||||
</PlayButton>
|
||||
<Button
|
||||
v-if="playlist.tracks_count > 1"
|
||||
primary
|
||||
icon="bi-shuffle"
|
||||
:aria-label="t('components.audio.Player.label.shuffleQueue')"
|
||||
@click.prevent.stop="shuffle()"
|
||||
>
|
||||
{{ t('components.audio.Player.label.shuffleQueue') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
|
||||
secondary
|
||||
icon="bi-pencil"
|
||||
@click="edit = !edit"
|
||||
>
|
||||
<template v-if="edit">
|
||||
{{ t('views.playlists.Detail.button.stopEdit') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('views.playlists.Detail.button.edit') }}
|
||||
</template>
|
||||
</Button>
|
||||
<Spacer
|
||||
h
|
||||
grow
|
||||
/>
|
||||
<playlist-dropdown
|
||||
:playlist="playlist"
|
||||
@import="fetchData"
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<Modal
|
||||
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
|
||||
v-model="showEmbedModal"
|
||||
title="t('views.playlists.Detail.modal.embed.header')"
|
||||
<RenderedDescription
|
||||
:content="{ html: playlist.description }"
|
||||
:truncate-length="200"
|
||||
:show-more="true"
|
||||
/>
|
||||
<Layout
|
||||
flex
|
||||
class="header-buttons"
|
||||
>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
<embed-wizard
|
||||
:id="playlist.id"
|
||||
type="playlist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<Button variant="outline">
|
||||
{{ t('views.playlists.Detail.button.cancel') }}
|
||||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</Layout>
|
||||
<PlayButton
|
||||
split
|
||||
:is-playable="playlist.is_playable"
|
||||
:tracks="tracks"
|
||||
>
|
||||
{{ t('views.playlists.Detail.button.playAll') }}
|
||||
</PlayButton>
|
||||
<Button
|
||||
v-if="playlist.tracks_count > 1"
|
||||
primary
|
||||
icon="bi-shuffle"
|
||||
:aria-label="t('components.audio.Player.label.shuffleQueue')"
|
||||
@click.prevent.stop="shuffle()"
|
||||
>
|
||||
{{ t('components.audio.Player.label.shuffleQueue') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
|
||||
secondary
|
||||
icon="bi-pencil"
|
||||
@click="edit = !edit"
|
||||
>
|
||||
<template v-if="edit">
|
||||
{{ t('views.playlists.Detail.button.stopEdit') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('views.playlists.Detail.button.edit') }}
|
||||
</template>
|
||||
</Button>
|
||||
<Spacer
|
||||
h
|
||||
grow
|
||||
/>
|
||||
<playlist-dropdown
|
||||
:playlist="playlist"
|
||||
@import="fetchData"
|
||||
/>
|
||||
</Layout>
|
||||
</Header>
|
||||
|
||||
<Layout stack>
|
||||
<template v-if="edit">
|
||||
|
|
@ -280,6 +258,26 @@ const deletePlaylist = async () => {
|
|||
</Button>
|
||||
</Alert>
|
||||
</Layout>
|
||||
|
||||
<Modal
|
||||
v-if="playlist?.privacy_level === 'everyone' && playlist?.is_playable"
|
||||
v-model="showEmbedModal"
|
||||
title="t('views.playlists.Detail.modal.embed.header')"
|
||||
>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
<embed-wizard
|
||||
:id="playlist.id"
|
||||
type="playlist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<Button variant="outline">
|
||||
{{ t('views.playlists.Detail.button.cancel') }}
|
||||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue