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