Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Motion review improvements (#10833)

Browse Source 
* render skeleton for preview player until motion data is loaded

* skeleton for timeline
This commit is contained in:
Josh Hawkins 2024-04-04 15:54:58 -05:00 committed by GitHub
parent 42559fa55d
commit 466a9104e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
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,25 +838,29 @@ 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}`}>
<PreviewPlayer {motionData ? (
key={camera.name} <PreviewPlayer
className={`rounded-2xl ${spans} ${grow}`} key={camera.name}
camera={camera.name} className={`rounded-2xl ${spans} ${grow}`}
timeRange={currentTimeRange} camera={camera.name}
startTime={previewStart} timeRange={currentTimeRange}
cameraPreviews={relevantPreviews || []} startTime={previewStart}
isScrubbing={scrubbing} cameraPreviews={relevantPreviews || []}
onControllerReady={(controller) => { isScrubbing={scrubbing}
videoPlayersRef.current[camera.name] = controller; onControllerReady={(controller) => {
}} videoPlayersRef.current[camera.name] = controller;
onClick={() => }}
onOpenRecording({ onClick={() =>
camera: camera.name, onOpenRecording({
startTime: Math.min(currentTime, Date.now() / 1000 - 10), camera: camera.name,
severity: "significant_motion", startTime: currentTime,
}) 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"}`}
/> />
@ -865,28 +870,32 @@ function MotionReview({
</div> </div>
</div> </div>
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar"> <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
<MotionReviewTimeline {motionData ? (
segmentDuration={segmentDuration} <MotionReviewTimeline
timestampSpread={15} segmentDuration={segmentDuration}
timelineStart={timeRangeSegments.end} timestampSpread={15}
timelineEnd={timeRangeSegments.start} timelineStart={timeRangeSegments.end}
motionOnly={motionOnly} timelineEnd={timeRangeSegments.start}
showHandlebar motionOnly={motionOnly}
handlebarTime={currentTime} showHandlebar
setHandlebarTime={setCurrentTime} handlebarTime={currentTime}
events={reviewItems?.all ?? []} setHandlebarTime={setCurrentTime}
motion_events={motionData ?? []} events={reviewItems?.all ?? []}
severityType="significant_motion" motion_events={motionData ?? []}
contentRef={contentRef} severityType="significant_motion"
onHandlebarDraggingChange={(scrubbing) => { contentRef={contentRef}
if (playing && scrubbing) { onHandlebarDraggingChange={(scrubbing) => {
setPlaying(false); if (playing && scrubbing) {
} setPlaying(false);
}
setScrubbing(scrubbing); setScrubbing(scrubbing);
}} }}
dense={isMobile} dense={isMobile}
/> />
) : (
<Skeleton className="rounded-2xl size-full" />
)}
</div> </div>
<VideoControls <VideoControls