Merge 911834e223ac612bcedd4603b4071ecf0f4cf9e1 into 32f1d85a6fd617af3df1a27443464e53c80011c8

Co-authored-by: Artem Vladimirov <a.vladimirov@small.kz>

docs/docs/configuration/genai/review_summaries.md

@@ -68,6 +68,36 @@ The mere presence of an unidentified person in private areas during late night h
 
 </details>
 
+### Camera Spatial Context
+
+In addition to defining activity patterns, you can provide spatial context for specific cameras to help the LLM generate more accurate and descriptive titles and scene descriptions. The `camera_context` field allows you to describe physical features and locations that are outside the camera's field of view but are relevant for understanding the scene.
+
+**Important Guidelines:**
+
+- This context is used **only for descriptive purposes** to help the LLM write better titles and scene descriptions
+- It should describe **physical features and spatial relationships** (e.g., "front door is to the right", "driveway on the left")
+- It should **NOT** include subjective assessments or threat evaluations (e.g., "high-crime area")
+- Threat level determination remains based solely on observable actions defined in the activity patterns
+
+Example configuration:
+
+```yaml
+cameras:
+  front_door:
+    review:
+      genai:
+        enabled: true
+        camera_context: |
+          - Front door entrance is to the right of the frame
+          - Driveway and street are to the left
+          - Steps in the center lead from the sidewalk to the front door
+          - Garage is located beyond the left edge of the frame
+```
+
+This helps the LLM generate more natural descriptions like "Person approaching front door" instead of "Person walking toward right side of frame".
+
+The `camera_context` can be defined globally under `genai.review` and overridden per camera for specific spatial details.
+
 ### Image Source
 
 By default, review summaries use preview images (cached preview frames) which have a lower resolution but use fewer tokens per image. For better image quality and more detailed analysis, you can configure Frigate to extract frames directly from recordings at a higher resolution:

frigate/api/event.py

@@ -912,7 +912,7 @@ def events_summary(
                     "count": int(g.count or 0),
                 }
 
