Change:Audio playback playback speed control adjustable by incremenets of 0.1 #202

client/components/AudioPlayer.vue

@@ -37,7 +37,7 @@
           <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="forward10">
             <span class="material-icons text-3xl">forward_10</span>
           </div>
-          <controls-playback-speed-control v-model="playbackRate" @change="playbackRateChanged" />
+          <controls-playback-speed-control v-model="playbackRate" @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">
@@ -342,6 +342,9 @@ export default {
         console.error('No Audio El updatePlaybackRate')
       }
     },
+    playbackRateUpdated(playbackRate) {
+      this.updatePlaybackRate(playbackRate)
+    },
     playbackRateChanged(playbackRate) {
       this.updatePlaybackRate(playbackRate)
       this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {

client/components/controls/PlaybackSpeedControl.vue

@@ -1,30 +1,26 @@
 <template>
   <div class="relative 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="showMenu = !showMenu">
+    <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">{{ playbackRate.toFixed(1) }}<span class="text-lg">⨯</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-10 left-0 z-20 h-9 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -114px">
+    <div v-show="showMenu" class="absolute -top-20 left-0 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -92px">
       <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
         <div class="arrow-down" />
       </div>
-
+      <div class="flex items-center h-9 relative overflow-hidden rounded-lg" style="width: 220px">
-      <div class="w-full h-full no-scroll flex px-7 relative overflow-hidden">
-        <div class="absolute left-0 top-0 h-full w-7 border-r border-black-300 bg-black-300 rounded-l-lg flex items-center justify-center cursor-pointer" :class="rateIndex === 0 ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="leftArrowClick">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_left</span>
-        </div>
-        <div class="overflow-hidden relative" style="width: 220px">
-          <div class="flex items-center h-full absolute top-0 left-0 transition-transform duration-100" :style="{ transform: `translateX(${xPos}px)` }">
         <template v-for="rate in rates">
-              <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border-r" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
+          <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">⨯</span></p>
             </div>
           </div>
         </template>
       </div>
-        </div>
+      <div class="w-full py-1 px-4">
-        <div class="absolute top-0 right-0 h-full w-7 bg-black-300 rounded-r-lg flex items-center justify-center cursor-pointer" :class="rateIndex === rates.length - numVisible ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="rightArrowClick">
+        <div class="flex items-center justify-between">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_right</span>
+          <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
+          <p class="px-2 text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
+          <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
     </div>
@@ -42,8 +38,9 @@ export default {
   data() {
     return {
       showMenu: false,
-      rateIndex: 1,
+      currentPlaybackRate: 0,
-      numVisible: 5
+      MIN_SPEED: 0.5,
+      MAX_SPEED: 3
     }
   },
   computed: {
@@ -56,28 +53,40 @@ export default {
       }
     },
     rates() {
-      return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      return [0.5, 1, 1.2, 1.5, 2]
     },
-    xPos() {
+    canIncrement() {
-      return -1 * this.rateIndex * 44
+      return this.playbackRate + 0.1 <= this.MAX_SPEED
+    },
+    canDecrement() {
+      return this.playbackRate - 0.1 >= this.MIN_SPEED
     }
   },
   methods: {
     clickOutside() {
-      this.showMenu = false
+      this.setShowMenu(false)
     },
     set(rate) {
-      var newPlaybackRate = Number(rate)
+      this.playbackRate = Number(rate)
-      var hasChanged = this.playbackRate !== newPlaybackRate
+      this.$nextTick(() => this.setShowMenu(false))
-      this.playbackRate = newPlaybackRate
-      if (hasChanged) this.$emit('change', newPlaybackRate)
-      this.showMenu = false
     },
-    leftArrowClick() {
+    increment() {
-      this.rateIndex = Math.max(0, this.rateIndex - 1)
+      if (this.playbackRate + 0.1 > this.MAX_SPEED) return
+      var newPlaybackRate = this.playbackRate + 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
     },
-    rightArrowClick() {
+    decrement() {
-      this.rateIndex = Math.min(this.rates.length - this.numVisible, this.rateIndex + 1)
+      if (this.playbackRate - 0.1 < this.MIN_SPEED) return
+      var newPlaybackRate = this.playbackRate - 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
+    },
+    setShowMenu(val) {
+      if (val) {
+        this.currentPlaybackRate = this.playbackRate
+      } else if (this.currentPlaybackRate !== this.playbackRate) {
+        this.$emit('change', this.playbackRate)
+      }
+      this.showMenu = val
     }
   },
   mounted() {}

client/components/ui/IconBtn.vue

@@ -68,4 +68,7 @@ button.icon-btn:hover:not(:disabled)::before {
 button.icon-btn:disabled::before {
   background-color: rgba(0, 0, 0, 0.2);
 }
+button.icon-btn:disabled span {
+  color: #777;
+}
 </style>