Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Use valid/unique css identifier for jsmpeg canvas elements (#11704)

Browse Source
This commit is contained in:
Josh Hawkins 2024-06-03 06:39:19 -05:00 committed by GitHub
parent 7a4eb0b37c
commit 13f250f630
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/player/JSMpegPlayer.tsx
View File

@ -2,7 +2,7 @@ import { baseUrl } from "@/api/baseUrl";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
// @ts-expect-error we know this doesn't have types // @ts-expect-error we know this doesn't have types
import JSMpeg from "@cycjimmy/jsmpeg-player"; import JSMpeg from "@cycjimmy/jsmpeg-player";
import React, { useEffect, useMemo, useRef } from "react"; import React, { useEffect, useMemo, useRef, useId } from "react";
type JSMpegPlayerProps = { type JSMpegPlayerProps = {
className?: string; className?: string;
@ -77,6 +77,8 @@ export default function JSMpegPlayer({
} }
}, [scaledHeight, aspectRatio]); }, [scaledHeight, aspectRatio]);
const uniqueId = useId();
useEffect(() => { useEffect(() => {
if (!playerRef.current) { if (!playerRef.current) {
return; return;
@ -85,7 +87,7 @@ export default function JSMpegPlayer({
const video = new JSMpeg.VideoElement( const video = new JSMpeg.VideoElement(
playerRef.current, playerRef.current,
url, url,
{ canvas: `#${camera}-canvas` }, { canvas: `#${CSS.escape(uniqueId)}` },
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }, { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
); );
@ -98,14 +100,14 @@ export default function JSMpegPlayer({
playerRef.current = null; playerRef.current = null;
} }
}; };
}, [url, camera]); }, [url, uniqueId]);
return ( return (
<div className={className}> <div className={className}>
<div className="size-full" ref={internalContainerRef}> <div className="size-full" ref={internalContainerRef}>
<div ref={playerRef} className="jsmpeg"> <div ref={playerRef} className="jsmpeg">
<canvas <canvas
id={`${camera}-canvas`} id={uniqueId}
style={{ style={{
width: scaledWidth ?? width, width: scaledWidth ?? width,
height: scaledHeight ?? height, height: scaledHeight ?? height,