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

Author: quanru

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

@@ -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;
           }
         }
       }
@@ -448,7 +452,7 @@
       .page-nav-left {
         .page-nav-toolbar .icon-button {
           &:hover {
-            background: rgba(255, 255, 255, 0.08);
+            background: #2c2e31;
           }
 
           svg {

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

@@ -15,7 +15,6 @@
   max-width: 100%;
   max-height: 100%;
   padding: 12px;
-  background: #f2f4f7;
   box-sizing: border-box;
   border: 1px solid #f2f4f7;
   border-radius: @radius;
@@ -46,8 +45,7 @@
     overflow: hidden;
     position: relative;
     background-color: #000;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
+    border-radius: 4px;
 
     // Player wrapper positions chapter markers relative to the player.
     // Uses aspect-ratio (set via style) + width/height constraints
@@ -71,10 +69,12 @@
       }
     }
 
-    // Remove border/outline from Remotion control bar buttons
+    // Reset Remotion control bar buttons so inner .status-icon handles hover
     button {
       border: none;
       outline: none;
+      background: none;
+      padding: 0;
     }
 
     // Chapter markers overlaid on Remotion's seek bar
@@ -117,6 +117,32 @@
     // Remotion seek bar styles are overridden via JS in useEffect (see index.tsx)
   }
 
+  // Shared icon style for all Remotion control bar buttons
+  // (play/pause, fullscreen, download, settings)
+  .status-icon {
+    transition: 0.2s;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #fff;
+    cursor: pointer;
+    opacity: 0.7;
+
+    svg {
+      color: #fff;
+      font-size: 14px;
+    }
+
+    &:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+
   // Custom controls rendered inside Remotion Player's control bar
   .player-custom-controls {
     display: flex;
@@ -128,28 +154,6 @@
     .ant-spin {
       color: #fff;
     }
-
-    .status-icon {
-      transition: 0.2s;
-      width: 24px;
-      height: 24px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      color: #fff;
-      cursor: pointer;
-
-      svg {
-        color: #fff;
-        font-size: 14px;
-      }
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.15);
-      }
-    }
   }
 }
 
