aiden
/
lossless-cut
mirror of https://github.com/mifi/lossless-cut
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

<kbd>shift</kbd> click/drag segment to move/resize

Browse Source 
(configurable modifier key)

closes #517
#2595 #483
pull/2599/head
Mikael Finstad 9 months ago
parent 2511040f84
commit 2511045425
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
9 changed files with 94 additions and 24 deletions
Show Stats Download Patch File Download Diff File

1
src/main/configStore.ts
Unescape Escape View File

@ -145,6 +145,7 @@ const defaults: Config = {
mouseWheelZoomModifierKey: 'ctrl',
mouseWheelFrameSeekModifierKey: 'alt',
mouseWheelKeyframeSeekModifierKey: 'shift',
segmentMouseModifierKey: 'shift',
captureFrameMethod: 'videotag', // we don't default to ffmpeg because ffmpeg might choose a frame slightly off
captureFrameQuality: 0.95,
captureFrameFileNameFormat: 'timestamp',

3
src/renderer/src/App.tsx
Unescape Escape View File

@ -2624,6 +2624,7 @@ function App() {
cutSegments={cutSegments}
setCurrentSegIndex={setCurrentSegIndex}
currentSegIndexSafe={currentSegIndexSafe}
currentCutSeg={currentCutSeg}
inverseCutSegments={inverseCutSegments}
formatTimecode={formatTimecode}
formatTimeAndFrames={formatTimeAndFrames}
@ -2636,6 +2637,7 @@ function App() {
onWheel={onTimelineWheel}
goToTimecode={goToTimecode}
darkMode={darkMode}
setCutTime={setCutTime}
/>
<BottomBar
@ -2752,7 +2754,6 @@ function App() {
onKeyboardShortcutsDialogRequested={toggleKeyboardShortcuts}
askForCleanupChoices={askForCleanupChoices}
toggleStoreProjectInWorkingDir={toggleStoreProjectInWorkingDir}
simpleMode={simpleMode}
clearOutDir={clearOutDir}
/>
<Dialog.CloseButton />

8
src/renderer/src/NoFileLoaded.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { Fragment, memo, useMemo, useState } from 'react';
import { motion, MotionStyle } from 'framer-motion';
import { FaMouse } from 'react-icons/fa';
import { useTranslation, Trans } from 'react-i18next';
import SetCutpointButton from './components/SetCutpointButton';
@ -48,7 +48,7 @@ function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode, keyBindingBy
keyBindingByAction: Record<string, KeyBinding>,
}) {
const { t } = useTranslation();
const { simpleMode } = useUserSettings();
const { simpleMode, segmentMouseModifierKey } = useUserSettings();
const [dragging, setDragging] = useState(false);
const currentCutSegOrDefault = useMemo(() => currentCutSeg ?? { segColorIndex: 0 }, [currentCutSeg]);
@ -63,14 +63,14 @@ function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode, keyBindingBy
role="button"
onClick={onClick}
>
<div style={{ fontSize: '2em', textTransform: 'uppercase', color: 'var(--gray-11)', marginBottom: '.2em' }}>{t('DROP FILE(S)')}</div>
<div style={{ fontSize: '1.7em', textTransform: 'uppercase', color: 'var(--gray-11)', marginBottom: '.1em' }}>{t('DROP FILE(S)')}</div>
<div style={{ fontSize: '1.3em', color: 'var(--gray-11)', marginBottom: '.1em' }}>
<Trans>See <b>Help</b> menu for help</Trans>
</div>
<div style={{ fontSize: '1.3em', color: 'var(--gray-11)' }}>
<Trans><SetCutpointButton currentCutSeg={currentCutSegOrDefault} side="start" style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSegOrDefault} side="end" style={{ verticalAlign: 'middle' }} /> or <Keys keys={keyBindingByAction['setCutStart']?.keys} /> <Keys keys={keyBindingByAction['setCutEnd']?.keys} /> to set cutpoints</Trans>
<Trans><SetCutpointButton currentCutSeg={currentCutSegOrDefault} side="start" style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSegOrDefault} side="end" style={{ verticalAlign: 'middle' }} />, <Keys keys={keyBindingByAction['setCutStart']?.keys} /> <Keys keys={keyBindingByAction['setCutEnd']?.keys} /> or <span><kbd style={{ marginRight: '.1em' }}>{segmentMouseModifierKey}</kbd></span>+<FaMouse style={{ marginRight: '.1em', verticalAlign: 'middle' }} /> to set cutpoints</Trans>
</div>
<div style={{ fontSize: '1.3em', color: 'var(--gray-11)' }} role="button" onClick={(e) => e.stopPropagation()}>

57
src/renderer/src/Timeline.tsx
Unescape Escape View File

@ -17,6 +17,8 @@ import { timelineBackground, darkModeTransition } from './colors';
import { Frame } from './ffmpeg';
import { FormatTimecode, InverseCutSegment, OverviewWaveform, RenderableWaveform, WaveformSlice, StateSegment, Thumbnail } from './types';
import Button from './components/Button';
import { UseSegments } from './hooks/useSegments';
import { keyMap } from './hooks/useTimelineScroll';
type CalculateTimelinePercent = (time: number) => string | undefined;
@ -95,6 +97,7 @@ function Timeline({
cutSegments,
setCurrentSegIndex,
currentSegIndexSafe,
currentCutSeg,
inverseCutSegments,
formatTimecode,
formatTimeAndFrames,
@ -116,6 +119,7 @@ function Timeline({
commandedTimeRef,
goToTimecode,
darkMode,
setCutTime,
} : {
fileDurationNonZero: number,
startTimeOffset: number,
@ -128,6 +132,7 @@ function Timeline({
cutSegments: StateSegment[],
setCurrentSegIndex: (a: number) => void,
currentSegIndexSafe: number,
currentCutSeg: StateSegment | undefined,
inverseCutSegments: InverseCutSegment[],
formatTimecode: FormatTimecode,
formatTimeAndFrames: (a: number) => string,
@ -149,10 +154,11 @@ function Timeline({
commandedTimeRef: MutableRefObject<number>,
goToTimecode: () => void,
darkMode: boolean,
setCutTime: UseSegments['setCutTime'];
}) {
const { t } = useTranslation();
const { invertCutSegments, springAnimation } = useUserSettings();
const { invertCutSegments, springAnimation, segmentMouseModifierKey } = useUserSettings();
const timelineScrollerRef = useRef<HTMLDivElement>(null);
const timelineScrollerSkipEventRef = useRef<boolean>(false);
@ -282,26 +288,63 @@ function Timeline({
const mouseDownRef = useRef<unknown>();
const handleScrub = useCallback((e: MouseEvent) => seekAbs((getMouseTimelinePos(e))), [seekAbs, getMouseTimelinePos]);
useEffect(() => {
setHoveringTime(undefined);
}, [relevantTime]);
// for performance
const currentCutSegRef = useRef<StateSegment | undefined>(currentCutSeg);
useEffect(() => {
currentCutSegRef.current = currentCutSeg;
}, [currentCutSeg]);
const resizingSegmentRef = useRef<{ operation: 'start' | 'end' | 'move', offset?: number } | undefined>();
const onMouseDown = useCallback<MouseEventHandler<HTMLElement>>((e) => {
if (e.nativeEvent.buttons !== 1) return; // not primary button
handleScrub(e.nativeEvent);
const mouseTimelinePos = getMouseTimelinePos(e.nativeEvent);
seekAbs(mouseTimelinePos);
// eslint-disable-next-line no-shadow
const currentCutSeg = currentCutSegRef.current;
// start/end handles 1.5% of visible timeline
const threshold = ((0.01 / 2) * fileDurationNonZero) / zoom;
if (currentCutSeg != null && currentCutSeg.selected && e[keyMap[segmentMouseModifierKey]]) {
if (Math.abs(mouseTimelinePos - currentCutSeg.start) < threshold) {
resizingSegmentRef.current = { operation: currentCutSeg.end == null ? 'move' : 'start' }; // move marker or resize segment
} else if (currentCutSeg.end != null && Math.abs(mouseTimelinePos - currentCutSeg.end) < threshold) {
resizingSegmentRef.current = { operation: 'end' };
} else if (currentCutSeg.end != null && mouseTimelinePos >= currentCutSeg.start && mouseTimelinePos <= currentCutSeg.end) {
resizingSegmentRef.current = { operation: 'move', offset: mouseTimelinePos - currentCutSeg.start };
}
}
mouseDownRef.current = e.target;
function onMouseMove(e2: MouseEvent) {
if (mouseDownRef.current == null) return;
seekAbs(getMouseTimelinePos(e2));
const mouseDragTimelinePos = getMouseTimelinePos(e2);
seekAbs(mouseDragTimelinePos);
try {
// eslint-disable-next-line unicorn/prefer-switch
if (resizingSegmentRef.current?.operation === 'start') {
setCutTime('start', mouseDragTimelinePos);
} else if (resizingSegmentRef?.current?.operation === 'end') {
setCutTime('end', mouseDragTimelinePos);
} else if (resizingSegmentRef?.current?.operation === 'move') {
setCutTime('move', mouseDragTimelinePos - (resizingSegmentRef.current.offset ?? 0));
}
} catch (err) {
console.warn('Error while resizing segment:', err instanceof Error ? err.message : err);
}
}
function onMouseUp() {
mouseDownRef.current = undefined;
resizingSegmentRef.current = undefined;
window.removeEventListener('mouseup', onMouseUp);
window.removeEventListener('mousemove', onMouseMove);
}
@ -311,7 +354,7 @@ function Timeline({
// https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y
window.addEventListener('mouseup', onMouseUp, { once: true });
window.addEventListener('mousemove', onMouseMove);
}, [getMouseTimelinePos, handleScrub, seekAbs]);
}, [fileDurationNonZero, getMouseTimelinePos, seekAbs, segmentMouseModifierKey, setCutTime, zoom]);
const timeRef = useRef<HTMLDivElement>(null);
const timeFadeTimeoutRef = useRef<NodeJS.Timeout>();
@ -323,7 +366,7 @@ function Timeline({
const isInBounds = rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
const showHide = (show: boolean) => timeRef.current?.style.setProperty('opacity', show ? '0.2' : '1');
if (isInBounds != null) showHide(isInBounds);
console.log('isInBounds', isInBounds);
// console.log('isInBounds', isInBounds);
// https://github.com/mifi/lossless-cut/issues/2592#issuecomment-3476211496
if (timeFadeTimeoutRef.current) clearTimeout(timeFadeTimeoutRef.current);

13
src/renderer/src/components/KeyboardShortcuts.tsx
Unescape Escape View File

@ -169,7 +169,7 @@ const KeyboardShortcuts = memo(({
}) => {
const { t } = useTranslation();
const { mouseWheelZoomModifierKey, mouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey } = useUserSettings();
const { mouseWheelZoomModifierKey, mouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey, segmentMouseModifierKey } = useUserSettings();
const { actionsMap, extraLinesPerCategory } = useMemo(() => {
const playbackCategory = t('Playback');
@ -749,13 +749,22 @@ const KeyboardShortcuts = memo(({
<WheelModifier key="4" text={t('Zoom in/out timeline')} wheelText={t('Mouse scroll/wheel up/down')} modifier={mouseWheelZoomModifierKey} />,
],
[segmentsAndCutpointsCategory]: [
<div key="1" style={{ ...rowStyle, alignItems: 'center' }}>
<span>{t('Manipulate segments on timeline')}</span>
<div style={{ flexGrow: 1 }} />
<kbd style={{ marginRight: '.7em' }}>{segmentMouseModifierKey}</kbd>
<FaMouse style={{ marginRight: '.3em' }} />
<span>{t('Mouse click and drag')}</span>
</div>,
],
};
return {
extraLinesPerCategory,
actionsMap,
};
}, [currentCutSeg, mouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey, mouseWheelZoomModifierKey, t]);
}, [currentCutSeg, mouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey, mouseWheelZoomModifierKey, segmentMouseModifierKey, t]);
useEffect(() => {
// cleanup invalid bindings, to prevent renamed actions from blocking user to rebind

11
src/renderer/src/components/Settings.tsx
Unescape Escape View File

@ -17,6 +17,7 @@ import ButtonRaw, { ButtonProps } from './Button';
import { getModifierKeyNames } from '../hooks/useTimelineScroll';
import { TunerType } from '../types';
import Truncated from './Truncated';
import { primaryColor } from '../colors';
// eslint-disable-next-line react/jsx-props-no-spreading
const Button = ({ style, ...props }: ButtonProps) => <ButtonRaw style={{ padding: '.5em .9em', ...style }} {...props} />;
@ -56,20 +57,19 @@ function Settings({
onKeyboardShortcutsDialogRequested,
askForCleanupChoices,
toggleStoreProjectInWorkingDir,
simpleMode,
clearOutDir,
}: {
onTunerRequested: (type: TunerType) => void,
onKeyboardShortcutsDialogRequested: () => void,
askForCleanupChoices: () => Promise<unknown>,
toggleStoreProjectInWorkingDir: () => Promise<void>,
simpleMode: boolean,
clearOutDir: () => Promise<void>,
}) {
const { t } = useTranslation();
const [showAdvanced, setShowAdvanced] = useState(!simpleMode);
const { customOutDir, changeOutDir, keyframeCut, toggleKeyframeCut, timecodeFormat, setTimecodeFormat, invertCutSegments, setInvertCutSegments, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, autoSaveProjectFile, setAutoSaveProjectFile, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, hideNotifications, setHideNotifications, hideOsNotifications, setHideOsNotifications, autoLoadTimecode, setAutoLoadTimecode, enableAutoHtml5ify, setEnableAutoHtml5ify, customFfPath, setCustomFfPath, storeProjectInWorkingDir, mouseWheelZoomModifierKey, setMouseWheelZoomModifierKey, mouseWheelFrameSeekModifierKey, setMouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey, setMouseWheelKeyframeSeekModifierKey, captureFrameMethod, setCaptureFrameMethod, captureFrameQuality, setCaptureFrameQuality, captureFrameFileNameFormat, setCaptureFrameFileNameFormat, enableNativeHevc, setEnableNativeHevc, enableUpdateCheck, setEnableUpdateCheck, allowMultipleInstances, setAllowMultipleInstances, preferStrongColors, setPreferStrongColors, treatInputFileModifiedTimeAsStart, setTreatInputFileModifiedTimeAsStart, treatOutputFileModifiedTimeAsStart, setTreatOutputFileModifiedTimeAsStart, exportConfirmEnabled, toggleExportConfirmEnabled, storeWindowBounds, setStoreWindowBounds, reducedMotion, setReducedMotion } = useUserSettings();
const { customOutDir, changeOutDir, keyframeCut, toggleKeyframeCut, timecodeFormat, setTimecodeFormat, invertCutSegments, setInvertCutSegments, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, autoSaveProjectFile, setAutoSaveProjectFile, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, hideNotifications, setHideNotifications, hideOsNotifications, setHideOsNotifications, autoLoadTimecode, setAutoLoadTimecode, enableAutoHtml5ify, setEnableAutoHtml5ify, customFfPath, setCustomFfPath, storeProjectInWorkingDir, mouseWheelZoomModifierKey, setMouseWheelZoomModifierKey, mouseWheelFrameSeekModifierKey, setMouseWheelFrameSeekModifierKey, mouseWheelKeyframeSeekModifierKey, setMouseWheelKeyframeSeekModifierKey, segmentMouseModifierKey, setSegmentMouseModifierKey, captureFrameMethod, setCaptureFrameMethod, captureFrameQuality, setCaptureFrameQuality, captureFrameFileNameFormat, setCaptureFrameFileNameFormat, enableNativeHevc, setEnableNativeHevc, enableUpdateCheck, setEnableUpdateCheck, allowMultipleInstances, setAllowMultipleInstances, preferStrongColors, setPreferStrongColors, treatInputFileModifiedTimeAsStart, setTreatInputFileModifiedTimeAsStart, treatOutputFileModifiedTimeAsStart, setTreatOutputFileModifiedTimeAsStart, exportConfirmEnabled, toggleExportConfirmEnabled, storeWindowBounds, setStoreWindowBounds, reducedMotion, setReducedMotion, simpleMode } = useUserSettings();
const [showAdvanced, setShowAdvanced] = useState(!simpleMode);
const onLangChange = useCallback<ChangeEventHandler<HTMLSelectElement>>((e) => {
const { value } = e.target;
@ -227,7 +227,7 @@ function Settings({
</KeyCell>
<td>
<Button onClick={() => setInvertCutSegments((v) => !v)}>
<FaYinYang style={{ verticalAlign: 'middle', marginRight: '.3em' }} /> {invertCutSegments ? t('Remove') : t('Keep')}
<FaYinYang style={{ verticalAlign: 'middle', marginRight: '.3em', color: invertCutSegments ? primaryColor : undefined }} /> {invertCutSegments ? t('Remove') : t('Keep')}
</Button>
</td>
</Row>
@ -380,6 +380,7 @@ function Settings({
</td>
</Row>
<ModifierKeySetting text={t('Segment manipulation mouse modifier key')} value={segmentMouseModifierKey} setValue={setSegmentMouseModifierKey} />
<ModifierKeySetting text={t('Mouse wheel zoom modifier key')} value={mouseWheelZoomModifierKey} setValue={setMouseWheelZoomModifierKey} />
<ModifierKeySetting text={t('Mouse wheel frame seek modifier key')} value={mouseWheelFrameSeekModifierKey} setValue={setMouseWheelFrameSeekModifierKey} />
<ModifierKeySetting text={t('Mouse wheel keyframe seek modifier key')} value={mouseWheelKeyframeSeekModifierKey} setValue={setMouseWheelKeyframeSeekModifierKey} />

20
src/renderer/src/hooks/useSegments.tsx
Unescape Escape View File

@ -441,21 +441,31 @@ function useSegments({ filePath, workingRef, setWorking, setProgress, videoStrea
safeSetCutSegments(cutSegmentsNew, fileDuration);
}, [cutSegments, safeSetCutSegments, fileDuration]);
const setCutTime = useCallback((type: 'start' | 'end', time: number | undefined) => {
const setCutTime = useCallback((type: 'start' | 'end' | 'move', time: number | undefined) => {
if (!isDurationValid(fileDuration) || currentCutSeg == null) return;
const clampStart = (start: number) => Math.min(Math.max(start, 0), fileDuration);
const clampEnd = (end?: number | undefined) => (end != null ? Math.min(Math.max(end, 0), fileDuration) : undefined);
if (type === 'start') {
invariant(time != null);
if (currentCutSeg.end != null && time >= currentCutSeg.end) {
throw new Error('Start time must precede end time');
throw new UserFacingError(i18n.t('Segment start time must precede end time'));
}
updateSegAtIndex(currentSegIndexSafe, { start: Math.min(Math.max(time, 0), fileDuration) });
updateSegAtIndex(currentSegIndexSafe, { start: clampStart(time) });
}
if (type === 'end') {
if (time != null && time <= currentCutSeg.start) {
throw new Error('Start time must precede end time');
throw new UserFacingError(i18n.t('Segment start time must precede end time'));
}
updateSegAtIndex(currentSegIndexSafe, { end: time != null ? Math.min(Math.max(time, 0), fileDuration) : undefined });
updateSegAtIndex(currentSegIndexSafe, { end: clampEnd(time) });
}
if (type === 'move') {
invariant(time != null);
updateSegAtIndex(currentSegIndexSafe, {
start: clampStart(time),
...(currentCutSeg.end != null && { end: clampEnd(time + (currentCutSeg.end - currentCutSeg.start)) }),
});
}
}, [currentSegIndexSafe, currentCutSeg, fileDuration, updateSegAtIndex]);

4
src/renderer/src/hooks/useUserSettingsRoot.ts
Unescape Escape View File

@ -153,6 +153,8 @@ export default function useUserSettingsRoot() {
useEffect(() => safeSetConfig({ mouseWheelFrameSeekModifierKey }), [mouseWheelFrameSeekModifierKey]);
const [mouseWheelKeyframeSeekModifierKey, setMouseWheelKeyframeSeekModifierKey] = useState(safeGetConfigInitial('mouseWheelKeyframeSeekModifierKey'));
useEffect(() => safeSetConfig({ mouseWheelKeyframeSeekModifierKey }), [mouseWheelKeyframeSeekModifierKey]);
const [segmentMouseModifierKey, setSegmentMouseModifierKey] = useState(safeGetConfigInitial('segmentMouseModifierKey'));
useEffect(() => safeSetConfig({ segmentMouseModifierKey }), [segmentMouseModifierKey]);
const [captureFrameMethod, setCaptureFrameMethod] = useState(safeGetConfigInitial('captureFrameMethod'));
useEffect(() => safeSetConfig({ captureFrameMethod }), [captureFrameMethod]);
const [captureFrameQuality, setCaptureFrameQuality] = useState(safeGetConfigInitial('captureFrameQuality'));
@ -269,6 +271,7 @@ export default function useUserSettingsRoot() {
mouseWheelZoomModifierKey,
mouseWheelFrameSeekModifierKey,
mouseWheelKeyframeSeekModifierKey,
segmentMouseModifierKey,
captureFrameMethod,
captureFrameQuality,
captureFrameFileNameFormat,
@ -343,6 +346,7 @@ export default function useUserSettingsRoot() {
setMouseWheelZoomModifierKey,
setMouseWheelFrameSeekModifierKey,
setMouseWheelKeyframeSeekModifierKey,
setSegmentMouseModifierKey,
setCaptureFrameMethod,
setCaptureFrameQuality,
setCaptureFrameFileNameFormat,

1
types.ts
Unescape Escape View File

@ -106,6 +106,7 @@ export interface Config {
mouseWheelZoomModifierKey: ModifierKey,
mouseWheelFrameSeekModifierKey: ModifierKey,
mouseWheelKeyframeSeekModifierKey: ModifierKey,
segmentMouseModifierKey: ModifierKey,
captureFrameMethod: 'videotag' | 'ffmpeg',
captureFrameQuality: number,
captureFrameFileNameFormat: 'timestamp' | 'index',

Write Preview
Loading…
Cancel
Save