blakeblackshear · NickM-27 · Mar 21, 2024 · Mar 21, 2024
diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx
@@ -43,7 +43,7 @@ export default function NewReviewData({
 
  return (
  <div className={className}>
- <div className="flex justify-center items-center md:mr-[115px] pointer-events-auto">
+ <div className="flex justify-center items-center mr-[65px] md:mr-[115px] pointer-events-auto">
  <Button
  className={`${
  hasUpdate

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
@@ -197,7 +197,12 @@ export function EventSegment({
  }, [startTimestamp]);
 
  return (
- <div key={segmentKey} className={segmentClasses}>
+ <div
+ key={segmentKey}
+ className={segmentClasses}
+ onClick={segmentClick}
+ onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
+ >
  <MinimapBounds
  isFirstSegmentInMinimap={isFirstSegmentInMinimap}
  isLastSegmentInMinimap={isLastSegmentInMinimap}
@@ -219,34 +224,36 @@ export function EventSegment({
  {severity.map((severityValue: number, index: number) => (
  <React.Fragment key={index}>
  {severityValue === displaySeverityType && (
- <HoverCard openDelay={200} closeDelay={100}>
- <div
- className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
- data-severity={severityValue}
- >
- <HoverCardTrigger asChild>
- <div
- key={`${segmentKey}_${index}_primary_data`}
- className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
- onClick={segmentClick}
- onTouchEnd={(event) =>
- handleTouchStart(event, segmentClick)
- }
- ></div>
- </HoverCardTrigger>
- <HoverCardPortal>
- <HoverCardContent
- className="rounded-2xl w-[250px] p-2"
- side="left"
- >
- <img
- className="rounded-lg"
- src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
- />
- </HoverCardContent>
- </HoverCardPortal>
+ <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
+ <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
+ <div className="flex justify-center">
+ <HoverCard openDelay={200} closeDelay={100}>
+ <div
+ className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
+ data-severity={severityValue}
+ >
+ <HoverCardTrigger asChild>
+ <div
+ key={`${segmentKey}_${index}_primary_data`}
+ className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
+ ></div>
+ </HoverCardTrigger>
+ <HoverCardPortal>
+ <HoverCardContent
+ className="rounded-2xl w-[250px] p-2"
+ side="left"
+ >
+ <img
+ className="rounded-lg"
+ src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
+ />
+ </HoverCardContent>
+ </HoverCardPortal>
+ </div>
+ </HoverCard>
+ </div>
  </div>
- </HoverCard>
+ </div>
  )}
  </React.Fragment>
  ))}

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -11,6 +11,7 @@ import MotionSegment from "./MotionSegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
+import { isDesktop } from "react-device-detect";
 
 export type MotionReviewTimelineProps = {
  segmentDuration: number;
@@ -218,7 +219,7 @@ export function MotionReviewTimeline({
  const segmentsObserver = useRef<IntersectionObserver | null>(null);
  const selectedTimelineRef = timelineRef || internalTimelineRef;
  useEffect(() => {
- if (selectedTimelineRef.current && segments) {
+ if (selectedTimelineRef.current && segments && isDesktop) {
  segmentsObserver.current = new IntersectionObserver(
  (entries) => {
  entries.forEach((entry) => {

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
-import { isMobile } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import useTapUtils from "@/hooks/use-tap-utils";
 
 type MotionSegmentProps = {
@@ -155,6 +155,11 @@ export function MotionSegment({
  : ""
  }`;
 
+ const animationClassesSecondHalf = `motion-segment ${secondHalfSegmentWidth > 1 ? "hidden" : ""}
+ zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
+ const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 1 ? "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"
@@ -204,7 +209,7 @@ export function MotionSegment({
  <div className="flex justify-center">
  <div
  key={`${segmentKey}_motion_data_1`}
- className={`motion-segment ${secondHalfSegmentWidth > 1 ? "hidden" : ""} zoom-in-[0.2] ${secondHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+ className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
  style={{
  width: secondHalfSegmentWidth,
  }}
@@ -216,7 +221,7 @@ export function MotionSegment({
  <div className="flex justify-center">
  <div
  key={`${segmentKey}_motion_data_2`}
- className={`motion-segment ${firstHalfSegmentWidth > 1 ? "hidden" : ""} zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
+ className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
  style={{
  width: firstHalfSegmentWidth,
  }}

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
@@ -14,16 +14,8 @@ export type ReviewTimelineProps = {
  timelineRef: RefObject<HTMLDivElement>;
  handlebarRef: RefObject<HTMLDivElement>;
  handlebarTimeRef: RefObject<HTMLDivElement>;
- handlebarMouseMove: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
- handlebarMouseUp: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
+ handlebarMouseMove: (e: MouseEvent | TouchEvent) => void;
+ handlebarMouseUp: (e: MouseEvent | TouchEvent) => void;
  handlebarMouseDown: (
  e:
  | React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -37,31 +29,15 @@ export type ReviewTimelineProps = {
  exportStartTimeRef: RefObject<HTMLDivElement>;
  exportEndRef: RefObject<HTMLDivElement>;
  exportEndTimeRef: RefObject<HTMLDivElement>;
- exportStartMouseMove: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
- exportStartMouseUp: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
+ exportStartMouseMove: (e: MouseEvent | TouchEvent) => void;
+ exportStartMouseUp: (e: MouseEvent | TouchEvent) => void;
  exportStartMouseDown: (
  e:
  | React.MouseEvent<HTMLDivElement, MouseEvent>
  | React.TouchEvent<HTMLDivElement>,
  ) => void;
- exportEndMouseMove: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
- exportEndMouseUp: (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => void;
+ exportEndMouseMove: (e: MouseEvent | TouchEvent) => void;
+ exportEndMouseUp: (e: MouseEvent | TouchEvent) => void;
  exportEndMouseDown: (
  e:
  | React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -152,11 +128,7 @@ export function ReviewTimeline({
  );
 
  const handleMouseMove = useCallback(
- (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => {
+ (e: MouseEvent | TouchEvent) => {
  switch (draggableElementType) {
  case "export_start":
  exportStartMouseMove(e);
@@ -181,11 +153,7 @@ export function ReviewTimeline({
  );
 
  const handleMouseUp = useCallback(
- (
- e:
- | React.MouseEvent<HTMLDivElement, MouseEvent>
- | React.TouchEvent<HTMLDivElement>,
- ) => {
+ (e: MouseEvent | TouchEvent) => {
  switch (draggableElementType) {
  case "export_start":
  exportStartMouseUp(e);
@@ -227,13 +195,32 @@ export function ReviewTimeline({
  exportEndPosition,
  ]);
 
+ const documentRef = useRef<Document | null>(document);
+ useEffect(() => {
+ const documentInstance = documentRef.current;
+
+ if (isDragging) {
+ documentInstance?.addEventListener("mousemove", handleMouseMove);
+ documentInstance?.addEventListener("touchmove", handleMouseMove);
+ documentInstance?.addEventListener("mouseup", handleMouseUp);
+ documentInstance?.addEventListener("touchend", handleMouseUp);
+ } else {
+ documentInstance?.removeEventListener("mousemove", handleMouseMove);
+ documentInstance?.removeEventListener("touchmove", handleMouseMove);
+ documentInstance?.removeEventListener("mouseup", handleMouseUp);
+ documentInstance?.removeEventListener("touchend", handleMouseUp);
+ }
+ return () => {
+ documentInstance?.removeEventListener("mousemove", handleMouseMove);
+ documentInstance?.removeEventListener("touchmove", handleMouseMove);
+ documentInstance?.removeEventListener("mouseup", handleMouseUp);
+ documentInstance?.removeEventListener("touchend", handleMouseUp);
+ };
+ }, [handleMouseMove, handleMouseUp, isDragging]);
+
  return (
  <div
  ref={timelineRef}
- onMouseMove={handleMouseMove}
- onTouchMove={handleMouseMove}
- onMouseUp={handleMouseUp}
- onTouchEnd={handleMouseUp}
  className={`relative h-full overflow-y-auto no-scrollbar select-none bg-secondary ${
  isDragging && (showHandlebar || showExportHandles)
  ? "cursor-grabbing"

diff --git a/web/src/components/timeline/SummarySegment.tsx b/web/src/components/timeline/SummarySegment.tsx
@@ -1,5 +1,5 @@
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
-import { ReviewSegment } from "@/types/review";
+import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import React, { useMemo } from "react";
 // import useTapUtils from "@/hooks/use-tap-utils";
 
@@ -8,15 +8,16 @@ type SummarySegmentProps = {
  segmentTime: number;
  segmentDuration: number;
  segmentHeight: number;
+ severityType: ReviewSeverity;
 };
 
 export function SummarySegment({
  events,
  segmentTime,
  segmentDuration,
  segmentHeight,
+ severityType,
 }: SummarySegmentProps) {
- const severityType = "all";
  const { getSeverity, getReviewed, displaySeverityType } =
  useEventSegmentUtils(segmentDuration, events, severityType);
 
@@ -44,9 +45,9 @@ export function SummarySegment({
  className="relative w-full"
  style={{ height: segmentHeight }}
  >
- {severity.map((severityValue: number, index: number) => {
- return (
- <React.Fragment key={index}>
+ {severity.map((severityValue: number, index: number) => (
+ <React.Fragment key={index}>
+ {severityValue === displaySeverityType && (
  <div
  className="flex justify-end cursor-pointer"
  style={{ height: segmentHeight }}
@@ -57,9 +58,9 @@ export function SummarySegment({
  className={`w-[10px] ${severityColors[severityValue]}`}
  ></div>
  </div>
- </React.Fragment>
- );
- })}
+ )}
+ </React.Fragment>
+ ))}
  </div>
  );
 }