Add default timeline and heatmap visibility settings

Author: sioaeko

src/App.tsx

@@ -230,6 +230,8 @@ export default function App() {
           onSeek={handleSeek}
           mediaRef={mediaRef}
           handyInfo={handyConnected ? { connected: true, ping: handyService.ping, uploadStatus: handyUploadStatus } : { connected: false, ping: null, uploadStatus: 'idle' as const }}
+          defaultShowHeatmap={settings.showHeatmapByDefault}
+          defaultShowTimeline={settings.showTimelineByDefault}
           timelineHeight={settings.timelineHeight}
           timelineWindow={settings.timelineWindow}
           speedColors={settings.speedColors}

src/components/Settings.tsx

@@ -243,6 +243,30 @@ function TimelineSection({
           onChange={(v) => update('speedColors', v)}
         />
       </FieldRow>
+
+      <Divider />
+
+      <FieldRow
+        label={t('settings.defaultShowTimeline')}
+        description={t('settings.defaultShowTimelineDesc')}
+      >
+        <Toggle
+          checked={settings.showTimelineByDefault}
+          onChange={(v) => update('showTimelineByDefault', v)}
+        />
+      </FieldRow>
+
+      <Divider />
+
+      <FieldRow
+        label={t('settings.defaultShowHeatmap')}
+        description={t('settings.defaultShowHeatmapDesc')}
+      >
+        <Toggle
+          checked={settings.showHeatmapByDefault}
+          onChange={(v) => update('showHeatmapByDefault', v)}
+        />
+      </FieldRow>
     </div>
   )
 }

src/components/VideoPlayer.tsx

@@ -40,6 +40,8 @@ interface VideoPlayerProps {
   onSeek: (time: number) => void
   mediaRef: React.MutableRefObject<HTMLMediaElement | null>
   handyInfo?: HandyOverlayInfo | null
+  defaultShowHeatmap?: boolean
+  defaultShowTimeline?: boolean
   timelineHeight?: number
   timelineWindow?: number
   speedColors?: boolean
@@ -57,6 +59,8 @@ export default function VideoPlayer({
   onSeek,
   mediaRef,
   handyInfo,
+  defaultShowHeatmap = false,
+  defaultShowTimeline = false,
   timelineHeight = 64,
   timelineWindow = 10,
   speedColors = true,
@@ -65,8 +69,8 @@ export default function VideoPlayer({
   const containerRef = useRef<HTMLDivElement>(null)
   const [playing, setPlaying] = useState(false)
   const [showHandyOverlay, setShowHandyOverlay] = useState(false)
-  const [showHeatmap, setShowHeatmap] = useState(false)
-  const [showTimeline, setShowTimeline] = useState(true)
+  const [showHeatmap, setShowHeatmap] = useState(defaultShowHeatmap)
+  const [showTimeline, setShowTimeline] = useState(defaultShowTimeline)
   const handyOverlayTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
@@ -230,7 +234,9 @@ export default function VideoPlayer({
     setDuration(0)
     setPlaying(false)
     setShowControls(true)
-  }, [videoUrl])
+    setShowHeatmap(defaultShowHeatmap)
+    setShowTimeline(defaultShowTimeline)
+  }, [videoUrl, defaultShowHeatmap, defaultShowTimeline])
 
   return (
     <div

src/i18n/locales/en.ts

@@ -83,6 +83,10 @@ const en: Record<string, string> = {
   'settings.rememberVolumeDesc': 'Persist volume level between sessions',
   'settings.rememberPositionDesc': 'Resume videos from where you left off',
   'settings.scriptColorsDesc': 'Color funscript strokes by speed intensity',
+  'settings.defaultShowTimeline': 'Show timeline by default',
+  'settings.defaultShowTimelineDesc': 'Turn the timeline on automatically when media with a script is opened',
+  'settings.defaultShowHeatmap': 'Show heatmap by default',
+  'settings.defaultShowHeatmapDesc': 'Turn the heatmap on automatically when media with a script is opened',
   'settings.visibleWindow': 'Visible Window',
   'settings.strokeRangeMin': 'Stroke Range Min',
   'settings.strokeRangeMax': 'Stroke Range Max',

src/i18n/locales/ja.ts

@@ -82,6 +82,10 @@ const ja: Record<string, string> = {
   'settings.rememberVolumeDesc': '\u30BB\u30C3\u30B7\u30E7\u30F3\u9593\u3067\u97F3\u91CF\u30EC\u30D9\u30EB\u3092\u4FDD\u6301\u3057\u307E\u3059',
   'settings.rememberPositionDesc': '\u4E2D\u65AD\u3057\u305F\u4F4D\u7F6E\u304B\u3089\u52D5\u753B\u3092\u518D\u958B\u3057\u307E\u3059',
   'settings.scriptColorsDesc': '\u901F\u5EA6\u5F37\u5EA6\u306B\u3088\u308A\u30D5\u30A1\u30F3\u30B9\u30AF\u30EA\u30D7\u30C8\u306E\u30B9\u30C8\u30ED\u30FC\u30AF\u306B\u8272\u3092\u4ED8\u3051\u307E\u3059',
+  'settings.defaultShowTimeline': '\u30BF\u30A4\u30E0\u30E9\u30A4\u30F3\u3092\u521D\u671F\u8868\u793A',
+  'settings.defaultShowTimelineDesc': '\u30B9\u30AF\u30EA\u30D7\u30C8\u4ED8\u304D\u30E1\u30C7\u30A3\u30A2\u3092\u958B\u3044\u305F\u3068\u304D\u306B\u30BF\u30A4\u30E0\u30E9\u30A4\u30F3\u3092\u81EA\u52D5\u3067\u8868\u793A\u3057\u307E\u3059',
+  'settings.defaultShowHeatmap': '\u30D2\u30FC\u30C8\u30DE\u30C3\u30D7\u3092\u521D\u671F\u8868\u793A',
+  'settings.defaultShowHeatmapDesc': '\u30B9\u30AF\u30EA\u30D7\u30C8\u4ED8\u304D\u30E1\u30C7\u30A3\u30A2\u3092\u958B\u3044\u305F\u3068\u304D\u306B\u30D2\u30FC\u30C8\u30DE\u30C3\u30D7\u3092\u81EA\u52D5\u3067\u8868\u793A\u3057\u307E\u3059',
   'settings.visibleWindow': '\u8868\u793A\u30A6\u30A3\u30F3\u30C9\u30A6',
   'settings.strokeRangeMin': '\u30B9\u30C8\u30ED\u30FC\u30AF\u7BC4\u56F2 \u6700\u5C0F',
   'settings.strokeRangeMax': '\u30B9\u30C8\u30ED\u30FC\u30AF\u7BC4\u56F2 \u6700\u5927',

src/i18n/locales/ko.ts

@@ -82,6 +82,10 @@ const ko: Record<string, string> = {
   'settings.rememberVolumeDesc': '\uC138\uC158 \uAC04 \uBCFC\uB968 \uB808\uBCA8\uC744 \uC720\uC9C0\uD569\uB2C8\uB2E4',
   'settings.rememberPositionDesc': '\uC911\uB2E8\uD55C \uC704\uCE58\uC5D0\uC11C \uB3D9\uC601\uC0C1\uC744 \uC7AC\uAC1C\uD569\uB2C8\uB2E4',
   'settings.scriptColorsDesc': '\uC18D\uB3C4 \uAC15\uB3C4\uC5D0 \uB530\uB77C \uD3B8\uC2A4\uD06C\uB9BD\uD2B8 \uC2A4\uD2B8\uB85C\uD06C\uC5D0 \uC0C9\uC0C1\uC744 \uC801\uC6A9\uD569\uB2C8\uB2E4',
+  'settings.defaultShowTimeline': '\uD0C0\uC784\uB77C\uC778 \uAE30\uBCF8 \uD45C\uC2DC',
+  'settings.defaultShowTimelineDesc': '\uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uC788\uB294 \uBBF8\uB514\uC5B4\uB97C \uC5F4 \uB54C \uD0C0\uC784\uB77C\uC778\uC744 \uC790\uB3D9\uC73C\uB85C \uCF2D\uB2C8\uB2E4',
+  'settings.defaultShowHeatmap': '\uD788\uD2B8\uB9F5 \uAE30\uBCF8 \uD45C\uC2DC',
+  'settings.defaultShowHeatmapDesc': '\uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uC788\uB294 \uBBF8\uB514\uC5B4\uB97C \uC5F4 \uB54C \uD788\uD2B8\uB9F5\uC744 \uC790\uB3D9\uC73C\uB85C \uCF2D\uB2C8\uB2E4',
   'settings.visibleWindow': '\uD45C\uC2DC \uCC3D',
   'settings.strokeRangeMin': '\uC2A4\uD2B8\uB85C\uD06C \uBC94\uC704 \uCD5C\uC18C',
   'settings.strokeRangeMax': '\uC2A4\uD2B8\uB85C\uD06C \uBC94\uC704 \uCD5C\uB300',

src/i18n/locales/zh.ts

@@ -82,6 +82,10 @@ const zh: Record<string, string> = {
   'settings.rememberVolumeDesc': '\u5728\u4F1A\u8BDD\u4E4B\u95F4\u4FDD\u6301\u97F3\u91CF\u7EA7\u522B',
   'settings.rememberPositionDesc': '\u4ECE\u4E0A\u6B21\u505C\u6B62\u7684\u4F4D\u7F6E\u7EE7\u7EED\u64AD\u653E\u89C6\u9891',
   'settings.scriptColorsDesc': '\u6839\u636E\u901F\u5EA6\u5F3A\u5EA6\u4E3A\u8D85\u7EA7\u811A\u672C\u7B14\u89E6\u7740\u8272',
+  'settings.defaultShowTimeline': '\u9ED8\u8BA4\u663E\u793A\u65F6\u95F4\u7EBF',
+  'settings.defaultShowTimelineDesc': '\u6253\u5F00\u5E26\u811A\u672C\u7684\u5A92\u4F53\u65F6\u81EA\u52A8\u663E\u793A\u65F6\u95F4\u7EBF',
+  'settings.defaultShowHeatmap': '\u9ED8\u8BA4\u663E\u793A\u70ED\u529B\u56FE',
+  'settings.defaultShowHeatmapDesc': '\u6253\u5F00\u5E26\u811A\u672C\u7684\u5A92\u4F53\u65F6\u81EA\u52A8\u663E\u793A\u70ED\u529B\u56FE',
   'settings.visibleWindow': '\u53EF\u89C1\u7A97\u53E3',
   'settings.strokeRangeMin': '\u884C\u7A0B\u8303\u56F4 \u6700\u5C0F',
   'settings.strokeRangeMax': '\u884C\u7A0B\u8303\u56F4 \u6700\u5927',

src/services/settings.ts

@@ -8,6 +8,8 @@ export interface AppSettings {
   theme: 'dark' // only dark for now
 
   // Timeline
+  showHeatmapByDefault: boolean
+  showTimelineByDefault: boolean
   timelineHeight: number // px, 40-120
   timelineWindow: number // seconds, 5-30
   speedColors: boolean
@@ -23,6 +25,8 @@ export const defaultSettings: AppSettings = {
   defaultVideoFolder: '',
   scriptFolder: '',
   theme: 'dark',
+  showHeatmapByDefault: false,
+  showTimelineByDefault: false,
   timelineHeight: 64,
   timelineWindow: 10,
   speedColors: true,