feat(player): enhance device shell rendering and improve progress calculation

Author: quanru

packages/visualizer/src/component/player/index.tsx

@@ -81,24 +81,22 @@ export function Player(props?: {
   }, [props?.autoZoom, setAutoZoom]);
 
   const scripts = props?.replayScripts;
-  const imageWidth = props?.imageWidth || 1920;
-  const imageHeight = props?.imageHeight || 1080;
-
   const deviceType = props?.deviceType;
   const frameMap = useMemo<FrameMap | null>(() => {
     if (!scripts || scripts.length === 0) return null;
     return calculateFrameMap(scripts, {
       effects: effectsEnabled,
-      playbackSpeed: 1, // Speed handled by Remotion's playbackRate
       deviceType,
     });
   }, [scripts, effectsEnabled, deviceType]);
 
   const playerRef = useRef<PlayerRef>(null);
+  const lastTaskIdRef = useRef<string | null>(null);
 
   // Track frame for taskId callback
   useEffect(() => {
     if (!frameMap || !props?.onTaskChange) return;
+    lastTaskIdRef.current = null;
     const interval = setInterval(() => {
       const player = playerRef.current;
       if (!player) return;
@@ -108,7 +106,10 @@ export function Player(props?: {
         stepsFrame >= 0
           ? deriveTaskId(frameMap.scriptFrames, stepsFrame)
           : null;
-      props.onTaskChange!(taskId);
+      if (taskId !== lastTaskIdRef.current) {
+        lastTaskIdRef.current = taskId;
+        props.onTaskChange!(taskId);
+      }
     }, 200);
     return () => clearInterval(interval);
   }, [frameMap, props?.onTaskChange]);
@@ -327,7 +328,7 @@ export function Player(props?: {
   const compositionHeight = frameMap.imageHeight;
 
   return (
-    <div className="player-container">
+    <div className="player-container" data-fit-mode={props?.fitMode}>
       <div className="canvas-container">
         <RemotionPlayer
           ref={playerRef}

packages/visualizer/src/component/player/remotion/ProgressBar.tsx

@@ -9,7 +9,7 @@ export const ProgressBar: React.FC = () => {
   const frame = useCurrentFrame();
   const { durationInFrames } = useVideoConfig();
 
-  const progress = interpolate(frame, [0, durationInFrames], [0, 100], {
+  const progress = interpolate(frame, [0, durationInFrames - 1], [0, 100], {
     extrapolateRight: 'clamp',
   });
 

packages/visualizer/src/component/player/remotion/export-branded-video.ts

@@ -1097,7 +1097,7 @@ export async function exportBrandedVideo(
         }
 
         if (effects) drawProgressBar(ctx, f, total);
-        onProgress?.(f / total);
+        onProgress?.((f + 1) / total);
       }
 
       if (targetFrame < total - 1) {

packages/visualizer/src/component/player/remotion/frame-calculator.ts

@@ -51,7 +51,6 @@ export interface ScriptFrame {
 
 export interface FrameMapOptions {
   effects: boolean; // include opening/ending
-  playbackSpeed: number; // affects duration-to-frames conversion
 }
 
 export interface FrameMap {

packages/visualizer/src/component/player/remotion/visual-effects.ts

@@ -390,9 +390,13 @@ export function resolveShellType(deviceType?: string): DeviceShellType {
     case 'android':
       return 'android';
     case 'ios':
+    case 'iphone':
       return 'iphone';
     case 'computer':
+    case 'desktop-app':
       return 'desktop-app';
+    case 'desktop-browser':
+      return 'desktop-browser';
     default:
       return 'desktop-browser';
   }