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
parent
35b62f1e59
commit
f33fa149fc
|
|
@ -181,82 +181,73 @@ function App(): JSX.Element {
|
|||
|
||||
// handlers
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
(evt: KeyboardEvent) => {
|
||||
if (evt.code != 'Space') {
|
||||
return;
|
||||
}
|
||||
const handleKeyPress = (evt: KeyboardEvent) => {
|
||||
if (evt.code != 'Space') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (audio.paused) {
|
||||
handlePlay();
|
||||
} else {
|
||||
handlePause();
|
||||
}
|
||||
},
|
||||
[selection]
|
||||
);
|
||||
if (audio.paused) {
|
||||
handlePlay();
|
||||
} else {
|
||||
handlePause();
|
||||
}
|
||||
};
|
||||
|
||||
// handler called when the selection in the overview (zoom setting) is changed.
|
||||
const handleOverviewSelectionChange = useCallback(
|
||||
(newViewport: Frames) => {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
console.log('set new viewport', newViewport);
|
||||
setViewport({ ...newViewport });
|
||||
const handleOverviewSelectionChange = (newViewport: Frames) => {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
console.log('set new viewport', newViewport);
|
||||
setViewport({ ...newViewport });
|
||||
|
||||
if (!audio.paused) {
|
||||
return;
|
||||
}
|
||||
if (!audio.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPositionFromFrame(newViewport.start);
|
||||
},
|
||||
[mediaSet, audio, video, selection]
|
||||
);
|
||||
setPositionFromFrame(newViewport.start);
|
||||
};
|
||||
|
||||
// handler called when the selection in the main waveform view is changed.
|
||||
const handleWaveformSelectionChange = useCallback(
|
||||
(newSelection: Frames) => {
|
||||
setSelection(newSelection);
|
||||
const handleWaveformSelectionChange = (newSelection: Frames) => {
|
||||
setSelection(newSelection);
|
||||
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// move playback position to start of selection
|
||||
const ratio = newSelection.start / mediaSet.audioFrames;
|
||||
const currentTime =
|
||||
(mediaSet.audioFrames / mediaSet.audioSampleRate) * ratio;
|
||||
audio.currentTime = currentTime;
|
||||
video.currentTime = currentTime;
|
||||
},
|
||||
[mediaSet, audio, video, selection]
|
||||
);
|
||||
// move playback position to start of selection
|
||||
const ratio = newSelection.start / mediaSet.audioFrames;
|
||||
const currentTime =
|
||||
(mediaSet.audioFrames / mediaSet.audioSampleRate) * ratio;
|
||||
audio.currentTime = currentTime;
|
||||
video.currentTime = currentTime;
|
||||
};
|
||||
|
||||
const handlePlay = useCallback(() => {
|
||||
const handlePlay = () => {
|
||||
audio.play();
|
||||
video.play();
|
||||
}, [audio, video]);
|
||||
};
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
const handlePause = () => {
|
||||
video.pause();
|
||||
audio.pause();
|
||||
|
||||
if (selection.start != selection.end) {
|
||||
setPositionFromFrame(selection.start);
|
||||
}
|
||||
}, [audio, video, selection]);
|
||||
};
|
||||
|
||||
const handleClip = useCallback(() => {
|
||||
const handleClip = () => {
|
||||
if (!window.showSaveFilePicker) {
|
||||
downloadClipHTTP();
|
||||
return;
|
||||
}
|
||||
|
||||
downloadClipFileSystemAccessAPI();
|
||||
}, [mediaSet, selection]);
|
||||
};
|
||||
|
||||
const downloadClipHTTP = useCallback(() => {
|
||||
const downloadClipHTTP = () => {
|
||||
(async function () {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
|
|
@ -285,9 +276,9 @@ function App(): JSX.Element {
|
|||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
})();
|
||||
}, [mediaSet, selection]);
|
||||
};
|
||||
|
||||
const downloadClipFileSystemAccessAPI = useCallback(() => {
|
||||
const downloadClipFileSystemAccessAPI = () => {
|
||||
(async function () {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
|
|
@ -312,9 +303,9 @@ function App(): JSX.Element {
|
|||
await fileStream.close();
|
||||
console.debug('closed stream');
|
||||
})();
|
||||
}, [mediaSet, selection]);
|
||||
};
|
||||
|
||||
const handleZoomIn = useCallback(() => {
|
||||
const handleZoomIn = () => {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -325,9 +316,9 @@ function App(): JSX.Element {
|
|||
...viewport,
|
||||
end: viewport.end - Math.round((viewport.end - viewport.start) / 2),
|
||||
});
|
||||
}, [mediaSet, viewport]);
|
||||
};
|
||||
|
||||
const handleZoomOut = useCallback(() => {
|
||||
const handleZoomOut = () => {
|
||||
if (mediaSet == null) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -342,7 +333,7 @@ function App(): JSX.Element {
|
|||
...viewport,
|
||||
end: end,
|
||||
});
|
||||
}, [mediaSet, viewport]);
|
||||
};
|
||||
|
||||
const setPositionFromFrame = useCallback(
|
||||
(frame: number) => {
|
||||
|
|
@ -355,7 +346,7 @@ function App(): JSX.Element {
|
|||
audio.currentTime = currentTime;
|
||||
video.currentTime = currentTime;
|
||||
},
|
||||
[mediaSet, audio, video]
|
||||
[mediaSet]
|
||||
);
|
||||
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useRef, useCallback, MouseEvent } from 'react';
|
||||
import { useState, useEffect, useRef, MouseEvent } from 'react';
|
||||
|
||||
interface Styles {
|
||||
borderLineWidth: number;
|
||||
|
|
@ -174,108 +174,102 @@ export const HudCanvas: React.FC<Props> = ({
|
|||
return x;
|
||||
};
|
||||
|
||||
const handleMouseDown = useCallback(
|
||||
(evt: MouseEvent<HTMLCanvasElement>) => {
|
||||
if (mode != Mode.Normal) {
|
||||
return;
|
||||
const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
|
||||
if (mode != Mode.Normal) {
|
||||
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)) {
|
||||
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 });
|
||||
setNewSelection({ ...selection, start: start });
|
||||
break;
|
||||
}
|
||||
},
|
||||
[mode, selection]
|
||||
);
|
||||
case Mode.ResizingEnd: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const end = constrainXToCanvas(selection.end + diff);
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(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');
|
||||
}
|
||||
if (end < selection.start) {
|
||||
setNewSelection({ start: Math.max(0, end), end: selection.start });
|
||||
break;
|
||||
}
|
||||
case Mode.ResizingStart: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const start = constrainXToCanvas(selection.start + diff);
|
||||
|
||||
if (start > selection.end) {
|
||||
setNewSelection({ start: selection.end, end: start });
|
||||
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;
|
||||
}
|
||||
setNewSelection({ ...selection, end: end });
|
||||
break;
|
||||
}
|
||||
},
|
||||
[mode, selection]
|
||||
);
|
||||
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;
|
||||
}
|
||||
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -289,9 +283,9 @@ export const HudCanvas: React.FC<Props> = ({
|
|||
}
|
||||
|
||||
onSelectionChange({ ...newSelection });
|
||||
}, [mode, newSelection]);
|
||||
};
|
||||
|
||||
const handleEmptySelectionAction = useCallback(() => {
|
||||
const handleEmptySelectionAction = () => {
|
||||
switch (emptySelectionAction) {
|
||||
case EmptySelectionAction.SelectPrevious:
|
||||
setNewSelection({ ...selection });
|
||||
|
|
@ -300,7 +294,7 @@ export const HudCanvas: React.FC<Props> = ({
|
|||
onSelectionChange({ start: 0, end: 0 });
|
||||
break;
|
||||
}
|
||||
}, [selection]);
|
||||
};
|
||||
|
||||
const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => {
|
||||
setHoverState(HoverState.Normal);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { MediaSet } from './generated/media_set';
|
||||
import { Frames, VideoPosition } from './App';
|
||||
import { WaveformCanvas } from './WaveformCanvas';
|
||||
|
|
@ -60,15 +60,12 @@ export const Overview: React.FC<Props> = ({
|
|||
// handlers
|
||||
|
||||
// convert selection change from canvas pixels to frames, and trigger callback.
|
||||
const handleSelectionChange = useCallback(
|
||||
({ start, end }: Selection) => {
|
||||
onSelectionChange({
|
||||
start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames),
|
||||
end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames),
|
||||
});
|
||||
},
|
||||
[mediaSet]
|
||||
);
|
||||
const handleSelectionChange = ({ start, end }: Selection) => {
|
||||
onSelectionChange({
|
||||
start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames),
|
||||
end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames),
|
||||
});
|
||||
};
|
||||
|
||||
// render component
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Frames, VideoPosition, newRPC } from './App';
|
||||
import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
|
||||
import { WaveformCanvas } from './WaveformCanvas';
|
||||
|
|
@ -93,33 +93,25 @@ export const Waveform: React.FC<Props> = ({
|
|||
|
||||
// handlers
|
||||
|
||||
const handleSelectionChange = useCallback(
|
||||
(selection: Selection) => {
|
||||
setSelectedPixels(selection);
|
||||
const handleSelectionChange = (selection: Selection) => {
|
||||
setSelectedPixels(selection);
|
||||
|
||||
const framesPerPixel =
|
||||
(viewport.end - viewport.start) / CanvasLogicalWidth;
|
||||
const selectedFrames = {
|
||||
start: Math.round(viewport.start + selection.start * framesPerPixel),
|
||||
end: Math.round(viewport.start + selection.end * framesPerPixel),
|
||||
};
|
||||
const framesPerPixel = (viewport.end - viewport.start) / CanvasLogicalWidth;
|
||||
const selectedFrames = {
|
||||
start: Math.round(viewport.start + selection.start * framesPerPixel),
|
||||
end: Math.round(viewport.start + selection.end * framesPerPixel),
|
||||
};
|
||||
|
||||
setSelectedFrames(selectedFrames);
|
||||
onSelectionChange(selectedFrames);
|
||||
},
|
||||
[viewport, selectedFrames]
|
||||
);
|
||||
setSelectedFrames(selectedFrames);
|
||||
onSelectionChange(selectedFrames);
|
||||
};
|
||||
|
||||
// helpers
|
||||
|
||||
const frameToCanvasX = useCallback(
|
||||
(frame: number): number => {
|
||||
const pixelsPerFrame =
|
||||
CanvasLogicalWidth / (viewport.end - viewport.start);
|
||||
return Math.round((frame - viewport.start) * pixelsPerFrame);
|
||||
},
|
||||
[viewport]
|
||||
);
|
||||
const frameToCanvasX = (frame: number): number => {
|
||||
const pixelsPerFrame = CanvasLogicalWidth / (viewport.end - viewport.start);
|
||||
return Math.round((frame - viewport.start) * pixelsPerFrame);
|
||||
};
|
||||
|
||||
// render component
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue