Video dashboard element rerenders on every dashboard modification

[ollytom]

When editing a dashboard, any change to it, such as repositioning an element or renaming the object that an element represents, causes Video dashboard elements to rerender.

The Video component is small:

export function Video({ options }) {
    let videoRef = useRef(null);
    if (!options.source) {
        return null;
    }
    useEffect(() => {
        if (Hls.isSupported() && options.source.endsWith("m3u8")) {
            const hls = new Hls({ enableWorker: false });
            hls.loadSource(options.source);
            hls.attachMedia(videoRef.current);
        }
        // otherwise we're running in a browser with native HLS support
    });
    return (
        <video
            style="width: 90%; height: 90%"
            ref={videoRef}
            src={options.source}
            controls
            autoplay
        ></video>
    );
}

The issue is terrible performance: repositioning an element can result in thousands of reloads of the hls.js library and in turn loading and decoding video.