WIP: TrackBase.vue

This commit is contained in:
ArneBo 2024-12-08 20:01:24 +01:00 committed by upsiflu
parent 34ed89c378
commit 074df60f09
1 changed files with 48 additions and 69 deletions

View File

@ -161,24 +161,10 @@ const open = ref(false)
</span>
</div>
<div class="eight wide right aligned column button-group">
<play-button
class="vibrant"
:track="track"
>
{{ t('components.library.TrackBase.button.play') }}
</play-button>
&nbsp;
<track-favorite-icon
v-if="store.state.auth.authenticated"
:border="true"
:track="track"
/>
<track-playlist-icon
v-if="store.state.auth.authenticated"
class="circular"
:border="true"
:track="track"
/>
<PlayButton :track="track" />
<TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
<TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
<a
v-if="upload"
role="button"
@ -211,60 +197,53 @@ const open = ref(false)
</button>
</div>
</semantic-modal>
<button
v-dropdown="{direction: 'downward'}"
class="ui floating dropdown circular icon basic button"
:title="labels.more"
>
<i class="ellipsis vertical icon" />
<div
class="menu"
style="right: 0; left: auto"
>
<a
v-if="domain != store.getters['instance/domain']"
:href="track.fid"
target="_blank"
class="basic item"
>
<i class="external icon" />
{{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
</a>
<div
v-if="isEmbedable"
role="button"
class="basic item"
@click="showEmbedModal = !showEmbedModal"
>
<i class="code icon" />
{{ t('components.library.TrackBase.button.embed') }}
</div>
<a
:href="wikipediaUrl"
target="_blank"
rel="noreferrer noopener"
class="basic item"
>
<i class="wikipedia w icon" />
{{ t('components.library.TrackBase.link.wikipedia') }}
</a>
<a
v-if="discogsUrl"
:href="discogsUrl"
target="_blank"
rel="noreferrer noopener"
class="basic item"
>
<i class="external icon" />
{{ t('components.library.TrackBase.link.discogs') }}
</a>
<Popover v-model:open="open">
<template #default="{ toggleOpen }">
<OptionsButton @click="toggleOpen" />
</template>
<template #items>
<PopoverItem>
<Button v-if="domain != store.getters['instance/domain']" :href="track.fid" target="_blank" variant="outline" icon="bi-external-link">
{{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
</Button>
</PopoverItem>
<PopoverItem>
<Button v-if="isEmbedable" @click="showEmbedModal = !showEmbedModal" variant="outline" icon="bi-code">
{{ t('components.library.TrackBase.button.embed') }}
</Button>
</PopoverItem>
<PopoverItem>
<Button
:href="wikipediaUrl"
target="_blank"
rel="noreferrer noopener"
variant="outline"
icon="bi-wikipedia"
>
{{ t('components.library.TrackBase.link.wikipedia') }}
</Button>
</PopoverItem>
<PopoverItem>
<Button v-if="discogsUrl"
:href="discogsUrl"
target="_blank"
rel="noreferrer noopener"
variant="outline"
icon="bi-box-arrow-up-right"
>
{{ t('components.library.TrackBase.link.discogs') }}
</Button>
</PopoverItem>
<router-link
v-if="track.is_local"
:to="{name: 'library.tracks.edit', params: {id: track.id }}"
class="basic item"
>
<i class="edit icon" />
{{ t('components.library.TrackBase.button.edit') }}
<PopoverItem>
<Button v-if="track.is_local" :to="{ name: 'library.tracks.edit', params: { id: track.id } }" tag="router-link" variant="outline" icon="bi-pencil">
{{ t('components.library.TrackBase.button.edit') }}
</Button>
</PopoverItem>
</router-link>
<dangerous-button
v-if="artist && store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === store.state.auth.fullUsername"
@ -321,8 +300,8 @@ const open = ref(false)
{{ t('components.library.TrackBase.link.django') }}
</a>
</div>
</button>
</div>
</template>
</Popover>
</div>
</div>
</section>