[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">
-    <span class="icon"><mdicon name="fire" :size="icon_size" /></span>
+  <a :class="{ 'is-info': is_consume }" @click="toggle_consume_mode">
+    <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">
-    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
+  <a :class="{ 'is-info': !is_repeat_off }" @click="toggle_repeat_mode">
+    <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">
-    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
+  <a :class="{ 'is-info': is_shuffle }" @click="toggle_shuffle_mode">
+    <span class="icon"
+      ><mdicon
+        :name="icon_name"
+        :size="icon_size"
+        :title="$t('player.button.' + icon_name)"
+    /></span>
   </a>
 </template>