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 (