Update:Adding tooltips to player controls forward/backward and next/p…

…rev #2800
advplyr · Apr 2, 2024 · 8e46181 · 8e46181
1 parent a336686
commit 8e46181
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/client/assets/fonts.css b/client/assets/fonts.css
@@ -24,6 +24,7 @@
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
+  vertical-align: top;
 }
 
 .material-icons:not([class*="text-"]) {

diff --git a/client/components/player/PlayerPlaybackControls.vue b/client/components/player/PlayerPlaybackControls.vue
@@ -1,22 +1,30 @@
 <template>
-  <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
+  <div class="flex items-center pt-4 pb-2 md:pt-0 md:pb-2">
     <div class="flex-grow" />
     <template v-if="!loading">
-      <button :aria-label="$strings.ButtonPreviousChapter" class="flex items-center justify-center text-gray-300 mr-4 md:mr-8" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
-        <span class="material-icons text-2xl sm:text-3xl">first_page</span>
-      </button>
-      <button :aria-label="$strings.ButtonJumpBackward" class="flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
-        <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
-      </button>
+      <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 md:mr-8">
+        <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+          <span class="material-icons text-2xl sm:text-3xl">first_page</span>
+        </button>
+      </ui-tooltip>
+      <ui-tooltip direction="top" :text="$strings.ButtonJumpBackward">
+        <button :aria-label="$strings.ButtonJumpBackward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+          <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
+        </button>
+      </ui-tooltip>
       <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 md:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
         <span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
       </button>
-      <button :aria-label="$strings.ButtonJumpForward" class="flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-        <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
-      </button>
-      <button :aria-label="$strings.ButtonNextChapter" class="flex items-center justify-center ml-4 md:ml-8" :disabled="!hasNextChapter" :class="hasNextChapter ? 'text-gray-300' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
-        <span class="material-icons text-2xl sm:text-3xl">last_page</span>
-      </button>
+      <ui-tooltip direction="top" :text="$strings.ButtonJumpForward">
+        <button :aria-label="$strings.ButtonJumpForward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+          <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
+        </button>
+      </ui-tooltip>
+      <ui-tooltip direction="top" :text="$strings.ButtonNextChapter" class="ml-4 md:ml-8">
+        <button :aria-label="$strings.ButtonNextChapter" :disabled="!hasNextChapter" :class="hasNextChapter ? 'text-gray-300' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
+          <span class="material-icons text-2xl sm:text-3xl">last_page</span>
+        </button>
+      </ui-tooltip>
       <controls-playback-speed-control v-model="playbackRateInput" @input="playbackRateUpdated" @change="playbackRateChanged" />
     </template>
     <template v-else>