Make box non-seekable

WordPress · Jul 29, 2023 · 8556807 · 8556807
1 parent 0e3e944
commit 8556807
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -545,6 +545,7 @@ export default defineComponent({
       duration,
       currentTime,
       isReady: ref(true),
+      isSeekable: computed(() => props.layout !== "box"),
       onSeek: handleSeeked,
       onTogglePlayback: togglePlayback,
     })

diff --git a/frontend/src/components/VAudioTrack/VWaveform.vue b/frontend/src/components/VAudioTrack/VWaveform.vue
@@ -406,6 +406,7 @@ export default defineComponent({
     const { isSeeking: isSelfSeeking, ...seekable } = useSeekable({
       duration: toRef(props, "duration"),
       currentTime: toRef(props, "currentTime"),
+      isSeekable,
       isReady,
       onSeek: (frac) => {
         clearSeekProgress()

diff --git a/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue b/frontend/src/components/VAudioTrack/layouts/VBoxLayout.vue
@@ -31,11 +31,7 @@
             layout="box"
             :is-tabbable="false"
           />
-          <slot
-            name="controller"
-            :features="isMd ? ['seek'] : []"
-            :is-tabbable="false"
-          />
+          <slot name="controller" :features="[]" :is-tabbable="false" />
         </div>
       </div>
     </div>
@@ -49,7 +45,6 @@ import type { AudioDetail } from "~/types/media"
 import type { AudioSize } from "~/constants/audio"
 import { useI18n } from "~/composables/use-i18n"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
-import { useUiStore } from "~/stores/ui"
 
 import VLicense from "~/components/VLicense/VLicense.vue"
 
@@ -70,10 +65,8 @@ export default defineComponent({
   },
   setup(props) {
     const i18n = useI18n()
-    const uiStore = useUiStore()
 
     const isSmall = computed(() => props.size === "s")
-    const isMd = computed(() => uiStore.isBreakpoint("md"))
 
     const width = computed(() => {
       const magnitudes = {
@@ -90,7 +83,6 @@ export default defineComponent({
 
     const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
     return {
-      isMd,
       isSmall,
       shouldBlur,
 

diff --git a/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue b/frontend/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -93,7 +93,7 @@
         />
         <slot
           name="controller"
-          :features="features"
+          :features="audioFeatures"
           :feature-notices="featureNotices"
           :is-tabbable="false"
         />
@@ -107,7 +107,7 @@ import { computed, defineComponent, PropType } from "vue"
 
 import { timeFmt } from "~/utils/time-fmt"
 import type { AudioDetail } from "~/types/media"
-import type { AudioSize } from "~/constants/audio"
+import { audioFeatures, AudioSize } from "~/constants/audio"
 
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 
@@ -136,7 +136,6 @@ export default defineComponent({
       duration?: string
       seek?: string
     } = {}
-    const features = ["timestamps", "duration", "seek"]
 
     const isSmall = computed(() => props.size === "s")
     const isMedium = computed(() => props.size === "m")
@@ -147,7 +146,7 @@ export default defineComponent({
     return {
       timeFmt,
 
-      features,
+      audioFeatures,
       featureNotices,
 
       isSmall,

diff --git a/frontend/src/composables/use-seekable.ts b/frontend/src/composables/use-seekable.ts
@@ -7,6 +7,7 @@ export interface UseSeekableOptions
   extends ToRefs<{
     duration: number
     currentTime: number
+    isSeekable: boolean
     isReady: boolean
   }> {
   onSeek: (frac: number) => void
@@ -16,6 +17,7 @@ export interface UseSeekableOptions
 export const useSeekable = ({
   duration,
   currentTime,
+  isSeekable,
   isReady,
   onSeek,
   onTogglePlayback,
@@ -64,8 +66,16 @@ export const useSeekable = ({
   const arrowKeys = [keycodes.ArrowLeft, keycodes.ArrowRight]
   const seekingKeys = [...arrowKeys, keycodes.Home, keycodes.End]
   const handledKeys = [...seekingKeys, keycodes.Spacebar]
-  const willBeHandled = (event: KeyboardEvent) =>
-    (handledKeys as string[]).includes(event.key)
+
+  /**
+   * This composable handles space bar for toggling playback.
+   * If `isSeekable` is true, it also handles `seekingKeys`.
+   */
+  const willBeHandled = (event: KeyboardEvent) => {
+    return isSeekable.value
+      ? (handledKeys as string[]).includes(event.key)
+      : event.key === keycodes.Spacebar
+  }
 
   const handleKeys = (event: KeyboardEvent) => {
     if (!willBeHandled(event)) return