Merge pull request #3453 from glorenzen/center-play-button

Center Play Button

client/components/controls/PlaybackSpeedControl.vue

@@ -1,9 +1,9 @@
 <template>
   <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
     <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
+      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-20 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
+    <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
       <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
@@ -11,12 +11,12 @@
         <template v-for="rate in rates">
           <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">x</span></p>
+              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
             </div>
           </div>
         </template>
       </div>
-      <div class="w-full py-1 px-4">
+      <div class="w-full py-1 px-1">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
           <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">x</span></p>
@@ -41,7 +41,7 @@ export default {
       currentPlaybackRate: 0,
       MIN_SPEED: 0.5,
       MAX_SPEED: 10,
-      menuLeft: -92,
+      menuLeft: -96,
       arrowLeft: 0
     }
   },
@@ -89,9 +89,9 @@ export default {
       if (boundingBox.left + 110 > window.innerWidth - 10) {
         this.menuLeft = window.innerWidth - 230 - boundingBox.left
 
-        this.arrowLeft = Math.abs(this.menuLeft) - 92
+        this.arrowLeft = Math.abs(this.menuLeft) - 96
       } else {
-        this.menuLeft = -92
+        this.menuLeft = -96
         this.arrowLeft = 0
       }
     },
@@ -109,4 +109,4 @@ export default {
     this.currentPlaybackRate = this.playbackRate
   }
 }
-</script>
+</script>

client/components/player/PlayerPlaybackControls.vue

@@ -1,38 +1,37 @@
 <template>
-  <div class="flex items-center pt-4 pb-2 lg:pt-0 lg:pb-2">
-    <div class="flex-grow" />
-    <template v-if="!loading">
-      <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
-        <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
-          <span class="material-symbols text-2xl sm:text-3xl">first_page</span>
+  <div class="flex justify-center pt-4 pb-2 lg:pt-0 lg:pb-2">
+    <div class="flex items-center justify-center flex-grow">
+      <template v-if="!loading">
+        <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
+          <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+            <span class="material-symbols text-2xl sm:text-3xl">first_page</span>
+          </button>
+        </ui-tooltip>
+        <ui-tooltip direction="top" :text="jumpBackwardText">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+            <span class="material-symbols text-2xl sm:text-3xl">replay</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 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+          <span class="material-symbols fill text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
         </button>
-      </ui-tooltip>
-      <ui-tooltip direction="top" :text="jumpBackwardText">
-        <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
-          <span class="material-symbols text-2xl sm:text-3xl">replay</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 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
-        <span class="material-symbols fill text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-      </button>
-      <ui-tooltip direction="top" :text="jumpForwardText">
-        <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-          <span class="material-symbols text-2xl sm:text-3xl">forward_media</span>
-        </button>
-      </ui-tooltip>
-      <ui-tooltip direction="top" :text="hasNextLabel" class="ml-4 lg:ml-8">
-        <button :aria-label="hasNextLabel" :disabled="!hasNext" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="next">
-          <span class="material-symbols 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>
-      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-        <span class="material-symbols text-2xl">autorenew</span>
-      </div>
-    </template>
-    <div class="flex-grow" />
+        <ui-tooltip direction="top" :text="jumpForwardText">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+            <span class="material-symbols text-2xl sm:text-3xl">forward_media</span>
+          </button>
+        </ui-tooltip>
+        <ui-tooltip direction="top" :text="hasNextLabel" class="ml-4 lg:ml-8">
+          <button :aria-label="hasNextLabel" :disabled="!hasNext" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="next">
+            <span class="material-symbols text-2xl sm:text-3xl">last_page</span>
+          </button>
+        </ui-tooltip>
+      </template>
+      <template v-else>
+        <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
+          <span class="material-symbols text-2xl">autorenew</span>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -41,7 +40,6 @@ export default {
   props: {
     loading: Boolean,
     seekLoading: Boolean,
-    playbackRate: Number,
     paused: Boolean,
     hasNextChapter: Boolean,
     hasNextItemInQueue: Boolean
@@ -50,14 +48,6 @@ export default {
     return {}
   },
   computed: {
-    playbackRateInput: {
-      get() {
-        return this.playbackRate
-      },
-      set(val) {
-        this.$emit('update:playbackRate', val)
-      }
-    },
     jumpForwardText() {
       return this.getJumpText('jumpForwardAmount', this.$strings.ButtonJumpForward)
     },
@@ -89,15 +79,6 @@ export default {
     jumpForward() {
       this.$emit('jumpForward')
     },
-    playbackRateUpdated(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-    },
-    playbackRateChanged(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
-    },
     getJumpText(setting, prefix) {
       const amount = this.$store.getters['user/getUserSetting'](setting)
       if (!amount) return prefix

client/components/player/PlayerUi.vue

@@ -2,7 +2,7 @@
   <div class="w-full -mt-6">
     <div class="w-full relative mb-1">
       <div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
-        <!-- <span class="material-symbols text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
+        <controls-playback-speed-control v-model="playbackRate" @input="setPlaybackRate" @change="playbackRateChanged" class="mx-2 block" />
 
         <ui-tooltip direction="top" :text="$strings.LabelVolume">
           <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
@@ -13,7 +13,7 @@
             <span v-if="!sleepTimerSet" class="material-symbols text-2xl">snooze</span>
             <div v-else class="flex items-center">
               <span class="material-symbols text-lg text-warning">snooze</span>
-              <p class="text-sm sm:text-lg text-warning font-mono font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
+              <p class="text-sm sm:text-lg text-warning font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
             </div>
           </button>
         </ui-tooltip>
@@ -48,15 +48,19 @@
 
     <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" :current-chapter="currentChapter" :playback-rate="playbackRate" @seek="seek" />
 
-    <div class="flex">
-      <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
-      <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
-      <div class="flex-grow" />
-      <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
-        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
-      </p>
-      <div class="flex-grow" />
-      <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+    <div class="relative flex items-center justify-between">
+      <div class="flex-grow flex items-center">
+        <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
+        <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
+      </div>
+      <div class="absolute left-1/2 transform -translate-x-1/2">
+        <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
+          {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
+        </p>
+      </div>
+      <div class="flex-grow flex items-center justify-end">
+        <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+      </div>
     </div>
 
     <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :playback-rate="playbackRate" :chapters="chapters" @select="selectChapter" />
@@ -224,6 +228,12 @@ export default {
       this.playbackRate = Number((this.playbackRate - 0.1).toFixed(1))
       this.setPlaybackRate(this.playbackRate)
     },
+    playbackRateChanged(playbackRate) {
+      this.setPlaybackRate(playbackRate)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+    },
     setPlaybackRate(playbackRate) {
       this.$emit('setPlaybackRate', playbackRate)
     },