diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 946528f9..35e2d023 100644
--- a/src/renderer/src/App.tsx
+++ b/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() {
)}
)}
+
+ {fullscreen && (
+
+ )}
diff --git a/src/renderer/src/Timeline.tsx b/src/renderer/src/Timeline.tsx
index b8211dd3..2fab8985 100644
--- a/src/renderer/src/Timeline.tsx
+++ b/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
diff --git a/src/renderer/src/util.ts b/src/renderer/src/util.ts
index d00e68d9..10ec2564 100644
--- a/src/renderer/src/util.ts
+++ b/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;
+}
diff --git a/yarn.lock b/yarn.lock
index 2c13d105..07d00835 100644
--- a/yarn.lock
+++ b/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: