fix(ui): 修正横向浏览变速预览交接

Author: coderDJing

drafts/intermittent-bugs/horizontal-browse-live-tempo-release-jitter.md

@@ -70,11 +70,15 @@ fn resolved_output_sample_rate(output_sample_rate: f64, source_sample_rate: u32)
 }
 
 pub(super) fn should_use_master_tempo(target: &DeckState) -> bool {
-  target.master_tempo_enabled
-    && (target.playback_rate - 1.0).abs() > 0.0001
-    && !target.pcm_data.is_empty()
-    && target.sample_rate > 0
-    && target.channels > 0
+  if !target.master_tempo_enabled
+    || target.pcm_data.is_empty()
+    || target.sample_rate == 0
+    || target.channels == 0
+  {
+    return false;
+  }
+  // 已经在拉伸时划过原速不要关掉处理器，避免 BPM 拖动经过 1.0 时咔一声。
+  (target.playback_rate - 1.0).abs() > 0.0001 || target.master_tempo_state.processor.is_some()
 }
 
 fn configure_processor(target: &mut DeckState, output_sample_rate: f64) {

rust_package/src/horizontal_browse_transport_audio.rs

@@ -204,6 +204,13 @@ export function registerHorizontalBrowseTransportHandlers() {
     }
   )
 
