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:
parent
35b62f1e59
commit
f33fa149fc
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue