1
0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-24 03:12:41 +01:00

improve setZoom

This commit is contained in:
Mikael Finstad 2024-10-06 16:28:50 +02:00
parent 3bba13ad42
commit 25f53e7f7e
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 7 additions and 6 deletions

View File

@ -298,7 +298,8 @@ function App() {
const isRotationSet = rotation !== 360;
const effectiveRotation = useMemo(() => (isRotationSet ? rotation : (activeVideoStream?.tags?.rotate ? parseInt(activeVideoStream.tags.rotate, 10) : undefined)), [isRotationSet, activeVideoStream, rotation]);
const zoomRel = useCallback((rel: number) => setZoom((z) => Math.min(Math.max(z + (rel * (1 + (z / 10))), 1), zoomMax)), []);
const zoomAbs = useCallback((fn: (v: number) => number) => setZoom((z) => Math.min(Math.max(fn(z), 1), zoomMax)), []);
const zoomRel = useCallback((rel: number) => zoomAbs((z) => z + (rel * (1 + (z / 10)))), [zoomAbs]);
const compatPlayerRequired = usingDummyVideo;
const compatPlayerWanted = (
isRotationSet
@ -318,11 +319,11 @@ function App() {
const timelineToggleComfortZoom = useCallback(() => {
if (!comfortZoom) return;
setZoom((prevZoom) => {
zoomAbs((prevZoom) => {
if (prevZoom === 1) return comfortZoom;
return 1;
});
}, [comfortZoom]);
}, [comfortZoom, zoomAbs]);
const maxLabelLength = safeOutputFileName ? 100 : 500;
@ -2539,7 +2540,7 @@ function App() {
<BottomBar
zoom={zoom}
setZoom={setZoom}
setZoom={zoomAbs}
timelineToggleComfortZoom={timelineToggleComfortZoom}
hasVideo={hasVideo}
isRotationSet={isRotationSet}

View File

@ -196,7 +196,7 @@ function BottomBar({
formatTimecode, parseTimecode, playbackRate,
}: {
zoom: number,
setZoom: Dispatch<SetStateAction<number>>,
setZoom: (fn: (z: number) => number) => void,
timelineToggleComfortZoom: () => void,
isRotationSet: boolean,
rotation: number,
@ -457,7 +457,7 @@ function BottomBar({
<div role="button" style={{ marginRight: 5, marginLeft: 10 }} title={t('Zoom')} onClick={timelineToggleComfortZoom}>{Math.floor(zoom)}x</div>
<Select style={{ height: 20, flexBasis: 85, flexGrow: 0 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur((e) => setZoom(parseInt(e.target.value, 10)))}>
<Select style={{ height: 20, flexBasis: 85, flexGrow: 0 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur((e) => setZoom(() => parseInt(e.target.value, 10)))}>
<option key="" value="" disabled>{t('Zoom')}</option>
{zoomOptions.map((val) => (
<option key={val} value={String(val)}>{t('Zoom')} {val}x</option>