1 files changed, 12 insertions, 3 deletions

diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
index da9579f..124d132 100644
--- a/viewer/src/views/item_handlers/AudioViewer.vue
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -20,7 +20,10 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ItemThumbnail :item="item" />
+    <ItemThumbnail
+      :item="item"
+      :class="$style.audiothumb"
+    />
     <audio
       :class="$style.player"
       :src="itemResourceUrl"
@@ -40,7 +43,7 @@
 import { AudioItem } from '@/@types/gallery';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ItemThumbnail from '../ItemThumbnail.vue';
 
@@ -51,11 +54,17 @@ const props = defineProps({
 const { t } = useI18n();
 const navigation = useNavigation();
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const itemFileName = computed(() => navigation.getFileName(props.item));
 </script>
 
 <style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.audiothumb {
+  color: $text-light;
+}
+
 .player {
   width: 100%;
   max-width: 500px;