chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Motion review playback optimizations (#10659)

Browse Source 
* handle motion timestamps with ranges

* check for overlaps when checking segment for events

* rename motion color vars to significant_motion for consistency

* safelist significant_motion

* rename vars for clarity and use timeout instead of interval
This commit is contained in:
Josh Hawkins
2024-03-24 21:37:44 -05:00
committed by GitHub
parent 24d29dd32c
commit 7b64091128
9 changed files with 163 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/timeline/EventSegment.tsx
View File

@@ -155,8 +155,8 @@ export function EventSegment({
const severityColors: { [key: number]: string } = {
1: reviewed
? "from-severity_motion-dimmed/50 to-severity_motion/50"
: "from-severity_motion-dimmed to-severity_motion",
? "from-severity_significant_motion-dimmed/50 to-severity_significant_motion/50"
: "from-severity_significant_motion-dimmed to-severity_significant_motion",
2: reviewed
? "from-severity_detection-dimmed/50 to-severity_detection/50"
: "from-severity_detection-dimmed to-severity_detection",

20
web/src/components/timeline/MotionSegment.tsx
View File

@@ -158,15 +158,15 @@ export function MotionSegment({
: ""
}`;
const animationClassesSecondHalf = `motion-segment ${secondHalfSegmentWidth > 1 ? "hidden" : ""}
const animationClassesSecondHalf = `motion-segment ${secondHalfSegmentWidth > 0 ? "hidden" : ""}
zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 1 ? "hidden" : ""}
const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 0 ? "hidden" : ""}
zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
const severityColors: { [key: number]: string } = {
1: reviewed
? "from-severity_motion-dimmed/50 to-severity_motion/50"
: "from-severity_motion-dimmed to-severity_motion",
? "from-severity_significant_motion-dimmed/50 to-severity_significant_motion/50"
: "from-severity_significant_motion-dimmed to-severity_significant_motion",
2: reviewed
? "from-severity_detection-dimmed/50 to-severity_detection/50"
: "from-severity_detection-dimmed to-severity_detection",
@@ -183,14 +183,14 @@ export function MotionSegment({
return (
<>
{(((firstHalfSegmentWidth > 1 || secondHalfSegmentWidth > 1) &&
{(((firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0) &&
motionOnly &&
severity[0] < 2) ||
!motionOnly) && (
<div
key={segmentKey}
data-segment-id={segmentKey}
className={`segment ${firstHalfSegmentWidth > 1 || secondHalfSegmentWidth > 1 ? "has-data" : ""} ${segmentClasses}`}
className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses}`}
onClick={segmentClick}
onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
>
@@ -228,9 +228,10 @@ export function MotionSegment({
<div className="flex justify-center">
<div
key={`${segmentKey}_motion_data_1`}
data-motion-value={secondHalfSegmentWidth}
className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
style={{
width: secondHalfSegmentWidth,
width: secondHalfSegmentWidth || 1,
}}
></div>
</div>
@@ -240,9 +241,10 @@ export function MotionSegment({
<div className="flex justify-center">
<div
key={`${segmentKey}_motion_data_2`}
data-motion-value={firstHalfSegmentWidth}
className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
style={{
width: firstHalfSegmentWidth,
width: firstHalfSegmentWidth || 1,
}}
></div>
</div>
@@ -251,7 +253,7 @@ export function MotionSegment({
{!motionOnly &&
severity.map((severityValue: number, index: number) => {
if (severityValue > 1) {
if (severityValue > 0) {
return (
<React.Fragment key={index}>
<div className="absolute right-0 h-2 z-10">

4
web/src/components/timeline/SummarySegment.tsx
View File

@@ -34,7 +34,9 @@ export function SummarySegment({
const segmentKey = useMemo(() => segmentTime, [segmentTime]);
const severityColors: { [key: number]: string } = {
1: reviewed ? "bg-severity_motion/50" : "bg-severity_motion",
1: reviewed
? "bg-severity_significant_motion/50"
: "bg-severity_significant_motion",
2: reviewed ? "bg-severity_detection/50" : "bg-severity_detection",
3: reviewed ? "bg-severity_alert/50" : "bg-severity_alert",
};