Check if video source exists before showing player

web/src/components/player/GenericVideoPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { useVideoDimensions } from "@/hooks/use-video-dimensions";
 import HlsVideoPlayer from "./HlsVideoPlayer";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -15,14 +15,34 @@ export function GenericVideoPlayer({
   children,
 }: GenericVideoPlayerProps) {
   const [isLoading, setIsLoading] = useState(true);
+  const [sourceExists, setSourceExists] = useState(true);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { videoDimensions, setVideoResolution } =
     useVideoDimensions(containerRef);
 
+  useEffect(() => {
+    const checkSourceExists = async (url: string) => {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        setSourceExists(response.status !== 502);
+      } catch (error) {
+        setSourceExists(false);
+      }
+    };
+
+    checkSourceExists(source);
+  }, [source]);
+
   return (
     <div ref={containerRef} className="relative flex h-full w-full flex-col">
       <div className="relative flex flex-grow items-center justify-center">
+        {!sourceExists ? (
+          <div className="flex aspect-video w-full items-center justify-center bg-background_alt text-lg text-primary">
+            Video not found
+          </div>
+        ) : (
+          <>
             {isLoading && (
               <ActivityIndicator className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" />
             )}
@@ -46,6 +66,8 @@ export function GenericVideoPlayer({
               />
               {!isLoading && children}
             </div>
+          </>
+        )}
       </div>
     </div>
   );