mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-07-26 13:47:03 +02:00
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
This commit is contained in:
parent
761c5109dc
commit
0b65137831
@ -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/ {
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user