diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx index 7ab4c92d7..c70e428db 100644 --- a/web/src/components/player/BirdseyeLivePlayer.tsx +++ b/web/src/components/player/BirdseyeLivePlayer.tsx @@ -37,11 +37,7 @@ export default function BirdseyeLivePlayer({ } else if (liveMode == "jsmpeg") { return (
- +
); } else { diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx index 8da686d6b..a8b3087ce 100644 --- a/web/src/components/player/JSMpegPlayer.tsx +++ b/web/src/components/player/JSMpegPlayer.tsx @@ -1,57 +1,17 @@ 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 { useEffect, useMemo, useRef } from "react"; +import { useEffect, useRef } from "react"; type JSMpegPlayerProps = { className?: string; camera: string; - width: number; - height: number; }; -export default function JSMpegPlayer({ - camera, - width, - height, - className, -}: JSMpegPlayerProps) { +export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) { const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`; const playerRef = useRef(null); const containerRef = useRef(null); - const [{ width: containerWidth, height: containerHeight }] = - useResizeObserver(containerRef); - - // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering. - // https://github.com/blakeblackshear/frigate/issues/1657 - let scrollBarWidth = 0; - if (window.innerWidth && document.body.offsetWidth) { - scrollBarWidth = window.innerWidth - document.body.offsetWidth; - } - const availableWidth = scrollBarWidth - ? containerWidth + scrollBarWidth - : containerWidth; - const aspectRatio = width / height; - - const scaledHeight = useMemo(() => { - const scaledHeight = Math.floor(availableWidth / aspectRatio); - const finalHeight = Math.min(scaledHeight, height); - - if (containerHeight < finalHeight) { - return containerHeight; - } - - if (finalHeight > 0) { - return finalHeight; - } - - return 100; - }, [availableWidth, aspectRatio, containerHeight, height]); - const scaledWidth = useMemo( - () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), - [scaledHeight, aspectRatio, scrollBarWidth], - ); useEffect(() => { if (!playerRef.current) { @@ -65,16 +25,6 @@ export default function JSMpegPlayer({ { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }, ); - const fullscreen = () => { - if (video.els.canvas.webkitRequestFullScreen) { - video.els.canvas.webkitRequestFullScreen(); - } else { - video.els.canvas.mozRequestFullScreen(); - } - }; - - video.els.canvas.addEventListener("click", fullscreen); - return () => { if (playerRef.current) { try { @@ -88,14 +38,7 @@ export default function JSMpegPlayer({ return (
-
+
); } diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx index 2978717b7..c1a6a364c 100644 --- a/web/src/components/player/LivePlayer.tsx +++ b/web/src/components/player/LivePlayer.tsx @@ -122,10 +122,8 @@ export default function LivePlayer({ } else if (liveMode == "jsmpeg") { player = ( ); } else { @@ -134,7 +132,7 @@ export default function LivePlayer({ return (