feat(visualizer): device-aware shell rendering with Remotion Player (#2023)

* feat(player): add opening and step scenes for video player

* feat(visualizer): implement cyberpunk visual effects in video export

* feat(visualizer): enhance browser shell with 3D effects and chrome elements

* feat(visualizer): introduce ScriptFrame data structure and refactor calculateFrameMap function

* fix(player): improve player frame retrieval and enhance subtitle handling in video export

* refactor(blackboard): remove unused PIXI imports and enhance overlay functionality
chore(deps): remove unnecessary pixi dependencies from package.json and pnpm-lock.yaml

* feat(visualizer): enhance device support in visualizer

* refactor(visualizer): implement frame state derivation for Remotion player

* feat(player): disable volume controls in Player component

* feat(player): embed toolbar controls into Remotion Player control bar

Use renderCustomControls API to place download, export, and settings
buttons directly in the player's built-in control bar instead of a
separate toolbar section below the video.

* feat(player): add fullscreen button with shared icon style in Remotion Player

* refactor(export-branded-video): improve variable declaration formatting in drawChromeTitleBar function

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

* feat(player): update custom controls with play/pause button and improve button styles

* feat(player): add chapter markers overlay and improve player wrapper structure

* feat(player): update styles for chapter markers and seek bar, enhance tooltip design

* feat(player): enhance player wrapper for aspect ratio handling and portrait mode support

* feat(player): improve device shell rendering for portrait mode and enhance layout calculations

* refactor(player): remove effects system and add subtitle toggle

- Remove all cyberpunk visual effects (opening/ending scenes, glitch,
  ripple, cursor trail, scanlines, HUD corners, 3D transforms)
- Delete OpeningScene, EndingScene, ProgressBar, CyberOverlays components
- Simplify frame-calculator, StepScene, export-branded-video
- Replace effectsEnabled store state with subtitleEnabled toggle
- Add subtitle visibility toggle to player settings panel
- Unify control bar button styles (play/pause, fullscreen, settings)
- Improve sidebar icon-button hover effect to match theme toggle

* fix(report): prevent layout overlap when browser width shrinks

Add min-width constraints and proper overflow handling to prevent
page-side and main-right panels from overlapping at narrow widths.

* feat(player): enhance layout for sidebar resizing and remove device type dependencies

* refactor(player): simplify layout calculations for portrait mode in StepsTimeline

* refactor(report): replace pixi.js with Canvas 2D in Timeline and clean up player

- Rewrite Timeline component from pixi.js to Canvas 2D API
- Remove pixi.js and pixi-filters dependencies
- Delete pixi-loader utility module
- Hide resize handle visual indicator completely
- Simplify StepScene layout calculations for portrait mode
- Add Remotion license acknowledgment to suppress console warning

* feat(player): implement frame player hook and enhance player controls; remove unused components and dependencies

* fix(player): improve resource cleanup for report downloads and video exports

* feat(player): add subtitle rendering and styling to enhance user experience

Author: quanru

apps/report/package.json

@@ -23,8 +23,6 @@
     "@rsbuild/plugin-type-check": "^1.3.2",
     "@types/chrome": "0.0.279",
     "antd": "^5.21.6",
-    "pixi-filters": "6.0.5",
-    "pixi.js": "8.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-resizable-panels": "2.0.22",

apps/report/src/App.less

@@ -81,12 +81,27 @@ footer.mt-8 {
   padding: 0 8px;
 }
 
+.main-layout {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  height: 100%;
+  overflow: hidden;
+}
+
 .page-side {
   height: calc(100% - 8px);
   background: #f2f4f7;
-  padding-right: 8px;
   margin-bottom: 8px;
-  overflow-x: auto;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.resize-handle {
+  width: 8px;
+  flex-shrink: 0;
+  cursor: col-resize;
 }
 
 [data-theme='dark'] .page-side {
@@ -181,6 +196,8 @@ footer.mt-8 {
   border-radius: 16px;
   background: #fff;
   margin-bottom: 8px;
+  min-width: 0;
+  overflow: hidden;
 
   .main-right-header {
     height: 50px;

apps/report/src/App.tsx

@@ -31,6 +31,8 @@ import type {
 } from './types';
 
 let globalRenderCount = 1;
+const SIDEBAR_WIDTH_KEY = 'midscene-sidebar-width';
+const DEFAULT_SIDEBAR_WIDTH = 280;
 
 function Visualizer(props: VisualizerProps): JSX.Element {
   const { dumps } = props;
@@ -53,7 +55,10 @@ function Visualizer(props: VisualizerProps): JSX.Element {
   const modelBriefs = useExecutionDump((store) => store.modelBriefs);
   const reset = useExecutionDump((store) => store.reset);
   const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = useState(0);
-  const mainLayoutChangedRef = useRef(false);
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    const saved = localStorage.getItem(SIDEBAR_WIDTH_KEY);
+    return saved ? Number(saved) : DEFAULT_SIDEBAR_WIDTH;
+  });
   const dump = useExecutionDump((store) => store.dump);
   const [timelineCollapsed, setTimelineCollapsed] = useState(false);
   const {
@@ -153,62 +158,65 @@ function Visualizer(props: VisualizerProps): JSX.Element {
     );
 
     mainContent = (
-      <PanelGroup
-        autoSaveId="main-page-layout"
-        direction="horizontal"
-        onLayout={() => {
-          if (!mainLayoutChangedRef.current) {
-            setMainLayoutChangeFlag((prev) => prev + 1);
-          }
-        }}
-      >
-        <Panel maxSize={95} defaultSize={25} minSize={15}>
-          <div className="page-side">
-            <Sidebar
-              dumps={dumps}
-              proModeEnabled={proModeEnabled}
-              onProModeChange={setProModeEnabled}
-              replayAllScripts={replayAllScripts}
-              setReplayAllMode={setReplayAllMode}
-            />
-          </div>
-        </Panel>
-        <PanelResizeHandle
+      <div className="main-layout">
+        <div className="page-side" style={{ width: sidebarWidth }}>
+          <Sidebar
+            dumps={dumps}
+            proModeEnabled={proModeEnabled}
+            onProModeChange={setProModeEnabled}
+            replayAllScripts={replayAllScripts}
+            setReplayAllMode={setReplayAllMode}
+          />
+        </div>
+        <div
           className="resize-handle"
-          onDragging={(isChanging) => {
-            if (mainLayoutChangedRef.current && !isChanging) {
+          onMouseDown={(e) => {
+            e.preventDefault();
+            const startX = e.clientX;
+            const startWidth = sidebarWidth;
+            let latestWidth = startWidth;
+            const onMouseMove = (ev: MouseEvent) => {
+              latestWidth = Math.max(
+                200,
+                Math.min(500, startWidth + ev.clientX - startX),
+              );
+              setSidebarWidth(latestWidth);
+            };
+            const onMouseUp = () => {
+              document.removeEventListener('mousemove', onMouseMove);
+              document.removeEventListener('mouseup', onMouseUp);
+              localStorage.setItem(SIDEBAR_WIDTH_KEY, String(latestWidth));
               setMainLayoutChangeFlag((prev) => prev + 1);
-            }
-            mainLayoutChangedRef.current = isChanging;
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
           }}
         />
-        <Panel defaultSize={75} maxSize={95}>
-          <div className="main-right">
-            <div
-              className="main-right-header"
-              onClick={() => setTimelineCollapsed(!timelineCollapsed)}
-              style={{ cursor: 'pointer', userSelect: 'none' }}
+        <div className="main-right">
+          <div
+            className="main-right-header"
+            onClick={() => setTimelineCollapsed(!timelineCollapsed)}
+            style={{ cursor: 'pointer', userSelect: 'none' }}
+          >
+            <span
+              className="timeline-collapse-icon"
+              style={{
+                display: 'inline-block',
+                marginRight: 8,
+                transition: 'transform 0.2s',
+                transform: timelineCollapsed
+                  ? 'rotate(-90deg)'
+                  : 'rotate(0deg)',
+              }}
             >
-              <span
-                className="timeline-collapse-icon"
-                style={{
-                  display: 'inline-block',
-                  marginRight: 8,
-                  transition: 'transform 0.2s',
-                  transform: timelineCollapsed
-                    ? 'rotate(-90deg)'
-                    : 'rotate(0deg)',
-                }}
-              >
-                ▼
-              </span>
-              Record
-            </div>
-            {!timelineCollapsed && <Timeline key={mainLayoutChangeFlag} />}
-            <div className="main-content">{content}</div>
+              ▼
+            </span>
+            Record
           </div>
-        </Panel>
-      </PanelGroup>
+          {!timelineCollapsed && <Timeline key={mainLayoutChangeFlag} />}
+          <div className="main-content">{content}</div>
+        </div>
+      </div>
     );
   }
 

apps/report/src/components/pixi-loader/index.tsx

@@ -37,9 +37,13 @@
           cursor: pointer;
           display: flex;
           align-items: center;
+          justify-content: center;
+          padding: 6px;
+          border-radius: 8px;
+          transition: all 0.2s;
 
           &:hover {
-            background: #f5f5f5;
+            background: #e6e8eb;
           }
         }
       }
@@ -456,7 +460,7 @@
       .page-nav-left {
         .page-nav-toolbar .icon-button {
           &:hover {
-            background: rgba(255, 255, 255, 0.08);
+            background: #2c2e31;
           }
 
           svg {

apps/report/src/components/sidebar/index.less

@@ -59,6 +59,7 @@ export interface DumpStoreType {
   modelBriefs: string[];
   insightWidth: number | null;
   insightHeight: number | null;
+  deviceType: string | undefined;
   activeExecution: ExecutionDump | null;
   activeExecutionAnimation: AnimationScript[] | null;
   activeTask: ExecutionTask | null;
@@ -94,6 +95,7 @@ export const useExecutionDump = create<DumpStoreType>((set, get) => {
     modelBriefs: [],
     insightWidth: null,
     insightHeight: null,
+    deviceType: undefined,
     activeTask: null,
     activeExecution: null,
     activeExecutionAnimation: null,
@@ -159,6 +161,7 @@ export const useExecutionDump = create<DumpStoreType>((set, get) => {
           height,
           modelBriefs,
           sdkVersion,
+          deviceType,
         } = allScriptsInfo;
 
         set({
@@ -167,6 +170,7 @@ export const useExecutionDump = create<DumpStoreType>((set, get) => {
           insightHeight: height,
           modelBriefs,
           sdkVersion,
+          deviceType,
         });
 
         const replayAvailable = allScripts.length > 0;