@@ -172,7 +176,6 @@
 // Dark mode styles
 [data-theme='dark'] {
   .player-container {
-    background: #141414;
     border-color: #292929;
 
     &[data-fit-mode='height'] {
@@ -187,7 +190,6 @@
     .canvas-container {
       background-color: #000;
     }
-
   }
 }
 

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

@@ -7,10 +7,10 @@ import {
   DownloadOutlined,
   ExpandOutlined,
   ExportOutlined,
+  FontSizeOutlined,
   LoadingOutlined,
   PauseOutlined,
   ThunderboltOutlined,
-  VideoCameraOutlined,
 } from '@ant-design/icons';
 import { Player as RemotionPlayer } from '@remotion/player';
 import type {
@@ -74,8 +74,8 @@ export function Player(props?: {
     setAutoZoom,
     playbackSpeed,
     setPlaybackSpeed,
-    effectsEnabled,
-    setEffectsEnabled,
+    subtitleEnabled,
+    setSubtitleEnabled,
   } = useGlobalPreference();
 
   useEffect(() => {
@@ -88,11 +88,8 @@ export function Player(props?: {
   const deviceType = props?.deviceType;
   const frameMap = useMemo<FrameMap | null>(() => {
     if (!scripts || scripts.length === 0) return null;
-    return calculateFrameMap(scripts, {
-      effects: effectsEnabled,
-      deviceType,
-    });
-  }, [scripts, effectsEnabled, deviceType]);
+    return calculateFrameMap(scripts, { deviceType });
+  }, [scripts, deviceType]);
 
   const playerRef = useRef<PlayerRef>(null);
   const lastTaskIdRef = useRef<string | null>(null);
@@ -192,11 +189,7 @@ export function Player(props?: {
       const player = playerRef.current;
       if (!player) return;
       const frame = player.getCurrentFrame() ?? 0;
-      const stepsFrame = frame - frameMap.openingDurationInFrames;
-      const taskId =
-        stepsFrame >= 0
-          ? deriveTaskId(frameMap.scriptFrames, stepsFrame)
-          : null;
+      const taskId = deriveTaskId(frameMap.scriptFrames, frame);
       if (taskId !== lastTaskIdRef.current) {
         lastTaskIdRef.current = taskId;
         props.onTaskChange!(taskId);
@@ -214,7 +207,7 @@ export function Player(props?: {
     setIsExporting(true);
     setExportProgress(0);
     try {
-      await exportBrandedVideo(frameMap, effectsEnabled, (pct) =>
+      await exportBrandedVideo(frameMap, (pct) =>
         setExportProgress(Math.round(pct * 100)),
       );
       message.success('Video exported');
@@ -225,30 +218,29 @@ export function Player(props?: {
       setIsExporting(false);
       setExportProgress(0);
     }
-  }, [frameMap, effectsEnabled, isExporting]);
-
-  const [mouseOverSettingsIcon, setMouseOverSettingsIcon] = useState(false);
+  }, [frameMap, isExporting]);
 
   const renderPlayPauseButton: RenderPlayPauseButton = useCallback(
-    ({ playing, isBuffering }) => {
-      if (isBuffering)
-        return <LoadingOutlined spin style={{ color: '#fff' }} />;
-      return playing ? (
-        <PauseOutlined style={{ color: '#fff' }} />
-      ) : (
-        <CaretRightOutlined style={{ color: '#fff' }} />
-      );
-    },
+    ({ playing, isBuffering }) => (
+      <div className="status-icon">
+        {isBuffering ? (
+          <LoadingOutlined spin />
+        ) : playing ? (
+          <PauseOutlined />
+        ) : (
+          <CaretRightOutlined />
+        )}
+      </div>
+    ),
     [],
   );
 
   const renderFullscreenButton: RenderFullscreenButton = useCallback(
-    ({ isFullscreen }) =>
-      isFullscreen ? (
-        <CompressOutlined style={{ color: '#fff' }} />
-      ) : (
-        <ExpandOutlined style={{ color: '#fff' }} />
-      ),
+    ({ isFullscreen }) => (
+      <div className="status-icon">
+        {isFullscreen ? <CompressOutlined /> : <ExpandOutlined />}
+      </div>
+    ),
     [],
   );
 
@@ -334,6 +326,37 @@ export function Player(props?: {
                 />
               </div>
 
+              {/* Subtitle toggle */}
+              <div
+                className="player-settings-item"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  height: '32px',
+                  padding: '0 8px',
+                  borderRadius: '4px',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                  }}
+                >
+                  <FontSizeOutlined style={{ width: '16px', height: '16px' }} />
+                  <span style={{ fontSize: '12px', marginRight: '16px' }}>
+                    Subtitle
+                  </span>
+                </div>
+                <Switch
+                  size="small"
+                  checked={subtitleEnabled}
+                  onChange={(checked) => setSubtitleEnabled(checked)}
+                />
+              </div>
+
               <div className="player-settings-divider" />
 
               {/* Playback speed */}
@@ -368,54 +391,11 @@ export function Player(props?: {
                   {speed}x
                 </div>
               ))}
-
-              <div className="player-settings-divider" />
-
-              {/* Effects toggle */}
-              <div
-                className="player-settings-item"
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  height: '32px',
-                  padding: '0 8px',
-                  borderRadius: '4px',
-                }}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                  }}
-                >
-                  <VideoCameraOutlined
-                    style={{ width: '16px', height: '16px' }}
-                  />
-                  <span style={{ fontSize: '12px', marginRight: '16px' }}>
-                    Effects
-                  </span>
-                </div>
-                <Switch
-                  size="small"
-                  checked={effectsEnabled}
-                  onChange={(checked) => setEffectsEnabled(checked)}
-                />
-              </div>
             </div>
           )}
           menu={{ items: [] }}
         >
-          <div
-            className="status-icon"
-            onMouseEnter={() => setMouseOverSettingsIcon(true)}
-            onMouseLeave={() => setMouseOverSettingsIcon(false)}
-            style={{
-              opacity: mouseOverSettingsIcon ? 1 : 0.7,
-              transition: 'opacity 0.2s',
-            }}
-          >
+          <div className="status-icon">
             <PlayerSettingIcon style={{ width: '16px', height: '16px' }} />
           </div>
         </Dropdown>
@@ -431,16 +411,14 @@ export function Player(props?: {
     setAutoZoom,
     playbackSpeed,
     setPlaybackSpeed,
-    effectsEnabled,
-    setEffectsEnabled,
-    mouseOverSettingsIcon,
+    subtitleEnabled,
+    setSubtitleEnabled,
   ]);
 
   // Compute chapter markers from step boundaries (each img/insight = new chapter)
   const chapterMarkers = useMemo(() => {
     if (!frameMap) return [];
-    const { scriptFrames, totalDurationInFrames, openingDurationInFrames } =
-      frameMap;
+    const { scriptFrames, totalDurationInFrames } = frameMap;
     if (totalDurationInFrames === 0) return [];
 
     const markers: { percent: number; title: string; frame: number }[] = [];
@@ -450,7 +428,7 @@ export function Player(props?: {
         sf.durationInFrames === 0
       )
         continue;
-      const globalFrame = openingDurationInFrames + sf.startFrame;
+      const globalFrame = sf.startFrame;
       const percent = (globalFrame / totalDurationInFrames) * 100;
       if (percent > 1 && percent < 99) {
         const parts = [sf.title, sf.subTitle].filter(Boolean);
@@ -498,8 +476,8 @@ export function Player(props?: {
             component={Composition}
             inputProps={{
               frameMap,
-              effects: effectsEnabled,
               autoZoom,
+              subtitleEnabled,
             }}
             durationInFrames={Math.max(frameMap.totalDurationInFrames, 1)}
             compositionWidth={compositionWidth}