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

fix canvas player bugs

Browse Source 
https://github.com/mifi/lossless-cut/issues/253#issuecomment-1433898805
This commit is contained in:
Mikael Finstad 2023-02-17 14:02:29 +08:00
parent f0a2648be3
commit 1718d843bf
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.jsx
View File

@ -114,6 +114,7 @@ const App = memo(() => {
const [working, setWorkingState] = useState();
const [usingDummyVideo, setUsingDummyVideo] = useState(false);
const [playing, setPlaying] = useState(false);
const [canvasPlayerEventId, setCanvasPlayerEventId] = useState(0);
const playingOnlySegmentIdRef = useRef();
const [playerTime, setPlayerTime] = useState();
const [duration, setDuration] = useState();
@ -274,6 +275,7 @@ const App = memo(() => {
video.currentTime = outVal;
setCommandedTime(outVal);
setCanvasPlayerEventId((id) => id + 1); // To make sure that we can seek even to the same commanded time that we are already add (e.g. loop current segment)
}, []);
const commandedTimeRef = useRef(commandedTime);
@ -628,6 +630,7 @@ const App = memo(() => {
setUsingDummyVideo(false);
setPlaying(false);
playingOnlySegmentIdRef.current = undefined;
setCanvasPlayerEventId(0);
setDuration();
cutSegmentsHistory.go(0);
clearSegments(); // TODO this will cause two history items
@ -2185,7 +2188,7 @@ const App = memo(() => {
{renderSubtitles()}
</video>
{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} eventId={canvasPlayerEventId} />}
</div>
{isRotationSet && !hideCanvasPreview && (

18
src/Canvas.jsx
View File

@ -3,7 +3,7 @@ import { useDebounce } from 'use-debounce';
import CanvasPlayer from './CanvasPlayer';
const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing }) => {
const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing, eventId }) => {
const canvasRef = useRef();
const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height, streamIndex, getCanvas: () => canvasRef.current }), [filePath, width, height, streamIndex]);
@ -14,12 +14,14 @@ const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex,
const state = useMemo(() => {
if (playing) {
return { time: commandedTime, playing };
return { startTime: commandedTime, playing, eventId };
}
return { time: playerTime, playing };
}, [commandedTime, playerTime, playing]);
return { startTime: playerTime, playing, eventId };
}, [commandedTime, eventId, playerTime, playing]);
const [debouncedState, { cancel }] = useDebounce(state, 300, { leading: true, equalityFn: ({ time: time1, playing: playing1 }, { time: time2, playing: playing2 }) => time1 === time2 && playing1 === playing2 });
const [debouncedState, { cancel }] = useDebounce(state, 200, {
equalityFn: (a, b) => a.startTime === b.startTime && a.playing === b.playing && a.eventId === b.eventId,
});
/* useEffect(() => {
console.log('state', state);
@ -32,12 +34,12 @@ const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex,
useEffect(() => {
// console.log('debouncedState', debouncedState);
if (debouncedState.time == null) return;
if (debouncedState.startTime == null) return;
if (debouncedState.playing) {
canvasPlayer.play(debouncedState.time);
canvasPlayer.play(debouncedState.startTime);
} else {
canvasPlayer.pause(debouncedState.time);
canvasPlayer.pause(debouncedState.startTime);
}
}, [debouncedState, canvasPlayer]);

2
src/CanvasPlayer.js
View File

@ -79,7 +79,6 @@ export default ({ path, width: inWidth, height: inHeight, streamIndex, getCanvas
function pause(seekTo) {
if (terminated) return;
if (!playing && commandedTime === seekTo) return;
playing = false;
commandedTime = seekTo;
@ -89,7 +88,6 @@ export default ({ path, width: inWidth, height: inHeight, streamIndex, getCanvas
function play(playFrom) {
if (terminated) return;
if (playing && commandedTime === playFrom) return;
playing = true;
commandedTime = playFrom;