diff --git a/docker/main/rootfs/usr/local/nginx/conf/nginx.conf b/docker/main/rootfs/usr/local/nginx/conf/nginx.conf index 61b598859..8a98da1f2 100644 --- a/docker/main/rootfs/usr/local/nginx/conf/nginx.conf +++ b/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/ { diff --git a/web/src/components/player/GenericVideoPlayer.tsx b/web/src/components/player/GenericVideoPlayer.tsx index 75f56e96f..c8405b11a 100644 --- a/web/src/components/player/GenericVideoPlayer.tsx +++ b/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(null); const containerRef = useRef(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 (
- {isLoading && ( - + {!sourceExists ? ( +
+ Video not available +
+ ) : ( + <> + {isLoading && ( + + )} +
+ { + setIsLoading(false); + onPlaying?.(); + }} + setFullResolution={setVideoResolution} + /> + {!isLoading && children} +
+ )} -
- { - setIsLoading(false); - onPlaying?.(); - }} - setFullResolution={setVideoResolution} - /> - {!isLoading && children} -
);