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

Refactor frontend thumbnail handling

This commit is contained in:
Rob Watson 2021-11-22 19:20:40 +01:00
parent 7eef0b6e25
commit 8a69a07cc7
1 changed files with 42 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/VideoPreview.tsx
View File

@ -21,14 +21,11 @@ export const VideoPreview: React.FC<Props> = ({
// effects // effects
// load thumbnail, to display when the component is loaded for the first // render canvas
// time. This is needed because of browser autoplay limitations.
useEffect(() => { useEffect(() => {
// TODO: not sure if requestAnimationFrame is recommended here.
requestAnimationFrame(() => {
(async function () { (async function () {
if (mediaSet == null) {
return;
}
const canvas = videoCanvasRef.current; const canvas = videoCanvasRef.current;
if (canvas == null) { if (canvas == null) {
console.error('no canvas ref available'); console.error('no canvas ref available');
@ -42,61 +39,40 @@ export const VideoPreview: React.FC<Props> = ({
} }
// Set aspect ratio. // Set aspect ratio.
canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight); canvas.width =
canvas.height * (canvas.clientWidth / canvas.clientHeight);
console.log('getting video thumbnail...'); // If the required position is 0, display the thumbnail instead of
const rpc = newRPC(); // trying to render the video. The most important use case is before a
const service = new MediaSetServiceClientImpl(rpc); // click event has happened, when autoplay restrictions will prevent
// the video being rendered to canvas.
const thumbnail = await service.GetVideoThumbnail({ id: mediaSet.id }); if (position == 0) {
const service = new MediaSetServiceClientImpl(newRPC());
console.log('got thumbnail', thumbnail); const thumbnail = await service.GetVideoThumbnail({
id: mediaSet.id,
});
// TODO: avoid fetching the image every re-render:
const url = URL.createObjectURL( const url = URL.createObjectURL(
new Blob([thumbnail.image], { type: 'image/jpeg' }) new Blob([thumbnail.image], { type: 'image/jpeg' })
); );
const img = new Image(thumbnail.width, thumbnail.height); const img = new Image(thumbnail.width, thumbnail.height);
img.src = url; img.src = url;
console.log('img', img); img.onload = () => ctx.drawImage(img, 0, 0, 177, 100);
img.onerror = console.error;
img.onload = () => {
ctx.drawImage(img, 0, 0, 177, 100);
};
console.log('set src to', url);
})();
}, [mediaSet]);
// render canvas
useEffect(() => {
// TODO: not sure if requestAnimationFrame is recommended here.
requestAnimationFrame(() => {
const canvas = videoCanvasRef.current;
if (canvas == null) {
console.error('no canvas ref available');
return; return;
} }
const ctx = canvas.getContext('2d'); // otherwise, render the video, which (should) work now.
if (ctx == null) {
console.error('no 2d context available');
return;
}
// Set aspect ratio.
canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);
const durSecs = duration / 1000; const durSecs = duration / 1000;
const ratio = position / durSecs; const ratio = position / durSecs;
const x = (canvas.width - 177) * ratio; const x = (canvas.width - 177) * ratio;
ctx.clearRect(0, 0, x, canvas.height); ctx.clearRect(0, 0, x, canvas.height);
ctx.clearRect(x + 177, 0, canvas.width - 177 - x, canvas.height); ctx.clearRect(x + 177, 0, canvas.width - 177 - x, canvas.height);
ctx.drawImage(video, x, 0, 177, 100); ctx.drawImage(video, x, 0, 177, 100);
})();
}); });
}, [position]); }, [mediaSet, position]);
// render component // render component