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

move play segments button

Browse Source 
and improve it
pull/2575/head
Mikael Finstad 9 months ago
parent 251106edbd
commit 251106a140
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
3 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File

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

@ -184,7 +184,7 @@ function App() {
const keyBindingByAction = useMemo(() => Object.fromEntries(keyBindings.map((binding) => [binding.action, binding])), [keyBindings]);
const { working, setWorking, workingRef, abortWorking } = useLoading();
const { videoRef, videoContainerRef, playbackRate, setPlaybackRate, outputPlaybackRate, setOutputPlaybackRate, commandedTime, seekAbs, playingRef, getRelevantTime, setPlaying, onSeeked, relevantTime, onStartPlaying, setCommandedTime, setOutputPlaybackRateState, commandedTimeRef, onStopPlaying, onVideoAbort, playerTime, setPlayerTime, playbackModeRef, playing, play, pause, seekRel } = useVideo({ filePath });
const { videoRef, videoContainerRef, playbackRate, setPlaybackRate, outputPlaybackRate, setOutputPlaybackRate, commandedTime, seekAbs, playingRef, getRelevantTime, setPlaying, onSeeked, relevantTime, onStartPlaying, setCommandedTime, setOutputPlaybackRateState, commandedTimeRef, onStopPlaying, onVideoAbort, playerTime, setPlayerTime, playbackMode, setPlaybackMode, playbackModeRef, playing, play, pause, seekRel } = useVideo({ filePath });
const { timecodePlaceholder, formatTimecode, formatTimeAndFrames, parseTimecode, getFrameCount, promptTimecode } = useTimecode({ detectedFps, timecodeFormat, showGenericDialog });
const { loadSubtitle, subtitlesByStreamId, setSubtitlesByStreamId } = useSubtitles();
@ -638,7 +638,7 @@ function App() {
setUsingDummyVideo(false);
setPlaying(false);
playingRef.current = false;
playbackModeRef.current = undefined;
setPlaybackMode(undefined);
setFileDuration(undefined);
cutSegmentsHistory.go(0);
setDetectedFileFormat(undefined);
@ -665,7 +665,7 @@ function App() {
setExportConfirmOpen(false);
setOutputPlaybackRateState(1);
setCurrentFileExportCount(0);
}, [videoRef, setCommandedTime, setPlaybackRate, setPreviewFilePath, setUsingDummyVideo, setPlaying, playingRef, playbackModeRef, cutSegmentsHistory, setDetectedFileFormat, setCopyStreamIdsByFile, setThumbnails, setSubtitlesByStreamId, setHideCompatPlayer, setOutputPlaybackRateState]);
}, [videoRef, setCommandedTime, setPlaybackRate, setPreviewFilePath, setUsingDummyVideo, setPlaying, playingRef, setPlaybackMode, cutSegmentsHistory, setDetectedFileFormat, setCopyStreamIdsByFile, setThumbnails, setSubtitlesByStreamId, setOutputPlaybackRateState]);
const showUnsupportedFileMessage = useCallback(() => {
@ -707,7 +707,7 @@ function App() {
}, [cutSegments, seekAbs, setCurrentSegIndex]);
const togglePlay = useCallback(({ resetPlaybackRate, requestPlaybackMode }: { resetPlaybackRate?: boolean, requestPlaybackMode?: PlaybackMode } | undefined = {}) => {
playbackModeRef.current = requestPlaybackMode;
setPlaybackMode(requestPlaybackMode);
if (playingRef.current) {
pause();
@ -735,24 +735,22 @@ function App() {
}
}
play(resetPlaybackRate);
}, [playbackModeRef, playingRef, play, pause, selectedSegments, commandedTimeRef, cutSegments, setCurrentSegIndex, seekAbs, currentCutSeg]);
}, [setPlaybackMode, playingRef, playbackModeRef, play, pause, selectedSegments, commandedTimeRef, currentCutSeg, cutSegments, setCurrentSegIndex, seekAbs]);
const onTimeUpdate = useCallback<ReactEventHandler<HTMLVideoElement>>((e) => {
const { currentTime } = e.currentTarget;
if (playerTime === currentTime) return;
setPlayerTime(currentTime);
const playbackMode = playbackModeRef.current;
const segmentsAtCursorIndexes = findSegmentsAtCursor(commandedTimeRef.current);
const firstSegmentAtCursorIndex = segmentsAtCursorIndexes[0];
const playingSegment = firstSegmentAtCursorIndex != null ? cutSegments[firstSegmentAtCursorIndex] : undefined;
if (playbackMode != null && playingSegment && playingSegment.end != null) { // todo and is currently playing?
const nextAction = getPlaybackAction({ playbackMode, currentTime, playingSegment: { start: playingSegment.start, end: playingSegment.end } });
if (playbackModeRef.current != null && playingSegment && playingSegment.end != null) { // todo and is currently playing?
const nextAction = getPlaybackAction({ playbackMode: playbackModeRef.current, currentTime, playingSegment: { start: playingSegment.start, end: playingSegment.end } });
const exit = () => {
playbackModeRef.current = undefined;
setPlaybackMode(undefined);
pause();
};
@ -765,8 +763,8 @@ function App() {
let newIndex = getNewJumpIndex(index >= 0 ? index : 0, 1);
if (newIndex > selectedSegmentsWithoutMarkers.length - 1) {
// have reached end of last segment
if (playbackMode === 'loop-selected-segments') newIndex = 0; // start over
else if (playbackMode === 'play-selected-segments') exit();
if (playbackModeRef.current === 'loop-selected-segments') newIndex = 0; // start over
else if (playbackModeRef.current === 'play-selected-segments') exit();
}
const nextSelectedSegment = selectedSegmentsWithoutMarkers[newIndex];
if (nextSelectedSegment != null) {
@ -782,7 +780,7 @@ function App() {
}
}
}
}, [commandedTimeRef, cutSegments, findSegmentsAtCursor, pause, playbackModeRef, playerTime, seekAbs, selectedSegments, setCurrentSegIndex, setPlayerTime]);
}, [commandedTimeRef, cutSegments, findSegmentsAtCursor, pause, playbackModeRef, playerTime, seekAbs, selectedSegments, setCurrentSegIndex, setPlaybackMode, setPlayerTime]);
const closeFileWithConfirm = useCallback(() => {
if (!isFileOpened || workingRef.current) return;
@ -2694,6 +2692,7 @@ function App() {
parseTimecode={parseTimecode}
playbackRate={playbackRate}
currentFrame={currentFrame}
playbackMode={playbackMode}
/>
</div>

17
src/renderer/src/BottomBar.tsx
Unescape Escape View File

@ -24,7 +24,7 @@ import { useSegColors } from './contexts';
import { isExactDurationMatch } from './util/duration';
import useUserSettings from './hooks/useUserSettings';
import { askForPlaybackRate } from './dialogs';
import { FormatTimecode, ParseTimecode, SegmentColorIndex, SegmentToExport, StateSegment } from './types';
import { FormatTimecode, ParseTimecode, PlaybackMode, SegmentColorIndex, SegmentToExport, StateSegment } from './types';
import { WaveformMode } from '../../../types';
import { Frame } from './ffmpeg';
@ -252,7 +252,7 @@ function BottomBar({
toggleShowThumbnails, toggleWaveformMode, waveformMode, showThumbnails,
outputPlaybackRate, setOutputPlaybackRate,
formatTimecode, parseTimecode, playbackRate,
currentFrame,
currentFrame, playbackMode,
}: {
zoom: number,
setZoom: (fn: (z: number) => number) => void,
@ -301,6 +301,7 @@ function BottomBar({
parseTimecode: ParseTimecode,
playbackRate: number,
currentFrame: Frame | undefined,
playbackMode: PlaybackMode | undefined,
}) {
const { t } = useTranslation();
const { getSegColor } = useSegColors();
@ -338,7 +339,6 @@ function BottomBar({
return {
...playStyle,
fontSize: '.7em',
margin: '.1em .2em 0 -.6em',
backgroundOffset: 30,
background: `linear-gradient(90deg, ${gradientColors})`,
border: '1px solid var(--gray-10)',
@ -392,6 +392,7 @@ function BottomBar({
}
const PlayPause = playing ? FaPause : FaPlay;
const PlayPauseMode = playing && (playbackMode === 'play-selected-segments' || playbackMode === 'loop-selected-segments') ? FaPause : FaPlay;
const currentCutSegOrDefault = useMemo(() => currentCutSeg ?? { segColorIndex: 0 }, [currentCutSeg]);
@ -476,10 +477,6 @@ function BottomBar({
<PlayPause style={{ fontSize: '.9em' }} />
</div>
<div role="button" onClick={toggleLoopSelectedSegments} title={t('Play selected segments in order')} style={loopSelectedSegmentsButtonStyle}>
<PlayPause style={{ fontSize: '.9em' }} />
</div>
{!simpleMode && (
<FaCaretRight
style={{ flexShrink: 0, marginRight: -6, marginLeft: -4 }}
@ -597,6 +594,12 @@ function BottomBar({
</div>
)}
{!simpleMode && (
<div role="button" onClick={toggleLoopSelectedSegments} title={t('Play selected segments in order')} style={loopSelectedSegmentsButtonStyle}>
<PlayPauseMode />
</div>
)}
{(!simpleMode || !exportConfirmEnabled) && <ToggleExportConfirm style={{ marginLeft: '.4em' }} />}
<ExportButton size={1.3} segmentsToExport={segmentsToExport} areWeCutting={areWeCutting} onClick={onExportPress} />

12
src/renderer/src/hooks/useVideo.ts
Unescape Escape View File

@ -7,8 +7,14 @@ export default ({ filePath }: { filePath: string | undefined }) => {
const [playbackRate, setPlaybackRateState] = useState(1);
const [outputPlaybackRate, setOutputPlaybackRateState] = useState(1);
const [playerTime, setPlayerTime] = useState<number>();
const [playbackMode, setPlaybackModeState] = useState<PlaybackMode>();
const playbackModeRef = useRef<PlaybackMode>();
const setPlaybackMode = useCallback((mode: PlaybackMode | undefined) => {
playbackModeRef.current = mode;
setPlaybackModeState(mode);
}, []);
const videoRef = useRef<ChromiumHTMLVideoElement>(null);
const videoContainerRef = useRef<HTMLDivElement>(null);
@ -92,8 +98,8 @@ export default ({ filePath }: { filePath: string | undefined }) => {
const onVideoAbort = useCallback(() => {
setPlaying(false); // we want to preserve current time https://github.com/mifi/lossless-cut/issues/1674#issuecomment-1658937716
playbackModeRef.current = undefined;
}, []);
setPlaybackMode(undefined);
}, [setPlaybackMode]);
const onStartPlaying = useCallback(() => onPlayingChange(true), [onPlayingChange]);
@ -145,6 +151,8 @@ export default ({ filePath }: { filePath: string | undefined }) => {
getRelevantTime,
onVideoAbort,
setOutputPlaybackRateState,
playbackMode,
setPlaybackMode,
playbackModeRef,
playerTime,
setPlayerTime,

Write Preview
Loading…
Cancel
Save