add subtle timeline indicator in fullscreen

closes #2855

src/renderer/src/App.tsx

@@ -83,6 +83,7 @@ import {
   transferTimestamps,
   getOutFileExtension,
   getSuffixedOutPath,
+  calculateTimelinePercent,
 } from './util';
 import getSwal, { errorToast, showPlaybackFailedMessage } from './swal';
 import { adjustRate } from './util/rate-calculator';
@@ -2000,6 +2001,15 @@ function App() {
     }
   }, [videoContainerRef, videoRef]);
 
+  const [fullscreen, setFullscreen] = useState(false);
+
+  useEffect(() => {
+    const onFullscreenChange = () => setFullscreen(screenfull.isFullscreen);
+    if (!screenfull.isEnabled) return undefined;
+    screenfull.on('change', onFullscreenChange);
+    return () => screenfull.off('change', onFullscreenChange);
+  }, []);
+
   const onEditSegmentTags = useCallback((index: number) => {
     setEditingSegmentTagsSegmentIndex(index);
     const seg = cutSegments[index];
@@ -2617,6 +2627,10 @@ function App() {
                         )}
                       </div>
                     )}
+
+                    {fullscreen && (
+                      <div style={{ position: 'absolute', bottom: 0, left: 0, height: '.1em', backgroundColor: 'var(--red-9)', width: calculateTimelinePercent(playerTime, fileDuration) }} />
+                    )}
                   </div>
 
                   <AnimatePresence>

src/renderer/src/Timeline.tsx

@@ -20,6 +20,7 @@ import type { FormatTimecode, InverseCutSegment, OverviewWaveform, RenderableWav
 import Button from './components/Button';
 import type { UseSegments } from './hooks/useSegments';
 import { keyMap } from './hooks/useTimelineScroll';
+import { calculateTimelinePercent as calculateTimelinePercent2, calculateTimelinePos } from './util';
 
 
 type CalculateTimelinePercent = (time: number) => string | undefined;
@@ -169,22 +170,17 @@ function Timeline({
   // See https://github.com/mifi/lossless-cut/issues/259
   const areKeyframesTooClose = keyFramesInZoomWindow.length > zoom * 200;
 
-  const calculateTimelinePos = useCallback((time: number | undefined) => (time !== undefined ? Math.min(time / fileDurationNonZero, 1) : undefined), [fileDurationNonZero]);
-  const calculateTimelinePercent = useCallback((time: number | undefined) => {
-    const pos = calculateTimelinePos(time);
-    return pos !== undefined ? `${pos * 100}%` : undefined;
-  }, [calculateTimelinePos]);
-
-  const currentTimePercent = useMemo(() => calculateTimelinePercent(playerTime), [calculateTimelinePercent, playerTime]);
-  const commandedTimePercent = useMemo(() => calculateTimelinePercent(commandedTime), [calculateTimelinePercent, commandedTime]);
+  const calculateTimelinePercent = useCallback((time: number) => calculateTimelinePercent2(time, fileDurationNonZero), [fileDurationNonZero]);
+  const currentTimePercent = useMemo(() => calculateTimelinePercent2(playerTime, fileDurationNonZero), [fileDurationNonZero, playerTime]);
+  const commandedTimePercent = useMemo(() => calculateTimelinePercent2(commandedTime, fileDurationNonZero), [commandedTime, fileDurationNonZero]);
 
   const timeOfInterestPosPixels = useMemo(() => {
     // https://github.com/mifi/lossless-cut/issues/676
-    const pos = calculateTimelinePos(relevantTime);
+    const pos = calculateTimelinePos(relevantTime, fileDurationNonZero);
     // eslint-disable-next-line react-hooks/refs
     if (pos != null && timelineScrollerRef.current) return pos * zoom * timelineScrollerRef.current!.offsetWidth;
     return undefined;
-  }, [calculateTimelinePos, relevantTime, zoom]);
+  }, [fileDurationNonZero, relevantTime, zoom]);
 
   const calcZoomWindowStartTime = useCallback(() => (timelineScrollerRef.current
     ? (timelineScrollerRef.current.scrollLeft / (timelineScrollerRef.current!.offsetWidth * zoom)) * fileDurationNonZero

src/renderer/src/util.ts

@@ -559,3 +559,9 @@ export function shootConfetti(options?: confetti.Options) {
     ...options,
   });
 }
+
+export const calculateTimelinePos = (time: number | undefined, fileDuration: number | undefined) => (time !== undefined ? Math.min(time / (fileDuration || 1), 1) : undefined);
+export function calculateTimelinePercent(time: number | undefined, fileDuration: number | undefined) {
+  const pos = calculateTimelinePos(time, fileDuration);
+  return pos !== undefined ? `${pos * 100}%` : undefined;
+}

yarn.lock

@@ -8444,16 +8444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "hasown@npm:2.0.2"
-  dependencies:
-    function-bind: "npm:^1.1.2"
-  checksum: 10/7898a9c1788b2862cf0f9c345a6bec77ba4a0c0983c7f19d610c382343d4f98fa260686b225dfb1f88393a66679d2ec58ee310c1d6868c081eda7918f32cc70a
-  languageName: node
-  linkType: hard
-
-"hasown@npm:^2.0.4":
+"hasown@npm:^2.0.2, hasown@npm:^2.0.4":
   version: 2.0.4
   resolution: "hasown@npm:2.0.4"
   dependencies: