Version 2.1.0 - Update UI

src/components/UI/VideoQueue.vue

@@ -2,24 +2,27 @@
 <div :data-theme="mobile ? 'dark' : null" :class="'video'" >
   <div :class="mobile ? 'mobile-thumbnail-container' : 'thumbnail-container'">
     <div v-if="playerOffline" :class="mobile ? 'mobile-thumbnail-placeholder' : 'thumbnail-placeholder'"></div>
-    <img v-else-if="video && video.thumbnail" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="Video Thumbnail" />
+    <img v-else-if="video && video.thumbnail" :class="mobile ? 'mobile-thumbnail' : 'thumbnail'" :src="video.thumbnail" alt="" />
     <div v-else :class="mobile ? 'mobile-thumbnail-placeholder' : 'thumbnail-placeholder'"></div>
   </div>
   <div class="info">
     <p v-if="playerOffline" class="title secondary">Subsonics est hors-ligne</p>
     <Marquee v-else-if="video" :class="{'title': true}">
-      <span :style="{ color: mobile ? 'white' : '' }">{{ video.title }}</span>
+      <span :style="{ color: mobile ? 'var(--text)' : '' }">{{ video.title }}</span>
     </Marquee>
-    <p v-else class="title">Aucun titre jouée</p>
+    <p v-else class="title">Aucun titre joué</p>
 
-    <p v-if="playerOffline" class="author">Connectez vous d'abord à un salon audio pour lancer un titre</p>
+    <p v-if="playerOffline" class="author">Connectez-vous d'abord à un salon vocal pour lancer un titre</p>
     <p v-else-if="video" class="author">{{ video.author }}</p>
     <p v-else class="author">Aucun auteur</p>
   </div>
 </div>
 </template>
 <script setup>
-import { ref, onMounted, watch } from "vue";
+/**
+ * Ligne « titre » compacte : miniature, titre (défilant s'il est long) et auteur.
+ * Props : video ({ title, author, thumbnail } ou null), playerOffline (message hors ligne), mobile (miniature carrée, thème sombre).
+ */
 import Marquee from "./Marquee.vue";
 
 const props = defineProps({
@@ -95,7 +98,7 @@ const props = defineProps({
     bottom: 0px;
     right: 0px;
     background-color: rgba(0, 0, 0, 0.5);
-    color: white;
+    color: var(--on-media);
     padding: 2px 5px;
     border-radius: 15px;
     font-size: 0.8em;