[web] Add hint on buttons of the audio player when hovering them #1512

When hovering the buttons of the player, a short description is displayed. Moreover, the seek buttons are explicit now.

web-src/src/components/PlayerButtonConsume.vue

@@ -1,6 +1,11 @@
 <template>
-  <a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
+  <a :class="{ 'is-info': is_consume }" @click="toggle_consume_mode">
-    <span class="icon"><mdicon name="fire" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        name="fire"
+        :size="icon_size"
+        :title="$t('player.button.consume')"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonNext.vue

@@ -1,6 +1,11 @@
 <template>
   <a :disabled="disabled" @click="play_next">
-    <span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        name="skip-forward"
+        :size="icon_size"
+        :title="$t('player.button.skip-forward')"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonPlayPause.vue

@@ -1,6 +1,11 @@
 <template>
   <a :disabled="disabled" @click="toggle_play_pause">
-    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        :name="icon_name"
+        :size="icon_size"
+        :title="$t('player.button.' + icon_name)"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonPrevious.vue

@@ -1,6 +1,11 @@
 <template>
   <a :disabled="disabled" @click="play_previous">
-    <span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        name="skip-backward"
+        :size="icon_size"
+        :title="$t('player.button.skip-backward')"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonRepeat.vue

@@ -1,6 +1,11 @@
 <template>
-  <a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
+  <a :class="{ 'is-info': !is_repeat_off }" @click="toggle_repeat_mode">
-    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        :name="icon_name"
+        :size="icon_size"
+        :title="$t('player.button.' + icon_name)"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonSeekBack.vue

@@ -1,6 +1,11 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        name="rewind-10"
+        :size="icon_size"
+        :title="$t('player.button.seek-backward')"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonSeekForward.vue

@@ -1,6 +1,11 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        name="fast-forward-30"
+        :size="icon_size"
+        :title="$t('player.button.seek-forward')"
+    /></span>
   </a>
 </template>
 

web-src/src/components/PlayerButtonShuffle.vue

@@ -1,6 +1,11 @@
 <template>
-  <a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
+  <a :class="{ 'is-info': is_shuffle }" @click="toggle_shuffle_mode">
-    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
+    <span class="icon"
+      ><mdicon
+        :name="icon_name"
+        :size="icon_size"
+        :title="$t('player.button.' + icon_name)"
+    /></span>
   </a>
 </template>
 

web-src/src/icons.js

@@ -19,7 +19,7 @@ import {
   mdiDotsHorizontal,
   mdiDotsVertical,
   mdiDragHorizontal,
-  mdiFastForward,
+  mdiFastForward30,
   mdiFileMusic,
   mdiFileOutline,
   mdiFire,
@@ -43,7 +43,7 @@ import {
   mdiRepeat,
   mdiRepeatOff,
   mdiRepeatOnce,
-  mdiRewind,
+  mdiRewind10,
   mdiRss,
   mdiServer,
   mdiShuffle,
@@ -80,7 +80,7 @@ export const icons = {
   mdiDotsHorizontal,
   mdiDotsVertical,
   mdiDragHorizontal,
-  mdiFastForward,
+  mdiFastForward30,
   mdiFileMusic,
   mdiFileOutline,
   mdiFire,
@@ -104,7 +104,7 @@ export const icons = {
   mdiRepeat,
   mdiRepeatOff,
   mdiRepeatOnce,
-  mdiRewind,
+  mdiRewind10,
   mdiRss,
   mdiServer,
   mdiShuffle,

web-src/src/locales/de.json

@@ -543,6 +543,23 @@
       }
     }
   },
+  "player": {
+    "button": {
+      "consume": "Verlauf löschen",
+      "pause": "Wiedergabe anhalten",
+      "play": "Wiedergeben",
+      "repeat": "Alle Tracks wiederholen",
+      "repeat-off": "Tracks einmal lesen",
+      "repeat-once": "Aktuellen Track wiederholen",
+      "seek-backward": "Rückwärts im Track suchen",
+      "seek-forward": "Vorwärts im Track suchen",
+      "shuffle": "Tracks zufällig wiedergeben",
+      "shuffle-disabled": "Tracks in Reihenfolge wiedergeben",
+      "skip-backward": "Zum vorherigen Track springen",
+      "skip-forward": "Zum nächsten Track springen",
+      "stop": "Wiedergabe stoppen"
+    }
+  },
   "setting": {
     "not-saved": " (Fehler beim Speichern der Einstellungen)",
     "saved": " (Einstellungen gesichert)"

web-src/src/locales/en.json

@@ -543,6 +543,23 @@
       }
     }
   },
+  "player": {
+    "button": {
+      "consume": "Clear history",
+      "pause": "Pause",
+      "play": "Play",
+      "repeat": "Repeat all tracks",
+      "repeat-off": "Read tracks once",
+      "repeat-once": "Repeat current track",
+      "seek-backward": "Seek backward in the track",
+      "seek-forward": "Seek forward in the track",
+      "shuffle": "Play tracks randomly",
+      "shuffle-disabled": "Play tracks in order",
+      "skip-backward": "Skip to previous track",
+      "skip-forward": "Skip to next track",
+      "stop": "Stop"
+    }
+  },
   "setting": {
     "not-saved": " (error saving setting)",
     "saved": " (setting saved)"

web-src/src/locales/fr.json

@@ -543,6 +543,23 @@
       }
     }
   },
+  "player": {
+    "button": {
+      "consume": "Effacer l’historique",
+      "pause": "Mettre la lecture en pause",
+      "play": "Lire",
+      "repeat": "Répéter toutes les pistes",
+      "repeat-off": "Lire les pistes une fois",
+      "repeat-once": "Répéter la piste en cours",
+      "seek-backward": "Reculer dans la piste",
+      "seek-forward": "Avancer dans la piste",
+      "shuffle": "Lire les pistes aléatoirement",
+      "shuffle-disabled": "Lire les pistes dans l’ordre",
+      "skip-backward": "Reculer à la piste précédente",
+      "skip-forward": "Avancer à la piste suivante",
+      "stop": "Arrêter la lecture"
+    }
+  },
   "setting": {
     "not-saved": " (erreur à l’enregistrement du réglage)",
     "saved": " (réglage enregistré)"