Return 404 for non-existent vod module media (#16586)

* Check if video source exists before showing player

* add comment

* also check 404

* language

* return 404 with vod module

docker/main/rootfs/usr/local/nginx/conf/nginx.conf

@@ -109,6 +109,14 @@ http {
             expires off;
 
             keepalive_disable safari;
+
+            # vod module returns 502 for non-existent media
+            # https://github.com/kaltura/nginx-vod-module/issues/468
+            error_page 502 =404 /vod-not-found;
+        }
+
+        location = /vod-not-found {
+            return 404;
         }
 
         location /stream/ {

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,37 +15,61 @@ 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" });
+        // nginx vod module returns 502 for non existent media
+        // https://github.com/kaltura/nginx-vod-module/issues/468
+        setSourceExists(response.status !== 502 && response.status !== 404);
+      } 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">
-        {isLoading && (
+        {!sourceExists ? (
-          <ActivityIndicator className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" />
+          <div className="flex aspect-video w-full items-center justify-center bg-background_alt text-lg text-primary">
+            Video not available
+          </div>
+        ) : (
+          <>
+            {isLoading && (
+              <ActivityIndicator className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" />
+            )}
+            <div
+              className="relative flex items-center justify-center"
+              style={videoDimensions}
+            >
+              <HlsVideoPlayer
+                videoRef={videoRef}
+                currentSource={source}
+                hotKeys
+                visible
+                frigateControls={false}
+                fullscreen={false}
+                supportsFullscreen={false}
+                onPlaying={() => {
+                  setIsLoading(false);
+                  onPlaying?.();
+                }}
+                setFullResolution={setVideoResolution}
+              />
+              {!isLoading && children}
+            </div>
+          </>
         )}
-        <div
-          className="relative flex items-center justify-center"
-          style={videoDimensions}
-        >
-          <HlsVideoPlayer
-            videoRef={videoRef}
-            currentSource={source}
-            hotKeys
-            visible
-            frigateControls={false}
-            fullscreen={false}
-            supportsFullscreen={false}
-            onPlaying={() => {
-              setIsLoading(false);
-              onPlaying?.();
-            }}
-            setFullResolution={setVideoResolution}
-          />
-          {!isLoading && children}
-        </div>
       </div>
     </div>
   );