fix(playback): replace best-effort max with 10x

Use a deterministic upper playback rate so visualization load and timing remain predictable across devices.

Author: joaner

src/core/players/IterablePlayer.test.ts

@@ -120,6 +120,25 @@ afterEach(() => {
   messageBus.reset();
 });
 
+describe('IterablePlayer playback speed', () => {
+  it('uses a deterministic 10x maximum instead of a best-effort sentinel', async () => {
+    const player = new IterablePlayer(makeSource([]));
+    let latestState: PlayerState | undefined;
+    player.setListener((state) => {
+      latestState = state;
+    });
+    await player.initialize({});
+
+    player.setSpeed(10);
+    expect(latestState?.activeData?.speed).toBe(10);
+
+    player.setSpeed(64);
+    expect(latestState?.activeData?.speed).toBe(10);
+
+    player.close();
+  });
+});
+
 describe('IterablePlayer high-frequency lane', () => {
   it('routes video-only topics outside the generic message bus', async () => {
     const source = makeSource([makeImageMessage()]);

src/core/players/IterablePlayer.ts

@@ -6,7 +6,7 @@ import type {
   StreamMessagesInTimeRangeArgs,
   Subscription,
 } from '@/core/types/player';
-import { PLAYBACK_SPEED_MAX } from '@/core/types/player';
+import { MAX_PLAYBACK_SPEED } from '@/core/types/player';
 import type { DataQualityReport, Time, Initialization, MessageEvent, TimeRange } from '@/core/types/ros';
 import type { ISourceHandle } from '@/infra/workers/ISourceHandle';
 import type { IMessageCursor } from '@/infra/workers/types';
@@ -469,7 +469,7 @@ export class IterablePlayer implements Player {
     this._advancePlaybackEpoch();
     this._isPlaying = true;
     const now = performance.now();
-    this._clock.play(this._currentTime, this._speedFactor(), now);
+    this._clock.play(this._currentTime, this._speed, now);
     this._lastTickWallMs = now;
     this._pageSuspended = typeof document !== "undefined" && document.hidden;
     if (this._pageSuspended) {
@@ -600,19 +600,11 @@ export class IterablePlayer implements Player {
   }
 
   setSpeed(speed: number): void {
-    if (speed === PLAYBACK_SPEED_MAX) {
-      this._speed = PLAYBACK_SPEED_MAX;
-    } else {
-      this._speed = Math.min(8, Math.max(0.1, speed));
-    }
-    this._clock.setSpeed(this._speedFactor(), performance.now());
+    this._speed = Math.min(MAX_PLAYBACK_SPEED, Math.max(0.1, speed));
+    this._clock.setSpeed(this._speed, performance.now());
     this._emitState();
   }
 
-  private _speedFactor(): number {
-    return this._speed === PLAYBACK_SPEED_MAX ? 64 : this._speed;
-  }
-
   setSamplingFps(fps: number): void {
     const clamped = Math.max(1, Math.min(MAX_SAMPLING_FPS, Math.round(fps)));
     this._samplingFps = clamped;

src/core/types/player.ts

@@ -97,8 +97,8 @@ export interface HighFrequencyConsumer {
   onMessageBatch?: (messages: MessageEvent[]) => void;
 }
 
-/** Sentinel playback speed for “as fast as possible” (see IterablePlayer / PlaybackBar). */
-export const PLAYBACK_SPEED_MAX = -1;
+/** Highest deterministic playback rate exposed by the visualization player. */
+export const MAX_PLAYBACK_SPEED = 10;
 
 export interface Player {
   setListener(listener: (state: PlayerState) => void): void;

src/features/panels/Audio/AudioPanel.tsx

@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl';
 import { useShallow } from 'zustand/react/shallow';
 import { timeToNs } from '@/core/analysis/timeSeries';
 import type { Player } from '@/core/types/player';
-import { PLAYBACK_SPEED_MAX } from '@/core/types/player';
 import { messageBus } from '@/core/pipeline/messageBus';
 import { useSubscriberSeq } from '@/core/pipeline/useMessageBus';
 import { useMessagePipeline } from '@/core/pipeline/useMessagePipeline';
@@ -100,7 +99,6 @@ export const AudioPanel: React.FC<AudioPanelProps> = (props) => {
 
   const allowPlayback = useMemo(() => {
     if (!isPlaying || config.mute) return false;
-    if (speed === PLAYBACK_SPEED_MAX) return false;
     return Math.abs(speed - 1) < 1e-4;
   }, [isPlaying, config.mute, speed]);
 
@@ -259,7 +257,7 @@ export const AudioPanel: React.FC<AudioPanelProps> = (props) => {
   const statusLabel = useMemo(() => {
     if (!config.topic) return formatMessage({ id: 'panels.audio.status.waitingTopic' });
     if (!allowPlayback && isPlaying && !config.mute) {
-      if (speed === PLAYBACK_SPEED_MAX || Math.abs(speed - 1) >= 1e-4) {
+      if (Math.abs(speed - 1) >= 1e-4) {
         return formatMessage({ id: 'panels.audio.status.mutedNon1x' });
       }
     }

src/features/workspace/playback/PlaybackBar.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { PLAYBACK_SPEED_MAX } from '@/core/types/player';
 import { CalendarClock, Pause, Play, SkipBack, SkipForward, Timer } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 import { useIntl } from 'react-intl';
@@ -53,7 +52,7 @@ function percentToTime(percent: number, start: Time, end: Time): Time {
   return { sec, nsec };
 }
 
-const PRESET_SPEEDS = [0.1, 0.25, 0.5, 1, 2, 4, 8] as const;
+const PRESET_SPEEDS = [0.1, 0.25, 0.5, 1, 2, 4, 8, 10] as const;
 const PRESET_SAMPLING_FPS = [15, 30, 45] as const;
 
 const MENUBAR_PLAYBACK_SPEED = 'playback-menubar-speed';
@@ -599,9 +598,7 @@ export const PlaybackBar: React.FC<PlaybackBarProps> = ({ player, extensionConte
                       setPlaybackSettingsMenubarValue(MENUBAR_PLAYBACK_SPEED);
                     }}
                   >
-                    {speed === PLAYBACK_SPEED_MAX
-                      ? formatMessage({ id: 'playback.speedMax' })
-                      : `${speed}x`}
+                    {speed}x
                   </MenubarTrigger>
                   <MenubarContent align="end" sideOffset={6}>
                     <MenubarGroup>
@@ -616,14 +613,6 @@ export const PlaybackBar: React.FC<PlaybackBarProps> = ({ player, extensionConte
                           {item}x
                         </MenubarItem>
                       ))}
-                      <MenubarItem
-                        className={`text-xs ${speed === PLAYBACK_SPEED_MAX ? 'bg-accent text-accent-foreground' : ''}`}
-                        onSelect={() => {
-                          player.setSpeed(PLAYBACK_SPEED_MAX);
-                        }}
-                      >
-                        {formatMessage({ id: 'playback.speedMax' })}
-                      </MenubarItem>
                     </MenubarGroup>
                   </MenubarContent>
                 </MenubarMenu>

src/shared/hooks/useKeyboardShortcuts.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import type { Player } from '@/core/types/player';
-import { PLAYBACK_SPEED_MAX } from '@/core/types/player';
+import { MAX_PLAYBACK_SPEED } from '@/core/types/player';
 import { useMessagePipeline } from '@/core/pipeline/useMessagePipeline';
 import type { MessagePipelineState } from '@/core/pipeline/store';
 import { resolveStepMsFromModifiers } from '@/shared/utils/playbackStep';
@@ -56,8 +56,8 @@ export function useKeyboardShortcuts(player: Player) {
         case 'BracketLeft': {
           e.preventDefault();
           const cur = speedRef.current;
-          if (cur === PLAYBACK_SPEED_MAX) {
-            player.setSpeed(4);
+          if (cur > 8) {
+            player.setSpeed(8);
           } else {
             player.setSpeed(Math.max(0.1, cur / 2));
           }
@@ -66,11 +66,8 @@ export function useKeyboardShortcuts(player: Player) {
         case 'BracketRight': {
           e.preventDefault();
           const cur = speedRef.current;
-          if (cur === PLAYBACK_SPEED_MAX) {
-            break;
-          }
           if (cur >= 8) {
-            player.setSpeed(PLAYBACK_SPEED_MAX);
+            player.setSpeed(MAX_PLAYBACK_SPEED);
           } else {
             player.setSpeed(Math.min(8, cur * 2));
           }

src/shared/intl/messages/en/playback.json

@@ -1,6 +1,5 @@
 {
   "playback.annotationsEmpty": "No annotation ranges",
-  "playback.speedMax": "Max (best effort)",
   "playback.play": "Play playback",
   "playback.pause": "Pause playback",
   "playback.timeMode.relative.aria": "Relative time from log start; click to switch to absolute local time",

src/shared/intl/messages/ja/playback.json

@@ -1,6 +1,5 @@
 {
   "playback.annotationsEmpty": "注釈範囲がありません",
-  "playback.speedMax": "最大（ベストエフォート）",
   "playback.play": "再生",
   "playback.pause": "一時停止",
   "playback.timeMode.relative.aria": "ログ先頭からの相対時刻です。クリックで絶対時刻に切り替え",

src/shared/intl/messages/zh/playback.json

@@ -1,6 +1,5 @@
 {
   "playback.annotationsEmpty": "暂无标注区间",
-  "playback.speedMax": "最大（尽力加速）",
   "playback.play": "播放",
   "playback.pause": "暂停",
   "playback.timeMode.relative.aria": "当前为相对时间，点击切换为绝对时间",