frontend: Avoid re-rendering static components during playback

This commit is contained in:
Rob Watson 2021-12-02 20:13:06 +01:00
parent 0cc1fd8272
commit 155e41136c
3 changed files with 52 additions and 34 deletions

View File

@ -6,7 +6,7 @@ import {
GetAudioProgress, GetAudioProgress,
} from './generated/media_set'; } from './generated/media_set';
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef, useMemo } from 'react';
import { VideoPreview } from './VideoPreview'; import { VideoPreview } from './VideoPreview';
import { Overview, CanvasLogicalWidth } from './Overview'; import { Overview, CanvasLogicalWidth } from './Overview';
import { Waveform } from './Waveform'; import { Waveform } from './Waveform';
@ -192,6 +192,24 @@ function App(): JSX.Element {
const offsetPixels = Math.floor(thumbnailWidth / 2); const offsetPixels = Math.floor(thumbnailWidth / 2);
// Avoid re-rendering this component during playback. Needs to be memoized
// before the mediaSet null check below.
const controlBar = useMemo(
() => (
<ControlBar
onPlay={() => {
audio.play();
video.play();
}}
onPause={() => {
video.pause();
audio.pause();
}}
/>
),
[]
);
if (mediaSet == null) { if (mediaSet == null) {
// TODO: improve // TODO: improve
return <></>; return <></>;
@ -201,17 +219,7 @@ function App(): JSX.Element {
<> <>
<div className="App"> <div className="App">
<div style={containerStyles}> <div style={containerStyles}>
<ControlBar {controlBar}
onPlay={() => {
audio.play();
video.play();
}}
onPause={() => {
video.pause();
audio.pause();
}}
/>
<Overview <Overview
peaks={overviewPeaks} peaks={overviewPeaks}
mediaSet={mediaSet} mediaSet={mediaSet}

View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef, MouseEvent } from 'react'; import { useState, useEffect, useRef, useMemo, MouseEvent } 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';
@ -336,16 +336,21 @@ export const Overview: React.FC<Props> = ({
return ( return (
<> <>
<div style={containerStyles}> <div style={containerStyles}>
<WaveformCanvas {useMemo(
peaks={peaks} () => (
channels={mediaSet.audioChannels} <WaveformCanvas
width={CanvasLogicalWidth} peaks={peaks}
height={CanvasLogicalHeight} channels={mediaSet.audioChannels}
strokeStyle="black" width={CanvasLogicalWidth}
fillStyle="#003300" height={CanvasLogicalHeight}
zIndex={1} strokeStyle="black"
alpha={1} fillStyle="#003300"
></WaveformCanvas> zIndex={1}
alpha={1}
></WaveformCanvas>
),
[peaks, mediaSet]
)}
<canvas <canvas
ref={hudCanvasRef} ref={hudCanvasRef}
width={CanvasLogicalWidth} width={CanvasLogicalWidth}

View File

@ -1,4 +1,4 @@
import { useEffect, useState, useRef } from 'react'; import { useEffect, useState, useRef, useMemo } 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';
@ -112,16 +112,21 @@ export const Waveform: React.FC<Props> = ({
return ( return (
<> <>
<div style={containerStyles}> <div style={containerStyles}>
<WaveformCanvas {useMemo(
peaks={peaks} () => (
channels={mediaSet.audioChannels} <WaveformCanvas
width={CanvasLogicalWidth} peaks={peaks}
height={CanvasLogicalHeight} channels={mediaSet.audioChannels}
strokeStyle="green" width={CanvasLogicalWidth}
fillStyle="black" height={CanvasLogicalHeight}
zIndex={0} strokeStyle="green"
alpha={1} fillStyle="black"
></WaveformCanvas> zIndex={0}
alpha={1}
></WaveformCanvas>
),
[peaks, mediaSet]
)}
<canvas <canvas
width={CanvasLogicalWidth} width={CanvasLogicalWidth}
height={CanvasLogicalHeight} height={CanvasLogicalHeight}