administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

render skeleton for preview player until motion data is loaded

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-04 15:39:27 -05:00
parent 42559fa55d
commit cd1cf0188b
1 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/views/events/EventView.tsx
View File

@ -42,6 +42,7 @@ import VideoControls from "@/components/player/VideoControls";
import { TimeRange } from "@/types/timeline"; import { TimeRange } from "@/types/timeline";
import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity"; import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity";
import useOptimisticState from "@/hooks/use-optimistic-state"; import useOptimisticState from "@/hooks/use-optimistic-state";
import { Skeleton } from "@/components/ui/skeleton";
type EventViewProps = { type EventViewProps = {
reviews?: ReviewSegment[]; reviews?: ReviewSegment[];
@ -837,6 +838,7 @@ function MotionReview({
const detectionType = getDetectionType(camera.name); const detectionType = getDetectionType(camera.name);
return ( return (
<div key={camera.name} className={`relative ${spans}`}> <div key={camera.name} className={`relative ${spans}`}>
{motionData ? (
<PreviewPlayer <PreviewPlayer
key={camera.name} key={camera.name}
className={`rounded-2xl ${spans} ${grow}`} className={`rounded-2xl ${spans} ${grow}`}
@ -851,11 +853,14 @@ function MotionReview({
onClick={() => onClick={() =>
onOpenRecording({ onOpenRecording({
camera: camera.name, camera: camera.name,
startTime: Math.min(currentTime, Date.now() / 1000 - 10), startTime: currentTime,
severity: "significant_motion", severity: "significant_motion",
}) })
} }
/> />
) : (
<Skeleton className={`rounded-2xl ${spans} ${grow}`} />
)}
<div <div
className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`} className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
/> />