administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-14 15:15:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add video loading indicator

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-11 12:17:53 -05:00
parent 4cbd02d0ef
commit 0cd12d2c38
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -32,6 +32,7 @@ import { Event } from "@/types/event";
import HlsVideoPlayer from "@/components/player/HlsVideoPlayer"; import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import ActivityIndicator from "@/components/indicators/activity-indicator";
const SEARCH_TABS = ["details", "Frigate+", "video"] as const; const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
type SearchTab = (typeof SEARCH_TABS)[number]; type SearchTab = (typeof SEARCH_TABS)[number];
@ -312,11 +313,16 @@ type VideoTabProps = {
search: SearchResult; search: SearchResult;
}; };
function VideoTab({ search }: VideoTabProps) { function VideoTab({ search }: VideoTabProps) {
const [isLoading, setIsLoading] = useState(true);
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]); const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
return ( return (
<>
{isLoading && (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
)}
<HlsVideoPlayer <HlsVideoPlayer
videoRef={videoRef} videoRef={videoRef}
currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`} currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
@ -325,6 +331,8 @@ function VideoTab({ search }: VideoTabProps) {
frigateControls={false} frigateControls={false}
fullscreen={false} fullscreen={false}
supportsFullscreen={false} supportsFullscreen={false}
onPlaying={() => setIsLoading(false)}
/> />
</>
); );
} }