diff --git a/src/App.jsx b/src/App.jsx
index 39d0834b..ab148a3b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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()}
- {canvasPlayerEnabled && }
+ {canvasPlayerEnabled && }
{isRotationSet && !hideCanvasPreview && (
diff --git a/src/Canvas.jsx b/src/Canvas.jsx
index e4ba8ad6..cb9e0316 100644
--- a/src/Canvas.jsx
+++ b/src/Canvas.jsx
@@ -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]);
diff --git a/src/CanvasPlayer.js b/src/CanvasPlayer.js
index 4c32f7ef..feb17854 100644
--- a/src/CanvasPlayer.js
+++ b/src/CanvasPlayer.js
@@ -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;