1
0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-25 19:52:44 +01:00

fix waveform logic #1269

This commit is contained in:
Mikael Finstad 2022-09-04 15:06:56 +02:00
parent 0113d79e0c
commit a3396a6a77
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
3 changed files with 17 additions and 20 deletions

View File

@ -143,9 +143,8 @@ const App = memo(() => {
const { fileFormat, setFileFormat, detectedFileFormat, setDetectedFileFormat, isCustomFormatSelected } = useFileFormatState(); const { fileFormat, setFileFormat, detectedFileFormat, setDetectedFileFormat, isCustomFormatSelected } = useFileFormatState();
// State per application launch // State per application launch
const [timelineMode, setTimelineMode] = useState();
const [keyframesEnabled, setKeyframesEnabled] = useState(true); const [keyframesEnabled, setKeyframesEnabled] = useState(true);
const [waveformEnabled, setWaveformEnabled] = useState(false);
const [thumbnailsEnabled, setThumbnailsEnabled] = useState(false);
const [showRightBar, setShowRightBar] = useState(true); const [showRightBar, setShowRightBar] = useState(true);
const [cleanupChoices, setCleanupChoices] = useState({ tmpFiles: true }); const [cleanupChoices, setCleanupChoices] = useState({ tmpFiles: true });
const [rememberConvertToSupportedFormat, setRememberConvertToSupportedFormat] = useState(); const [rememberConvertToSupportedFormat, setRememberConvertToSupportedFormat] = useState();
@ -230,15 +229,13 @@ const App = memo(() => {
} }
}, [detectedFileFormat, outFormatLocked, setFileFormat, setOutFormatLocked]); }, [detectedFileFormat, outFormatLocked, setFileFormat, setOutFormatLocked]);
const setTimelineMode = useCallback((newMode) => { const toggleTimelineMode = useCallback((newMode) => {
if (newMode === 'waveform') { if (newMode === timelineMode) {
setWaveformEnabled(v => !v); setTimelineMode();
setThumbnailsEnabled(false);
} else { } else {
setThumbnailsEnabled(v => !v); setTimelineMode(newMode);
setWaveformEnabled(false);
} }
}, []); }, [timelineMode]);
const toggleExportConfirmEnabled = useCallback(() => setExportConfirmEnabled((v) => !v), [setExportConfirmEnabled]); const toggleExportConfirmEnabled = useCallback(() => setExportConfirmEnabled((v) => !v), [setExportConfirmEnabled]);
@ -852,6 +849,12 @@ const App = memo(() => {
setThumbnails(v => [...v, thumbnail]); setThumbnails(v => [...v, thumbnail]);
} }
const hasAudio = !!mainAudioStream;
const hasVideo = !!mainVideoStream;
const waveformEnabled = timelineMode === 'waveform' && hasAudio;
const thumbnailsEnabled = timelineMode === 'thumbnails' && hasVideo;
const [, cancelRenderThumbnails] = useDebounceOld(() => { const [, cancelRenderThumbnails] = useDebounceOld(() => {
async function renderThumbnails() { async function renderThumbnails() {
if (!thumbnailsEnabled || thumnailsRenderingPromiseRef.current) return; if (!thumbnailsEnabled || thumnailsRenderingPromiseRef.current) return;
@ -888,8 +891,6 @@ const App = memo(() => {
subtitlesByStreamIdRef.current = subtitlesByStreamId; subtitlesByStreamIdRef.current = subtitlesByStreamId;
}, [subtitlesByStreamId]); }, [subtitlesByStreamId]);
const hasAudio = !!mainAudioStream;
const hasVideo = !!mainVideoStream;
const shouldShowKeyframes = keyframesEnabled && !!mainVideoStream && calcShouldShowKeyframes(zoomedDuration); const shouldShowKeyframes = keyframesEnabled && !!mainVideoStream && calcShouldShowKeyframes(zoomedDuration);
const shouldShowWaveform = calcShouldShowWaveform(zoomedDuration); const shouldShowWaveform = calcShouldShowWaveform(zoomedDuration);
@ -2323,10 +2324,6 @@ const App = memo(() => {
const thumbnailsSorted = useMemo(() => sortBy(thumbnails, thumbnail => thumbnail.time), [thumbnails]); const thumbnailsSorted = useMemo(() => sortBy(thumbnails, thumbnail => thumbnail.time), [thumbnails]);
let timelineMode;
if (thumbnailsEnabled) timelineMode = 'thumbnails';
if (waveformEnabled) timelineMode = 'waveform';
const { t } = useTranslation(); const { t } = useTranslation();
function renderSubtitles() { function renderSubtitles() {
@ -2531,7 +2528,7 @@ const App = memo(() => {
shortStep={shortStep} shortStep={shortStep}
seekClosestKeyframe={seekClosestKeyframe} seekClosestKeyframe={seekClosestKeyframe}
togglePlay={togglePlay} togglePlay={togglePlay}
setTimelineMode={setTimelineMode} toggleTimelineMode={toggleTimelineMode}
timelineMode={timelineMode} timelineMode={timelineMode}
hasAudio={hasAudio} hasAudio={hasAudio}
keyframesEnabled={keyframesEnabled} keyframesEnabled={keyframesEnabled}

View File

@ -35,7 +35,7 @@ const BottomBar = memo(({
seekAbs, currentSegIndexSafe, cutSegments, currentCutSeg, setCutStart, setCutEnd, seekAbs, currentSegIndexSafe, cutSegments, currentCutSeg, setCutStart, setCutEnd,
setCurrentSegIndex, cutStartTimeManual, setCutStartTimeManual, cutEndTimeManual, setCutEndTimeManual, setCurrentSegIndex, cutStartTimeManual, setCutStartTimeManual, cutEndTimeManual, setCutEndTimeManual,
jumpTimelineStart, jumpTimelineEnd, jumpCutEnd, jumpCutStart, startTimeOffset, setCutTime, currentApparentCutSeg, jumpTimelineStart, jumpTimelineEnd, jumpCutEnd, jumpCutStart, startTimeOffset, setCutTime, currentApparentCutSeg,
playing, shortStep, togglePlay, setTimelineMode, hasAudio, timelineMode, playing, shortStep, togglePlay, toggleTimelineMode, hasAudio, timelineMode,
keyframesEnabled, toggleKeyframesEnabled, seekClosestKeyframe, detectedFps, keyframesEnabled, toggleKeyframesEnabled, seekClosestKeyframe, detectedFps,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -165,7 +165,7 @@ const BottomBar = memo(({
style={{ padding: '0 5px', color: timelineMode === 'waveform' ? primaryTextColor : undefined }} style={{ padding: '0 5px', color: timelineMode === 'waveform' ? primaryTextColor : undefined }}
role="button" role="button"
title={t('Show waveform')} title={t('Show waveform')}
onClick={() => setTimelineMode('waveform')} onClick={() => toggleTimelineMode('waveform')}
/> />
)} )}
{hasVideo && ( {hasVideo && (
@ -175,7 +175,7 @@ const BottomBar = memo(({
style={{ padding: '0 5px', color: timelineMode === 'thumbnails' ? primaryTextColor : undefined }} style={{ padding: '0 5px', color: timelineMode === 'thumbnails' ? primaryTextColor : undefined }}
role="button" role="button"
title={t('Show thumbnails')} title={t('Show thumbnails')}
onClick={() => setTimelineMode('thumbnails')} onClick={() => toggleTimelineMode('thumbnails')}
/> />
<FaKey <FaKey

View File

@ -226,7 +226,7 @@ const Timeline = memo(({
onScroll={onTimelineScroll} onScroll={onTimelineScroll}
ref={timelineScrollerRef} ref={timelineScrollerRef}
> >
{waveformEnabled && shouldShowWaveform && waveforms && ( {waveformEnabled && shouldShowWaveform && waveforms.length > 0 && (
<Waveforms <Waveforms
calculateTimelinePercent={calculateTimelinePercent} calculateTimelinePercent={calculateTimelinePercent}
durationSafe={durationSafe} durationSafe={durationSafe}