fix(player): 操作双轨时结束波形试听

Author: coderDJing

src/renderer/src/components/HorizontalBrowseModeShell.vue

@@ -196,10 +196,11 @@ const {
     waveformPresentation.state.top.visualPending === true ||
     waveformPresentation.state.bottom.visualPending === true
 })
-useHorizontalBrowseWaveformPreviewSuspension({
+const { handlePlayerInteraction } = useHorizontalBrowseWaveformPreviewSuspension({
   nativeTransport,
   syncDeckRenderState,
-  setAuditionPresentationSuspended
+  setAuditionPresentationSuspended,
+  playerInteractionEnabled: () => !isEditMode.value
 })
 const notifyDeckSeekPresentationIntent = (deck: DeckKey, seconds: number) => {
   waveformPresentation.markSeek(deck, seconds)
@@ -218,7 +219,6 @@ const resolveDeckDurationSeconds = (deck: DeckKey) =>
   )
 const topDeckUiPlaying = computed(() => resolveDeckPlaying('top'))
 const bottomDeckUiPlaying = computed(() => resolveDeckPlaying('bottom'))
-const HORIZONTAL_BROWSE_NEGATIVE_PLAYBACK_EPSILON_SEC = 0.0001
 const resolveDeckWaveformPlaybackActive = (deck: DeckKey) =>
   resolveHorizontalBrowseDeckWaveformPlaybackActive({
     deck,
@@ -227,7 +227,7 @@ const resolveDeckWaveformPlaybackActive = (deck: DeckKey) =>
       auditionPresentationSuspended.value || nativeTransport.state.auditionSuspended,
     topRenderCurrentSeconds: topDeckRenderCurrentSeconds,
     bottomRenderCurrentSeconds: bottomDeckRenderCurrentSeconds,
-    negativePlaybackEpsilonSec: HORIZONTAL_BROWSE_NEGATIVE_PLAYBACK_EPSILON_SEC
+    negativePlaybackEpsilonSec: 0.0001
   })
 const topDeckWaveformPlaybackActive = computed(() => resolveDeckWaveformPlaybackActive('top'))
 const bottomDeckWaveformPlaybackActive = computed(() => resolveDeckWaveformPlaybackActive('bottom'))
@@ -734,6 +734,7 @@ const resolveDeckToolbarState = (deck: DeckKey) => {
 
 useHorizontalBrowseModeShellHotkeys({
   runtime,
+  onPlayerInteraction: handlePlayerInteraction,
   touchDeckInteraction,
   resolveDeckSong,
   ejectDeckSong: handleDeckEjectSong,
@@ -998,6 +999,10 @@ onUnmounted(() => {
       'is-light-theme': isLightTheme,
       'is-fader-controls-expanded': faderControlsExpanded && !isEditMode
     }"
+    @pointerdown.capture="handlePlayerInteraction"
+    @wheel.capture="handlePlayerInteraction"
+    @keydown.capture="handlePlayerInteraction"
+    @drop.capture="handlePlayerInteraction"
   >
     <div class="controls" :class="{ 'controls--edit': isEditMode }">
       <HorizontalBrowseEditDeckControls

src/renderer/src/composables/horizontalBrowse/useHorizontalBrowseHotkeys.ts

@@ -13,6 +13,7 @@ type CrossfaderDirection = -1 | 0 | 1
 
 type UseHorizontalBrowseHotkeysParams = {
   runtime: ReturnType<typeof useRuntimeStore>
+  onPlayerInteraction?: () => void
   onTogglePlayPause: (deck: HorizontalBrowseDeckKey) => void
   onCueKeyDown: (deck: HorizontalBrowseDeckKey) => boolean
   onCueKeyUp: (deck: HorizontalBrowseDeckKey) => void
@@ -73,6 +74,26 @@ const resolvePercentByCode = (code: string) => {
 const isHorizontalBrowsePhraseJumpHotkey = (event: KeyboardEvent) =>
   event.altKey && (event.code === 'KeyA' || event.code === 'KeyD')
 
+const isHorizontalBrowsePlayerControlHotkey = (event: KeyboardEvent) => {
+  if (isHorizontalBrowsePhraseJumpHotkey(event)) return true
+  if (
+    event.code === 'Space' ||
+    event.code === 'KeyC' ||
+    event.code === 'KeyA' ||
+    event.code === 'KeyD' ||
+    event.code === 'ArrowLeft' ||
+    event.code === 'ArrowRight' ||
+    event.code === 'KeyW' ||
+    event.code === 'KeyS' ||
+    event.code === 'ArrowUp' ||
+    event.code === 'ArrowDown' ||
+    event.code === 'KeyF'
+  ) {
+    return true
+  }
+  return resolvePercentByCode(event.code) !== null
+}
+
 export const useHorizontalBrowseHotkeys = (params: UseHorizontalBrowseHotkeysParams) => {
   const activeCueDeckByCode = new Map<string, HorizontalBrowseDeckKey>()
   const activeCrossfaderKeys = new Set<string>()
@@ -175,9 +196,13 @@ export const useHorizontalBrowseHotkeys = (params: UseHorizontalBrowseHotkeysPar
         emitPreviewMoveRequest('CuratedLibrary')
         return
       }
-      stopKeyboardEvent(event)
-      return
+      if (!isHorizontalBrowsePlayerControlHotkey(event)) {
+        stopKeyboardEvent(event)
+        return
+      }
     }
+    const playerControlHotkey = isHorizontalBrowsePlayerControlHotkey(event)
+    if (playerControlHotkey) params.onPlayerInteraction?.()
     const deck = resolveDeckByShiftState(event)
 
     if (isHorizontalBrowsePhraseJumpHotkey(event)) {

src/renderer/src/composables/horizontalBrowse/useHorizontalBrowseModeShellHotkeys.ts

@@ -14,6 +14,7 @@ type CrossfaderKeyboardTarget = {
 
 type UseHorizontalBrowseModeShellHotkeysParams = {
   runtime: ReturnType<typeof useRuntimeStore>
+  onPlayerInteraction?: () => void
   touchDeckInteraction: (deck: DeckKey) => void
   resolveDeckSong: (deck: DeckKey) => ISongInfo | null
   ejectDeckSong: (deck: DeckKey) => Promise<unknown>
@@ -55,6 +56,7 @@ export const useHorizontalBrowseModeShellHotkeys = (
 
   useHorizontalBrowseHotkeys({
     runtime: params.runtime,
+    onPlayerInteraction: params.onPlayerInteraction,
     onTogglePlayPause: params.onTogglePlayPause,
     onCueKeyDown: params.onCueKeyDown,
     onCueKeyUp: params.onCueKeyUp,

src/renderer/src/composables/horizontalBrowse/useHorizontalBrowseWaveformPreviewSuspension.spec.ts

@@ -30,7 +30,8 @@ describe('useHorizontalBrowseWaveformPreviewSuspension', () => {
       useHorizontalBrowseWaveformPreviewSuspension({
         nativeTransport: { state, setAuditionSuspended },
         syncDeckRenderState,
-        setAuditionPresentationSuspended
+        setAuditionPresentationSuspended,
+        playerInteractionEnabled: () => true
       })
     })
 
@@ -63,7 +64,8 @@ describe('useHorizontalBrowseWaveformPreviewSuspension', () => {
       useHorizontalBrowseWaveformPreviewSuspension({
         nativeTransport: { state, setAuditionSuspended },
         syncDeckRenderState: vi.fn(),
-        setAuditionPresentationSuspended
+        setAuditionPresentationSuspended,
+        playerInteractionEnabled: () => true
       })
     })
 
@@ -82,4 +84,31 @@ describe('useHorizontalBrowseWaveformPreviewSuspension', () => {
     expect(setAuditionPresentationSuspended).toHaveBeenLastCalledWith(false)
     scope.stop()
   })
+
+  it('冻结期间的双轨播放器操作会请求结束波形试听', async () => {
+    const state = reactive({ auditionSuspended: false })
+    const stopListener = vi.fn()
+    emitter.on('waveform-preview:stop', stopListener)
+    const scope = effectScope()
+    const suspension = scope.run(() =>
+      useHorizontalBrowseWaveformPreviewSuspension({
+        nativeTransport: {
+          state,
+          setAuditionSuspended: async (suspended) => {
+            state.auditionSuspended = suspended
+          }
+        },
+        syncDeckRenderState: vi.fn(),
+        setAuditionPresentationSuspended: vi.fn(),
+        playerInteractionEnabled: () => true
+      })
+    )
+
+    await emitGate(WAVEFORM_PREVIEW_TRANSPORT_SUSPEND_EVENT, 'session-player-input')
+    suspension?.handlePlayerInteraction()
+
+    expect(stopListener).toHaveBeenCalledWith({ reason: 'manual-play' })
+    emitter.off('waveform-preview:stop', stopListener)
+    scope.stop()
+  })
 })

src/renderer/src/composables/horizontalBrowse/useHorizontalBrowseWaveformPreviewSuspension.ts

@@ -2,6 +2,7 @@ import { onScopeDispose } from 'vue'
 import emitter from '@renderer/utils/mitt'
 import type { HorizontalBrowseRenderSyncOptions } from '@renderer/composables/horizontalBrowse/useHorizontalBrowseRenderSync'
 import {
+  stopWaveformPreviewForTransportInteraction,
   WAVEFORM_PREVIEW_TRANSPORT_RESUME_EVENT,
   WAVEFORM_PREVIEW_TRANSPORT_SUSPEND_EVENT,
   type WaveformPreviewTransportGatePayload
@@ -16,6 +17,7 @@ type UseHorizontalBrowseWaveformPreviewSuspensionParams = {
   }
   syncDeckRenderState: (input?: number | HorizontalBrowseRenderSyncOptions) => void
   setAuditionPresentationSuspended: (suspended: boolean) => void
+  playerInteractionEnabled: () => boolean
 }
 
 const isGatePayload = (payload: unknown): payload is WaveformPreviewTransportGatePayload => {
@@ -77,6 +79,11 @@ export const useHorizontalBrowseWaveformPreviewSuspension = (
   emitter.on(WAVEFORM_PREVIEW_TRANSPORT_SUSPEND_EVENT, handleSuspend)
   emitter.on(WAVEFORM_PREVIEW_TRANSPORT_RESUME_EVENT, handleResume)
 
+  const handlePlayerInteraction = () => {
+    if (!activeSessionId || !params.playerInteractionEnabled()) return
+    stopWaveformPreviewForTransportInteraction()
+  }
+
   onScopeDispose(() => {
     disposed = true
     emitter.off(WAVEFORM_PREVIEW_TRANSPORT_SUSPEND_EVENT, handleSuspend)
@@ -89,4 +96,6 @@ export const useHorizontalBrowseWaveformPreviewSuspension = (
       activeSessionId = ''
     }).catch(() => undefined)
   })
+
+  return { handlePlayerInteraction }
 }

src/renderer/src/utils/exclusivePlayback.ts

@@ -69,3 +69,7 @@ export const suspendTransportForWaveformPreview = async (sessionId: string) => {
 export const resumeTransportAfterWaveformPreview = async (sessionId: string) => {
   await runWaveformPreviewTransportGate(WAVEFORM_PREVIEW_TRANSPORT_RESUME_EVENT, sessionId)
 }
+
+export const stopWaveformPreviewForTransportInteraction = () => {
+  emitter.emit('waveform-preview:stop', { reason: 'manual-play' })
+}