Revert "Early 0.18 work (#22138)" (#22142)

This reverts commit d24b96d3bb.

web/src/components/player/JSMpegPlayer.tsx

@@ -118,8 +118,6 @@ export default function JSMpegPlayer({
     const videoWrapper = videoRef.current;
     const canvas = canvasRef.current;
     let videoElement: JSMpeg.VideoElement | null = null;
-    let socket: WebSocket | null = null;
-    let socketMessageHandler: ((event: MessageEvent) => void) | null = null;
 
     let frameCount = 0;
 
@@ -154,14 +152,12 @@ export default function JSMpegPlayer({
           videoElement.player.source &&
           videoElement.player.source.socket
         ) {
-          socket = videoElement.player.source.socket as WebSocket;
-          socketMessageHandler = (event: MessageEvent) => {
+          const socket = videoElement.player.source.socket;
+          socket.addEventListener("message", (event: MessageEvent) => {
             if (event.data instanceof ArrayBuffer) {
               bytesReceivedRef.current += event.data.byteLength;
             }
-          };
-
-          socket.addEventListener("message", socketMessageHandler);
+          });
         }
 
         // Update stats every second
@@ -201,23 +197,11 @@ export default function JSMpegPlayer({
         }
         if (videoElement) {
           try {
-            videoElement.player?.destroy();
+            // this causes issues in react strict mode
+            // https://stackoverflow.com/questions/76822128/issue-with-cycjimmy-jsmpeg-player-in-react-18-cannot-read-properties-of-null-o
+            videoElement.destroy();
             // eslint-disable-next-line no-empty
           } catch (e) {}
-
-          if (videoWrapper) {
-            videoWrapper.innerHTML = "";
-            // @ts-expect-error playerInstance is set by jsmpeg
-            videoWrapper.playerInstance = null;
-          }
-        }
-        if (socket) {
-          if (socketMessageHandler) {
-            socket.removeEventListener("message", socketMessageHandler);
-          }
-
-          socket = null;
-          socketMessageHandler = null;
         }
       };
     }

web/src/components/player/LivePlayer.tsx

@@ -82,11 +82,6 @@ export default function LivePlayer({
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
   const cameraName = useCameraFriendlyName(cameraConfig);
-
-  // player is showing on a dashboard if containerRef is not provided
-
-  const inDashboard = containerRef?.current == null;
-
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -421,28 +416,6 @@ export default function LivePlayer({
         />
       </div>
 
-      {offline && inDashboard && (
-        <>
-          <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
-          <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
-            <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
-              <div className="text-md">{t("streamOffline.title")}</div>
-              <TbExclamationCircle className="size-6" />
-              <p className="text-center text-sm">
-                <Trans
-                  ns="components/player"
-                  values={{
-                    cameraName: cameraName,
-                  }}
-                >
-                  streamOffline.desc
-                </Trans>
-              </p>
-            </div>
-          </div>
-        </>
-      )}
-
       {offline && !showStillWithoutActivity && cameraEnabled && (
         <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
           <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">