rob
/
clipper
2
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Remove most useCallback usages 

It is unclear whether these are actually significantly improving
performance and they add non-trivial complexity to the codebase,
especially when under heavy frontend development. Removing most of them
for now until it can be shown they are actually worthwhile.
This commit is contained in:
Rob Watson 2022-01-14 12:24:59 +01:00
parent 35b62f1e59
commit f33fa149fc
4 changed files with 160 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/src/App.tsx
View File

@ -181,82 +181,73 @@ function App(): JSX.Element {
// handlers // handlers
const handleKeyPress = useCallback( const handleKeyPress = (evt: KeyboardEvent) => {
(evt: KeyboardEvent) => { if (evt.code != 'Space') {
if (evt.code != 'Space') { return;
return; }
}
if (audio.paused) { if (audio.paused) {
handlePlay(); handlePlay();
} else { } else {
handlePause(); handlePause();
} }
}, };
[selection]
);
// handler called when the selection in the overview (zoom setting) is changed. // handler called when the selection in the overview (zoom setting) is changed.
const handleOverviewSelectionChange = useCallback( const handleOverviewSelectionChange = (newViewport: Frames) => {
(newViewport: Frames) => { if (mediaSet == null) {
if (mediaSet == null) { return;
return; }
} console.log('set new viewport', newViewport);
console.log('set new viewport', newViewport); setViewport({ ...newViewport });
setViewport({ ...newViewport });
if (!audio.paused) { if (!audio.paused) {
return; return;
} }
setPositionFromFrame(newViewport.start); setPositionFromFrame(newViewport.start);
}, };
[mediaSet, audio, video, selection]
);
// handler called when the selection in the main waveform view is changed. // handler called when the selection in the main waveform view is changed.
const handleWaveformSelectionChange = useCallback( const handleWaveformSelectionChange = (newSelection: Frames) => {
(newSelection: Frames) => { setSelection(newSelection);
setSelection(newSelection);
if (mediaSet == null) { if (mediaSet == null) {
return; return;
} }
// move playback position to start of selection // move playback position to start of selection
const ratio = newSelection.start / mediaSet.audioFrames; const ratio = newSelection.start / mediaSet.audioFrames;
const currentTime = const currentTime =
(mediaSet.audioFrames / mediaSet.audioSampleRate) * ratio; (mediaSet.audioFrames / mediaSet.audioSampleRate) * ratio;
audio.currentTime = currentTime; audio.currentTime = currentTime;
video.currentTime = currentTime; video.currentTime = currentTime;
}, };
[mediaSet, audio, video, selection]
);
const handlePlay = useCallback(() => { const handlePlay = () => {
audio.play(); audio.play();
video.play(); video.play();
}, [audio, video]); };
const handlePause = useCallback(() => { const handlePause = () => {
video.pause(); video.pause();
audio.pause(); audio.pause();
if (selection.start != selection.end) { if (selection.start != selection.end) {
setPositionFromFrame(selection.start); setPositionFromFrame(selection.start);
} }
}, [audio, video, selection]); };
const handleClip = useCallback(() => { const handleClip = () => {
if (!window.showSaveFilePicker) { if (!window.showSaveFilePicker) {
downloadClipHTTP(); downloadClipHTTP();
return; return;
} }
downloadClipFileSystemAccessAPI(); downloadClipFileSystemAccessAPI();
}, [mediaSet, selection]); };
const downloadClipHTTP = useCallback(() => { const downloadClipHTTP = () => {
(async function () { (async function () {
if (mediaSet == null) { if (mediaSet == null) {
return; return;
@ -285,9 +276,9 @@ function App(): JSX.Element {
document.body.appendChild(form); document.body.appendChild(form);
form.submit(); form.submit();
})(); })();
}, [mediaSet, selection]); };
const downloadClipFileSystemAccessAPI = useCallback(() => { const downloadClipFileSystemAccessAPI = () => {
(async function () { (async function () {
if (mediaSet == null) { if (mediaSet == null) {
return; return;
@ -312,9 +303,9 @@ function App(): JSX.Element {
await fileStream.close(); await fileStream.close();
console.debug('closed stream'); console.debug('closed stream');
})(); })();
}, [mediaSet, selection]); };
const handleZoomIn = useCallback(() => { const handleZoomIn = () => {
if (mediaSet == null) { if (mediaSet == null) {
return; return;
} }
@ -325,9 +316,9 @@ function App(): JSX.Element {
...viewport, ...viewport,
end: viewport.end - Math.round((viewport.end - viewport.start) / 2), end: viewport.end - Math.round((viewport.end - viewport.start) / 2),
}); });
}, [mediaSet, viewport]); };
const handleZoomOut = useCallback(() => { const handleZoomOut = () => {
if (mediaSet == null) { if (mediaSet == null) {
return; return;
} }
@ -342,7 +333,7 @@ function App(): JSX.Element {
...viewport, ...viewport,
end: end, end: end,
}); });
}, [mediaSet, viewport]); };
const setPositionFromFrame = useCallback( const setPositionFromFrame = useCallback(
(frame: number) => { (frame: number) => {
@ -355,7 +346,7 @@ function App(): JSX.Element {
audio.currentTime = currentTime; audio.currentTime = currentTime;
video.currentTime = currentTime; video.currentTime = currentTime;
}, },
[mediaSet, audio, video] [mediaSet]
); );
// helpers // helpers

186
frontend/src/HudCanvas.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef, useCallback, MouseEvent } from 'react'; import { useState, useEffect, useRef, MouseEvent } from 'react';
interface Styles { interface Styles {
borderLineWidth: number; borderLineWidth: number;
@ -174,108 +174,102 @@ export const HudCanvas: React.FC<Props> = ({
return x; return x;
}; };
const handleMouseDown = useCallback( const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
(evt: MouseEvent<HTMLCanvasElement>) => { if (mode != Mode.Normal) {
if (mode != Mode.Normal) { return;
return; }
const x = getCanvasX(evt);
if (isHoveringSelectionStart(x)) {
setMode(Mode.ResizingStart);
moveOffsetX.current = x;
} else if (isHoveringSelectionEnd(x)) {
setMode(Mode.ResizingEnd);
moveOffsetX.current = x;
} else if (isHoveringSelection(x)) {
setMode(Mode.Dragging);
setCursor('pointer');
moveOffsetX.current = x;
} else {
setMode(Mode.Selecting);
setCursor('col-resize');
moveOffsetX.current = x;
setNewSelection({ start: x, end: x });
}
};
const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
const x = getCanvasX(evt);
switch (mode) {
case Mode.Normal: {
if (isHoveringSelectionStart(x)) {
setHoverState(HoverState.OverSelectionStart);
setCursor('col-resize');
} else if (isHoveringSelectionEnd(x)) {
setHoverState(HoverState.OverSelectionEnd);
setCursor('col-resize');
} else if (isHoveringSelection(x)) {
setHoverState(HoverState.OverSelection);
setCursor('pointer');
} else {
setCursor('auto');
}
break;
} }
case Mode.ResizingStart: {
const diff = x - moveOffsetX.current;
const start = constrainXToCanvas(selection.start + diff);
const x = getCanvasX(evt); if (start > selection.end) {
setNewSelection({ start: selection.end, end: start });
break;
}
if (isHoveringSelectionStart(x)) { setNewSelection({ ...selection, start: start });
setMode(Mode.ResizingStart); break;
moveOffsetX.current = x;
} else if (isHoveringSelectionEnd(x)) {
setMode(Mode.ResizingEnd);
moveOffsetX.current = x;
} else if (isHoveringSelection(x)) {
setMode(Mode.Dragging);
setCursor('pointer');
moveOffsetX.current = x;
} else {
setMode(Mode.Selecting);
setCursor('col-resize');
moveOffsetX.current = x;
setNewSelection({ start: x, end: x });
} }
}, case Mode.ResizingEnd: {
[mode, selection] const diff = x - moveOffsetX.current;
); const end = constrainXToCanvas(selection.end + diff);
const handleMouseMove = useCallback( if (end < selection.start) {
(evt: MouseEvent<HTMLCanvasElement>) => { setNewSelection({ start: Math.max(0, end), end: selection.start });
const x = getCanvasX(evt);
switch (mode) {
case Mode.Normal: {
if (isHoveringSelectionStart(x)) {
setHoverState(HoverState.OverSelectionStart);
setCursor('col-resize');
} else if (isHoveringSelectionEnd(x)) {
setHoverState(HoverState.OverSelectionEnd);
setCursor('col-resize');
} else if (isHoveringSelection(x)) {
setHoverState(HoverState.OverSelection);
setCursor('pointer');
} else {
setCursor('auto');
}
break; break;
} }
case Mode.ResizingStart: {
const diff = x - moveOffsetX.current;
const start = constrainXToCanvas(selection.start + diff);
if (start > selection.end) { setNewSelection({ ...selection, end: end });
setNewSelection({ start: selection.end, end: start }); break;
break;
}
setNewSelection({ ...selection, start: start });
break;
}
case Mode.ResizingEnd: {
const diff = x - moveOffsetX.current;
const end = constrainXToCanvas(selection.end + diff);
if (end < selection.start) {
setNewSelection({ start: Math.max(0, end), end: selection.start });
break;
}
setNewSelection({ ...selection, end: end });
break;
}
case Mode.Dragging: {
const diff = x - moveOffsetX.current;
const selectionWidth = selection.end - selection.start;
let start = Math.max(0, selection.start + diff);
let end = start + selectionWidth;
if (end > width) {
end = width;
start = end - selectionWidth;
}
setNewSelection({ start: start, end: end });
break;
}
case Mode.Selecting: {
if (x < moveOffsetX.current) {
setNewSelection({
start: x,
end: moveOffsetX.current,
});
} else {
setNewSelection({ start: moveOffsetX.current, end: x });
}
break;
}
} }
}, case Mode.Dragging: {
[mode, selection] const diff = x - moveOffsetX.current;
); const selectionWidth = selection.end - selection.start;
let start = Math.max(0, selection.start + diff);
let end = start + selectionWidth;
if (end > width) {
end = width;
start = end - selectionWidth;
}
const handleMouseUp = useCallback(() => { setNewSelection({ start: start, end: end });
break;
}
case Mode.Selecting: {
if (x < moveOffsetX.current) {
setNewSelection({
start: x,
end: moveOffsetX.current,
});
} else {
setNewSelection({ start: moveOffsetX.current, end: x });
}
break;
}
}
};
const handleMouseUp = () => {
if (mode == Mode.Normal) { if (mode == Mode.Normal) {
return; return;
} }
@ -289,9 +283,9 @@ export const HudCanvas: React.FC<Props> = ({
} }
onSelectionChange({ ...newSelection }); onSelectionChange({ ...newSelection });
}, [mode, newSelection]); };
const handleEmptySelectionAction = useCallback(() => { const handleEmptySelectionAction = () => {
switch (emptySelectionAction) { switch (emptySelectionAction) {
case EmptySelectionAction.SelectPrevious: case EmptySelectionAction.SelectPrevious:
setNewSelection({ ...selection }); setNewSelection({ ...selection });
@ -300,7 +294,7 @@ export const HudCanvas: React.FC<Props> = ({
onSelectionChange({ start: 0, end: 0 }); onSelectionChange({ start: 0, end: 0 });
break; break;
} }
}, [selection]); };
const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => { const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => {
setHoverState(HoverState.Normal); setHoverState(HoverState.Normal);

17
frontend/src/Overview.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect } from 'react';
import { MediaSet } from './generated/media_set'; import { MediaSet } from './generated/media_set';
import { Frames, VideoPosition } from './App'; import { Frames, VideoPosition } from './App';
import { WaveformCanvas } from './WaveformCanvas'; import { WaveformCanvas } from './WaveformCanvas';
@ -60,15 +60,12 @@ export const Overview: React.FC<Props> = ({
// handlers // handlers
// convert selection change from canvas pixels to frames, and trigger callback. // convert selection change from canvas pixels to frames, and trigger callback.
const handleSelectionChange = useCallback( const handleSelectionChange = ({ start, end }: Selection) => {
({ start, end }: Selection) => { onSelectionChange({
onSelectionChange({ start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames),
start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames), end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames),
end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames), });
}); };
},
[mediaSet]
);
// render component // render component

38
frontend/src/Waveform.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState, useCallback } from 'react'; import { useEffect, useState } from 'react';
import { Frames, VideoPosition, newRPC } from './App'; import { Frames, VideoPosition, newRPC } from './App';
import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set'; import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
import { WaveformCanvas } from './WaveformCanvas'; import { WaveformCanvas } from './WaveformCanvas';
@ -93,33 +93,25 @@ export const Waveform: React.FC<Props> = ({
// handlers // handlers
const handleSelectionChange = useCallback( const handleSelectionChange = (selection: Selection) => {
(selection: Selection) => { setSelectedPixels(selection);
setSelectedPixels(selection);
const framesPerPixel = const framesPerPixel = (viewport.end - viewport.start) / CanvasLogicalWidth;
(viewport.end - viewport.start) / CanvasLogicalWidth; const selectedFrames = {
const selectedFrames = { start: Math.round(viewport.start + selection.start * framesPerPixel),
start: Math.round(viewport.start + selection.start * framesPerPixel), end: Math.round(viewport.start + selection.end * framesPerPixel),
end: Math.round(viewport.start + selection.end * framesPerPixel), };
};
setSelectedFrames(selectedFrames); setSelectedFrames(selectedFrames);
onSelectionChange(selectedFrames); onSelectionChange(selectedFrames);
}, };
[viewport, selectedFrames]
);
// helpers // helpers
const frameToCanvasX = useCallback( const frameToCanvasX = (frame: number): number => {
(frame: number): number => { const pixelsPerFrame = CanvasLogicalWidth / (viewport.end - viewport.start);
const pixelsPerFrame = return Math.round((frame - viewport.start) * pixelsPerFrame);
CanvasLogicalWidth / (viewport.end - viewport.start); };
return Math.round((frame - viewport.start) * pixelsPerFrame);
},
[viewport]
);
// render component // render component