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: