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:
parent
0113d79e0c
commit
a3396a6a77
29
src/App.jsx
29
src/App.jsx
@ -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}
|
||||||
|
@ -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
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user