+  ipcMain.on(
+    'horizontal-browse-transport:set-playback-rate-live',
+    (_event, deck: HorizontalBrowseDeckKey, nowMs: number, playbackRate: number) => {
+      horizontalBrowseTransportBridge.setPlaybackRate(deck, nowMs, playbackRate)
+    }
+  )
+
   ipcMain.handle(
     'horizontal-browse-transport:set-tempo-nudge-playback-rate',
     async (_event, deck: HorizontalBrowseDeckKey, nowMs: number, playbackRate: number) => {

src/main/ipc/horizontalBrowseTransportHandlers.ts

@@ -129,6 +129,8 @@ const exactSendChannels = new Set([
   'whatsNew-toggle-minimize'
 ])
 
+const exactSendTransportChannels = new Set(['horizontal-browse-transport:set-playback-rate-live'])
+
 const exactListenChannels = new Set([
   'addSongFingerprintFinished',
   'analysis-runtime-download-state',
@@ -259,6 +261,7 @@ const isAllowedIpcChannel = (method: IpcMethod, channel: string): boolean => {
   if (method === 'send') {
     return (
       exactSendChannels.has(channel) ||
+      exactSendTransportChannels.has(channel) ||
       channel.startsWith('mini-player:') ||
       sourceChannelPrefixes.some((prefix) => channel === `${prefix}stream-preview-waveforms`)
     )

src/preload/index.ts

@@ -38,6 +38,7 @@ const props = defineProps<{
   playbackActive: boolean
   playbackRate: number
   visualPlaybackRate?: number
+  liveTempoPreviewRate?: number | null
   waveformGain?: number
   playbackSyncRevision: number
   gridBpm: number
@@ -107,6 +108,8 @@ defineExpose<HorizontalBrowseRawWaveformDetailExpose>({
   releaseDynamicGridSelectionForBpmInput: () =>
     detailRef.value?.releaseDynamicGridSelectionForBpmInput?.(),
   cycleMetronomeState: () => detailRef.value?.cycleMetronomeState?.(),
+  setLiveTempoPreviewRate: (rate: number | null) =>
+    detailRef.value?.setLiveTempoPreviewRate?.(rate),
   prepareStableFrameForAnchor: (seconds: number, options?: { timeoutMs?: number }) =>
     detailRef.value?.prepareStableFrameForAnchor?.(seconds, options) ?? Promise.resolve(false),
   commitLinkedGridVisualTransaction: (
@@ -138,6 +141,7 @@ defineExpose<HorizontalBrowseRawWaveformDetailExpose>({
       :playback-active="props.playbackActive"
       :playback-rate="props.playbackRate"
       :visual-playback-rate="props.visualPlaybackRate"
+      :live-tempo-preview-rate="props.liveTempoPreviewRate"
       :waveform-gain="props.waveformGain"
       :playback-sync-revision="props.playbackSyncRevision"
       :grid-bpm="props.gridBpm"

src/renderer/src/components/HorizontalBrowseDeckDetailLane.vue

@@ -91,6 +91,7 @@ const emit = defineEmits<{
   (event: 'shift-right-small'): void
   (event: 'shift-right-large'): void
   (event: 'update-bpm-input', value: string): void
+  (event: 'live-bpm-input', value: string): void
   (event: 'blur-bpm-input'): void
   (event: 'tap-bpm'): void
   (event: 'memory-cue'): void
@@ -213,6 +214,7 @@ const isTop = props.position === 'top'
         @shift-right-small="emit('shift-right-small')"
         @shift-right-large="emit('shift-right-large')"
         @update-bpm-input="emit('update-bpm-input', $event)"
+        @live-bpm-input="emit('live-bpm-input', $event)"
         @blur-bpm-input="emit('blur-bpm-input')"
         @tap-bpm="emit('tap-bpm')"
         @memory-cue="emit('memory-cue')"

src/renderer/src/components/HorizontalBrowseDeckOverviewSection.vue

@@ -48,6 +48,7 @@ const emit = defineEmits<{
   (event: 'shift-right-small'): void
   (event: 'shift-right-large'): void
   (event: 'update-bpm-input', value: string): void
+  (event: 'live-bpm-input', value: string): void
   (event: 'blur-bpm-input'): void
   (event: 'tap-bpm'): void
   (event: 'memory-cue'): void
@@ -141,6 +142,7 @@ const handleTempoNudgeKeyUp = (direction: HorizontalBrowseTempoNudgeDirection) =
           @shift-right-small="emit('shift-right-small')"
           @shift-right-large="emit('shift-right-large')"
           @update-bpm-input="emit('update-bpm-input', $event)"
+          @live-bpm-input="emit('live-bpm-input', $event)"
           @blur-bpm-input="emit('blur-bpm-input')"
           @tap-bpm="emit('tap-bpm')"
           @memory-cue="emit('memory-cue')"

src/renderer/src/components/HorizontalBrowseDeckToolbarRow.vue

@@ -326,13 +326,22 @@ const {
   getDeckSong: resolveDeckSong,
   setDeckSong
 })
-const { isDeckMasterTempoEnabled, toggleDeckMasterTempo, setDeckTargetBpm, resetDeckTempo } =
-  useHorizontalBrowseDeckTempoControls({
-    resolveDeckSong,
-    resolveDeckGridBpm,
-    resolveTransportDeckSnapshot,
-    nativeTransport
-  })
+const {
+  isDeckMasterTempoEnabled,
+  toggleDeckMasterTempo,
+  scheduleDeckLiveTargetBpm,
+  commitDeckTargetBpm,
+  cancelDeckLiveTargetBpm,
+  resetDeckTempo
+} = useHorizontalBrowseDeckTempoControls({
+  resolveDeckSong,
+  resolveDeckGridBpm,
+  resolveTransportDeckSnapshot,
+  nativeTransport,
+  onLiveVisualPlaybackRate: (deck, playbackRate) => {
+    resolveDetailRef(deck)?.setLiveTempoPreviewRate?.(playbackRate)
+  }
+})
 resolveDeckMasterTempoEnabledForTransport = isDeckMasterTempoEnabled
 const handleDeckMasterTempoToggle = (deck: DeckKey) => {
   touchDeckInteraction(deck)
@@ -652,6 +661,7 @@ const {
   handleDeckMetronomeStateCycle,
   handleDeckBpmTap,
   handleDeckBpmInputUpdate,
+  handleDeckBpmInputLive,
   handleDeckBpmInputBlur,
   handleDeckSelectWholeAdjustment,
   handleDeckSplitAfterPlayhead,
@@ -666,7 +676,9 @@ const {
   resolveDeckToolbarBpmInputValue,
   shouldPreserveGridShiftPhase,
   shouldCommitBpmInputAsGridEdit: (deck) => isEditMode.value && deck === 'top',
-  setDeckTargetBpm
+  scheduleDeckLiveTargetBpm,
+  commitDeckTargetBpm,
+  cancelDeckLiveTargetBpm
 })
 
 const resolveDeckSyncUiEnabled = (deck: DeckKey) =>
@@ -871,6 +883,7 @@ const waveformStackModel: HorizontalBrowseModeShellWaveformStackModel = {
   handleDeckGridShiftSmallRight,
   handleDeckGridShiftLargeRight,
   handleDeckBpmInputUpdate,
+  handleDeckBpmInputLive,
   handleDeckBpmInputBlur,
   handleDeckBpmTap,
   handleDeckMemoryCueCreate,

src/renderer/src/components/HorizontalBrowseModeShell.vue

@@ -189,6 +189,7 @@ onUnmounted(() => {
       @shift-right-small="model.handleDeckGridShiftSmallRight('top')"
       @shift-right-large="model.handleDeckGridShiftLargeRight('top')"
       @update-bpm-input="model.handleDeckBpmInputUpdate('top', $event)"
+      @live-bpm-input="model.handleDeckBpmInputLive('top', $event)"
       @blur-bpm-input="model.handleDeckBpmInputBlur('top')"
       @tap-bpm="model.handleDeckBpmTap('top')"
       @memory-cue="handleTopMemoryCueCreate()"
@@ -413,6 +414,7 @@ onUnmounted(() => {
       @shift-right-small="model.handleDeckGridShiftSmallRight('bottom')"
       @shift-right-large="model.handleDeckGridShiftLargeRight('bottom')"
       @update-bpm-input="model.handleDeckBpmInputUpdate('bottom', $event)"
+      @live-bpm-input="model.handleDeckBpmInputLive('bottom', $event)"
       @blur-bpm-input="model.handleDeckBpmInputBlur('bottom')"
       @tap-bpm="model.handleDeckBpmTap('bottom')"
       @memory-cue="void model.handleDeckMemoryCueCreate('bottom')"

src/renderer/src/components/HorizontalBrowseModeShellWaveformStack.vue

@@ -39,6 +39,14 @@
   overflow: hidden;
 }
 
+.raw-detail-waveform__tempo-scaler {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  transform-origin: 50% 50%;
+  backface-visibility: hidden;
+}
+
 .raw-detail-waveform__unavailable {
   position: absolute;
   inset: 0;
@@ -66,6 +74,7 @@
 .raw-detail-waveform__overlay-surface {
   opacity: 0;
   transition: none;
+  backface-visibility: hidden;
 }
 
 .raw-detail-waveform__canvas--waveform {