From eb4258d66e1b055b0d4ecce1b33b753016ab9b95 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 6 Feb 2025 16:30:46 +0100
Subject: [PATCH] chore(front): [WIP] tidy up PlayButton

---
 front/src/components/audio/PlayButton.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 4a04f7232..b60523db2 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -1,5 +1,5 @@
 <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 { computed, ref } from 'vue'
@@ -8,7 +8,6 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useStore } from '~/store'
 import { useRouter, useRoute } from 'vue-router'
-import { color } from '~/composables/color.ts'
 
 import Button from '~/components/ui/Button.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -50,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
   channel: null,
   account: null,
   dropdownIconClasses: () => ['bi-caret-down-fill'],
-  playIconClass: () => 'bi bi-play-fill',
+  playIconClass: () => 'bi-play-fill',
   buttonClasses: () => ['button'],
   discrete: () => false,
   dropdownOnly: () => false,
@@ -60,9 +59,13 @@ const props = withDefaults(defineProps<Props>(), {
   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 {
   playable,
-  filterableArtist,
+  filterableArtists,
   filterArtist,
   enqueue,
   enqueueNext,
@@ -132,7 +135,7 @@ const isOpen = ref(false)
         />
         <i
           v-else
-          :class="[playIconClass, 'icon']"
+          :class="['bi', playIconClass]"
         />
         <template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
       </template>
@@ -201,8 +204,8 @@ const isOpen = ref(false)
       <hr>
 
       <PopoverItem
-        v-if="filterableArtist"
-        :disabled="!filterableArtist"
+        v-if="filterableArtists"
+        :disabled="!filterableArtists"
         :title="labels.hideArtist"
         icon="bi-eye-slash"
         @click.stop.prevent="filterArtist"