Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-23 10:52:34 +01:00
Code Issues Releases Activity

Allow disabling rotation preview #334

Browse Source
This commit is contained in:
Mikael Finstad 2020-05-03 18:21:40 +08:00
parent 80709421f5
commit 78afdc46ad
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.jsx
View File

@ -1,5 +1,5 @@
import React, { memo, useEffect, useState, useCallback, useRef, Fragment, useMemo } from 'react'; import React, { memo, useEffect, useState, useCallback, useRef, Fragment, useMemo } from 'react';
import { FaVolumeMute, FaVolumeUp, FaAngleLeft } from 'react-icons/fa'; import { FaVolumeMute, FaVolumeUp, FaAngleLeft, FaWindowClose } from 'react-icons/fa';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import Lottie from 'react-lottie'; import Lottie from 'react-lottie';
@ -157,6 +157,7 @@ const App = memo(() => {
const [waveformEnabled, setWaveformEnabled] = useState(false); const [waveformEnabled, setWaveformEnabled] = useState(false);
const [thumbnailsEnabled, setThumbnailsEnabled] = useState(false); const [thumbnailsEnabled, setThumbnailsEnabled] = useState(false);
const [showSideBar, setShowSideBar] = useState(true); const [showSideBar, setShowSideBar] = useState(true);
const [hideCanvasPreview, setHideCanvasPreview] = useState(false);
// Segment related state // Segment related state
const [currentSegIndex, setCurrentSegIndex] = useState(0); const [currentSegIndex, setCurrentSegIndex] = useState(0);
@ -326,7 +327,15 @@ const App = memo(() => {
const effectiveRotation = isRotationSet ? rotation : (mainVideoStream && mainVideoStream.tags && mainVideoStream.tags.rotate && parseInt(mainVideoStream.tags.rotate, 10)); const effectiveRotation = isRotationSet ? rotation : (mainVideoStream && mainVideoStream.tags && mainVideoStream.tags.rotate && parseInt(mainVideoStream.tags.rotate, 10));
const zoomRel = useCallback((rel) => setZoom(z => Math.min(Math.max(z + rel, 1), zoomMax)), []); const zoomRel = useCallback((rel) => setZoom(z => Math.min(Math.max(z + rel, 1), zoomMax)), []);
const canvasPlayerEnabled = !!(mainVideoStream && (isRotationSet || dummyVideoPath)); const canvasPlayerRequired = !!(mainVideoStream && dummyVideoPath);
const canvasPlayerWanted = !!(mainVideoStream && isRotationSet && !hideCanvasPreview);
// Allow user to disable it
const canvasPlayerEnabled = (canvasPlayerRequired || canvasPlayerWanted);
useEffect(() => {
// Reset the user preference when the state changes to true
if (canvasPlayerEnabled) setHideCanvasPreview(false);
}, [canvasPlayerEnabled]);
const comfortZoom = duration ? Math.max(duration / 100, 1) : undefined; const comfortZoom = duration ? Math.max(duration / 100, 1) : undefined;
const toggleComfortZoom = useCallback(() => { const toggleComfortZoom = useCallback(() => {
@ -586,6 +595,7 @@ const App = memo(() => {
const increaseRotation = useCallback(() => { const increaseRotation = useCallback(() => {
setRotation((r) => (r + 90) % 450); setRotation((r) => (r + 90) % 450);
setHideCanvasPreview(false);
}, []); }, []);
const assureOutDirAccess = useCallback(async (outFilePath) => { const assureOutDirAccess = useCallback(async (outFilePath) => {
@ -807,6 +817,7 @@ const App = memo(() => {
setZoom(1); setZoom(1);
setShortestFlag(false); setShortestFlag(false);
setZoomWindowStartTime(0); setZoomWindowStartTime(0);
setHideCanvasPreview(false);
setWaveform(); setWaveform();
cancelWaveformDataDebounce(); cancelWaveformDataDebounce();
@ -1859,12 +1870,13 @@ const App = memo(() => {
{canvasPlayerEnabled && <Canvas rotate={effectiveRotation} filePath={filePath} width={mainVideoStream.width} height={mainVideoStream.height} streamIndex={mainVideoStream.index} playerTime={playerTime} commandedTime={commandedTime} playing={playing} />} {canvasPlayerEnabled && <Canvas rotate={effectiveRotation} filePath={filePath} width={mainVideoStream.width} height={mainVideoStream.height} streamIndex={mainVideoStream.index} playerTime={playerTime} commandedTime={commandedTime} playing={playing} />}
</div> </div>
{isRotationSet && ( {isRotationSet && !hideCanvasPreview && (
<div style={{ <div style={{
position: 'absolute', top: topBarHeight, marginTop: '1em', marginRight: '1em', right: sideBarWidth, color: 'white', position: 'absolute', top: topBarHeight, marginTop: '1em', marginRight: '1em', right: sideBarWidth, color: 'white',
}} }}
> >
{t('Rotation preview')} {t('Rotation preview')}
{!canvasPlayerRequired && <FaWindowClose role="button" style={{ cursor: 'pointer', verticalAlign: 'middle', padding: 10 }} onClick={() => setHideCanvasPreview(true)} />}
</div> </div>
)} )}