MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(front): [WIP] tidy up PlayButton

This commit is contained in:
upsiflu 2025-02-06 16:30:46 +01:00
parent 92b1467d4d
commit eb4258d66e
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
front/src/components/audio/PlayButton.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types' import type { Track, SimpleArtist as Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions' import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
@ -8,7 +8,6 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
import useReport from '~/composables/moderation/useReport' import useReport from '~/composables/moderation/useReport'
import { useStore } from '~/store' import { useStore } from '~/store'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { color } from '~/composables/color.ts'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import OptionsButton from '~/components/ui/button/Options.vue' import OptionsButton from '~/components/ui/button/Options.vue'
@ -50,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
channel: null, channel: null,
account: null, account: null,
dropdownIconClasses: () => ['bi-caret-down-fill'], dropdownIconClasses: () => ['bi-caret-down-fill'],
playIconClass: () => 'bi bi-play-fill', playIconClass: () => 'bi-play-fill',
buttonClasses: () => ['button'], buttonClasses: () => ['button'],
discrete: () => false, discrete: () => false,
dropdownOnly: () => false, dropdownOnly: () => false,
@ -60,9 +59,13 @@ const props = withDefaults(defineProps<Props>(), {
paused: () => false paused: () => false
}) })
// (1) Create a PlayButton
// Some of the props are meant for `usePlayOptions`!
// UsePlayOptions accepts the props from this component and returns the following things:
const { const {
playable, playable,
filterableArtist, filterableArtists,
filterArtist, filterArtist,
enqueue, enqueue,
enqueueNext, enqueueNext,
@ -132,7 +135,7 @@ const isOpen = ref(false)
/> />
<i <i
v-else v-else
:class="[playIconClass, 'icon']" :class="['bi', playIconClass]"
/> />
<template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template> <template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
</template> </template>
@ -201,8 +204,8 @@ const isOpen = ref(false)
<hr> <hr>
<PopoverItem <PopoverItem
v-if="filterableArtist" v-if="filterableArtists"
:disabled="!filterableArtist" :disabled="!filterableArtists"
:title="labels.hideArtist" :title="labels.hideArtist"
icon="bi-eye-slash" icon="bi-eye-slash"
@click.stop.prevent="filterArtist" @click.stop.prevent="filterArtist"