-    return JSONResponse(content=list(grouped.values()))
+    return JSONResponse(content=sorted(grouped.values(), key=lambda x: x["day"]))
 
 
 @router.get(

frigate/api/media.py

@@ -496,7 +496,7 @@ def all_recordings_summary(
         for g in period_query:
             days[g.day] = True
 
-    return JSONResponse(content=days)
+    return JSONResponse(content=dict(sorted(days.items())))
 
 
 @router.get(

frigate/config/camera/review.py

@@ -140,6 +140,10 @@ Evaluate in this order:
 The mere presence of an unidentified person in private areas during late night hours is inherently suspicious and warrants human review, regardless of what activity they appear to be doing or how brief the sequence is.""",
         title="Custom activity context prompt defining normal and suspicious activity patterns for this property.",
     )
+    camera_context: str = Field(
+        default="",
+        title="Spatial context about the camera's field of view to help with descriptive accuracy. Should describe physical features and locations outside the frame.",
+    )
 
 
 class ReviewConfig(FrigateBaseModel):

frigate/data_processing/post/review_descriptions.py

@@ -458,6 +458,7 @@ def run_analysis(
         genai_config.preferred_language,
         genai_config.debug_save_thumbnails,
         genai_config.activity_context_prompt,
+        genai_config.camera_context,
     )
     review_inference_speed.update(datetime.datetime.now().timestamp() - start)
 

frigate/detectors/detection_runners.py

@@ -234,7 +234,10 @@ class OpenVINOModelRunner(BaseModelRunner):
         # Import here to avoid circular imports
         from frigate.embeddings.types import EnrichmentModelTypeEnum
 
-        return model_type in [EnrichmentModelTypeEnum.paddleocr.value]
+        return model_type in [
+            EnrichmentModelTypeEnum.paddleocr.value,
+            EnrichmentModelTypeEnum.jina_v2.value,
+        ]
 
     def __init__(self, model_path: str, device: str, model_type: str, **kwargs):
         self.model_path = model_path
@@ -345,6 +348,16 @@ class OpenVINOModelRunner(BaseModelRunner):
 
                 # Create tensor with the correct element type
                 input_element_type = input_port.get_element_type()
+
+                # Ensure input data matches the expected dtype to prevent type mismatches
+                # that can occur with models like Jina-CLIP v2 running on OpenVINO
+                expected_dtype = input_element_type.to_dtype()
+                if input_data.dtype != expected_dtype:
+                    logger.debug(
+                        f"Converting input '{input_name}' from {input_data.dtype} to {expected_dtype}"
+                    )
+                    input_data = input_data.astype(expected_dtype)
+
                 input_tensor = ov.Tensor(input_element_type, input_data.shape)
                 np.copyto(input_tensor.data, input_data)
 

frigate/genai/__init__.py

@@ -45,6 +45,7 @@ class GenAIClient:
         preferred_language: str | None,
         debug_save: bool,
         activity_context_prompt: str,
+        camera_context: str = "",
     ) -> ReviewMetadata | None:
         """Generate a description for the review item activity."""
 
@@ -69,6 +70,16 @@ class GenAIClient:
             else:
                 return "\n- (No objects detected)"
 
+        def get_camera_context_section() -> str:
+            if camera_context:
+                return f"""## Camera Spatial Context
+
+Use this spatial information when writing the title and scene description to provide more accurate context about where activity is occurring or where people/objects are moving to/from.
+
+{camera_context}"""
+            return ""
+
+        camera_context_section = get_camera_context_section()
         context_prompt = f"""
 Your task is to analyze the sequence of images ({len(thumbnails)} total) taken in chronological order from the perspective of the {review_data["camera"].replace("_", " ")} security camera.
 
@@ -76,6 +87,8 @@ Your task is to analyze the sequence of images ({len(thumbnails)} total) taken i
 
 {activity_context_prompt}
 
+{camera_context_section}
+
 ## Task Instructions
 
 Your task is to provide a clear, accurate description of the scene that:
@@ -100,7 +113,7 @@ When forming your description:
 ## Response Format
 
 Your response MUST be a flat JSON object with:
-- `title` (string): A concise, direct title that describes the purpose or overall action, not just what you literally see. Use names from "Objects in Scene" based on what you visually observe. If you see both a name and an unidentified object of the same type but visually observe only one person/object, use ONLY the name. Examples: "Joe walking dog", "Person taking out trash", "Joe accessing vehicle", "Joe and person on front porch".
+- `title` (string): A concise, direct title that describes the purpose or overall action, not just what you literally see. {"Use spatial context when available to make titles more meaningful." if camera_context_section else ""} Use names from "Objects in Scene" based on what you visually observe. If you see both a name and an unidentified object of the same type but visually observe only one person/object, use ONLY the name. Examples: "Joe walking dog", "Person taking out trash", "Joe accessing vehicle", "Person leaving porch for driveway", "Joe and person on front porch".
 - `scene` (string): A narrative description of what happens across the sequence from start to finish. **Only describe actions you can actually observe happening in the frames provided.** Do not infer or assume actions that aren't visible (e.g., if you see someone walking but never see them sit, don't say they sat down). Include setting, detected objects, and their observable actions. Avoid speculation or filling in assumed behaviors. Your description should align with and support the threat level you assign.
 - `confidence` (float): 0-1 confidence in your analysis. Higher confidence when objects/actions are clearly visible and context is unambiguous. Lower confidence when the sequence is unclear, objects are partially obscured, or context is ambiguous.
 - `potential_threat_level` (integer): 0, 1, or 2 as defined in "Normal Activity Patterns for This Property" above. Your threat level must be consistent with your scene description and the guidance above.

frigate/test/http_api/test_http_media.py

@@ -0,0 +1,379 @@
+"""Unit tests for recordings/media API endpoints."""
+
+from datetime import datetime, timezone
+from typing import Any
+
+import pytz
+from fastapi.testclient import TestClient
+
+from frigate.api.auth import get_allowed_cameras_for_filter, get_current_user
+from frigate.models import Recordings
+from frigate.test.http_api.base_http_test import BaseTestHttp
+
+
+class TestHttpMedia(BaseTestHttp):
+    """Test media API endpoints, particularly recordings with DST handling."""
+
+    def setUp(self):
+        """Set up test fixtures."""
+        super().setUp([Recordings])
+        self.app = super().create_app()
+
+        # Mock auth to bypass camera access for tests
+        async def mock_get_current_user(request: Any):
+            return {"username": "test_user", "role": "admin"}
+
+        self.app.dependency_overrides[get_current_user] = mock_get_current_user
+        self.app.dependency_overrides[get_allowed_cameras_for_filter] = lambda: [
+            "front_door",
+            "back_door",
+        ]
+
+    def tearDown(self):
+        """Clean up after tests."""
+        self.app.dependency_overrides.clear()
+        super().tearDown()
+
+    def test_recordings_summary_across_dst_spring_forward(self):
+        """
+        Test recordings summary across spring DST transition (spring forward).
+
+        In 2024, DST in America/New_York transitions on March 10, 2024 at 2:00 AM
+        Clocks spring forward from 2:00 AM to 3:00 AM (EST to EDT)
+        """
+        tz = pytz.timezone("America/New_York")
+
+        # March 9, 2024 at 12:00 PM EST (before DST)
+        march_9_noon = tz.localize(datetime(2024, 3, 9, 12, 0, 0)).timestamp()
+
+        # March 10, 2024 at 12:00 PM EDT (after DST transition)
+        march_10_noon = tz.localize(datetime(2024, 3, 10, 12, 0, 0)).timestamp()
+
+        # March 11, 2024 at 12:00 PM EDT (after DST)
+        march_11_noon = tz.localize(datetime(2024, 3, 11, 12, 0, 0)).timestamp()
+
+        with TestClient(self.app) as client:
+            # Insert recordings for each day
+            Recordings.insert(
+                id="recording_march_9",
+                path="/media/recordings/march_9.mp4",
+                camera="front_door",
+                start_time=march_9_noon,
+                end_time=march_9_noon + 3600,  # 1 hour recording
+                duration=3600,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            Recordings.insert(
+                id="recording_march_10",
+                path="/media/recordings/march_10.mp4",
+                camera="front_door",
+                start_time=march_10_noon,
+                end_time=march_10_noon + 3600,
+                duration=3600,
+                motion=150,
+                objects=8,
+            ).execute()
+
+            Recordings.insert(
+                id="recording_march_11",
+                path="/media/recordings/march_11.mp4",
+                camera="front_door",
+                start_time=march_11_noon,
+                end_time=march_11_noon + 3600,
+                duration=3600,
+                motion=200,
+                objects=10,
+            ).execute()
+
+            # Test recordings summary with America/New_York timezone
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "all"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+
+            # Verify we get exactly 3 days
+            assert len(summary) == 3, f"Expected 3 days, got {len(summary)}"
+
+            # Verify the correct dates are returned (API returns dict with True values)
+            assert "2024-03-09" in summary, f"Expected 2024-03-09 in {summary}"
+            assert "2024-03-10" in summary, f"Expected 2024-03-10 in {summary}"
+            assert "2024-03-11" in summary, f"Expected 2024-03-11 in {summary}"
+            assert summary["2024-03-09"] is True
+            assert summary["2024-03-10"] is True
+            assert summary["2024-03-11"] is True
+
+    def test_recordings_summary_across_dst_fall_back(self):
+        """
+        Test recordings summary across fall DST transition (fall back).
+
+        In 2024, DST in America/New_York transitions on November 3, 2024 at 2:00 AM
+        Clocks fall back from 2:00 AM to 1:00 AM (EDT to EST)
+        """
+        tz = pytz.timezone("America/New_York")
+
+        # November 2, 2024 at 12:00 PM EDT (before DST transition)
+        nov_2_noon = tz.localize(datetime(2024, 11, 2, 12, 0, 0)).timestamp()
+
+        # November 3, 2024 at 12:00 PM EST (after DST transition)
+        # Need to specify is_dst=False to get the time after fall back
+        nov_3_noon = tz.localize(
+            datetime(2024, 11, 3, 12, 0, 0), is_dst=False
+        ).timestamp()
+
+        # November 4, 2024 at 12:00 PM EST (after DST)
+        nov_4_noon = tz.localize(datetime(2024, 11, 4, 12, 0, 0)).timestamp()
+
+        with TestClient(self.app) as client:
+            # Insert recordings for each day
+            Recordings.insert(
+                id="recording_nov_2",
+                path="/media/recordings/nov_2.mp4",
+                camera="front_door",
+                start_time=nov_2_noon,
+                end_time=nov_2_noon + 3600,
+                duration=3600,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            Recordings.insert(
+                id="recording_nov_3",
+                path="/media/recordings/nov_3.mp4",
+                camera="front_door",
+                start_time=nov_3_noon,
+                end_time=nov_3_noon + 3600,
+                duration=3600,
+                motion=150,
+                objects=8,
+            ).execute()
+
+            Recordings.insert(
+                id="recording_nov_4",
+                path="/media/recordings/nov_4.mp4",
+                camera="front_door",
+                start_time=nov_4_noon,
+                end_time=nov_4_noon + 3600,
+                duration=3600,
+                motion=200,
+                objects=10,
+            ).execute()
+
+            # Test recordings summary with America/New_York timezone
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "all"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+
+            # Verify we get exactly 3 days
+            assert len(summary) == 3, f"Expected 3 days, got {len(summary)}"
+
+            # Verify the correct dates are returned (API returns dict with True values)
+            assert "2024-11-02" in summary, f"Expected 2024-11-02 in {summary}"
+            assert "2024-11-03" in summary, f"Expected 2024-11-03 in {summary}"
+            assert "2024-11-04" in summary, f"Expected 2024-11-04 in {summary}"
+            assert summary["2024-11-02"] is True
+            assert summary["2024-11-03"] is True
+            assert summary["2024-11-04"] is True
+
+    def test_recordings_summary_multiple_cameras_across_dst(self):
+        """
+        Test recordings summary with multiple cameras across DST boundary.
+        """
+        tz = pytz.timezone("America/New_York")
+
+        # March 9, 2024 at 10:00 AM EST (before DST)
+        march_9_morning = tz.localize(datetime(2024, 3, 9, 10, 0, 0)).timestamp()
+
+        # March 10, 2024 at 3:00 PM EDT (after DST transition)
+        march_10_afternoon = tz.localize(datetime(2024, 3, 10, 15, 0, 0)).timestamp()
+
+        with TestClient(self.app) as client:
+            # Insert recordings for front_door on March 9
+            Recordings.insert(
+                id="front_march_9",
+                path="/media/recordings/front_march_9.mp4",
+                camera="front_door",
+                start_time=march_9_morning,
+                end_time=march_9_morning + 3600,
+                duration=3600,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            # Insert recordings for back_door on March 10
+            Recordings.insert(
+                id="back_march_10",
+                path="/media/recordings/back_march_10.mp4",
+                camera="back_door",
+                start_time=march_10_afternoon,
+                end_time=march_10_afternoon + 3600,
+                duration=3600,
+                motion=150,
+                objects=8,
+            ).execute()
+
+            # Test with all cameras
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "all"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+
+            # Verify we get both days
+            assert len(summary) == 2, f"Expected 2 days, got {len(summary)}"
+            assert "2024-03-09" in summary
+            assert "2024-03-10" in summary
+            assert summary["2024-03-09"] is True
+            assert summary["2024-03-10"] is True
+
+    def test_recordings_summary_at_dst_transition_time(self):
+        """
+        Test recordings that span the exact DST transition time.
+        """
+        tz = pytz.timezone("America/New_York")
+
+        # March 10, 2024 at 1:00 AM EST (1 hour before DST transition)
+        # At 2:00 AM, clocks jump to 3:00 AM
+        before_transition = tz.localize(datetime(2024, 3, 10, 1, 0, 0)).timestamp()
+
+        # Recording that spans the transition (1:00 AM to 3:30 AM EDT)
+        # This is 1.5 hours of actual time but spans the "missing" hour
+        after_transition = tz.localize(datetime(2024, 3, 10, 3, 30, 0)).timestamp()
+
+        with TestClient(self.app) as client:
+            Recordings.insert(
+                id="recording_during_transition",
+                path="/media/recordings/transition.mp4",
+                camera="front_door",
+                start_time=before_transition,
+                end_time=after_transition,
+                duration=after_transition - before_transition,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "all"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+
+            # The recording should appear on March 10
+            assert len(summary) == 1
+            assert "2024-03-10" in summary
+            assert summary["2024-03-10"] is True
+
+    def test_recordings_summary_utc_timezone(self):
+        """
+        Test recordings summary with UTC timezone (no DST).
+        """
+        # Use UTC timestamps directly
+        march_9_utc = datetime(2024, 3, 9, 17, 0, 0, tzinfo=timezone.utc).timestamp()
+        march_10_utc = datetime(2024, 3, 10, 17, 0, 0, tzinfo=timezone.utc).timestamp()
+
+        with TestClient(self.app) as client:
+            Recordings.insert(
+                id="recording_march_9_utc",
+                path="/media/recordings/march_9_utc.mp4",
+                camera="front_door",
+                start_time=march_9_utc,
+                end_time=march_9_utc + 3600,
+                duration=3600,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            Recordings.insert(
+                id="recording_march_10_utc",
+                path="/media/recordings/march_10_utc.mp4",
+                camera="front_door",
+                start_time=march_10_utc,
+                end_time=march_10_utc + 3600,
+                duration=3600,
+                motion=150,
+                objects=8,
+            ).execute()
+
+            # Test with UTC timezone
+            response = client.get(
+                "/recordings/summary", params={"timezone": "utc", "cameras": "all"}
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+
+            # Verify we get both days
+            assert len(summary) == 2
+            assert "2024-03-09" in summary
+            assert "2024-03-10" in summary
+            assert summary["2024-03-09"] is True
+            assert summary["2024-03-10"] is True
+
+    def test_recordings_summary_no_recordings(self):
+        """
+        Test recordings summary when no recordings exist.
+        """
+        with TestClient(self.app) as client:
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "all"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+            assert len(summary) == 0
+
+    def test_recordings_summary_single_camera_filter(self):
+        """
+        Test recordings summary filtered to a single camera.
+        """
+        tz = pytz.timezone("America/New_York")
+        march_10_noon = tz.localize(datetime(2024, 3, 10, 12, 0, 0)).timestamp()
+
+        with TestClient(self.app) as client:
+            # Insert recordings for both cameras
+            Recordings.insert(
+                id="front_recording",
+                path="/media/recordings/front.mp4",
+                camera="front_door",
+                start_time=march_10_noon,
+                end_time=march_10_noon + 3600,
+                duration=3600,
+                motion=100,
+                objects=5,
+            ).execute()
+
+            Recordings.insert(
+                id="back_recording",
+                path="/media/recordings/back.mp4",
+                camera="back_door",
+                start_time=march_10_noon,
+                end_time=march_10_noon + 3600,
+                duration=3600,
+                motion=150,
+                objects=8,
+            ).execute()
+
+            # Test with only front_door camera
+            response = client.get(
+                "/recordings/summary",
+                params={"timezone": "America/New_York", "cameras": "front_door"},
+            )
+
+            assert response.status_code == 200
+            summary = response.json()
+            assert len(summary) == 1
+            assert "2024-03-10" in summary
+            assert summary["2024-03-10"] is True

frigate/video.py

@@ -196,7 +196,9 @@ class CameraWatchdog(threading.Thread):
         self.sleeptime = self.config.ffmpeg.retry_interval
 
         self.config_subscriber = CameraConfigUpdateSubscriber(
-            None, {config.name: config}, [CameraConfigUpdateEnum.enabled]
+            None,
+            {config.name: config},
+            [CameraConfigUpdateEnum.enabled, CameraConfigUpdateEnum.record],
         )
         self.requestor = InterProcessRequestor()
         self.was_enabled = self.config.enabled

web/public/locales/en/config/review.json

@@ -67,8 +67,11 @@
         },
         "activity_context_prompt": {
           "label": "Custom activity context prompt defining normal activity patterns for this property."
+        },
+        "camera_context": {
+          "label": "Spatial context about the camera's field of view to help with descriptive accuracy. Should describe physical features and locations outside the frame. This is for spatial reference only and should NOT include subjective assessments."
         }
       }
     }
   }
-}
+}

web/public/locales/en/views/settings.json

@@ -745,7 +745,8 @@
         "createRole": "Role {{role}} created successfully",
         "updateCameras": "Cameras updated for role {{role}}",
         "deleteRole": "Role {{role}} deleted successfully",
-        "userRolesUpdated": "{{count}} user(s) assigned to this role have been updated to 'viewer', which has access to all cameras."
+        "userRolesUpdated_one": "{{count}} user assigned to this role has been updated to 'viewer', which has access to all cameras.",
+        "userRolesUpdated_other": "{{count}} users assigned to this role have been updated to 'viewer', which has access to all cameras."
       },
       "error": {
         "createRoleFailed": "Failed to create role: {{errorMessage}}",

web/src/components/card/ClassificationCard.tsx

@@ -217,9 +217,7 @@ export function GroupedClassificationCard({
     });
 
     if (!best) {
-      // select an item from the middle of the time series as this usually correlates
-      // to a more representative image than the first or last
-      return group.at(Math.floor(group.length / 2));
+      return group.at(-1);
     }
 
     const bestTyped: ClassificationItemData = best;
@@ -230,7 +228,7 @@ export function GroupedClassificationCard({
           ? event.sub_label
           : t(noClassificationLabel)
         : bestTyped.name,
-      score: event?.data?.sub_label_score || bestTyped.score,
+      score: event?.data?.sub_label_score,
     };
   }, [group, event, noClassificationLabel, t]);
 

web/src/components/card/ReviewCard.tsx

@@ -38,6 +38,7 @@ import { Button, buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { LuCircle } from "react-icons/lu";
+import { MdAutoAwesome } from "react-icons/md";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -164,29 +165,33 @@ export default function ReviewCard({
       <div className="flex items-center justify-between">
         <Tooltip>
           <TooltipTrigger asChild>
-            <div className="flex items-center justify-evenly gap-1">
-              <>
-                <LuCircle
-                  className={cn(
-                    "size-2",
-                    event.severity == "alert"
-                      ? "fill-severity_alert text-severity_alert"
-                      : "fill-severity_detection text-severity_detection",
-                  )}
-                />
-                {event.data.objects.map((object) => {
-                  return getIconForLabel(
-                    object,
-                    "size-3 text-primary dark:text-white",
-                  );
-                })}
-                {event.data.audio.map((audio) => {
-                  return getIconForLabel(
-                    audio,
-                    "size-3 text-primary dark:text-white",
-                  );
-                })}
-              </>
+            <div className="flex items-center gap-2">
+              <LuCircle
+                className={cn(
+                  "size-2",
+                  event.severity == "alert"
+                    ? "fill-severity_alert text-severity_alert"
+                    : "fill-severity_detection text-severity_detection",
+                )}
+              />
+              <div className="flex items-center gap-1">
+                {event.data.objects.map((object, idx) => (
+                  <div
+                    key={`${object}-${idx}`}
+                    className="rounded-full bg-muted-foreground p-1"
+                  >
+                    {getIconForLabel(object, "size-3 text-white")}
+                  </div>
+                ))}
+                {event.data.audio.map((audio, idx) => (
+                  <div
+                    key={`${audio}-${idx}`}
+                    className="rounded-full bg-muted-foreground p-1"
+                  >
+                    {getIconForLabel(audio, "size-3 text-white")}
+                  </div>
+                ))}
+              </div>
               <div className="font-extra-light text-xs">{formattedDate}</div>
             </div>
           </TooltipTrigger>
@@ -213,6 +218,14 @@ export default function ReviewCard({
           dense
         />
       </div>
+      {event.data.metadata?.title && (
+        <div className="flex items-center gap-1.5 rounded bg-secondary/50">
+          <MdAutoAwesome className="size-3 shrink-0 text-primary" />
+          <span className="truncate text-xs text-primary">
+            {event.data.metadata.title}
+          </span>
+        </div>
+      )}
     </div>
   );
 

web/src/components/graph/LineGraph.tsx

@@ -80,6 +80,9 @@ export function CameraLineGraph({
         zoom: {
           enabled: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
       colors: GRAPH_COLORS,
       grid: {
@@ -223,6 +226,9 @@ export function EventsPerSecondsLineGraph({
         zoom: {
           enabled: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
       colors: GRAPH_COLORS,
       grid: {

web/src/components/graph/StorageGraph.tsx

@@ -25,6 +25,9 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
         zoom: {
           enabled: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
       grid: {
         show: false,

web/src/components/graph/SystemGraph.tsx

@@ -90,6 +90,9 @@ export function ThresholdBarGraph({
         zoom: {
           enabled: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
       colors: [
         ({ value }: { value: number }) => {

web/src/components/input/NameAndIdFields.tsx

@@ -25,6 +25,7 @@ type NameAndIdFieldsProps<T extends FieldValues = FieldValues> = {
   processId?: (name: string) => string;
   placeholderName?: string;
   placeholderId?: string;
+  idVisible?: boolean;
 };
 
 export default function NameAndIdFields<T extends FieldValues = FieldValues>({
@@ -39,10 +40,11 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
   processId,
   placeholderName,
   placeholderId,
+  idVisible,
 }: NameAndIdFieldsProps<T>) {
   const { t } = useTranslation(["common"]);
   const { watch, setValue, trigger, formState } = useFormContext<T>();
-  const [isIdVisible, setIsIdVisible] = useState(false);
+  const [isIdVisible, setIsIdVisible] = useState(idVisible ?? false);
   const hasUserTypedRef = useRef(false);
 
   const defaultProcessId = (name: string) => {

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -258,6 +258,7 @@ export default function CreateTriggerDialog({
               nameLabel={t("triggers.dialog.form.name.title")}
               nameDescription={t("triggers.dialog.form.name.description")}
               placeholderName={t("triggers.dialog.form.name.placeholder")}
+              idVisible={!!trigger}
             />
 
             <FormField

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -385,7 +385,7 @@ export default function Step1NameCamera({
                     </FormLabel>
                     <FormControl>
                       <Input
-                        className="h-8"
+                        className="text-md h-8"
                         placeholder={t(
                           "cameraWizard.step1.cameraNamePlaceholder",
                         )}
@@ -475,7 +475,7 @@ export default function Step1NameCamera({
                         </FormLabel>
                         <FormControl>
                           <Input
-                            className="h-8"
+                            className="text-md h-8"
                             placeholder="192.168.1.100"
                             {...field}
                           />
@@ -495,7 +495,7 @@ export default function Step1NameCamera({
                         </FormLabel>
                         <FormControl>
                           <Input
-                            className="h-8"
+                            className="text-md h-8"
                             placeholder={t(
                               "cameraWizard.step1.usernamePlaceholder",
                             )}
@@ -518,7 +518,7 @@ export default function Step1NameCamera({
                         <FormControl>
                           <div className="relative">
                             <Input
-                              className="h-8 pr-10"
+                              className="text-md h-8 pr-10"
                               type={showPassword ? "text" : "password"}
                               placeholder={t(
                                 "cameraWizard.step1.passwordPlaceholder",
@@ -558,7 +558,7 @@ export default function Step1NameCamera({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="h-8"
+                          className="text-md h-8"
                           placeholder="rtsp://username:password@host:port/path"
                           {...field}
                         />

web/src/components/timeline/DetailStream.tsx

@@ -22,6 +22,7 @@ import {
   LuChevronRight,
   LuSettings,
 } from "react-icons/lu";
+import { MdAutoAwesome } from "react-icons/md";
 import { getTranslatedLabel } from "@/utils/i18n";
 import EventMenu from "@/components/timeline/EventMenu";
 import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
@@ -410,8 +411,9 @@ function ReviewGroup({
             </div>
             <div className="flex flex-col gap-0.5">
               {review.data.metadata?.title && (
-                <div className="mb-1 text-sm text-primary-variant">
-                  {review.data.metadata.title}
+                <div className="mb-1 flex items-center gap-1 text-sm text-primary-variant">
+                  <MdAutoAwesome className="size-3 shrink-0" />
+                  <span className="truncate">{review.data.metadata.title}</span>
                 </div>
               )}
               <div className="flex flex-row items-center gap-1.5">
@@ -458,6 +460,7 @@ function ReviewGroup({
                   <EventList
                     key={event.id}
                     event={event}
+                    review={review}
                     effectiveTime={effectiveTime}
                     annotationOffset={annotationOffset}
                     onSeek={onSeek}
@@ -492,6 +495,7 @@ function ReviewGroup({
 
 type EventListProps = {
   event: Event;
+  review: ReviewSegment;
   effectiveTime?: number;
   annotationOffset: number;
   onSeek: (ts: number, play?: boolean) => void;
@@ -499,6 +503,7 @@ type EventListProps = {
 };
 function EventList({
   event,
+  review,
   effectiveTime,
   annotationOffset,
   onSeek,
@@ -617,6 +622,7 @@ function EventList({
 
         <div className="mt-2">
           <ObjectTimeline
+            review={review}
             eventId={event.id}
             onSeek={handleTimelineClick}
             effectiveTime={effectiveTime}
@@ -765,6 +771,7 @@ function LifecycleItem({
 
 // Fetch and render timeline entries for a single event id on demand.
 function ObjectTimeline({
+  review,
   eventId,
   onSeek,
   effectiveTime,
@@ -772,6 +779,7 @@ function ObjectTimeline({
   startTime,
   endTime,
 }: {
+  review: ReviewSegment;
   eventId: string;
   onSeek: (ts: number, play?: boolean) => void;
   effectiveTime?: number;
@@ -780,13 +788,27 @@ function ObjectTimeline({
   endTime?: number;
 }) {
   const { t } = useTranslation("views/events");
-  const { data: timeline, isValidating } = useSWR<TrackingDetailsSequence[]>([
+  const { data: fullTimeline, isValidating } = useSWR<
+    TrackingDetailsSequence[]
+  >([
     "timeline",
     {
       source_id: eventId,
     },
   ]);
 
+  const timeline = useMemo(() => {
+    if (!fullTimeline) {
+      return fullTimeline;
+    }
+
+    return fullTimeline.filter(
+      (t) =>
+        t.timestamp >= review.start_time &&
+        (review.end_time == undefined || t.timestamp <= review.end_time),
+    );
+  }, [fullTimeline, review]);
+
   if (isValidating && (!timeline || timeline.length === 0)) {
     return <ActivityIndicator className="ml-2 size-3" />;
   }

web/src/components/timeline/EventSegment.tsx

@@ -1,4 +1,3 @@
-import { useApiHost } from "@/api";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
@@ -18,6 +17,7 @@ import { HoverCardPortal } from "@radix-ui/react-hover-card";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 import useTapUtils from "@/hooks/use-tap-utils";
+import ReviewCard from "../card/ReviewCard";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -54,7 +54,7 @@ export function EventSegment({
     displaySeverityType,
     shouldShowRoundedCorners,
     getEventStart,
-    getEventThumbnail,
+    getEvent,
   } = useEventSegmentUtils(segmentDuration, events, severityType);
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
@@ -87,13 +87,11 @@ export function EventSegment({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getEventStart, segmentTime]);
 
-  const apiHost = useApiHost();
-
   const { handleTouchStart } = useTapUtils();
 
-  const eventThumbnail = useMemo(() => {
-    return getEventThumbnail(segmentTime);
-  }, [getEventThumbnail, segmentTime]);
+  const segmentEvent = useMemo(() => {
+    return getEvent(segmentTime);
+  }, [getEvent, segmentTime]);
 
   const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
   const segmentKey = useMemo(
@@ -252,10 +250,7 @@ export function EventSegment({
                   className="w-[250px] rounded-lg p-2 md:rounded-2xl"
                   side="left"
                 >
-                  <img
-                    className="rounded-lg"
-                    src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
-                  />
+                  {segmentEvent && <ReviewCard event={segmentEvent} />}
                 </HoverCardContent>
               </HoverCardPortal>
             </HoverCard>

web/src/components/trigger/wizard/Step1NameAndType.tsx

@@ -101,7 +101,7 @@ export default function Step1NameAndType({
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    mode: "onChange",
+    mode: "onBlur",
     defaultValues: {
       enabled: true,
       name: initialData?.name ?? trigger?.name ?? "",

web/src/hooks/use-event-segment-utils.ts

@@ -191,8 +191,8 @@ export const useEventSegmentUtils = (
     [events, getSegmentStart, getSegmentEnd, severityType],
   );
 
-  const getEventThumbnail = useCallback(
-    (time: number): string => {
+  const getEvent = useCallback(
+    (time: number): ReviewSegment | undefined => {
       const matchingEvent = events.find((event) => {
         return (
           time >= getSegmentStart(event.start_time) &&
@@ -201,7 +201,7 @@ export const useEventSegmentUtils = (
         );
       });
 
-      return matchingEvent?.thumb_path ?? "";
+      return matchingEvent;
     },
     [events, getSegmentStart, getSegmentEnd, severityType],
   );
@@ -214,6 +214,6 @@ export const useEventSegmentUtils = (
     getReviewed,
     shouldShowRoundedCorners,
     getEventStart,
-    getEventThumbnail,
+    getEvent,
   };
 };

web/src/pages/Settings.tsx

@@ -157,9 +157,11 @@ function MobileMenuItem({
   const { t } = useTranslation(["views/settings"]);
 
   return (
-    <Button
-      variant="ghost"
-      className={cn("w-full justify-between pr-2", className)}
+    <div
+      className={cn(
+        "inline-flex h-10 w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md px-4 py-2 pr-2 text-sm font-medium text-primary-variant disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
       onClick={() => {
         onSelect(item.key);
         onClose?.();
@@ -167,7 +169,7 @@ function MobileMenuItem({
     >
       <div className="smart-capitalize">{t("menu." + item.key)}</div>
       <LuChevronRight className="size-4" />
-    </Button>
+    </div>
   );
 }
 
@@ -273,6 +275,9 @@ export default function Settings() {
       } else {
         setPageToggle(page as SettingsType);
       }
+      if (isMobile) {
+        setContentMobileOpen(true);
+      }
     }
     // don't clear url params if we're creating a new object mask
     return !(searchParams.has("object_mask") || searchParams.has("event_id"));
@@ -282,6 +287,9 @@ export default function Settings() {
     const cameraNames = cameras.map((c) => c.name);
     if (cameraNames.includes(camera)) {
       setSelectedCamera(camera);
+      if (isMobile) {
+        setContentMobileOpen(true);
+      }
     }
     // don't clear url params if we're creating a new object mask or trigger
     return !(searchParams.has("object_mask") || searchParams.has("event_id"));

web/src/views/recording/RecordingView.tsx

@@ -970,12 +970,11 @@ function Timeline({
         "relative overflow-hidden",
         isDesktop
           ? cn(
-              "no-scrollbar overflow-y-auto",
               timelineType == "timeline"
                 ? "w-[100px] flex-shrink-0"
                 : timelineType == "detail"
                   ? "min-w-[20rem] max-w-[30%] flex-shrink-0 flex-grow-0 basis-[30rem] md:min-w-[20rem] md:max-w-[25%] lg:min-w-[30rem] lg:max-w-[33%]"
-                  : "w-60 flex-shrink-0",
+                  : "w-80 flex-shrink-0",
             )
           : cn(
               timelineType == "timeline"

web/src/views/settings/CameraSettingsView.tsx

@@ -717,11 +717,11 @@ export default function CameraSettingsView({
                   <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
                     <Button
                       className="flex flex-1"
-                      aria-label={t("button.cancel", { ns: "common" })}
+                      aria-label={t("button.reset", { ns: "common" })}
                       onClick={onCancel}
                       type="button"
                     >
-                      <Trans>button.cancel</Trans>
+                      <Trans>button.reset</Trans>
                     </Button>
                     <Button
                       variant="select"