Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-26 13:47:03 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* Check if video source exists before showing player

* add comment

* also check 404

* language

* return 404 with vod module
This commit is contained in:
Josh Hawkins 2025-02-14 13:05:05 -06:00 committed by GitHub
parent 761c5109dc
commit 0b65137831
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docker/main/rootfs/usr/local/nginx/conf/nginx.conf
View File

@ -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/ {

70
web/src/components/player/GenericVideoPlayer.tsx
View File

@ -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 && (
<ActivityIndicator className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" />
{!sourceExists ? (
<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>
);