Add web only amd64 build and push target to Makefile

Fix typo in arm64 docker/webonly/Dockerfile -> docker/main/Dockerfile

.devcontainer/devcontainer.json

@@ -10,9 +10,9 @@
   "features": {
     "ghcr.io/devcontainers/features/common-utils:1": {}
   },
-  "forwardPorts": [8080, 5000, 5001, 5173, 8554, 8555],
+  "forwardPorts": [8971, 5000, 5001, 5173, 8554, 8555],
   "portsAttributes": {
-    "8080": {
+    "8971": {
       "label": "External NGINX",
       "onAutoForward": "silent"
     },

.github/DISCUSSION_TEMPLATE/bug-report.yml

@@ -1,83 +0,0 @@
-title: "[Bug]: "
-labels: ["bug", "triage"]
-body:
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the problem you are having
-    validations:
-      required: true
-  - type: textarea
-    id: steps
-    attributes:
-      label: Steps to reproduce
-    validations:
-      required: true
-  - type: input
-    id: version
-    attributes:
-      label: Version
-      description: Visible on the System page in the Web UI
-    validations:
-      required: true
-  - type: textarea
-    id: config
-    attributes:
-      label: Frigate config file
-      description: This will be automatically formatted into code, so no need for backticks.
-      render: yaml
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
-      render: shell
-    validations:
-      required: true
-  - type: dropdown
-    id: os
-    attributes:
-      label: Operating system
-      options:
-        - HassOS
-        - Debian
-        - Other Linux
-        - Proxmox
-        - UNRAID
-        - Windows
-        - Other
-    validations:
-      required: true
-  - type: dropdown
-    id: install-method
-    attributes:
-      label: Install method
-      options:
-        - HassOS Addon
-        - Docker Compose
-        - Docker CLI
-    validations:
-      required: true
-  - type: dropdown
-    id: network
-    attributes:
-      label: Network connection
-      options:
-        - Wired
-        - Wireless
-        - Mixed
-    validations:
-      required: true
-  - type: input
-    id: camera
-    attributes:
-      label: Camera make and model
-      description: Dahua, hikvision, amcrest, reolink, etc and model number
-    validations:
-      required: true
-  - type: textarea
-    id: other
-    attributes:
-      label: Any other information that may be helpful

.github/DISCUSSION_TEMPLATE/camera-support.yml

@@ -1,6 +1,16 @@
 title: "[Camera Support]: "
 labels: ["support", "triage"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form for support or questions for an issue with your cameras.
+
+        Before submitting your support request, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
@@ -11,9 +21,15 @@ body:
     id: version
     attributes:
       label: Version
-      description: Visible on the System page in the Web UI
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
     validations:
       required: true
+  - type: input
+    attributes:
+      label: What browser(s) are you using?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
   - type: textarea
     id: config
     attributes:
@@ -23,10 +39,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: logs
+    id: frigatelogs
     attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. Logs can be viewed via the Frigate UI, Docker, or the go2rtc dashboard. This will be automatically formatted into code, so no need for backticks.
       render: shell
     validations:
       required: true
@@ -34,7 +58,7 @@ body:
     id: ffprobe
     attributes:
       label: FFprobe output from your camera
-      description: Run `ffprobe <camera_url>` and provide output below
+      description: Run `ffprobe <camera_url>` from within the Frigate container if possible, and provide output below
       render: shell
     validations:
       required: true
@@ -78,7 +102,7 @@ body:
         - TensorRT
         - RKNN
         - Other
-        - CPU (no coral)
+        - CPU (no Coral)
     validations:
       required: true
   - type: dropdown
@@ -98,6 +122,13 @@ body:
       description: Dahua, hikvision, amcrest, reolink, etc and model number
     validations:
       required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop for images is possible in this field. Please post screenshots of at least General and Cameras tabs.
+    validations:
+      required: true
   - type: textarea
     id: other
     attributes:

.github/DISCUSSION_TEMPLATE/config-support.yml

@@ -1,6 +1,16 @@
 title: "[Config Support]: "
 labels: ["support", "triage"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form for support or questions related to Frigate's configuration and config file.
+
+        Before submitting your support request, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
@@ -11,7 +21,7 @@ body:
     id: version
     attributes:
       label: Version
-      description: Visible on the System page in the Web UI
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
     validations:
       required: true
   - type: textarea
@@ -23,10 +33,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: logs
+    id: frigatelogs
     attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
       render: shell
     validations:
       required: true
@@ -73,6 +91,11 @@ body:
         - CPU (no coral)
     validations:
       required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop or simple cut/paste is possible in this field
   - type: textarea
     id: other
     attributes:

.github/DISCUSSION_TEMPLATE/detector-support.yml

@@ -1,6 +1,16 @@
 title: "[Detector Support]: "
 labels: ["support", "triage"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form for support or questions related to Frigate's object detectors.
+
+        Before submitting your support request, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
@@ -11,7 +21,7 @@ body:
     id: version
     attributes:
       label: Version
-      description: Visible on the System page in the Web UI
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
     validations:
       required: true
   - type: textarea
@@ -31,10 +41,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: logs
+    id: frigatelogs
     attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. Logs can be viewed via the Frigate UI, Docker, or the go2rtc dashboard. This will be automatically formatted into code, so no need for backticks.
       render: shell
     validations:
       required: true
@@ -75,6 +93,13 @@ body:
         - CPU (no coral)
     validations:
       required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop for images is possible in this field. Please post screenshots of at least General and Cameras tabs.
+    validations:
+      required: true
   - type: textarea
     id: other
     attributes:

.github/DISCUSSION_TEMPLATE/general-support.yml

@@ -1,6 +1,16 @@
 title: "[Support]: "
 labels: ["support", "triage"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form for support for issues that don't fall into any specific category.
+
+        Before submitting your support request, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
@@ -11,9 +21,15 @@ body:
     id: version
     attributes:
       label: Version
-      description: Visible on the System page in the Web UI
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
     validations:
       required: true
+  - type: input
+    attributes:
+      label: What browser(s) are you using?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
   - type: textarea
     id: config
     attributes:
@@ -23,10 +39,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: logs
+    id: frigatelogs
     attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. Logs can be viewed via the Frigate UI, Docker, or the go2rtc dashboard. This will be automatically formatted into code, so no need for backticks.
       render: shell
     validations:
       required: true
@@ -34,7 +58,7 @@ body:
     id: ffprobe
     attributes:
       label: FFprobe output from your camera
-      description: Run `ffprobe <camera_url>` and provide output below
+      description: Run `ffprobe <camera_url>` from within the Frigate container if possible, and provide output below
       render: shell
     validations:
       required: true
@@ -98,6 +122,11 @@ body:
       description: Dahua, hikvision, amcrest, reolink, etc and model number
     validations:
       required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop for images is possible in this field
   - type: textarea
     id: other
     attributes:

.github/DISCUSSION_TEMPLATE/hardware-acceleration-support.yml

@@ -1,6 +1,16 @@
 title: "[HW Accel Support]: "
 labels: ["support", "triage"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form to submit a support request for hardware acceleration issues.
+
+        Before submitting your support request, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
@@ -11,9 +21,15 @@ body:
     id: version
     attributes:
       label: Version
-      description: Visible on the System page in the Web UI
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
     validations:
       required: true
+  - type: input
+    attributes:
+      label: In which browser(s) are you experiencing the issue with?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
   - type: textarea
     id: config
     attributes:
@@ -31,10 +47,18 @@ body:
     validations:
       required: true
   - type: textarea
-    id: logs
+    id: frigatelogs
     attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. Logs can be viewed via the Frigate UI, Docker, or the go2rtc dashboard. This will be automatically formatted into code, so no need for backticks.
       render: shell
     validations:
       required: true
@@ -42,7 +66,7 @@ body:
     id: ffprobe
     attributes:
       label: FFprobe output from your camera
-      description: Run `ffprobe <camera_url>` and provide output below
+      description: Run `ffprobe <camera_url>` from within the Frigate container if possible, and provide output below
       render: shell
     validations:
       required: true
@@ -87,6 +111,13 @@ body:
       description: Dahua, hikvision, amcrest, reolink, etc and model number
     validations:
       required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop for images is possible in this field. Please post screenshots of at least General and Cameras tabs.
+    validations:
+      required: true
   - type: textarea
     id: other
     attributes:

.github/DISCUSSION_TEMPLATE/question.yml

@@ -1,9 +1,21 @@
 title: "[Question]: "
 labels: ["question"]
 body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form for questions you have about Frigate.
+
+        Before submitting your question, please [search the discussions][discussions], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your question has already been answered by the community.
+
+        **If you are looking for support, start a new discussion and use a support category.**
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
   - type: textarea
     id: description
     attributes:
-      label: "What is your question:"
+      label: "What is your question?"
     validations:
       required: true

.github/DISCUSSION_TEMPLATE/report-a-bug.yml

@@ -0,0 +1,146 @@
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Use this form to submit a reproducible bug in Frigate or Frigate's UI.
+
+        Before submitting your bug report, please [search the discussions][discussions], look at recent open and closed [pull requests][prs], read the [official Frigate documentation][docs], and read the [Frigate FAQ][faq] pinned at the Discussion page to see if your bug has already been fixed by the developers or reported by the community.
+
+        **If you are unsure if your issue is actually a bug or not, please submit a support request first.**
+
+        [discussions]: https://www.github.com/blakeblackshear/frigate/discussions
+        [prs]: https://www.github.com/blakeblackshear/frigate/pulls
+        [docs]: https://docs.frigate.video
+        [faq]: https://github.com/blakeblackshear/frigate/discussions/12724
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Please verify that you've followed these steps
+      options:
+        - label: I have updated to the latest available Frigate version.
+          required: true
+        - label: I have cleared the cache of my browser.
+          required: true
+        - label: I have tried a different browser to see if it is related to my browser.
+          required: true
+        - label: I have tried reproducing the issue in [incognito mode](https://www.computerworld.com/article/1719851/how-to-go-incognito-in-chrome-firefox-safari-and-edge.html) to rule out problems with any third party extensions or plugins I have installed.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the problem you are having
+      description: Provide a clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: |
+        Please tell us exactly how to reproduce your issue.
+        Provide clear and concise step by step instructions and add code snippets if needed.
+      value: |
+        1.
+        2.
+        3.
+        ...
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: Visible on the System page in the Web UI. Please include the full version including the build identifier (eg. 0.14.0-ea36ds1)
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: In which browser(s) are you experiencing the issue with?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
+  - type: textarea
+    id: config
+    attributes:
+      label: Frigate config file
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: docker
+    attributes:
+      label: docker-compose file or Docker CLI command
+      description: This will be automatically formatted into code, so no need for backticks.
+      render: yaml
+    validations:
+      required: true
+  - type: textarea
+    id: frigatelogs
+    attributes:
+      label: Relevant Frigate log output
+      description: Please copy and paste any relevant Frigate log output. Include logs before and after your exact error when possible. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: go2rtclogs
+    attributes:
+      label: Relevant go2rtc log output
+      description: Please copy and paste any relevant go2rtc log output. Include logs before and after your exact error when possible. Logs can be viewed via the Frigate UI, Docker, or the go2rtc dashboard. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      options:
+        - HassOS
+        - Debian
+        - Other Linux
+        - Proxmox
+        - UNRAID
+        - Windows
+        - Other
+    validations:
+      required: true
+  - type: dropdown
+    id: install-method
+    attributes:
+      label: Install method
+      options:
+        - HassOS Addon
+        - Docker Compose
+        - Docker CLI
+    validations:
+      required: true
+  - type: dropdown
+    id: network
+    attributes:
+      label: Network connection
+      options:
+        - Wired
+        - Wireless
+        - Mixed
+    validations:
+      required: true
+  - type: input
+    id: camera
+    attributes:
+      label: Camera make and model
+      description: Dahua, hikvision, amcrest, reolink, etc and model number
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots of the Frigate UI's System metrics pages
+      description: Drag and drop for images is possible in this field. Please post screenshots of all tabs.
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Any other information that may be helpful

.github/actions/setup/action.yml

@@ -5,7 +5,7 @@ inputs:
     required: true
 outputs:
   image-name:
-    value: ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ github.ref_name }}-${{ steps.create-short-sha.outputs.SHORT_SHA }}
+    value: ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ steps.create-short-sha.outputs.SHORT_SHA }}
   cache-name:
     value: ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:cache
 runs:

.github/workflows/ci.yml

@@ -229,7 +229,7 @@ jobs:
         run: echo "SHORT_SHA=${GITHUB_SHA::7}" >> $GITHUB_ENV
       - uses: int128/docker-manifest-create-action@v2
         with:
-          tags: ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ github.ref_name }}-${{ env.SHORT_SHA }}
+          tags: ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ env.SHORT_SHA }}
           sources: |
-            ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ github.ref_name }}-${{ env.SHORT_SHA }}-amd64
-            ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ github.ref_name }}-${{ env.SHORT_SHA }}-rpi
+            ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ env.SHORT_SHA }}-amd64
+            ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}:${{ env.SHORT_SHA }}-rpi

.github/workflows/release.yml

@@ -23,10 +23,10 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Create tag variables
         run: |
-          BRANCH=$([[ "${{ github.ref_name }}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]] && echo "master" || echo "dev")
-          echo "BRANCH=${BRANCH}" >> $GITHUB_ENV
+          BUILD_TYPE=$([[ "${{ github.ref_name }}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]] && echo "stable" || echo "beta")
+          echo "BUILD_TYPE=${BUILD_TYPE}" >> $GITHUB_ENV
           echo "BASE=ghcr.io/${{ steps.lowercaseRepo.outputs.lowercase }}" >> $GITHUB_ENV
-          echo "BUILD_TAG=${BRANCH}-${GITHUB_SHA::7}" >> $GITHUB_ENV
+          echo "BUILD_TAG=${GITHUB_SHA::7}" >> $GITHUB_ENV
           echo "CLEAN_VERSION=$(echo ${GITHUB_REF##*/} | tr '[:upper:]' '[:lower:]' | sed 's/^[v]//')" >> $GITHUB_ENV
       - name: Tag and push the main image
         run: |
@@ -39,7 +39,7 @@ jobs:
           done
 
           # stable tag
-          if [[ "${BRANCH}" == "master" ]]; then
+          if [[ "${BUILD_TYPE}" == "stable" ]]; then
             docker run --rm -v $HOME/.docker/config.json:/config.json quay.io/skopeo/stable:latest copy --authfile /config.json --multi-arch all docker://${PULL_TAG} docker://${STABLE_TAG}
             for variant in standard-arm64 tensorrt tensorrt-jp4 tensorrt-jp5 rk; do
               docker run --rm -v $HOME/.docker/config.json:/config.json quay.io/skopeo/stable:latest copy --authfile /config.json --multi-arch all docker://${PULL_TAG}-${variant} docker://${STABLE_TAG}-${variant}

.github/workflows/stale.yml

@@ -25,17 +25,17 @@ jobs:
       - name: Print outputs
         run: echo ${{ join(steps.stale.outputs.*, ',') }}
 
-  clean_ghcr:
-    name: Delete outdated dev container images
-    runs-on: ubuntu-latest
-    steps:
-      - name: Delete old images
-        uses: snok/container-retention-policy@v2
-        with:
-          image-names: dev-*
-          cut-off: 60 days ago UTC
-          keep-at-least: 5
-          account-type: personal
-          token: ${{ secrets.GITHUB_TOKEN }}
-          token-type: github-token
+  # clean_ghcr:
+  #   name: Delete outdated dev container images
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Delete old images
+  #       uses: snok/container-retention-policy@v2
+  #       with:
+  #         image-names: dev-*
+  #         cut-off: 60 days ago UTC
+  #         keep-at-least: 5
+  #         account-type: personal
+  #         token: ${{ secrets.GITHUB_TOKEN }}
+  #         token-type: github-token
 

Makefile

@@ -1,8 +1,9 @@
 default_target: local
 
 COMMIT_HASH := $(shell git log -1 --pretty=format:"%h"|tail -1)
-VERSION = 0.14.0
-IMAGE_REPO ?= ghcr.io/blakeblackshear/frigate
+VERSION = 0.14.1
+#IMAGE_REPO ?= ghcr.io/blakeblackshear/frigate
+IMAGE_REPO ?= gitea.tremendousturtle.tools/chris/frigate
 GITHUB_REF_NAME ?= $(shell git rev-parse --abbrev-ref HEAD)
 CURRENT_UID := $(shell id -u)
 CURRENT_GID := $(shell id -g)
@@ -23,15 +24,30 @@ local: version
 amd64:
 	docker buildx build --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .
 
+amd64_web:
+	docker buildx build --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 arm64:
 	docker buildx build --platform linux/arm64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .
 
+arm64_web:
+	docker buildx build --platform linux/arm64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 build: version amd64 arm64
 	docker buildx build --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .
 
+build_web: version amd64_web arm64_web
+	docker buildx build --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 push: push-boards
 	docker buildx build --push --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/main/Dockerfile .
 
+push_web: push-boards
+	docker buildx build --push --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
+push_web-amd64:
+	docker buildx build --push --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 run: local
 	docker run --rm --publish=5000:5000 --volume=${PWD}/config:/config frigate:latest
 

docker/main/Dockerfile

@@ -33,7 +33,7 @@ RUN --mount=type=tmpfs,target=/tmp --mount=type=tmpfs,target=/var/cache/apt \
 FROM scratch AS go2rtc
 ARG TARGETARCH
 WORKDIR /rootfs/usr/local/go2rtc/bin
-ADD --link --chmod=755 "https://github.com/AlexxIT/go2rtc/releases/download/v1.9.4/go2rtc_linux_${TARGETARCH}" go2rtc
+ADD --link --chmod=755 "https://github.com/AlexxIT/go2rtc/releases/download/v1.9.2/go2rtc_linux_${TARGETARCH}" go2rtc
 
 FROM wget AS tempio
 ARG TARGETARCH
@@ -66,6 +66,40 @@ RUN --mount=type=bind,source=docker/main/build_ov_model.py,target=/build_ov_mode
     && tar -xvf ssdlite_mobilenet_v2_coco_2018_05_09.tar.gz \
     && python3 /build_ov_model.py
 
+####
+#
+# Coral Compatibility
+#
+# Builds libusb without udev. Needed for synology and other devices with USB coral
+####
+# libUSB - No Udev
+FROM wget as libusb-build
+ARG TARGETARCH
+ARG DEBIAN_FRONTEND
+ENV CCACHE_DIR /root/.ccache
+ENV CCACHE_MAXSIZE 2G
+
+# Build libUSB without udev.  Needed for Openvino NCS2 support
+WORKDIR /opt
+RUN apt-get update && apt-get install -y unzip build-essential automake libtool ccache pkg-config
+RUN --mount=type=cache,target=/root/.ccache wget -q https://github.com/libusb/libusb/archive/v1.0.26.zip -O v1.0.26.zip && \
+    unzip v1.0.26.zip && cd libusb-1.0.26 && \
+    ./bootstrap.sh && \
+    ./configure CC='ccache gcc' CCX='ccache g++' --disable-udev --enable-shared && \
+    make -j $(nproc --all)
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends libusb-1.0-0-dev && \
+    rm -rf /var/lib/apt/lists/*
+WORKDIR /opt/libusb-1.0.26/libusb
+RUN /bin/mkdir -p '/usr/local/lib' && \
+    /bin/bash ../libtool  --mode=install /usr/bin/install -c libusb-1.0.la '/usr/local/lib' && \
+    /bin/mkdir -p '/usr/local/include/libusb-1.0' && \
+    /usr/bin/install -c -m 644 libusb.h '/usr/local/include/libusb-1.0' && \
+    /bin/mkdir -p '/usr/local/lib/pkgconfig' && \
+    cd  /opt/libusb-1.0.26/ && \
+    /usr/bin/install -c -m 644 libusb-1.0.pc '/usr/local/lib/pkgconfig' && \
+    ldconfig
+
 FROM wget AS models
 
 # Get model and labels
@@ -78,7 +112,7 @@ COPY --from=ov-converter /models/ssdlite_mobilenet_v2.bin openvino-model/
 RUN wget -q https://github.com/openvinotoolkit/open_model_zoo/raw/master/data/dataset_classes/coco_91cl_bkgr.txt -O openvino-model/coco_91cl_bkgr.txt && \
     sed -i 's/truck/car/g' openvino-model/coco_91cl_bkgr.txt
 # Get Audio Model and labels
-RUN wget -qO cpu_audio_model.tflite https://tfhub.dev/google/lite-model/yamnet/classification/tflite/1?lite-format=tflite
+RUN wget -qO - https://www.kaggle.com/api/v1/models/google/yamnet/tfLite/classification-tflite/1/download | tar xvz && mv 1.tflite cpu_audio_model.tflite
 COPY audio-labelmap.txt .
 
 
@@ -135,6 +169,7 @@ RUN pip3 wheel --wheel-dir=/wheels -r /requirements-wheels.txt
 FROM scratch AS deps-rootfs
 COPY --from=nginx /usr/local/nginx/ /usr/local/nginx/
 COPY --from=go2rtc /rootfs/ /
+COPY --from=libusb-build /usr/local/lib /usr/local/lib
 COPY --from=tempio /rootfs/ /
 COPY --from=s6-overlay /rootfs/ /
 COPY --from=models /rootfs/ /
@@ -165,6 +200,8 @@ RUN --mount=type=bind,from=wheels,source=/wheels,target=/deps/wheels \
 
 COPY --from=deps-rootfs / /
 
+RUN ldconfig
+
 EXPOSE 5000
 EXPOSE 8554
 EXPOSE 8555/tcp 8555/udp

docker/main/install_deps.sh

@@ -40,7 +40,7 @@ apt-get -qq install --no-install-recommends --no-install-suggests -y \
 # btbn-ffmpeg -> amd64
 if [[ "${TARGETARCH}" == "amd64" ]]; then
     mkdir -p /usr/lib/btbn-ffmpeg
-    wget -qO btbn-ffmpeg.tar.xz "https://github.com/BtbN/FFmpeg-Builds/releases/download/autobuild-2022-07-31-12-37/ffmpeg-n5.1-2-g915ef932a3-linux64-gpl-5.1.tar.xz"
+    wget -qO btbn-ffmpeg.tar.xz "https://github.com/NickM-27/FFmpeg-Builds/releases/download/autobuild-2022-07-31-12-37/ffmpeg-n5.1-2-g915ef932a3-linux64-gpl-5.1.tar.xz"
     tar -xf btbn-ffmpeg.tar.xz -C /usr/lib/btbn-ffmpeg --strip-components 1
     rm -rf btbn-ffmpeg.tar.xz /usr/lib/btbn-ffmpeg/doc /usr/lib/btbn-ffmpeg/bin/ffplay
 fi
@@ -48,7 +48,7 @@ fi
 # ffmpeg -> arm64
 if [[ "${TARGETARCH}" == "arm64" ]]; then
     mkdir -p /usr/lib/btbn-ffmpeg
-    wget -qO btbn-ffmpeg.tar.xz "https://github.com/BtbN/FFmpeg-Builds/releases/download/autobuild-2022-07-31-12-37/ffmpeg-n5.1-2-g915ef932a3-linuxarm64-gpl-5.1.tar.xz"
+    wget -qO btbn-ffmpeg.tar.xz "https://github.com/NickM-27/FFmpeg-Builds/releases/download/autobuild-2022-07-31-12-37/ffmpeg-n5.1-2-g915ef932a3-linuxarm64-gpl-5.1.tar.xz"
     tar -xf btbn-ffmpeg.tar.xz -C /usr/lib/btbn-ffmpeg --strip-components 1
     rm -rf btbn-ffmpeg.tar.xz /usr/lib/btbn-ffmpeg/doc /usr/lib/btbn-ffmpeg/bin/ffplay
 fi

docker/main/requirements-wheels.txt

@@ -4,7 +4,6 @@ Flask_Limiter == 3.7.*
 imutils == 0.5.*
 joserfc == 0.11.*
 markupsafe == 2.1.*
-matplotlib == 3.8.*
 mypy == 1.6.1
 numpy == 1.26.*
 onvif_zeep == 0.2.12

docker/main/rootfs/etc/s6-overlay/s6-rc.d/certsync/run

@@ -34,7 +34,7 @@ do
             ;;
     esac
 
-    liveprint=`echo | openssl s_client -showcerts -connect 127.0.0.1:8080 2>&1 | openssl x509 -fingerprint 2>&1 | grep -i fingerprint  || echo 'failed'`
+    liveprint=`echo | openssl s_client -showcerts -connect 127.0.0.1:8971 2>&1 | openssl x509 -fingerprint 2>&1 | grep -i fingerprint  || echo 'failed'`
 
     case "$liveprint" in
         *Fingerprint*)

docker/main/rootfs/etc/s6-overlay/s6-rc.d/frigate/run

@@ -16,8 +16,8 @@ function migrate_db_path() {
     if [[ -f "${config_file_yaml}" ]]; then
         config_file="${config_file_yaml}"
     elif [[ ! -f "${config_file}" ]]; then
-        echo "[ERROR] Frigate config file not found"
-        return 1
+        # Frigate will create the config file on startup
+        return 0
     fi
     unset config_file_yaml
 

docker/main/rootfs/etc/s6-overlay/s6-rc.d/nginx/run

@@ -38,7 +38,7 @@ function get_cpus() {
     fi
 
     local cpus
-    if [ -n "${quota}" ] && [ -n "${period}" ]; then
+    if [ "${period}" != "0" ] && [ -n "${quota}" ] && [ -n "${period}" ]; then
         cpus=$((quota / period))
         if [ "$cpus" -eq 0 ]; then
             cpus=1

docker/main/rootfs/usr/local/go2rtc/create_config.py

@@ -21,9 +21,9 @@ FRIGATE_ENV_VARS = {k: v for k, v in os.environ.items() if k.startswith("FRIGATE
 if os.path.isdir("/run/secrets"):
     for secret_file in os.listdir("/run/secrets"):
         if secret_file.startswith("FRIGATE_"):
-            FRIGATE_ENV_VARS[secret_file] = Path(
-                os.path.join("/run/secrets", secret_file)
-            ).read_text()
+            FRIGATE_ENV_VARS[secret_file] = (
+                Path(os.path.join("/run/secrets", secret_file)).read_text().strip()
+            )
 
 config_file = os.environ.get("CONFIG_FILE", "/config/config.yml")
 

docker/main/rootfs/usr/local/nginx/conf/nginx.conf

@@ -59,9 +59,6 @@ http {
     include go2rtc_upstream.conf;
 
     server {
-        # intended for internal traffic, not protected by auth
-        listen [::]:5000 ipv6only=off;
-
         include listen.conf;
 
         # vod settings

docker/main/rootfs/usr/local/nginx/templates/listen.gotmpl

@@ -1,9 +1,12 @@
+# intended for internal traffic, not protected by auth
+listen 5000;
+
 {{ if not .enabled }}
 # intended for external traffic, protected by auth
-listen [::]:8080 ipv6only=off;
+listen 8971;
 {{ else }}
 # intended for external traffic, protected by auth
-listen [::]:8080 ipv6only=off ssl;
+listen 8971 ssl;
 
 ssl_certificate /etc/letsencrypt/live/frigate/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/frigate/privkey.pem;

docker/webonly/Dockerfile

@@ -0,0 +1,19 @@
+# syntax=docker/dockerfile:1.6
+
+# Frigate web build
+# This should be architecture agnostic, so speed up the build on multiarch by not using QEMU.
+FROM --platform=$BUILDPLATFORM node:20 AS web-build
+
+WORKDIR /work
+COPY web/package.json web/package-lock.json ./
+RUN npm install
+
+COPY web/ ./
+RUN npm run build \
+    && mv dist/BASE_PATH/monacoeditorwork/* dist/assets/ \
+    && rm -rf dist/BASE_PATH
+
+FROM --platform=$BUILDPLATFORM ghcr.io/blakeblackshear/frigate:stable AS frigate
+WORKDIR /opt/frigate/
+RUN rm -rf web/ && mkdir web
+COPY --from=web-build /work/dist/ web/

docs/docs/configuration/advanced.md

@@ -80,6 +80,14 @@ model:
   input_pixel_format: "bgr"
 ```
 
+#### `labelmap`
+
+:::warning
+
+If the labelmap is customized then the labels used for alerts will need to be adjusted as well. See [alert labels](../configuration/review.md#restricting-alerts-to-specific-labels) for more info.
+
+:::
+
 The labelmap can be customized to your needs. A common reason to do this is to combine multiple object types that are easily confused when you don't need to be as granular such as car/truck. By default, truck is renamed to car because they are often confused. You cannot add new object types, but you can change the names of existing objects in the model.
 
 ```yaml
@@ -106,7 +114,53 @@ Some labels have special handling and modifications can disable functionality.
 
 :::
 
-## Custom ffmpeg build
+## Network Configuration
+
+Changes to Frigate's internal network configuration can be made by bind mounting nginx.conf into the container. For example:
+
+```yaml
+services:
+  frigate:
+    container_name: frigate
+    ...
+    volumes:
+      ...
+      - /path/to/your/nginx.conf:/usr/local/nginx/conf/nginx.conf
+```
+
+### Enabling IPv6
+
+IPv6 is disabled by default, to enable IPv6 listen.gotmpl needs to be bind mounted with IPv6 enabled. For example:
+
+```
+{{ if not .enabled }}
+# intended for external traffic, protected by auth
+listen 8971;
+{{ else }}
+# intended for external traffic, protected by auth
+listen 8971 ssl;
+
+# intended for internal traffic, not protected by auth
+listen 5000;
+```
+
+becomes
+
+```
+{{ if not .enabled }}
+# intended for external traffic, protected by auth
+listen [::]:8971 ipv6only=off;
+{{ else }}
+# intended for external traffic, protected by auth
+listen [::]:8971 ipv6only=off ssl;
+
+# intended for internal traffic, not protected by auth
+listen [::]:5000 ipv6only=off;
+```
+
+## Custom Dependencies
+
+### Custom ffmpeg build
 
 Included with Frigate is a build of ffmpeg that works for the vast majority of users. However, there exists some hardware setups which have incompatibilities with the included build. In this case, a docker volume mapping can be used to overwrite the included ffmpeg build with an ffmpeg build that works for your specific hardware setup.
 
@@ -118,7 +172,7 @@ To do this:
 
 NOTE: The folder that is mapped from the host needs to be the folder that contains `/bin`. So if the full structure is `/home/appdata/frigate/custom-ffmpeg/bin/ffmpeg` then `/home/appdata/frigate/custom-ffmpeg` needs to be mapped to `/usr/lib/btbn-ffmpeg`.
 
-## Custom go2rtc version
+### Custom go2rtc version
 
 Frigate currently includes go2rtc v1.9.4, there may be certain cases where you want to run a different version of go2rtc.
 

docs/docs/configuration/authentication.md

@@ -13,7 +13,7 @@ The following ports are available to access the Frigate web UI.
 
 | Port   | Description                                                                                                                                                                                                  |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `8080` | Authenticated UI and API. Reverse proxies should use this port.                                                                                                                                              |
+| `8971` | Authenticated UI and API. Reverse proxies should use this port.                                                                                                                                              |
 | `5000` | Internal unauthenticated UI and API access. Access to this port should be limited. Intended to be used within the docker network for services that integrate with Frigate and do not support authentication. |
 
 ## Onboarding

docs/docs/configuration/cameras.md

@@ -111,6 +111,6 @@ camera_groups:
     cameras:
       - driveway_cam
       - garage_cam
-    icon: car
+    icon: LuCar
     order: 0
 ```

docs/docs/configuration/live.md

@@ -7,13 +7,15 @@ Frigate intelligently displays your camera streams on the Live view dashboard. Y
 
 ## Live View technologies
 
-Frigate intelligently uses three different streaming technologies to display your camera streams. The highest quality and fluency of the Live view requires the bundled `go2rtc` to be configured as shown in the [step by step guide](/guides/configuring_go2rtc).
+Frigate intelligently uses three different streaming technologies to display your camera streams on the dashboard and the single camera view, switching between available modes based on network bandwidth, player errors, or required features like two-way talk. The highest quality and fluency of the Live view requires the bundled `go2rtc` to be configured as shown in the [step by step guide](/guides/configuring_go2rtc).
 
-| Source | Latency | Frame Rate                            | Resolution     | Audio                        | Requires go2rtc | Other Limitations                                |
-| ------ | ------- | ------------------------------------- | -------------- | ---------------------------- | --------------- | ------------------------------------------------ |
-| jsmpeg | low     | same as `detect -> fps`, capped at 10 | same as detect | no                           | no              | none                                             |
-| mse    | low     | native                                | native         | yes (depends on audio codec) | yes             | iPhone requires iOS 17.1+, Firefox is h.264 only |
-| webrtc | lowest  | native                                | native         | yes (depends on audio codec) | yes             | requires extra config, doesn't support h.265     |
+The jsmpeg live view will use more browser and client GPU resources. Using go2rtc is highly recommended and will provide a superior experience.
+
+| Source | Latency | Frame Rate                            | Resolution | Audio                        | Requires go2rtc | Other Limitations                                                                    |
+| ------ | ------- | ------------------------------------- | ---------- | ---------------------------- | --------------- | ------------------------------------------------------------------------------------ |
+| jsmpeg | low     | same as `detect -> fps`, capped at 10 | 720p       | no                           | no              | resolution is configurable, but go2rtc is recommended if you want higher resolutions |
+| mse    | low     | native                                | native     | yes (depends on audio codec) | yes             | iPhone requires iOS 17.1+, Firefox is h.264 only                                     |
+| webrtc | lowest  | native                                | native     | yes (depends on audio codec) | yes             | requires extra config, doesn't support h.265                                         |
 
 ### Audio Support
 

docs/docs/configuration/masks.md

@@ -78,7 +78,7 @@ It is, but the definition of "unnecessary" varies. I want to ignore areas of mot
 
 > For me, giving my masks ANY padding results in a lot of people detection I'm not interested in. I live in the city and catch a lot of the sidewalk on my camera. People walk by my front door all the time and the margin between the sidewalk and actually walking onto my stoop is very thin, so I basically have everything but the exact contours of my stoop masked out. This results in very tidy detections but this info keeps throwing me off. Am I just overthinking it?
 
-This is what `required_zones` are for. You should define a zone (remember this is evaluated based on the bottom center of the bounding box) and make it required to save snapshots and clips (now events in 0.9.0). You can also use this in your conditions for a notification.
+This is what `required_zones` are for. You should define a zone (remember this is evaluated based on the bottom center of the bounding box) and make it required to save snapshots and clips (previously events in 0.9.0 to 0.13.0 and review items in 0.14.0 and later). You can also use this in your conditions for a notification.
 
 > Maybe my specific situation just warrants this. I've just been having a hard time understanding the relevance of this information - it seems to be that it's exactly what would be expected when "masking out" an area of ANY image.
 

docs/docs/configuration/object_detectors.md

@@ -81,6 +81,15 @@ detectors:
     device: ""
 ```
 
+### Single PCIE/M.2 Coral
+
+```yaml
+detectors:
+  coral:
+    type: edgetpu
+    device: pci
+```
+
 ### Multiple PCIE/M.2 Corals
 
 ```yaml
@@ -136,23 +145,7 @@ model:
 
 #### YOLOX
 
-This detector also supports YOLOX. Frigate does not come with any YOLOX models preloaded, so you will need to supply your own models. This detector has been verified to work with the [yolox_tiny](https://github.com/openvinotoolkit/open_model_zoo/tree/master/models/public/yolox-tiny) model from Intel's Open Model Zoo. You can follow [these instructions](https://github.com/openvinotoolkit/open_model_zoo/tree/master/models/public/yolox-tiny#download-a-model-and-convert-it-into-openvino-ir-format) to retrieve the OpenVINO-compatible `yolox_tiny` model. Make sure that the model input dimensions match the `width` and `height` parameters, and `model_type` is set accordingly. See [Full Configuration Reference](/configuration/reference.md) for a list of possible `model_type` options. Below is an example of how `yolox_tiny` can be used in Frigate:
-
-```yaml
-detectors:
-  ov:
-    type: openvino
-    device: GPU
-
-model:
-  width: 416
-  height: 416
-  input_tensor: nchw
-  input_pixel_format: bgr
-  model_type: yolox
-  path: /path/to/yolox_tiny.xml
-  labelmap_path: /path/to/coco_80cl.txt
-```
+This detector also supports YOLOX. Frigate does not come with any YOLOX models preloaded, so you will need to supply your own models.
 
 #### YOLO-NAS
 

docs/docs/configuration/record.md

@@ -159,11 +159,14 @@ Using Frigate UI, HomeAssistant, or MQTT, cameras can be automated to only recor
 
 ## How do I export recordings?
 
-The export page in the Frigate WebUI allows for exporting real time clips with a designated start and stop time as well as exporting a time-lapse for a designated start and stop time. These exports can take a while so it is important to leave the file until it is no longer in progress.
+Footage can be exported from Frigate by right-clicking (desktop) or long pressing (mobile) on a review item in the Review pane or by clicking the Export button in the History view. Exported footage is then organized and searchable through the Export view, accessible from the main navigation bar.
 
 ### Time-lapse export
 
+Time lapse exporting is available only via the [HTTP API](../integrations/api.md#post-apiexportcamerastartstart-timestampendend-timestamp).
+
 When exporting a time-lapse the default speed-up is 25x with 30 FPS. This means that every 25 seconds of (real-time) recording is condensed into 1 second of time-lapse video (always without audio) with a smoothness of 30 FPS.
+
 To configure the speed-up factor, the frame rate and further custom settings, the configuration parameter `timelapse_args` can be used. The below configuration example would change the time-lapse speed to 60x (for fitting 1 hour of recording into 1 minute of time-lapse) with 25 FPS:
 
 ```yaml

docs/docs/configuration/reference.md

@@ -65,7 +65,7 @@ database:
 
 # Optional: TLS configuration
 tls:
-  # Optional: Enable TLS for port 8080 (default: shown below)
+  # Optional: Enable TLS for port 8971 (default: shown below)
   enabled: True
 
 # Optional: Proxy configuration
@@ -202,7 +202,7 @@ birdseye:
   inactivity_threshold: 30
   # Optional: Configure the birdseye layout
   layout:
-    # Optional: Scaling factor for the layout calculator (default: shown below)
+    # Optional: Scaling factor for the layout calculator, range 1.0-5.0 (default: shown below)
     scaling_factor: 2.0
     # Optional: Maximum number of cameras to show at one time, showing the most recent (default: show all cameras)
     max_cameras: 1
@@ -466,7 +466,7 @@ snapshots:
   quality: 70
 
 # Optional: Restream configuration
-# Uses https://github.com/AlexxIT/go2rtc (v1.8.3)
+# Uses https://github.com/AlexxIT/go2rtc (v1.9.2)
 go2rtc:
 
 # Optional: jsmpeg stream configuration for WebUI
@@ -613,6 +613,9 @@ cameras:
       user: admin
       # Optional: password for login.
       password: admin
+      # Optional: Ignores time synchronization mismatches between the camera and the server during authentication. 
+      # Using NTP on both ends is recommended and this should only be set to True in a "safe" environment due to the security risk it represents. 
+      ignore_time_mismatch: False
       # Optional: PTZ camera object autotracking. Keeps a moving object in
       # the center of the frame by automatically moving the PTZ camera.
       autotracking:

docs/docs/configuration/review.md

@@ -7,6 +7,16 @@ The Review page of the Frigate UI is for quickly reviewing historical footage of
 
 Review items are filterable by date, object type, and camera.
 
+### Review items vs. events
+
+In Frigate 0.13 and earlier versions, the UI presented "events". An event was synonymous with a tracked or detected object. In Frigate 0.14 and later, a review item is a time period where any number of tracked objects were active.
+
+For example, consider a situation where two people walked past your house. One was walking a dog. At the same time, a car drove by on the street behind them.
+
+In this scenario, Frigate 0.13 and earlier would show 4 events in the UI - one for each person, another for the dog, and yet another for the car. You would have had 4 separate videos to watch even though they would have all overlapped.
+
+In 0.14 and later, all of that is bundled into a single review item which starts and ends to capture all of that activity. Reviews for a single camera cannot overlap. Once you have watched that time period on that camera, it is marked as reviewed.
+
 ## Alerts and Detections
 
 Not every segment of video captured by Frigate may be of the same level of interest to you. Video of people who enter your property may be a different priority than those walking by on the sidewalk. For this reason, Frigate 0.14 categorizes review items as _alerts_ and _detections_. By default, all person and car objects are considered alerts. You can refine categorization of your review items by configuring required zones for them.
@@ -62,6 +72,6 @@ By default a review item will be created if any `review -> alerts -> labels` and
 
 :::info
 
-Because zones don't apply to audio, audio labels will always be marked as an alert.
+Because zones don't apply to audio, audio labels will always be marked as a detection by default.
 
 :::

docs/docs/configuration/tls.md

@@ -5,7 +5,7 @@ title: TLS
 
 # TLS
 
-Frigate's integrated NGINX server supports TLS certificates. By default Frigate will generate a self signed certificate that will be used for port 8080. Frigate is designed to make it easy to use whatever tool you prefer to manage certificates.
+Frigate's integrated NGINX server supports TLS certificates. By default Frigate will generate a self signed certificate that will be used for port 8971. Frigate is designed to make it easy to use whatever tool you prefer to manage certificates.
 
 Frigate is often running behind a reverse proxy that manages TLS certificates for multiple services. You will likely need to set your reverse proxy to allow self signed certificates or you can disable TLS in Frigate's config. However, if you are running on a dedicated device that's separate from your proxy or if you expose Frigate directly to the internet, you may want to configure TLS with valid certificates.
 
@@ -24,21 +24,33 @@ TLS certificates can be mounted at `/etc/letsencrypt/live/frigate` using a bind
 frigate:
   ...
   volumes:
-    - /path/to/your/certificate_folder:/etc/letsencrypt/live/frigate
+    - /path/to/your/certificate_folder:/etc/letsencrypt/live/frigate:ro
   ...
 ```
 
 Within the folder, the private key is expected to be named `privkey.pem` and the certificate is expected to be named `fullchain.pem`.
 
+Note that certbot uses symlinks, and those can't be followed by the container unless it has access to the targets as well, so if using certbot you'll also have to mount the `archive` folder for your domain, e.g.:
+
+```yaml
+frigate:
+  ...
+  volumes:
+    - /etc/letsencrypt/live/frigate:/etc/letsencrypt/live/frigate:ro
+    - /etc/letsencrypt/archive/frigate:/etc/letsencrypt/archive/frigate:ro
+  ...
+
+```
+
 Frigate automatically compares the fingerprint of the certificate at `/etc/letsencrypt/live/frigate/fullchain.pem` against the fingerprint of the TLS cert in NGINX every minute. If these differ, the NGINX config is reloaded to pick up the updated certificate.
 
-If you issue Frigate valid certificates you will likely want to configure it to run on port 443 so you can access it without a port number like `https://your-frigate-domain.com` by mapping 8080 to 443.
+If you issue Frigate valid certificates you will likely want to configure it to run on port 443 so you can access it without a port number like `https://your-frigate-domain.com` by mapping 8971 to 443.
 
 ```yaml
 frigate:
   ...
   ports:
-    - "443:8080"
+    - "443:8971"
   ...
 ```
 

docs/docs/frigate/glossary.md

@@ -9,6 +9,13 @@ The glossary explains terms commonly used in Frigate's documentation.
 
 A box returned from the object detection model that outlines an object in the frame. These have multiple colors depending on object type in the debug live view.
 
+### Bounding Box Colors
+
+- At startup different colors will be assigned to each object label
+- A dark blue thin line indicates that object is not detected at this current point in time
+- A gray thin line indicates that object is detected as being stationary
+- A thick line indicates that object is the subject of autotracking (when enabled).
+
 ## Event
 
 The time period starting when a tracked object entered the frame and ending when it left the frame, including any time that the object remained still. Events are saved when it is considered a [true positive](#threshold) and meets the requirements for a snapshot or recording to be saved.
@@ -41,6 +48,10 @@ When pixels in the current camera frame are different than previous frames. When
 
 A portion of the camera frame that is sent to object detection, regions can be sent due to motion, active objects, or occasionally for stationary objects. These are represented by green boxes in the debug live view.
 
+## Review Item
+
+A review item is a time period where any number of events/tracked objects were active. [See the review docs for more info](/configuration/review)
+
 ## Snapshot Score
 
 The score shown in a snapshot is the score of that object at that specific moment in time.

docs/docs/frigate/installation.md

@@ -5,6 +5,12 @@ title: Installation
 
 Frigate is a Docker container that can be run on any Docker host including as a [HassOS Addon](https://www.home-assistant.io/addons/). Note that a Home Assistant Addon is **not** the same thing as the integration. The [integration](/integrations/home-assistant) is required to integrate Frigate into Home Assistant.
 
+:::tip
+
+If you already have Frigate installed as a Home Assistant addon, check out the [getting started guide](../guides/getting_started#configuring-frigate) to configure Frigate.
+
+:::
+
 ## Dependencies
 
 **MQTT broker (optional)** - An MQTT broker is optional with Frigate, but is required for the Home Assistant integration. If using Home Assistant, Frigate and Home Assistant must be connected to the same MQTT broker.
@@ -34,7 +40,7 @@ The following ports are used by Frigate and can be mapped via docker as required
 
 | Port   | Description                                                                                                                                                                |
 | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `8080` | Authenticated UI and API access without TLS. Reverse proxies should use this port.                                                                                         |
+| `8971` | Authenticated UI and API access without TLS. Reverse proxies should use this port.                                                                                         |
 | `5000` | Internal unauthenticated UI and API access. Access to this port should be limited. Intended to be used within the docker network for services that integrate with Frigate. |
 | `8554` | RTSP restreaming. By default, these streams are unauthenticated. Authentication can be configured in go2rtc section of config.                                             |
 | `8555` | WebRTC connections for low latency live views.                                                                                                                             |
@@ -171,7 +177,7 @@ services:
         tmpfs:
           size: 1000000000
     ports:
-      - "8080:8080"
+      - "8971:8971"
       # - "5000:5000" # Internal unauthenticated access. Expose carefully.
       - "8554:8554" # RTSP feeds
       - "8555:8555/tcp" # WebRTC over tcp
@@ -194,7 +200,7 @@ docker run -d \
   -v /path/to/your/config:/config \
   -v /etc/localtime:/etc/localtime:ro \
   -e FRIGATE_RTSP_PASSWORD='password' \
-  -p 8080:8080 \
+  -p 8971:8971 \
   -p 8554:8554 \
   -p 8555:8555/tcp \
   -p 8555:8555/udp \
@@ -370,7 +376,7 @@ docker run \
   --network=bridge \
   --privileged \
   --workdir=/opt/frigate \
-  -p 8080:8080 \
+  -p 8971:8971 \
   -p 8554:8554 \
   -p 8555:8555 \
   -p 8555:8555/udp \

docs/docs/guides/configuring_go2rtc.md

@@ -24,59 +24,78 @@ go2rtc:
 
 The easiest live view to get working is MSE. After adding this to the config, restart Frigate and try to watch the live stream by selecting MSE in the dropdown after clicking on the camera.
 
+
 ### What if my video doesn't play?
 
-If you are unable to see your video feed, first check the go2rtc logs in the Frigate UI under Logs in the sidebar. If go2rtc is having difficulty connecting to your camera, you should see some error messages in the log. If you do not see any errors, then the video codec of the stream may not be supported in your browser. If your camera stream is set to H265, try switching to H264. You can see more information about [video codec compatibility](https://github.com/AlexxIT/go2rtc/tree/v1.9.4#codecs-madness) in the go2rtc documentation. If you are not able to switch your camera settings from H265 to H264 or your stream is a different format such as MJPEG, you can use go2rtc to re-encode the video using the [FFmpeg parameters](https://github.com/AlexxIT/go2rtc/tree/v1.9.4#source-ffmpeg). It supports rotating and resizing video feeds and hardware acceleration. Keep in mind that transcoding video from one format to another is a resource intensive task and you may be better off using the built-in jsmpeg view. Here is an example of a config that will re-encode the stream to H264 without hardware acceleration:
+- Check Logs:
+    - Access the go2rtc logs in the Frigate UI under Logs in the sidebar.
+    - If go2rtc is having difficulty connecting to your camera, you should see some error messages in the log.
 
-```yaml
-go2rtc:
-  streams:
-    back:
-      - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
-      - "ffmpeg:back#video=h264"
-```
+- Check go2rtc Web Interface: if you don't see any errors in the logs, try viewing the camera through go2rtc's web interface.
+    - Navigate to port 1984 in your browser to access go2rtc's web interface.
+        - If using Frigate through Home Assistant, enable the web interface at port 1984.
+        - If using Docker, forward port 1984 before accessing the web interface.
+    - Click `stream` for the specific camera to see if the camera's stream is being received.
 
-Some camera streams may need to use the ffmpeg module in go2rtc. This has the downside of slower startup times, but has compatibility with more stream types.
+- Check Video Codec:
+    - If the camera stream works in go2rtc but not in your browser, the video codec might be unsupported.
+    - If using H265, switch to H264. Refer to [video codec compatibility](https://github.com/AlexxIT/go2rtc/tree/v1.9.4#codecs-madness) in go2rtc documentation.
+    - If unable to switch from H265 to H264, or if the stream format is different (e.g., MJPEG), re-encode the video using [FFmpeg parameters](https://github.com/AlexxIT/go2rtc/tree/v1.9.4#source-ffmpeg). It supports rotating and resizing video feeds and hardware acceleration. Keep in mind that transcoding video from one format to another is a resource intensive task and you may be better off using the built-in jsmpeg view.
+        ```yaml
+        go2rtc:
+          streams:
+            back:
+              - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
+              - "ffmpeg:back#video=h264"
+        ```
 
-```yaml
-go2rtc:
-  streams:
-    back:
-      - ffmpeg:rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
-```
+- Switch to FFmpeg if needed: 
+    - Some camera streams may need to use the ffmpeg module in go2rtc. This has the downside of slower startup times, but has compatibility with more stream types.
+        ```yaml
+        go2rtc:
+          streams:
+            back:
+              - ffmpeg:rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
+        ```
 
-If you can see the video but do not have audio, this is most likely because your camera's audio stream is not AAC. If possible, update your camera's audio settings to AAC. If your cameras do not support AAC audio, you will need to tell go2rtc to re-encode the audio to AAC on demand if you want audio. This will use additional CPU and add some latency. To add AAC audio on demand, you can update your go2rtc config as follows:
+- If you can see the video but do not have audio, this is most likely because your
+camera's audio stream is not AAC.
+    - If possible, update your camera's audio settings to AAC.
+    - If your cameras do not support AAC audio, you will need to tell go2rtc to re-encode the audio to AAC on demand if you want audio. This will use additional CPU and add some latency. To add AAC audio on demand, you can update your go2rtc config as follows:
+        ```yaml
+        go2rtc:
+          streams:
+            back:
+              - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
+              - "ffmpeg:back#audio=aac"
+        ```
 
-```yaml
-go2rtc:
-  streams:
-    back:
-      - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
-      - "ffmpeg:back#audio=aac"
-```
+        If you need to convert **both** the audio and video streams, you can use the following:
 
-If you need to convert **both** the audio and video streams, you can use the following:
+        ```yaml
+        go2rtc:
+          streams:
+            back:
+              - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
+              - "ffmpeg:back#video=h264#audio=aac"
+        ```
 
-```yaml
-go2rtc:
-  streams:
-    back:
-      - rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2
-      - "ffmpeg:back#video=h264#audio=aac"
-```
+        When using the ffmpeg module, you would add AAC audio like this:
 
-When using the ffmpeg module, you would add AAC audio like this:
-
-```yaml
-go2rtc:
-  streams:
-    back:
-      - "ffmpeg:rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2#video=copy#audio=copy#audio=aac"
-```
+        ```yaml
+        go2rtc:
+          streams:
+            back:
+              - "ffmpeg:rtsp://user:password@10.0.10.10:554/cam/realmonitor?channel=1&subtype=2#video=copy#audio=copy#audio=aac"
+        ```
 
 :::warning
 
-To access the go2rtc stream externally when utilizing the Frigate Add-On (for instance through VLC), you must first enable the RTSP Restream port. You can do this by visiting the Frigate Add-On configuration page within Home Assistant and revealing the hidden options under the "Show disabled ports" section.
+To access the go2rtc stream externally when utilizing the Frigate Add-On (for
+instance through VLC), you must first enable the RTSP Restream port.
+You can do this by visiting the Frigate Add-On configuration page within Home
+Assistant and revealing the hidden options under the "Show disabled ports"
+section.
 
 :::
 

docs/docs/guides/getting_started.md

@@ -5,9 +5,17 @@ title: Getting started
 
 # Getting Started
 
+:::tip
+
+If you already have an environment with Linux and Docker installed, you can continue to [Installing Frigate](#installing-frigate) below.
+
+If you already have Frigate installed in Docker or as a Home Assistant addon, you can continue to [Configuring Frigate](#configuring-frigate) below.
+
+:::
+
 ## Setting up hardware
 
-This section guides you through setting up a server with Debian Bookworm and Docker. If you already have an environment with Linux and Docker installed, you can continue to [Installing Frigate](#installing-frigate) below.
+This section guides you through setting up a server with Debian Bookworm and Docker.
 
 ### Install Debian 12 (Bookworm)
 
@@ -77,20 +85,19 @@ This section shows how to create a minimal directory structure for a Docker inst
 
 ### Setup directories
 
-Frigate requires a valid config file to start. The following directory structure is the bare minimum to get started. Once Frigate is running, you can use the built-in config editor which supports config validation.
+Frigate will create a config file if one does not exist on the initial startup. The following directory structure is the bare minimum to get started. Once Frigate is running, you can use the built-in config editor which supports config validation.
 
 ```
 .
 ├── docker-compose.yml
 ├── config/
-│   └── config.yml
 └── storage/
 ```
 
 This will create the above structure:
 
 ```bash
-mkdir storage config && touch docker-compose.yml config/config.yml
+mkdir storage config && touch docker-compose.yml
 ```
 
 If you are setting up Frigate on a Linux device via SSH, you can use [nano](https://itsfoss.com/nano-editor-guide/) to edit the following files. If you prefer to edit remote files with a full editor instead of a terminal, I recommend using [Visual Studio Code](https://code.visualstudio.com/) with the [Remote SSH extension](https://code.visualstudio.com/docs/remote/ssh-tutorial).
@@ -117,27 +124,11 @@ services:
         tmpfs:
           size: 1000000000
     ports:
-      - "8080:8080"
+      - "8971:8971"
       - "8554:8554" # RTSP feeds
 ```
 
-`config.yml`
-
-```yaml
-mqtt:
-  enabled: False
-
-cameras:
-  dummy_camera: # <--- this will be changed to your actual camera later
-    enabled: False
-    ffmpeg:
-      inputs:
-        - path: rtsp://127.0.0.1:554/rtsp
-          roles:
-            - detect
-```
-
-Now you should be able to start Frigate by running `docker compose up -d` from within the folder containing `docker-compose.yml`. On startup, an admin user and password will be created and outputted in the logs. You can see this by running `docker logs frigate`. Frigate should now be accessible at `https://server_ip:8080` where you can login with the `admin` user and finish the configuration using the built-in configuration editor.
+Now you should be able to start Frigate by running `docker compose up -d` from within the folder containing `docker-compose.yml`. On startup, an admin user and password will be created and outputted in the logs. You can see this by running `docker logs frigate`. Frigate should now be accessible at `https://server_ip:8971` where you can login with the `admin` user and finish the configuration using the built-in configuration editor.
 
 ## Configuring Frigate
 
@@ -274,13 +265,11 @@ cameras:
         - 0,461,3,0,1919,0,1919,843,1699,492,1344,458,1346,336,973,317,869,375,866,432
 ```
 
-### Step 6: Enable recording and/or snapshots
+### Step 6: Enable recordings
 
-In order to see Events in the Frigate UI, either snapshots or record will need to be enabled.
+In order to review activity in the Frigate UI, recordings need to be enabled.
 
-#### Record
-
-To enable recording video, add the `record` role to a stream and enable it in the config. If record is disabled in the config, turning it on via the UI will not have any effect.
+To enable recording video, add the `record` role to a stream and enable it in the config. If record is disabled in the config, it won't be possible to enable it in the UI.
 
 ```yaml
 mqtt: ...
@@ -307,26 +296,6 @@ If you don't have separate streams for detect and record, you would just add the
 
 By default, Frigate will retain video of all events for 10 days. The full set of options for recording can be found [here](../configuration/reference.md).
 
-#### Snapshots
-
-To enable snapshots of your events, just enable it in the config. Snapshots are taken from the detect stream because it is the only stream decoded.
-
-```yaml
-mqtt: ...
-
-detectors: ...
-
-cameras:
-  name_of_your_camera: ...
-    detect: ...
-    record: ...
-    snapshots: # <----- Enable snapshots
-      enabled: True
-    motion: ...
-```
-
-By default, Frigate will retain snapshots of all events for 10 days. The full set of options for snapshots can be found [here](../configuration/reference.md).
-
 ### Step 7: Complete config
 
 At this point you have a complete config with basic functionality. You can see the [full config reference](../configuration/reference.md) for a complete list of configuration options.
@@ -336,6 +305,8 @@ At this point you have a complete config with basic functionality. You can see t
 Now that you have a working install, you can use the following documentation for additional features:
 
 1. [Configuring go2rtc](configuring_go2rtc.md) - Additional live view options and RTSP relay
-2. [Home Assistant Integration](../integrations/home-assistant.md) - Integrate with Home Assistant
-3. [Masks](../configuration/masks.md)
-4. [Zones](../configuration/zones.md)
+2. [Zones](../configuration/zones.md)
+3. [Review](../configuration/review.md)
+4. [Masks](../configuration/masks.md)
+5. [Home Assistant Integration](../integrations/home-assistant.md) - Integrate with Home Assistant
+

docs/docs/guides/ha_notifications.md

@@ -5,7 +5,7 @@ title: Home Assistant notifications
 
 The best way to get started with notifications for Frigate is to use the [Blueprint](https://community.home-assistant.io/t/frigate-mobile-app-notifications-2-0/559732). You can use the yaml generated from the Blueprint as a starting point and customize from there.
 
-It is generally recommended to trigger notifications based on the `frigate/events` mqtt topic. This provides the event_id needed to fetch [thumbnails/snapshots/clips](../integrations/home-assistant.md#notification-api) and other useful information to customize when and where you want to receive alerts. The data is published in the form of a change feed, which means you can reference the "previous state" of the object in the `before` section and the "current state" of the object in the `after` section. You can see an example [here](../integrations/mqtt.md#frigateevents).
+It is generally recommended to trigger notifications based on the `frigate/reviews` mqtt topic. This provides the event_id(s) needed to fetch [thumbnails/snapshots/clips](../integrations/home-assistant.md#notification-api) and other useful information to customize when and where you want to receive alerts. The data is published in the form of a change feed, which means you can reference the "previous state" of the object in the `before` section and the "current state" of the object in the `after` section. You can see an example [here](../integrations/mqtt.md#frigateevents).
 
 Here is a simple example of a notification automation of events which will update the existing notification for each change. This means the image you see in the notification will update as Frigate finds a "better" image.
 
@@ -17,7 +17,7 @@ automation:
       topic: frigate/events
     action:
       - service: notify.mobile_app_pixel_3
-        data_template:
+        data:
           message: 'A {{trigger.payload_json["after"]["label"]}} was detected.'
           data:
             image: 'https://your.public.hass.address.com/api/frigate/notifications/{{trigger.payload_json["after"]["id"]}}/thumbnail.jpg?format=android'
@@ -33,48 +33,18 @@ automation:
     description: ""
     trigger:
       - platform: mqtt
-        topic: frigate/events
-        payload: new
-        value_template: "{{ value_json.type }}"
+        topic: frigate/reviews
+        payload: alert
+        value_template: "{{ value_json['after']['severity'] }}"
     action:
       - service: notify.mobile_app_iphone
         data:
-          message: 'A {{trigger.payload_json["after"]["label"]}} was detected.'
+          message: 'A {{trigger.payload_json["after"]["data"]["objects"] | sort | join(", ") | title}} was detected.'
           data:
             image: >-
-              https://your.public.hass.address.com/api/frigate/notifications/{{trigger.payload_json["after"]["id"]}}/thumbnail.jpg
+              https://your.public.hass.address.com/api/frigate/notifications/{{trigger.payload_json["after"]["data"]["detections"][0]}}/thumbnail.jpg
             tag: '{{trigger.payload_json["after"]["id"]}}'
             when: '{{trigger.payload_json["after"]["start_time"]|int}}'
             entity_id: camera.{{trigger.payload_json["after"]["camera"] | replace("-","_") | lower}}
     mode: single
 ```
-
-## Conditions
-
-Conditions with the `before` and `after` values allow a high degree of customization for automations.
-
-When a person enters a zone named yard
-
-```yaml
-condition:
-  - "{{ trigger.payload_json['after']['label'] == 'person' }}"
-  - "{{ 'yard' in trigger.payload_json['after']['entered_zones'] }}"
-```
-
-When a person leaves a zone named yard
-
-```yaml
-condition:
-  - "{{ trigger.payload_json['after']['label'] == 'person' }}"
-  - "{{ 'yard' in trigger.payload_json['before']['current_zones'] }}"
-  - "{{ not 'yard' in trigger.payload_json['after']['current_zones'] }}"
-```
-
-Notify for dogs in the front with a high top score
-
-```yaml
-condition:
-  - "{{ trigger.payload_json['after']['label'] == 'dog' }}"
-  - "{{ trigger.payload_json['after']['camera'] == 'front' }}"
-  - "{{ trigger.payload_json['after']['top_score'] > 0.98 }}"
-```

docs/docs/guides/reverse_proxy.md

@@ -38,20 +38,20 @@ Here we access Frigate via https://cctv.mydomain.co.uk
     ServerName cctv.mydomain.co.uk
 
     ProxyPreserveHost On
-    ProxyPass "/"  "http://frigatepi.local:8080/"
-    ProxyPassReverse "/"  "http://frigatepi.local:8080/"
+    ProxyPass "/"  "http://frigatepi.local:8971/"
+    ProxyPassReverse "/"  "http://frigatepi.local:8971/"
 
-    ProxyPass /ws ws://frigatepi.local:8080/ws
-    ProxyPassReverse /ws ws://frigatepi.local:8080/ws
+    ProxyPass /ws ws://frigatepi.local:8971/ws
+    ProxyPassReverse /ws ws://frigatepi.local:8971/ws
 
-    ProxyPass /live/ ws://frigatepi.local:8080/live/
-    ProxyPassReverse /live/ ws://frigatepi.local:8080/live/
+    ProxyPass /live/ ws://frigatepi.local:8971/live/
+    ProxyPassReverse /live/ ws://frigatepi.local:8971/live/
 
     RewriteEngine on
     RewriteCond %{HTTP:Upgrade} =websocket [NC]
-    RewriteRule /(.*)  ws://frigatepi.local:8080/$1 [P,L]
+    RewriteRule /(.*)  ws://frigatepi.local:8971/$1 [P,L]
     RewriteCond %{HTTP:Upgrade} !=websocket [NC]
-    RewriteRule /(.*)  http://frigatepi.local:8080/$1 [P,L]
+    RewriteRule /(.*)  http://frigatepi.local:8971/$1 [P,L]
 </VirtualHost>
 ```
 
@@ -101,7 +101,7 @@ This is set in `$server` and `$port` this should match your ports you have expos
 server {
   set $forward_scheme http;
   set $server         "192.168.100.2"; # FRIGATE SERVER LOCATION
-  set $port           8080;
+  set $port           8971;
 
   listen 80;
   listen 443 ssl http2;

docs/docs/integrations/api.md

@@ -381,9 +381,13 @@ List of frames in the preview cache for the time range. Previews are only kept i
 
 Specific preview frame from preview cache.
 
-### `GET /<camera>/start/<start-timestamp>/end/<end-timestamp>/preview.gif`
+### `GET /<camera>/start/<start-timestamp>/end/<end-timestamp>/preview`
 
-Gif made from preview video / frames during this time range
+Looping image made from preview video / frames during this time range.
+
+| param     | Type | Description                      |
+| --------- | ---- | -------------------------------- |
+| `format`  | str  | Format of preview [`gif`, `mp4`] |
 
 ## Recordings
 
@@ -455,6 +459,10 @@ Reviews from the database. Accepts the following query string parameters:
 | `limit`    | int  | Limit the number of events returned                            |
 | `severity` | str  | Limit items to severity (alert, detection, significant_motion) |
 
+### `GET /api/review/<id>`
+
+Get review with `id` from the database.
+
 ### `GET /api/review/summary`
 
 Summary of reviews for the last 30 days. Accepts the following query string parameters:

docs/docs/integrations/mqtt.md

@@ -138,13 +138,14 @@ Message published for each changed review item. The first message is published w
         "person",
         "car"
       ],
-      "sub_labels": [],
+      "sub_labels": ["Bob"],
       "zones": [
         "front_yard"
       ],
       "audio": []
     }
   }
+}
 ```
 
 ### `frigate/stats`

docs/docs/plus/index.md

@@ -3,7 +3,7 @@ id: index
 title: Models
 ---
 
-<a href="https://plus.frigate.video" target="_blank" rel="nofollow">Frigate+</a> offers models trained on images submitted by Frigate+ users from their security cameras and is specifically designed for the way Frigate NVR analyzes video footage. These models offer higher accuracy with less resources. The images you upload are used to fine tune a baseline model trained from images uploaded by all Frigate+ users. This fine tuning process results in a model that is optimized for accuracy in your specific conditions.
+<a href="https://frigate.video/plus" target="_blank" rel="nofollow">Frigate+</a> offers models trained on images submitted by Frigate+ users from their security cameras and is specifically designed for the way Frigate NVR analyzes video footage. These models offer higher accuracy with less resources. The images you upload are used to fine tune a baseline model trained from images uploaded by all Frigate+ users. This fine tuning process results in a model that is optimized for accuracy in your specific conditions.
 
 :::info
 

docs/docs/troubleshooting/faqs.md

@@ -28,6 +28,7 @@ You can open `chrome://media-internals/` in another tab and then try to playback
 Frigate generally [recommends cameras with configurable sub streams](/frigate/hardware.md). However, if your camera does not have a sub stream that a suitable resolution, the main stream can be resized.
 
 To do this efficiently the following setup is required:
+
 1. A GPU or iGPU must be available to do the scaling.
 2. [ffmpeg presets for hwaccel](/configuration/hardware_acceleration.md) must be used
 3. Set the desired detection resolution for `detect -> width` and `detect -> height`.
@@ -56,4 +57,44 @@ SQLite does not work well on a network share, if the `/media` folder is mapped t
 
 If MQTT isn't working in docker try using the IP of the device hosting the MQTT server instead of `localhost`, `127.0.0.1`, or `mosquitto.ix-mosquitto.svc.cluster.local`.
 
-This is because, by default, Frigate does not run in host mode so localhost points to the Frigate container and not the host device's network.
+This is because Frigate does not run in host mode so localhost points to the Frigate container and not the host device's network.
+
+### How do I know if my camera is offline
+
+A camera being offline can be detected via MQTT or /api/stats, the camera_fps for any offline camera will be 0.
+
+Also, Home Assistant will mark any offline camera as being unavailable when the camera is offline.
+
+### How can I view the Frigate log files without using the Web UI?
+
+Frigate manages logs internally as well as outputs directly to Docker via standard output. To view these logs using the CLI, follow these steps:
+
+- Open a terminal or command prompt on the host running your Frigate container.
+- Type the following command and press Enter:
+  ```
+  docker logs -f frigate
+  ```
+  This command tells Docker to show you the logs from the Frigate container.
+  Note: If you've given your Frigate container a different name, replace "frigate" in the command with your container's actual name. The "-f" option means the logs will continue to update in real-time as new entries are added. To stop viewing the logs, press `Ctrl+C`. If you'd like to learn more about using Docker logs, including additional options and features, you can explore Docker's [official documentation](https://docs.docker.com/engine/reference/commandline/logs/).
+
+Alternatively, when you create the Frigate Docker container, you can bind a directory on the host to the mountpoint `/dev/shm/logs` to not only be able to persist the logs to disk, but also to be able to query them directly from the host using your favorite log parsing/query utility.
+
+```
+docker run -d \
+  --name frigate \
+  --restart=unless-stopped \
+  --mount type=tmpfs,target=/tmp/cache,tmpfs-size=1000000000 \
+  --device /dev/bus/usb:/dev/bus/usb \
+  --device /dev/dri/renderD128 \
+  --shm-size=64m \
+  -v /path/to/your/storage:/media/frigate \
+  -v /path/to/your/config:/config \
+  -v /etc/localtime:/etc/localtime:ro \
+  -v /path/to/local/log/dir:/dev/shm/logs \
+  -e FRIGATE_RTSP_PASSWORD='password' \
+  -p 5000:5000 \
+  -p 8554:8554 \
+  -p 8555:8555/tcp \
+  -p 8555:8555/udp \
+  ghcr.io/blakeblackshear/frigate:stable
+```

frigate/api/auth.py

@@ -89,7 +89,9 @@ def get_jwt_secret() -> str:
     # check docker secrets
     elif os.path.isfile(os.path.join("/run/secrets", JWT_SECRET_ENV_VAR)):
         logger.debug(f"Using jwt secret from {JWT_SECRET_ENV_VAR} docker secret file.")
-        jwt_secret = Path(os.path.join("/run/secrets", JWT_SECRET_ENV_VAR)).read_text()
+        jwt_secret = (
+            Path(os.path.join("/run/secrets", JWT_SECRET_ENV_VAR)).read_text().strip()
+        )
     # check for the addon options file
     elif os.path.isfile("/data/options.json"):
         with open("/data/options.json") as f:

frigate/api/export.py

@@ -13,7 +13,6 @@ from flask import (
     request,
 )
 from peewee import DoesNotExist
-from werkzeug.utils import secure_filename
 
 from frigate.const import EXPORT_DIR
 from frigate.models import Export, Recordings
@@ -48,9 +47,9 @@ def export_recording(camera_name: str, start_time, end_time):
 
     json: dict[str, any] = request.get_json(silent=True) or {}
     playback_factor = json.get("playback", "realtime")
-    name: Optional[str] = json.get("name")
+    friendly_name: Optional[str] = json.get("name")
 
-    if len(name or "") > 256:
+    if len(friendly_name or "") > 256:
         return make_response(
             jsonify({"success": False, "message": "File name is too long."}),
             401,
@@ -78,7 +77,7 @@ def export_recording(camera_name: str, start_time, end_time):
     exporter = RecordingExporter(
         current_app.frigate_config,
         camera_name,
-        secure_filename(name) if name else None,
+        friendly_name,
         int(start_time),
         int(end_time),
         (

frigate/api/media.py

@@ -546,6 +546,11 @@ def vod_ts(camera_name, start_ts, end_ts):
         if recording.end_time > end_ts:
             duration -= int((recording.end_time - end_ts) * 1000)
 
+            if duration == 0:
+                # this means the segment starts right at the end of the requested time range
+                # and it does not need to be included
+                continue
+
         if 0 < duration < max_duration_ms:
             clip["keyFrameDurations"] = [duration]
             clips.append(clip)
@@ -554,7 +559,9 @@ def vod_ts(camera_name, start_ts, end_ts):
             logger.warning(f"Recording clip is missing or empty: {recording.path}")
 
     if not clips:
-        logger.error("No recordings found for the requested time range")
+        logger.error(
+            f"No recordings found for {camera_name} during the requested time range"
+        )
         return make_response(
             jsonify(
                 {
@@ -637,7 +644,7 @@ def vod_event(id):
         # If the recordings are not found and the event started more than 5 minutes ago, set has_clip to false
         if (
             event.start_time < datetime.now().timestamp() - 300
-            and type(vod_response) == tuple
+            and type(vod_response) is tuple
             and len(vod_response) == 2
             and vod_response[1] == 404
         ):

frigate/api/review.py

@@ -475,7 +475,7 @@ def motion_activity():
         logger.warning("No motion data found for the requested time range")
         return jsonify([])
 
-    df = df.astype(dtype={"motion": "float16"})
+    df = df.astype(dtype={"motion": "float32"})
 
     # set date as datetime index
     df["start_time"] = pd.to_datetime(df["start_time"], unit="s")
@@ -497,11 +497,13 @@ def motion_activity():
 
     for i in range(0, length, chunk):
         part = df.iloc[i : i + chunk]
-        df.iloc[i : i + chunk, 0] = (
-            (part["motion"] - part["motion"].min())
-            / (part["motion"].max() - part["motion"].min())
-            * 100
-        ).fillna(0.0)
+        min_val, max_val = part["motion"].min(), part["motion"].max()
+        if min_val != max_val:
+            df.iloc[i : i + chunk, 0] = (
+                part["motion"].sub(min_val).div(max_val - min_val).mul(100).fillna(0)
+            )
+        else:
+            df.iloc[i : i + chunk, 0] = 0.0
 
     # change types for output
     df.index = df.index.astype(int) // (10**9)

frigate/comms/detections_updater.py

@@ -68,7 +68,7 @@ class DetectionPublisher:
     def send_data(self, payload: any) -> None:
         """Publish detection."""
         self.socket.send_string(self.topic.value, flags=zmq.SNDMORE)
-        self.socket.send_pyobj(payload)
+        self.socket.send_json(payload)
 
     def stop(self) -> None:
         self.socket.close()
@@ -91,7 +91,7 @@ class DetectionSubscriber:
 
             if has_update:
                 topic = DetectionTypeEnum[self.socket.recv_string(flags=zmq.NOBLOCK)]
-                return (topic, self.socket.recv_pyobj())
+                return (topic, self.socket.recv_json())
         except zmq.ZMQError:
             pass
 

frigate/comms/dispatcher.py

@@ -129,7 +129,20 @@ class Dispatcher:
         elif topic == UPDATE_CAMERA_ACTIVITY:
             self.camera_activity = payload
         elif topic == "onConnect":
-            self.publish("camera_activity", json.dumps(self.camera_activity))
+            camera_status = self.camera_activity.copy()
+
+            for camera in camera_status.keys():
+                camera_status[camera]["config"] = {
+                    "detect": self.config.cameras[camera].detect.enabled,
+                    "snapshots": self.config.cameras[camera].snapshots.enabled,
+                    "record": self.config.cameras[camera].record.enabled,
+                    "audio": self.config.cameras[camera].audio.enabled,
+                    "autotracking": self.config.cameras[
+                        camera
+                    ].onvif.autotracking.enabled,
+                }
+
+            self.publish("camera_activity", json.dumps(camera_status))
         else:
             self.publish(topic, payload, retain=False)
 

frigate/comms/events_updater.py

@@ -20,7 +20,7 @@ class EventUpdatePublisher:
         self, payload: tuple[EventTypeEnum, EventStateEnum, str, dict[str, any]]
     ) -> None:
         """There is no communication back to the processes."""
-        self.socket.send_pyobj(payload)
+        self.socket.send_json(payload)
 
     def stop(self) -> None:
         self.socket.close()
@@ -43,7 +43,7 @@ class EventUpdateSubscriber:
             has_update, _, _ = zmq.select([self.socket], [], [], timeout)
 
             if has_update:
-                return self.socket.recv_pyobj()
+                return self.socket.recv_json()
         except zmq.ZMQError:
             pass
 
@@ -66,7 +66,7 @@ class EventEndPublisher:
         self, payload: tuple[EventTypeEnum, EventStateEnum, str, dict[str, any]]
     ) -> None:
         """There is no communication back to the processes."""
-        self.socket.send_pyobj(payload)
+        self.socket.send_json(payload)
 
     def stop(self) -> None:
         self.socket.close()
@@ -89,7 +89,7 @@ class EventEndSubscriber:
             has_update, _, _ = zmq.select([self.socket], [], [], timeout)
 
             if has_update:
-                return self.socket.recv_pyobj()
+                return self.socket.recv_json()
         except zmq.ZMQError:
             pass
 

frigate/comms/inter_process.py

@@ -37,14 +37,14 @@ class InterProcessCommunicator(Communicator):
                     break
 
                 try:
-                    (topic, value) = self.socket.recv_pyobj(flags=zmq.NOBLOCK)
+                    (topic, value) = self.socket.recv_json(flags=zmq.NOBLOCK)
 
                     response = self._dispatcher(topic, value)
 
                     if response is not None:
-                        self.socket.send_pyobj(response)
+                        self.socket.send_json(response)
                     else:
-                        self.socket.send_pyobj([])
+                        self.socket.send_json([])
                 except zmq.ZMQError:
                     break
 
@@ -65,8 +65,8 @@ class InterProcessRequestor:
 
     def send_data(self, topic: str, data: any) -> any:
         """Sends data and then waits for reply."""
-        self.socket.send_pyobj((topic, data))
-        return self.socket.recv_pyobj()
+        self.socket.send_json((topic, data))
+        return self.socket.recv_json()
 
     def stop(self) -> None:
         self.socket.close()

frigate/config.py

@@ -7,7 +7,6 @@ from enum import Enum
 from pathlib import Path
 from typing import Any, Dict, List, Optional, Tuple, Union
 
-import matplotlib.pyplot as plt
 import numpy as np
 from pydantic import (
     BaseModel,
@@ -26,6 +25,7 @@ from frigate.const import (
     CACHE_DIR,
     CACHE_SEGMENT_FORMAT,
     DEFAULT_DB_PATH,
+    FREQUENCY_STATS_POINTS,
     MAX_PRE_CAPTURE,
     REGEX_CAMERA_NAME,
     YAML_EXT,
@@ -42,6 +42,7 @@ from frigate.plus import PlusApi
 from frigate.util.builtin import (
     deep_merge,
     escape_special_characters,
+    generate_color_palette,
     get_ffmpeg_arg_list,
     load_config_with_no_duplicates,
 )
@@ -61,9 +62,9 @@ FRIGATE_ENV_VARS = {k: v for k, v in os.environ.items() if k.startswith("FRIGATE
 if os.path.isdir("/run/secrets") and os.access("/run/secrets", os.R_OK):
     for secret_file in os.listdir("/run/secrets"):
         if secret_file.startswith("FRIGATE_"):
-            FRIGATE_ENV_VARS[secret_file] = Path(
-                os.path.join("/run/secrets", secret_file)
-            ).read_text()
+            FRIGATE_ENV_VARS[secret_file] = (
+                Path(os.path.join("/run/secrets", secret_file)).read_text().strip()
+            )
 
 DEFAULT_TRACKED_OBJECTS = ["person"]
 DEFAULT_ALERT_OBJECTS = ["person", "car"]
@@ -116,7 +117,7 @@ class UIConfig(FrigateBaseModel):
 
 
 class TlsConfig(FrigateBaseModel):
-    enabled: bool = Field(default=True, title="Enable TLS for port 8080")
+    enabled: bool = Field(default=True, title="Enable TLS for port 8971")
 
 
 class HeaderMappingConfig(FrigateBaseModel):
@@ -193,7 +194,9 @@ class MqttConfig(FrigateBaseModel):
     port: int = Field(default=1883, title="MQTT Port")
     topic_prefix: str = Field(default="frigate", title="MQTT Topic Prefix")
     client_id: str = Field(default="frigate", title="MQTT Client ID")
-    stats_interval: int = Field(default=60, title="MQTT Camera Stats Interval")
+    stats_interval: int = Field(
+        default=60, ge=FREQUENCY_STATS_POINTS, title="MQTT Camera Stats Interval"
+    )
     user: Optional[str] = Field(None, title="MQTT Username")
     password: Optional[str] = Field(None, title="MQTT Password", validate_default=True)
     tls_ca_certs: Optional[str] = Field(None, title="MQTT TLS CA Certificates")
@@ -276,6 +279,10 @@ class OnvifConfig(FrigateBaseModel):
         default_factory=PtzAutotrackConfig,
         title="PTZ auto tracking config.",
     )
+    ignore_time_mismatch: bool = Field(
+        default=False,
+        title="Onvif Ignore Time Synchronization Mismatch Between Camera and Server",
+    )
 
 
 class RetainModeEnum(str, Enum):
@@ -1030,10 +1037,11 @@ class CameraConfig(FrigateBaseModel):
     def __init__(self, **config):
         # Set zone colors
         if "zones" in config:
-            colors = plt.cm.get_cmap("tab10", len(config["zones"]))
+            colors = generate_color_palette(len(config["zones"]))
+
             config["zones"] = {
-                name: {**z, "color": tuple(round(255 * c) for c in colors(idx)[:3])}
-                for idx, (name, z) in enumerate(config["zones"].items())
+                name: {**z, "color": color}
+                for (name, z), color in zip(config["zones"].items(), colors)
             }
 
         # add roles to the input if there is only one

frigate/const.py

@@ -82,6 +82,10 @@ UPSERT_REVIEW_SEGMENT = "upsert_review_segment"
 CLEAR_ONGOING_REVIEW_SEGMENTS = "clear_ongoing_review_segments"
 UPDATE_CAMERA_ACTIVITY = "update_camera_activity"
 
+# Stats Values
+
+FREQUENCY_STATS_POINTS = 15
+
 # Autotracking
 
 AUTOTRACKING_MAX_AREA_RATIO = 0.6

frigate/detectors/detector_config.py

@@ -5,13 +5,12 @@ import os
 from enum import Enum
 from typing import Dict, Optional, Tuple
 
-import matplotlib.pyplot as plt
 import requests
 from pydantic import BaseModel, ConfigDict, Field
 from pydantic.fields import PrivateAttr
 
 from frigate.plus import PlusApi
-from frigate.util.builtin import load_labels
+from frigate.util.builtin import generate_color_palette, load_labels
 
 logger = logging.getLogger(__name__)
 
@@ -128,10 +127,9 @@ class ModelConfig(BaseModel):
 
     def create_colormap(self, enabled_labels: set[str]) -> None:
         """Get a list of colors for enabled labels."""
-        cmap = plt.cm.get_cmap("tab10", len(enabled_labels))
+        colors = generate_color_palette(len(enabled_labels))
 
-        for key, val in enumerate(enabled_labels):
-            self._colormap[val] = tuple(int(round(255 * c)) for c in cmap(key)[:3])
+        self._colormap = {label: color for label, color in zip(enabled_labels, colors)}
 
     model_config = ConfigDict(extra="forbid", protected_namespaces=())
 

frigate/detectors/plugins/openvino.py

@@ -1,4 +1,5 @@
 import logging
+import os
 
 import numpy as np
 import openvino as ov
@@ -35,6 +36,10 @@ class OvDetector(DetectionApi):
             )
             detector_config.device = "GPU"
 
+        if not os.path.isfile(detector_config.model.path):
+            logger.error(f"OpenVino model file {detector_config.model.path} not found.")
+            raise FileNotFoundError
+
         self.interpreter = self.ov_core.compile_model(
             model=detector_config.model.path, device_name=detector_config.device
         )

frigate/detectors/plugins/rknn.py

@@ -23,7 +23,6 @@ model_chache_dir = "/config/model_cache/rknn_cache/"
 class RknnDetectorConfig(BaseDetectorConfig):
     type: Literal[DETECTOR_KEY]
     num_cores: int = Field(default=0, ge=0, le=3, title="Number of NPU cores to use.")
-    purge_model_cache: bool = Field(default=True)
 
 
 class Rknn(DetectionApi):
@@ -36,7 +35,9 @@ class Rknn(DetectionApi):
         core_mask = 2**config.num_cores - 1
         soc = self.get_soc()
 
-        model_props = self.parse_model_input(config.model.path, soc)
+        model_path = config.model.path or "deci-fp16-yolonas_s"
+
+        model_props = self.parse_model_input(model_path, soc)
 
         if model_props["preset"]:
             config.model.model_type = model_props["model_type"]

frigate/events/audio.py

@@ -209,7 +209,9 @@ class AudioEventMaintainer(threading.Thread):
             audio_detections = []
 
             for label, score, _ in model_detections:
-                logger.debug(f"Heard {label} with a score of {score}")
+                logger.debug(
+                    f"{self.config.name} heard {label} with a score of {score}"
+                )
 
                 if label not in self.config.audio.listen:
                     continue

frigate/ffmpeg_presets.py

@@ -214,8 +214,7 @@ def parse_preset_hardware_acceleration_encode(
 
 
 PRESETS_INPUT = {
-    "preset-http-jpeg-generic": _user_agent_args
-    + [
+    "preset-http-jpeg-generic": [
         "-r",
         "{}",
         "-stream_loop",

frigate/output/birdseye.py

@@ -395,7 +395,8 @@ class BirdsEyeFrameManager:
             [
                 cam
                 for cam, cam_data in self.cameras.items()
-                if cam_data["last_active_frame"] > 0
+                if self.config.cameras[cam].birdseye.enabled
+                and cam_data["last_active_frame"] > 0
                 and cam_data["current_frame"] - cam_data["last_active_frame"]
                 < self.inactivity_threshold
             ]

frigate/output/preview.py

@@ -77,8 +77,8 @@ class FFMpegConverter(threading.Thread):
         # write a PREVIEW at fps and 1 key frame per clip
         self.ffmpeg_cmd = parse_preset_hardware_acceleration_encode(
             config.ffmpeg.hwaccel_args,
-            input="-f concat -y -protocol_whitelist pipe,file -safe 0 -i /dev/stdin",
-            output=f"-g {PREVIEW_KEYFRAME_INTERVAL} -bf 0 -b:v {PREVIEW_QUALITY_BIT_RATES[self.config.record.preview.quality]} {FPS_VFR_PARAM} -movflags +faststart -pix_fmt yuv420p {self.path}",
+            input="-f concat -y -protocol_whitelist pipe,file -safe 0 -threads 1 -i /dev/stdin",
+            output=f"-threads 1 -g {PREVIEW_KEYFRAME_INTERVAL} -bf 0 -b:v {PREVIEW_QUALITY_BIT_RATES[self.config.record.preview.quality]} {FPS_VFR_PARAM} -movflags +faststart -pix_fmt yuv420p {self.path}",
             type=EncodeTypeEnum.preview,
         )
 
@@ -129,12 +129,12 @@ class FFMpegConverter(threading.Thread):
             self.requestor.send_data(
                 INSERT_PREVIEW,
                 {
-                    Previews.id: f"{self.config.name}_{end}",
-                    Previews.camera: self.config.name,
-                    Previews.path: self.path,
-                    Previews.start_time: start,
-                    Previews.end_time: end,
-                    Previews.duration: end - start,
+                    Previews.id.name: f"{self.config.name}_{end}",
+                    Previews.camera.name: self.config.name,
+                    Previews.path.name: self.path,
+                    Previews.start_time.name: start,
+                    Previews.end_time.name: end,
+                    Previews.duration.name: end - start,
                 },
             )
         else:

frigate/plus.py

@@ -42,7 +42,9 @@ class PlusApi:
             and os.access("/run/secrets", os.R_OK)
             and PLUS_ENV_VAR in os.listdir("/run/secrets")
         ):
-            self.key = Path(os.path.join("/run/secrets", PLUS_ENV_VAR)).read_text()
+            self.key = (
+                Path(os.path.join("/run/secrets", PLUS_ENV_VAR)).read_text().strip()
+            )
         # check for the addon options file
         elif os.path.isfile("/data/options.json"):
             with open("/data/options.json") as f:

frigate/ptz/onvif.py

@@ -54,6 +54,7 @@ class OnvifController:
                             wsdl_dir=str(
                                 Path(find_spec("onvif").origin).parent / "wsdl"
                             ).replace("dist-packages/onvif", "site-packages"),
+                            adjust_time=cam.onvif.ignore_time_mismatch,
                         ),
                         "init": False,
                         "active": False,
@@ -82,6 +83,7 @@ class OnvifController:
 
         try:
             profiles = media.GetProfiles()
+            logger.debug(f"Onvif profiles for {camera_name}: {profiles}")
         except (ONVIFError, Fault, TransportError) as e:
             logger.error(
                 f"Unable to get Onvif media profiles for camera: {camera_name}: {e}"
@@ -92,11 +94,15 @@ class OnvifController:
         for key, onvif_profile in enumerate(profiles):
             if (
                 onvif_profile.VideoEncoderConfiguration
-                and onvif_profile.VideoEncoderConfiguration.Encoding == "H264"
                 and onvif_profile.PTZConfiguration
-                and onvif_profile.PTZConfiguration.DefaultContinuousPanTiltVelocitySpace
-                is not None
+                and (
+                    onvif_profile.PTZConfiguration.DefaultContinuousPanTiltVelocitySpace
+                    is not None
+                    or onvif_profile.PTZConfiguration.DefaultContinuousZoomVelocitySpace
+                    is not None
+                )
             ):
+                # use the first profile that has a valid ptz configuration
                 profile = onvif_profile
                 logger.debug(f"Selected Onvif profile for {camera_name}: {profile}")
                 break

frigate/record/maintainer.py

@@ -419,19 +419,19 @@ class RecordingMaintainer(threading.Thread):
                 )
 
                 return {
-                    Recordings.id: f"{start_time.timestamp()}-{rand_id}",
-                    Recordings.camera: camera,
-                    Recordings.path: file_path,
-                    Recordings.start_time: start_time.timestamp(),
-                    Recordings.end_time: end_time.timestamp(),
-                    Recordings.duration: duration,
-                    Recordings.motion: segment_info.motion_count,
+                    Recordings.id.name: f"{start_time.timestamp()}-{rand_id}",
+                    Recordings.camera.name: camera,
+                    Recordings.path.name: file_path,
+                    Recordings.start_time.name: start_time.timestamp(),
+                    Recordings.end_time.name: end_time.timestamp(),
+                    Recordings.duration.name: duration,
+                    Recordings.motion.name: segment_info.motion_count,
                     # TODO: update this to store list of active objects at some point
-                    Recordings.objects: segment_info.active_object_count
+                    Recordings.objects.name: segment_info.active_object_count
                     + (1 if manual_event else 0),
-                    Recordings.regions: segment_info.region_count,
-                    Recordings.dBFS: segment_info.average_dBFS,
-                    Recordings.segment_size: segment_size,
+                    Recordings.regions.name: segment_info.region_count,
+                    Recordings.dBFS.name: segment_info.average_dBFS,
+                    Recordings.segment_size.name: segment_size,
                 }
         except Exception as e:
             logger.error(f"Unable to store recording segment {cache_path}")

frigate/review/maintainer.py

@@ -53,7 +53,7 @@ class PendingReviewSegment:
         severity: SeverityEnum,
         detections: dict[str, str],
         sub_labels: set[str],
-        zones: set[str],
+        zones: list[str],
         audio: set[str],
     ):
         rand_id = "".join(random.choices(string.ascii_lowercase + string.digits, k=6))
@@ -127,17 +127,17 @@ class PendingReviewSegment:
 
     def get_data(self, ended: bool) -> dict:
         return {
-            ReviewSegment.id: self.id,
-            ReviewSegment.camera: self.camera,
-            ReviewSegment.start_time: self.start_time,
-            ReviewSegment.end_time: self.last_update if ended else None,
-            ReviewSegment.severity: self.severity.value,
-            ReviewSegment.thumb_path: self.frame_path,
-            ReviewSegment.data: {
+            ReviewSegment.id.name: self.id,
+            ReviewSegment.camera.name: self.camera,
+            ReviewSegment.start_time.name: self.start_time,
+            ReviewSegment.end_time.name: self.last_update if ended else None,
+            ReviewSegment.severity.name: self.severity.value,
+            ReviewSegment.thumb_path.name: self.frame_path,
+            ReviewSegment.data.name: {
                 "detections": list(set(self.detections.keys())),
                 "objects": list(set(self.detections.values())),
                 "sub_labels": list(self.sub_labels),
-                "zones": list(self.zones),
+                "zones": self.zones,
                 "audio": list(self.audio),
             },
         }.copy()
@@ -176,7 +176,7 @@ class ReviewSegmentMaintainer(threading.Thread):
         """New segment."""
         new_data = segment.get_data(ended=False)
         self.requestor.send_data(UPSERT_REVIEW_SEGMENT, new_data)
-        start_data = {k.name: v for k, v in new_data.items()}
+        start_data = {k: v for k, v in new_data.items()}
         self.requestor.send_data(
             "reviews",
             json.dumps(
@@ -207,8 +207,8 @@ class ReviewSegmentMaintainer(threading.Thread):
             json.dumps(
                 {
                     "type": "update",
-                    "before": {k.name: v for k, v in prev_data.items()},
-                    "after": {k.name: v for k, v in new_data.items()},
+                    "before": {k: v for k, v in prev_data.items()},
+                    "after": {k: v for k, v in new_data.items()},
                 }
             ),
         )
@@ -226,8 +226,8 @@ class ReviewSegmentMaintainer(threading.Thread):
             json.dumps(
                 {
                     "type": "end",
-                    "before": {k.name: v for k, v in prev_data.items()},
-                    "after": {k.name: v for k, v in final_data.items()},
+                    "before": {k: v for k, v in prev_data.items()},
+                    "after": {k: v for k, v in final_data.items()},
                 }
             ),
         )
@@ -279,7 +279,9 @@ class ReviewSegmentMaintainer(threading.Thread):
 
                 # keep zones up to date
                 if len(object["current_zones"]) > 0:
-                    segment.zones.update(object["current_zones"])
+                    for zone in object["current_zones"]:
+                        if zone not in segment.zones:
+                            segment.zones.append(zone)
 
             if len(active_objects) > segment.frame_active_count:
                 should_update = True
@@ -329,7 +331,7 @@ class ReviewSegmentMaintainer(threading.Thread):
         if len(active_objects) > 0:
             detections: dict[str, str] = {}
             sub_labels = set()
-            zones: set = set()
+            zones: list[str] = []
             severity = None
 
             for object in active_objects:
@@ -379,7 +381,9 @@ class ReviewSegmentMaintainer(threading.Thread):
                 ):
                     severity = SeverityEnum.detection
 
-                zones.update(object["current_zones"])
+                for zone in object["current_zones"]:
+                    if zone not in zones:
+                        zones.append(zone)
 
             if severity:
                 self.active_review_segments[camera] = PendingReviewSegment(
@@ -499,8 +503,15 @@ class ReviewSegmentMaintainer(threading.Thread):
                         # temporarily make it so this event can not end
                         current_segment.last_update = sys.maxsize
                     elif manual_info["state"] == ManualEventState.end:
-                        self.indefinite_events[camera].pop(manual_info["event_id"])
-                        current_segment.last_update = manual_info["end_time"]
+                        event_id = manual_info["event_id"]
+
+                        if event_id in self.indefinite_events[camera]:
+                            self.indefinite_events[camera].pop(event_id)
+                            current_segment.last_update = manual_info["end_time"]
+                        else:
+                            logger.error(
+                                f"Event with ID {event_id} has a set duration and can not be ended manually."
+                            )
             else:
                 if topic == DetectionTypeEnum.video:
                     self.check_if_new_segment(
@@ -534,7 +545,7 @@ class ReviewSegmentMaintainer(threading.Thread):
                             severity,
                             {},
                             set(),
-                            set(),
+                            [],
                             detections,
                         )
                 elif topic == DetectionTypeEnum.api:
@@ -544,7 +555,7 @@ class ReviewSegmentMaintainer(threading.Thread):
                         SeverityEnum.alert,
                         {manual_info["event_id"]: manual_info["label"]},
                         set(),
-                        set(),
+                        [],
                         set(),
                     )
 

frigate/stats/emitter.py

@@ -10,6 +10,7 @@ from typing import Optional
 
 from frigate.comms.inter_process import InterProcessRequestor
 from frigate.config import FrigateConfig
+from frigate.const import FREQUENCY_STATS_POINTS
 from frigate.stats.util import stats_snapshot
 from frigate.types import StatsTrackingTypes
 
@@ -17,7 +18,6 @@ logger = logging.getLogger(__name__)
 
 
 MAX_STATS_POINTS = 80
-FREQUENCY_STATS_POINTS = 15
 
 
 class StatsEmitter(threading.Thread):

frigate/stats/util.py

@@ -4,6 +4,7 @@ import asyncio
 import os
 import shutil
 import time
+from json import JSONDecodeError
 from typing import Any, Optional
 
 import psutil
@@ -35,7 +36,7 @@ def get_latest_version(config: FrigateConfig) -> str:
             "https://api.github.com/repos/blakeblackshear/frigate/releases/latest",
             timeout=10,
         )
-    except RequestException:
+    except (RequestException, JSONDecodeError):
         return "unknown"
 
     response = request.json()

frigate/util/builtin.py

@@ -349,3 +349,39 @@ def empty_and_close_queue(q: mp.Queue):
             q.close()
             q.join_thread()
             return
+
+
+def generate_color_palette(n):
+    # mimic matplotlib's color scheme
+    base_colors = [
+        (31, 119, 180),  # blue
+        (255, 127, 14),  # orange
+        (44, 160, 44),  # green
+        (214, 39, 40),  # red
+        (148, 103, 189),  # purple
+        (140, 86, 75),  # brown
+        (227, 119, 194),  # pink
+        (127, 127, 127),  # gray
+        (188, 189, 34),  # olive
+        (23, 190, 207),  # cyan
+    ]
+
+    def interpolate(color1, color2, factor):
+        return tuple(int(c1 + (c2 - c1) * factor) for c1, c2 in zip(color1, color2))
+
+    if n <= len(base_colors):
+        return base_colors[:n]
+
+    colors = base_colors.copy()
+    step = 1 / (n - len(base_colors) + 1)
+    extra_colors_needed = n - len(base_colors)
+
+    # interpolate between the base colors to generate more if needed
+    for i in range(extra_colors_needed):
+        index = i % (len(base_colors) - 1)
+        factor = (i + 1) * step
+        color1 = base_colors[index]
+        color2 = base_colors[index + 1]
+        colors.append(interpolate(color1, color2, factor))
+
+    return colors

frigate/util/config.py

@@ -87,15 +87,16 @@ def migrate_014(config: dict[str, dict[str, any]]) -> dict[str, dict[str, any]]:
         if not new_config["record"]:
             del new_config["record"]
 
-        if new_config.get("ui"):
-            if new_config["ui"].get("use_experimental"):
-                del new_config["ui"]["experimental"]
+    # Remove UI fields
+    if new_config.get("ui"):
+        if new_config["ui"].get("use_experimental"):
+            del new_config["ui"]["use_experimental"]
 
-            if new_config["ui"].get("live_mode"):
-                del new_config["ui"]["live_mode"]
+        if new_config["ui"].get("live_mode"):
+            del new_config["ui"]["live_mode"]
 
-            if not new_config["ui"]:
-                del new_config["ui"]
+        if not new_config["ui"]:
+            del new_config["ui"]
 
     # remove rtmp
     if new_config.get("ffmpeg", {}).get("output_args", {}).get("rtmp"):

web/.node-version

@@ -0,0 +1 @@
+20

web/package.json

@@ -14,40 +14,41 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@cycjimmy/jsmpeg-player": "^6.0.5",
-    "@hookform/resolvers": "^3.4.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "apexcharts": "^3.49.1",
-    "axios": "^1.7.2",
+    "@cycjimmy/jsmpeg-player": "^6.1.1",
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "apexcharts": "^3.52.0",
+    "axios": "^1.7.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
-    "hls.js": "^1.5.8",
+    "hls.js": "^1.5.14",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",
-    "konva": "^9.3.9",
+    "konva": "^9.3.14",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.390.0",
-    "monaco-yaml": "^5.1.1",
+    "lucide-react": "^0.407.0",
+    "monaco-yaml": "^5.2.2",
     "next-themes": "^0.3.0",
     "nosleep.js": "^0.12.0",
     "react": "^18.3.1",
@@ -56,22 +57,22 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-grid-layout": "^1.4.4",
-    "react-hook-form": "^7.51.5",
+    "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
     "react-konva": "^18.2.10",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.26.0",
     "react-swipeable": "^7.0.1",
     "react-tracked": "^2.0.0",
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.8.1",
-    "react-zoom-pan-pinch": "^3.4.4",
+    "react-zoom-pan-pinch": "3.4.4",
     "recoil": "^0.7.7",
     "scroll-into-view-if-needed": "^3.1.0",
-    "sonner": "^1.4.41",
+    "sonner": "^1.5.0",
     "sort-by": "^1.2.0",
-    "strftime": "^0.10.2",
+    "strftime": "^0.10.3",
     "swr": "^2.2.5",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1",
@@ -80,9 +81,9 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@types/lodash": "^4.17.4",
-    "@types/node": "^20.12.12",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-grid-layout": "^1.3.5",
@@ -92,25 +93,25 @@
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitest/coverage-v8": "^1.6.0",
-    "autoprefixer": "^10.4.19",
+    "@vitest/coverage-v8": "^2.0.5",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-vitest-globals": "^1.5.0",
     "fake-indexeddb": "^6.0.0",
     "jest-websocket-mock": "^2.5.0",
-    "jsdom": "^24.0.0",
-    "msw": "^2.3.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.1",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vitest": "^1.6.0"
+    "jsdom": "^24.1.1",
+    "msw": "^2.3.5",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   }
 }

web/src/App.tsx

@@ -10,6 +10,8 @@ import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
+import { ADMIN_USERS } from "@/types/user";
+import useSWR from "swr";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -22,6 +24,7 @@ const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
 const Logs = lazy(() => import("@/pages/Logs"));
 
 function App() {
+  const { data: profile } = useSWR("profile");
   return (
     <Providers>
       <BrowserRouter basename={window.baseUrl}>
@@ -41,15 +44,19 @@ function App() {
             >
               <Suspense>
                 <Routes>
-                  <Route path="/" element={<Live />} />
+                  <Route index element={<Live />} />
                   <Route path="/events" element={<Redirect to="/review" />} />
                   <Route path="/review" element={<Events />} />
                   <Route path="/export" element={<Exports />} />
                   <Route path="/plus" element={<SubmitPlus />} />
                   <Route path="/system" element={<System />} />
-                  <Route path="/settings" element={<Settings />} />
-                  <Route path="/config" element={<ConfigEditor />} />
-                  <Route path="/logs" element={<Logs />} />
+                  {ADMIN_USERS.includes(profile?.username) && (
+                    <>
+                      <Route path="/settings" element={<Settings />} />
+                      <Route path="/config" element={<ConfigEditor />} />
+                      <Route path="/logs" element={<Logs />} />
+                    </>
+                  )}
                   <Route path="/playground" element={<UIPlayground />} />
                   <Route path="*" element={<Redirect to="/" />} />
                 </Routes>

web/src/api/ws.tsx

@@ -1,7 +1,6 @@
 import { baseUrl } from "./baseUrl";
 import { useCallback, useEffect, useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
-import { FrigateConfig } from "@/types/frigateConfig";
 import {
   FrigateCameraState,
   FrigateEvent,
@@ -9,8 +8,8 @@ import {
   ToggleableSetting,
 } from "@/types/ws";
 import { FrigateStats } from "@/types/stats";
-import useSWR from "swr";
 import { createContainer } from "react-tracked";
+import useDeepMemo from "@/hooks/use-deep-memo";
 
 type Update = {
   topic: string;
@@ -25,40 +24,50 @@ type WsState = {
 type useValueReturn = [WsState, (update: Update) => void];
 
 function useValue(): useValueReturn {
-  // basic config
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
   const wsUrl = `${baseUrl.replace(/^http/, "ws")}ws`;
 
   // main state
+
+  const [hasCameraState, setHasCameraState] = useState(false);
   const [wsState, setWsState] = useState<WsState>({});
 
   useEffect(() => {
-    if (!config) {
+    if (hasCameraState) {
+      return;
+    }
+
+    const activityValue: string = wsState["camera_activity"] as string;
+
+    if (!activityValue) {
+      return;
+    }
+
+    const cameraActivity: { [key: string]: object } = JSON.parse(activityValue);
+
+    if (!cameraActivity) {
       return;
     }
 
     const cameraStates: WsState = {};
 
-    Object.keys(config.cameras).forEach((camera) => {
-      const { name, record, detect, snapshots, audio, onvif } =
-        config.cameras[camera];
-      cameraStates[`${name}/recordings/state`] = record.enabled ? "ON" : "OFF";
-      cameraStates[`${name}/detect/state`] = detect.enabled ? "ON" : "OFF";
-      cameraStates[`${name}/snapshots/state`] = snapshots.enabled
-        ? "ON"
-        : "OFF";
-      cameraStates[`${name}/audio/state`] = audio.enabled ? "ON" : "OFF";
-      cameraStates[`${name}/ptz_autotracker/state`] = onvif.autotracking.enabled
+    Object.entries(cameraActivity).forEach(([name, state]) => {
+      const { record, detect, snapshots, audio, autotracking } =
+        // @ts-expect-error we know this is correct
+        state["config"];
+      cameraStates[`${name}/recordings/state`] = record ? "ON" : "OFF";
+      cameraStates[`${name}/detect/state`] = detect ? "ON" : "OFF";
+      cameraStates[`${name}/snapshots/state`] = snapshots ? "ON" : "OFF";
+      cameraStates[`${name}/audio/state`] = audio ? "ON" : "OFF";
+      cameraStates[`${name}/ptz_autotracker/state`] = autotracking
         ? "ON"
         : "OFF";
     });
 
     setWsState({ ...wsState, ...cameraStates });
+    setHasCameraState(true);
     // we only want this to run initially when the config is loaded
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config]);
+  }, [wsState]);
 
   // ws handler
   const { sendJsonMessage, readyState } = useWebSocket(wsUrl, {
@@ -206,18 +215,18 @@ export function useFrigateEvents(): { payload: FrigateEvent } {
   return { payload: JSON.parse(payload as string) };
 }
 
-export function useFrigateReviews(): { payload: FrigateReview } {
+export function useFrigateReviews(): FrigateReview {
   const {
     value: { payload },
   } = useWs("reviews", "");
-  return { payload: JSON.parse(payload as string) };
+  return useDeepMemo(JSON.parse(payload as string));
 }
 
-export function useFrigateStats(): { payload: FrigateStats } {
+export function useFrigateStats(): FrigateStats {
   const {
     value: { payload },
   } = useWs("stats", "");
-  return { payload: JSON.parse(payload as string) };
+  return useDeepMemo(JSON.parse(payload as string));
 }
 
 export function useInitialCameraState(
@@ -230,7 +239,8 @@ export function useInitialCameraState(
     value: { payload },
     send: sendCommand,
   } = useWs("camera_activity", "onConnect");
-  const data = JSON.parse(payload as string);
+
+  const data = useDeepMemo(JSON.parse(payload as string));
 
   useEffect(() => {
     let listener = undefined;

web/src/components/auth/AuthForm.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { baseUrl } from "../../api/baseUrl";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -43,7 +44,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
     setIsLoading(true);
     try {
       await axios.post(
-        "/api/login",
+        "/login",
         {
           user: values.user,
           password: values.password,
@@ -54,7 +55,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
           },
         },
       );
-      window.location.href = "/";
+      window.location.href = baseUrl;
     } catch (error) {
       if (axios.isAxiosError(error)) {
         const err = error as AxiosError;

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import CameraImage from "./CameraImage";
 
 type AutoUpdatingCameraImageProps = {
@@ -22,7 +22,7 @@ export default function AutoUpdatingCameraImage({
 }: AutoUpdatingCameraImageProps) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState<string>("0");
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (reloadInterval == -1) {
@@ -32,9 +32,9 @@ export default function AutoUpdatingCameraImage({
     setKey(Date.now());
 
     return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-        setTimeoutId(undefined);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
     // we know that these deps are correct
@@ -46,19 +46,21 @@ export default function AutoUpdatingCameraImage({
       return;
     }
 
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
     const loadTime = Date.now() - key;
 
     if (showFps) {
       setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1));
     }
 
-    setTimeoutId(
-      setTimeout(
-        () => {
-          setKey(Date.now());
-        },
-        loadTime > reloadInterval ? 1 : reloadInterval,
-      ),
+    timeoutRef.current = setTimeout(
+      () => {
+        setKey(Date.now());
+      },
+      loadTime > reloadInterval ? 1 : reloadInterval,
     );
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps

web/src/components/camera/CameraImage.tsx

@@ -4,6 +4,7 @@ import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { isDesktop } from "react-device-detect";
+import { cn } from "@/lib/utils";
 
 type CameraImageProps = {
   className?: string;
@@ -20,13 +21,12 @@ export default function CameraImage({
 }: CameraImageProps) {
   const { data: config } = useSWR("config");
   const apiHost = useApiHost();
-  const [hasLoaded, setHasLoaded] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
   const { name } = config ? config.cameras[camera] : "";
   const enabled = config ? config.cameras[camera].enabled : "True";
-  const [isPortraitImage, setIsPortraitImage] = useState(false);
 
   const [{ width: containerWidth, height: containerHeight }] =
     useResizeObserver(containerRef);
@@ -42,43 +42,64 @@ export default function CameraImage({
     );
   }, [config, camera, containerHeight]);
 
+  const [isPortraitImage, setIsPortraitImage] = useState(false);
+
+  useEffect(() => {
+    setImageLoaded(false);
+    setIsPortraitImage(false);
+  }, [camera]);
+
   useEffect(() => {
     if (!config || !imgRef.current) {
       return;
     }
 
-    imgRef.current.src = `${apiHost}api/${name}/latest.webp?h=${requestHeight}${
+    const newSrc = `${apiHost}api/${name}/latest.webp?h=${requestHeight}${
       searchParams ? `&${searchParams}` : ""
     }`;
-  }, [apiHost, name, imgRef, searchParams, requestHeight, config]);
+
+    if (imgRef.current.src !== newSrc) {
+      imgRef.current.src = newSrc;
+    }
+  }, [apiHost, name, searchParams, requestHeight, config, camera]);
+
+  const handleImageLoad = () => {
+    if (imgRef.current && containerWidth && containerHeight) {
+      const { naturalWidth, naturalHeight } = imgRef.current;
+      setIsPortraitImage(
+        naturalWidth / naturalHeight < containerWidth / containerHeight,
+      );
+    }
+
+    setImageLoaded(true);
+
+    if (onload) {
+      onload();
+    }
+  };
 
   return (
     <div className={className} ref={containerRef}>
       {enabled ? (
         <img
           ref={imgRef}
-          className={`object-contain ${isPortraitImage ? "h-full w-auto" : "h-auto w-full"} rounded-lg md:rounded-2xl`}
-          onLoad={() => {
-            setHasLoaded(true);
-
-            if (imgRef.current) {
-              const { naturalHeight, naturalWidth } = imgRef.current;
-              setIsPortraitImage(
-                naturalWidth / naturalHeight < containerWidth / containerHeight,
-              );
-            }
-
-            if (onload) {
-              onload();
-            }
-          }}
+          className={cn(
+            "object-contain",
+            imageLoaded
+              ? isPortraitImage
+                ? "h-full w-auto"
+                : "h-auto w-full"
+              : "invisible",
+            "rounded-lg md:rounded-2xl",
+          )}
+          onLoad={handleImageLoad}
         />
       ) : (
         <div className="pt-6 text-center">
           Camera is disabled in config, no stream or snapshot available!
         </div>
       )}
-      {!hasLoaded && enabled ? (
+      {!imageLoaded && enabled ? (
         <div className="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center">
           <ActivityIndicator />
         </div>

web/src/components/card/AnimatedEventCard.tsx

@@ -11,16 +11,25 @@ import { VideoPreview } from "../player/PreviewThumbnailPlayer";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { baseUrl } from "@/api/baseUrl";
+import { useApiHost } from "@/api";
+import { isDesktop, isSafari } from "react-device-detect";
+import { usePersistence } from "@/hooks/use-persistence";
+import { Skeleton } from "../ui/skeleton";
+import { Button } from "../ui/button";
+import { FaCircleCheck } from "react-icons/fa6";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
   selectedGroup?: string;
+  updateEvents: () => void;
 };
 export function AnimatedEventCard({
   event,
   selectedGroup,
+  updateEvents,
 }: AnimatedEventCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
+  const apiHost = useApiHost();
 
   const currentHour = useMemo(() => isCurrentHour(event.start_time), [event]);
 
@@ -53,11 +62,17 @@ export function AnimatedEventCard({
     };
   }, [visibilityListener]);
 
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
   // interaction
 
   const navigate = useNavigate();
   const onOpenReview = useCallback(() => {
-    const url = selectedGroup ? `review?group=${selectedGroup}` : "review";
+    const url =
+      selectedGroup && selectedGroup != "default"
+        ? `review?group=${selectedGroup}`
+        : "review";
     navigate(url, {
       state: {
         severity: event.severity,
@@ -73,6 +88,8 @@ export function AnimatedEventCard({
 
   // image behavior
 
+  const [alertVideos] = usePersistence("alertVideos", true);
+
   const aspectRatio = useMemo(() => {
     if (!config || !Object.keys(config.cameras).includes(event.camera)) {
       return 16 / 9;
@@ -90,44 +107,87 @@ export function AnimatedEventCard({
           style={{
             aspectRatio: aspectRatio,
           }}
+          onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
+          onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}
         >
+          {isHovered && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className="absolute right-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                  size="xs"
+                  onClick={async () => {
+                    await axios.post(`reviews/viewed`, { ids: [event.id] });
+                    updateEvents();
+                  }}
+                >
+                  <FaCircleCheck className="size-3 text-white" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Mark as Reviewed</TooltipContent>
+            </Tooltip>
+          )}
           <div
             className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
             onClick={onOpenReview}
           >
-            {previews ? (
-              <VideoPreview
-                relevantPreview={previews[previews.length - 1]}
-                startTime={event.start_time}
-                endTime={event.end_time}
-                loop
-                showProgress={false}
-                setReviewed={() => {}}
-                setIgnoreClick={() => {}}
-                isPlayingBack={() => {}}
-                windowVisible={windowVisible}
+            {!alertVideos ? (
+              <img
+                className="size-full select-none"
+                src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
+                loading={isSafari ? "eager" : "lazy"}
+                onLoad={() => setIsLoaded(true)}
               />
             ) : (
-              <video
-                preload="auto"
-                autoPlay
-                playsInline
-                muted
-                disableRemotePlayback
-                loop
-              >
-                <source
-                  src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
-                  type="video/mp4"
-                />
-              </video>
+              <>
+                {previews ? (
+                  <VideoPreview
+                    relevantPreview={previews[previews.length - 1]}
+                    startTime={event.start_time}
+                    endTime={event.end_time}
+                    loop
+                    showProgress={false}
+                    setReviewed={() => {}}
+                    setIgnoreClick={() => {}}
+                    isPlayingBack={() => {}}
+                    onTimeUpdate={() => {
+                      if (!isLoaded) {
+                        setIsLoaded(true);
+                      }
+                    }}
+                    windowVisible={windowVisible}
+                  />
+                ) : (
+                  <video
+                    preload="auto"
+                    autoPlay
+                    playsInline
+                    muted
+                    disableRemotePlayback
+                    loop
+                    onTimeUpdate={() => {
+                      if (!isLoaded) {
+                        setIsLoaded(true);
+                      }
+                    }}
+                  >
+                    <source
+                      src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
+                      type="video/mp4"
+                    />
+                  </video>
+                )}
+              </>
             )}
           </div>
-          <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
-            <div className="absolute bottom-0 left-1 w-full text-xs text-white">
-              <TimeAgo time={event.start_time * 1000} dense />
+          {isLoaded && (
+            <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
+              <div className="absolute bottom-0 left-1 w-full text-xs text-white">
+                <TimeAgo time={event.start_time * 1000} dense />
+              </div>
             </div>
-          </div>
+          )}
+          {!isLoaded && <Skeleton className="absolute inset-0" />}
         </div>
       </TooltipTrigger>
       <TooltipContent>

web/src/components/card/ExportCard.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaDownload, FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
@@ -44,9 +44,18 @@ export default function ExportCard({
 
   const [editName, setEditName] = useState<{
     original: string;
-    update: string;
+    update?: string;
   }>();
 
+  const submitRename = useCallback(() => {
+    if (editName == undefined) {
+      return;
+    }
+
+    onRename(exportedRecording.id, editName.update ?? "");
+    setEditName(undefined);
+  }, [editName, exportedRecording, onRename, setEditName]);
+
   useKeyboardListener(
     editName != undefined ? ["Enter"] : [],
     (key, modifiers) => {
@@ -55,10 +64,9 @@ export default function ExportCard({
         modifiers.down &&
         !modifiers.repeat &&
         editName &&
-        editName.update.length > 0
+        (editName.update?.length ?? 0) > 0
       ) {
-        onRename(exportedRecording.id, editName.update);
-        setEditName(undefined);
+        submitRename();
       }
     },
   );
@@ -84,7 +92,11 @@ export default function ExportCard({
                 className="mt-3"
                 type="search"
                 placeholder={editName?.original}
-                value={editName?.update}
+                value={
+                  editName?.update == undefined
+                    ? editName?.original
+                    : editName?.update
+                }
                 onChange={(e) =>
                   setEditName({
                     original: editName.original ?? "",
@@ -97,10 +109,7 @@ export default function ExportCard({
                   size="sm"
                   variant="select"
                   disabled={(editName?.update?.length ?? 0) == 0}
-                  onClick={() => {
-                    onRename(exportedRecording.id, editName.update);
-                    setEditName(undefined);
-                  }}
+                  onClick={() => submitRename()}
                 >
                   Save
                 </Button>
@@ -119,13 +128,27 @@ export default function ExportCard({
         onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
         onClick={isDesktop ? undefined : () => setHovered(!hovered)}
       >
-        {hovered && (
+        {exportedRecording.in_progress ? (
+          <ActivityIndicator />
+        ) : (
           <>
-            <div className="absolute inset-0 z-10 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
+            {exportedRecording.thumb_path.length > 0 ? (
+              <img
+                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
+                src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
+                onLoad={() => setLoading(false)}
+              />
+            ) : (
+              <div className="absolute inset-0 rounded-lg bg-secondary md:rounded-2xl" />
+            )}
+          </>
+        )}
+        {hovered && (
+          <div>
+            <div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
             <div className="absolute right-1 top-1 flex items-center gap-2">
               {!exportedRecording.in_progress && (
                 <a
-                  className="z-20"
                   download
                   href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
                 >
@@ -140,7 +163,7 @@ export default function ExportCard({
                   onClick={() =>
                     setEditName({
                       original: exportedRecording.name,
-                      update: "",
+                      update: undefined,
                     })
                   }
                 >
@@ -162,7 +185,7 @@ export default function ExportCard({
 
             {!exportedRecording.in_progress && (
               <Button
-                className="absolute left-1/2 top-1/2 z-20 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
+                className="absolute left-1/2 top-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
                 variant="ghost"
                 onClick={() => {
                   onSelect(exportedRecording);
@@ -171,27 +194,12 @@ export default function ExportCard({
                 <FaPlay />
               </Button>
             )}
-          </>
-        )}
-        {exportedRecording.in_progress ? (
-          <ActivityIndicator />
-        ) : (
-          <>
-            {exportedRecording.thumb_path.length > 0 ? (
-              <img
-                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
-                src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
-                onLoad={() => setLoading(false)}
-              />
-            ) : (
-              <div className="absolute inset-0 rounded-lg bg-secondary md:rounded-2xl" />
-            )}
-          </>
+          </div>
         )}
         {loading && (
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
           <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm capitalize text-white">
             {exportedRecording.name.replaceAll("_", " ")}
           </div>

web/src/components/card/ReviewCard.tsx

@@ -6,7 +6,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { isDesktop, isIOS, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import TimeAgo from "../dynamic/TimeAgo";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import { FaCompactDisc } from "react-icons/fa";
@@ -18,9 +18,22 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "../ui/context-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 import { Drawer, DrawerContent } from "../ui/drawer";
 import axios from "axios";
 import { toast } from "sonner";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -46,6 +59,8 @@ export default function ReviewCard({
   );
 
   const [optionsOpen, setOptionsOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const bypassDialogRef = useRef(false);
 
   const onMarkAsReviewed = useCallback(async () => {
     await axios.post(`reviews/viewed`, { ids: [event.id] });
@@ -92,6 +107,18 @@ export default function ReviewCard({
     setOptionsOpen(false);
   }, [event]);
 
+  useKeyboardListener(["Shift"], (_, modifiers) => {
+    bypassDialogRef.current = modifiers.shift;
+  });
+
+  const handleDelete = useCallback(() => {
+    if (bypassDialogRef.current) {
+      onDelete();
+    } else {
+      setDeleteDialogOpen(true);
+    }
+  }, [bypassDialogRef, onDelete]);
+
   const content = (
     <div
       className="relative flex w-full cursor-pointer flex-col gap-1.5"
@@ -128,15 +155,43 @@ export default function ReviewCard({
         }}
       />
       <div className="flex items-center justify-between">
-        <div className="flex items-center justify-evenly gap-1">
-          {event.data.objects.map((object) => {
-            return getIconForLabel(object, "size-3 text-white");
-          })}
-          {event.data.audio.map((audio) => {
-            return getIconForLabel(audio, "size-3 text-white");
-          })}
-          <div className="font-extra-light text-xs">{formattedDate}</div>
-        </div>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center justify-evenly gap-1">
+              <>
+                {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="font-extra-light text-xs">{formattedDate}</div>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent className="capitalize">
+            {[
+              ...new Set([
+                ...(event.data.objects || []),
+                ...(event.data.sub_labels || []),
+                ...(event.data.audio || []),
+              ]),
+            ]
+              .filter(
+                (item) => item !== undefined && !item.includes("-verified"),
+              )
+              .map((text) => capitalizeFirstLetter(text))
+              .sort()
+              .join(", ")
+              .replaceAll("-verified", "")}
+          </TooltipContent>
+        </Tooltip>
         <TimeAgo
           className="text-xs text-muted-foreground"
           time={event.start_time * 1000}
@@ -152,71 +207,129 @@ export default function ReviewCard({
 
   if (isDesktop) {
     return (
-      <ContextMenu>
-        <ContextMenuTrigger asChild>{content}</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>
-            <div
-              className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
-              onClick={onExport}
-            >
-              <FaCompactDisc className="text-secondary-foreground" />
-              <div className="text-primary">Export</div>
-            </div>
-          </ContextMenuItem>
-          {!event.has_been_reviewed && (
+      <>
+        <AlertDialog
+          open={deleteDialogOpen}
+          onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogDescription>
+              Are you sure you want to delete all recorded video associated with
+              this review item?
+              <br />
+              <br />
+              Hold the <em>Shift</em> key to bypass this dialog in the future.
+            </AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setOptionsOpen(false)}>
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction className="bg-destructive" onClick={onDelete}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+        <ContextMenu key={event.id}>
+          <ContextMenuTrigger asChild>{content}</ContextMenuTrigger>
+          <ContextMenuContent>
             <ContextMenuItem>
               <div
                 className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
-                onClick={onMarkAsReviewed}
+                onClick={onExport}
               >
-                <FaCircleCheck className="text-secondary-foreground" />
-                <div className="text-primary">Mark as reviewed</div>
+                <FaCompactDisc className="text-secondary-foreground" />
+                <div className="text-primary">Export</div>
               </div>
             </ContextMenuItem>
-          )}
-          <ContextMenuItem>
-            <div
-              className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
-              onClick={onDelete}
-            >
-              <HiTrash className="text-secondary-foreground" />
-              <div className="text-primary">Delete</div>
-            </div>
-          </ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
+            {!event.has_been_reviewed && (
+              <ContextMenuItem>
+                <div
+                  className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
+                  onClick={onMarkAsReviewed}
+                >
+                  <FaCircleCheck className="text-secondary-foreground" />
+                  <div className="text-primary">Mark as reviewed</div>
+                </div>
+              </ContextMenuItem>
+            )}
+            <ContextMenuItem>
+              <div
+                className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
+                onClick={handleDelete}
+              >
+                <HiTrash className="text-secondary-foreground" />
+                <div className="text-primary">
+                  {bypassDialogRef.current ? "Delete Now" : "Delete"}
+                </div>
+              </div>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      </>
     );
   }
 
   return (
-    <Drawer open={optionsOpen} onOpenChange={setOptionsOpen}>
-      {content}
-      <DrawerContent>
-        <div
-          className="flex w-full items-center justify-start gap-2 p-2"
-          onClick={onExport}
-        >
-          <FaCompactDisc className="text-secondary-foreground" />
-          <div className="text-primary">Export</div>
-        </div>
-        {!event.has_been_reviewed && (
+    <>
+      <AlertDialog
+        open={deleteDialogOpen}
+        onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogDescription>
+            Are you sure you want to delete all recorded video associated with
+            this review item?
+            <br />
+            <br />
+            Hold the <em>Shift</em> key to bypass this dialog in the future.
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setOptionsOpen(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction className="bg-destructive" onClick={onDelete}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      <Drawer open={optionsOpen} onOpenChange={setOptionsOpen}>
+        {content}
+        <DrawerContent>
           <div
             className="flex w-full items-center justify-start gap-2 p-2"
-            onClick={onMarkAsReviewed}
+            onClick={onExport}
           >
-            <FaCircleCheck className="text-secondary-foreground" />
-            <div className="text-primary">Mark as reviewed</div>
+            <FaCompactDisc className="text-secondary-foreground" />
+            <div className="text-primary">Export</div>
           </div>
-        )}
-        <div
-          className="flex w-full items-center justify-start gap-2 p-2"
-          onClick={onDelete}
-        >
-          <HiTrash className="text-secondary-foreground" />
-          <div className="text-primary">Delete</div>
-        </div>
-      </DrawerContent>
-    </Drawer>
+          {!event.has_been_reviewed && (
+            <div
+              className="flex w-full items-center justify-start gap-2 p-2"
+              onClick={onMarkAsReviewed}
+            >
+              <FaCircleCheck className="text-secondary-foreground" />
+              <div className="text-primary">Mark as reviewed</div>
+            </div>
+          )}
+          <div
+            className="flex w-full items-center justify-start gap-2 p-2"
+            onClick={handleDelete}
+          >
+            <HiTrash className="text-secondary-foreground" />
+            <div className="text-primary">
+              {bypassDialogRef.current ? "Delete Now" : "Delete"}
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </>
   );
 }

web/src/components/filter/CameraGroupSelector.tsx

@@ -551,6 +551,14 @@ export function CameraGroupEdit({
           message: "Camera group name already exists.",
         },
       )
+      .refine(
+        (value: string) => {
+          return !value.includes(".");
+        },
+        {
+          message: "Camera group name must not contain a period.",
+        },
+      )
       .refine((value: string) => value.toLowerCase() !== "default", {
         message: "Invalid camera group name.",
       }),

web/src/components/filter/ReviewActionGroup.tsx

@@ -1,10 +1,21 @@
 import { FaCircleCheck } from "react-icons/fa6";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import axios from "axios";
 import { Button } from "../ui/button";
 import { isDesktop } from "react-device-detect";
 import { FaCompactDisc } from "react-icons/fa";
 import { HiTrash } from "react-icons/hi";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 
 type ReviewActionGroupProps = {
   selectedReviews: string[];
@@ -34,49 +45,94 @@ export default function ReviewActionGroup({
     pullLatestData();
   }, [selectedReviews, setSelectedReviews, pullLatestData]);
 
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [bypassDialog, setBypassDialog] = useState(false);
+
+  useKeyboardListener(["Shift"], (_, modifiers) => {
+    setBypassDialog(modifiers.shift);
+  });
+
+  const handleDelete = useCallback(() => {
+    if (bypassDialog) {
+      onDelete();
+    } else {
+      setDeleteDialogOpen(true);
+    }
+  }, [bypassDialog, onDelete]);
+
   return (
-    <div className="absolute inset-x-2 inset-y-0 flex items-center justify-between gap-2 bg-background py-2 md:left-auto">
-      <div className="mx-1 flex items-center justify-center text-sm text-muted-foreground">
-        <div className="p-1">{`${selectedReviews.length} selected`}</div>
-        <div className="p-1">{"|"}</div>
-        <div
-          className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
-          onClick={onClearSelected}
-        >
-          Unselect
+    <>
+      <AlertDialog
+        open={deleteDialogOpen}
+        onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogDescription>
+            Are you sure you want to delete all recorded video associated with
+            the selected review items?
+            <br />
+            <br />
+            Hold the <em>Shift</em> key to bypass this dialog in the future.
+          </AlertDialogDescription>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction className="bg-destructive" onClick={onDelete}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <div className="absolute inset-x-2 inset-y-0 flex items-center justify-between gap-2 bg-background py-2 md:left-auto">
+        <div className="mx-1 flex items-center justify-center text-sm text-muted-foreground">
+          <div className="p-1">{`${selectedReviews.length} selected`}</div>
+          <div className="p-1">{"|"}</div>
+          <div
+            className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
+            onClick={onClearSelected}
+          >
+            Unselect
+          </div>
         </div>
-      </div>
-      <div className="flex items-center gap-1 md:gap-2">
-        {selectedReviews.length == 1 && (
+        <div className="flex items-center gap-1 md:gap-2">
+          {selectedReviews.length == 1 && (
+            <Button
+              className="flex items-center gap-2 p-2"
+              size="sm"
+              onClick={() => {
+                onExport(selectedReviews[0]);
+                onClearSelected();
+              }}
+            >
+              <FaCompactDisc className="text-secondary-foreground" />
+              {isDesktop && <div className="text-primary">Export</div>}
+            </Button>
+          )}
           <Button
             className="flex items-center gap-2 p-2"
             size="sm"
-            onClick={() => {
-              onExport(selectedReviews[0]);
-              onClearSelected();
-            }}
+            onClick={onMarkAsReviewed}
           >
-            <FaCompactDisc className="text-secondary-foreground" />
-            {isDesktop && <div className="text-primary">Export</div>}
+            <FaCircleCheck className="text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Mark as reviewed</div>}
           </Button>
-        )}
-        <Button
-          className="flex items-center gap-2 p-2"
-          size="sm"
-          onClick={onMarkAsReviewed}
-        >
-          <FaCircleCheck className="text-secondary-foreground" />
-          {isDesktop && <div className="text-primary">Mark as reviewed</div>}
-        </Button>
-        <Button
-          className="flex items-center gap-2 p-2"
-          size="sm"
-          onClick={onDelete}
-        >
-          <HiTrash className="text-secondary-foreground" />
-          {isDesktop && <div className="text-primary">Delete</div>}
-        </Button>
+          <Button
+            className="flex items-center gap-2 p-2"
+            size="sm"
+            onClick={handleDelete}
+          >
+            <HiTrash className="text-secondary-foreground" />
+            {isDesktop && (
+              <div className="text-primary">
+                {bypassDialog ? "Delete Now" : "Delete"}
+              </div>
+            )}
+          </Button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

web/src/components/filter/ReviewFilterGroup.tsx

@@ -55,6 +55,8 @@ type ReviewFilterGroupProps = {
   filter?: ReviewFilter;
   motionOnly: boolean;
   filterList?: FilterList;
+  showReviewed: boolean;
+  setShowReviewed: (show: boolean) => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setMotionOnly: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -66,6 +68,8 @@ export default function ReviewFilterGroup({
   filter,
   motionOnly,
   filterList,
+  showReviewed,
+  setShowReviewed,
   onUpdateFilter,
   setMotionOnly,
 }: ReviewFilterGroupProps) {
@@ -132,7 +136,11 @@ export default function ReviewFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: Object.keys(config?.cameras || {}),
+      cameras: Object.keys(config?.cameras ?? {}).sort(
+        (a, b) =>
+          (config?.cameras[a]?.ui?.order ?? 0) -
+          (config?.cameras[b]?.ui?.order ?? 0),
+      ),
       labels: Object.values(allLabels || {}),
       zones: Object.values(allZones || {}),
     }),
@@ -190,10 +198,8 @@ export default function ReviewFilterGroup({
       )}
       {filters.includes("reviewed") && (
         <ShowReviewFilter
-          showReviewed={filter?.showReviewed || 0}
-          setShowReviewed={(reviewed) =>
-            onUpdateFilter({ ...filter, showReviewed: reviewed })
-          }
+          showReviewed={showReviewed}
+          setShowReviewed={setShowReviewed}
         />
       )}
       {isDesktop && filters.includes("date") && (
@@ -418,8 +424,8 @@ export function CamerasFilterButton({
 }
 
 type ShowReviewedFilterProps = {
-  showReviewed?: 0 | 1;
-  setShowReviewed: (reviewed?: 0 | 1) => void;
+  showReviewed: boolean;
+  setShowReviewed: (reviewed: boolean) => void;
 };
 function ShowReviewFilter({
   showReviewed,
@@ -434,9 +440,9 @@ function ShowReviewFilter({
       <div className="hidden h-9 cursor-pointer items-center justify-start rounded-md bg-secondary p-2 text-sm hover:bg-secondary/80 md:flex">
         <Switch
           id="reviewed"
-          checked={showReviewedSwitch == 1}
+          checked={showReviewedSwitch}
           onCheckedChange={() =>
-            setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)
+            setShowReviewedSwitch(showReviewedSwitch == false ? true : false)
           }
         />
         <Label className="ml-2 cursor-pointer text-primary" htmlFor="reviewed">
@@ -446,12 +452,14 @@ function ShowReviewFilter({
 
       <Button
         className="block duration-0 md:hidden"
-        variant={showReviewedSwitch == 1 ? "select" : "default"}
+        variant={showReviewedSwitch ? "select" : "default"}
         size="sm"
-        onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
+        onClick={() =>
+          setShowReviewedSwitch(showReviewedSwitch == false ? true : false)
+        }
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
+          className={`${showReviewedSwitch ? "text-selected-foreground" : "text-secondary-foreground"}`}
         />
       </Button>
     </>
@@ -521,7 +529,7 @@ function CalendarFilterButton({
   return (
     <Popover>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent>{content}</PopoverContent>
+      <PopoverContent className="w-auto">{content}</PopoverContent>
     </Popover>
   );
 }

web/src/components/icons/FrigatePlusIcon.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { LuPlus } from "react-icons/lu";
 import Logo from "../Logo";
 import { cn } from "@/lib/utils";
@@ -6,17 +7,20 @@ type FrigatePlusIconProps = {
   className?: string;
   onClick?: () => void;
 };
-export default function FrigatePlusIcon({
-  className,
-  onClick,
-}: FrigatePlusIconProps) {
-  return (
-    <div
-      className={cn("relative flex items-center", className)}
-      onClick={onClick}
-    >
-      <Logo className="size-full" />
-      <LuPlus className="absolute size-2 translate-x-3 translate-y-3/4" />
-    </div>
-  );
-}
+
+const FrigatePlusIcon = forwardRef<HTMLDivElement, FrigatePlusIconProps>(
+  ({ className, onClick }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("relative flex items-center", className)}
+        onClick={onClick}
+      >
+        <Logo className="size-full" />
+        <LuPlus className="absolute size-2 translate-x-3 translate-y-3/4" />
+      </div>
+    );
+  },
+);
+
+export default FrigatePlusIcon;

web/src/components/indicators/Chip.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import { LogSeverity } from "@/types/log";
 import { ReactNode, useMemo, useRef } from "react";
+import { isIOS } from "react-device-detect";
 import { CSSTransition } from "react-transition-group";
 
 type ChipProps = {
@@ -34,8 +35,9 @@ export default function Chip({
       <div
         ref={nodeRef}
         className={cn(
-          "z-10 flex items-center rounded-2xl px-2 py-1.5",
+          "flex items-center rounded-2xl px-2 py-1.5",
           className,
+          !isIOS && "z-10",
         )}
         onClick={onClick}
       >

web/src/components/menu/AccountSettings.tsx

@@ -3,6 +3,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { baseUrl } from "../../api/baseUrl";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
@@ -26,7 +27,7 @@ type AccountSettingsProps = {
 export default function AccountSettings({ className }: AccountSettingsProps) {
   const { data: profile } = useSWR("profile");
   const { data: config } = useSWR("config");
-  const logoutUrl = config?.proxy?.logout_url || "/api/logout";
+  const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
 
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;

web/src/components/menu/GeneralSettings.tsx

@@ -68,6 +68,8 @@ import {
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import { baseUrl } from "@/api/baseUrl";
+import useSWR from "swr";
+import { ADMIN_USERS } from "@/types/user";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -80,6 +82,8 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
 
   const { send: sendRestart } = useRestart();
 
+  const { data: profile } = useSWR("profile");
+
   useEffect(() => {
     let countdownInterval: NodeJS.Timeout;
 
@@ -139,8 +143,18 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
           </Tooltip>
         </Trigger>
         <Content
+          style={
+            isDesktop
+              ? {
+                  maxHeight:
+                    "var(--radix-dropdown-menu-content-available-height)",
+                }
+              : {}
+          }
           className={
-            isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
+            isDesktop
+              ? "scrollbar-container mr-5 w-72 overflow-y-auto"
+              : "max-h-[75dvh] overflow-hidden p-2"
           }
         >
           <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
@@ -159,48 +173,58 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   <span>System metrics</span>
                 </MenuItem>
               </Link>
-              <Link to="/logs">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuList className="mr-2 size-4" />
-                  <span>System logs</span>
-                </MenuItem>
-              </Link>
+              {ADMIN_USERS.includes(profile?.username) && (
+                <Link to="/logs">
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex w-full items-center p-2 text-sm"
+                    }
+                  >
+                    <LuList className="mr-2 size-4" />
+                    <span>System logs</span>
+                  </MenuItem>
+                </Link>
+              )}
             </DropdownMenuGroup>
-            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
-              Configuration
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
+            {ADMIN_USERS.includes(profile?.username) && (
+              <>
+                <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
+                  Configuration
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+              </>
+            )}
             <DropdownMenuGroup>
-              <Link to="/settings">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuSettings className="mr-2 size-4" />
-                  <span>Settings</span>
-                </MenuItem>
-              </Link>
-              <Link to="/config">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuPenSquare className="mr-2 size-4" />
-                  <span>Configuration editor</span>
-                </MenuItem>
-              </Link>
+              {ADMIN_USERS.includes(profile?.username) && (
+                <>
+                  <Link to="/settings">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                    >
+                      <LuSettings className="mr-2 size-4" />
+                      <span>Settings</span>
+                    </MenuItem>
+                  </Link>
+                  <Link to="/config">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                    >
+                      <LuPenSquare className="mr-2 size-4" />
+                      <span>Configuration editor</span>
+                    </MenuItem>
+                  </Link>
+                </>
+              )}
               <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
                 Appearance
               </DropdownMenuLabel>
@@ -348,16 +372,24 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                 <span>GitHub</span>
               </MenuItem>
             </a>
-            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
-            <MenuItem
-              className={
-                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-              }
-              onClick={() => setRestartDialogOpen(true)}
-            >
-              <LuRotateCw className="mr-2 size-4" />
-              <span>Restart Frigate</span>
-            </MenuItem>
+            {ADMIN_USERS.includes(profile?.username) && (
+              <>
+                <DropdownMenuSeparator
+                  className={isDesktop ? "mt-3" : "mt-1"}
+                />
+                <MenuItem
+                  className={
+                    isDesktop
+                      ? "cursor-pointer"
+                      : "flex items-center p-2 text-sm"
+                  }
+                  onClick={() => setRestartDialogOpen(true)}
+                >
+                  <LuRotateCw className="mr-2 size-4" />
+                  <span>Restart Frigate</span>
+                </MenuItem>
+              </>
+            )}
           </div>
         </Content>
       </Container>

web/src/components/navigation/Bottombar.tsx

@@ -48,7 +48,7 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
   const { data: initialStats } = useSWR<FrigateStats>("stats", {
     revalidateOnFocus: false,
   });
-  const { payload: latestStats } = useFrigateStats();
+  const latestStats = useFrigateStats();
 
   const { messages, addMessage, clearMessages } = useContext(
     StatusBarMessagesContext,

web/src/components/navigation/Sidebar.tsx

@@ -1,13 +1,18 @@
 import Logo from "../Logo";
 import NavItem from "./NavItem";
 import { CameraGroupSelector } from "../filter/CameraGroupSelector";
-import { useLocation } from "react-router-dom";
+import { Link, useMatch } from "react-router-dom";
 import GeneralSettings from "../menu/GeneralSettings";
 import AccountSettings from "../menu/AccountSettings";
 import useNavigation from "@/hooks/use-navigation";
+import { baseUrl } from "@/api/baseUrl";
+import { useMemo } from "react";
 
 function Sidebar() {
-  const location = useLocation();
+  const basePath = useMemo(() => new URL(baseUrl).pathname, []);
+
+  const isRootMatch = useMatch("/");
+  const isBasePathMatch = useMatch(basePath);
 
   const navbarLinks = useNavigation();
 
@@ -15,10 +20,12 @@ function Sidebar() {
     <aside className="scrollbar-container scrollbar-hidden absolute inset-y-0 left-0 z-10 flex w-[52px] flex-col justify-between overflow-y-auto border-r border-secondary-highlight bg-background_alt py-4">
       <span tabIndex={0} className="sr-only" />
       <div className="flex w-full flex-col items-center gap-0">
-        <Logo className="mb-6 h-8 w-8" />
+        <Link to="/">
+          <Logo className="mb-6 h-8 w-8" />
+        </Link>
         {navbarLinks.map((item) => {
           const showCameraGroups =
-            item.id == 1 && item.url == location.pathname;
+            (isRootMatch || isBasePathMatch) && item.id === 1;
 
           return (
             <div key={item.id}>

web/src/components/overlay/ExportDialog.tsx

@@ -63,6 +63,13 @@ export default function ExportDialog({
       return;
     }
 
+    if (range.before < range.after) {
+      toast.error("End time must be after start time", {
+        position: "top-center",
+      });
+      return;
+    }
+
     axios
       .post(
         `export/${camera}/start/${Math.round(range.after)}/end/${Math.round(range.before)}`,

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -68,6 +68,13 @@ export default function MobileReviewSettingsDrawer({
       return;
     }
 
+    if (range.before < range.after) {
+      toast.error("End time must be after start time", {
+        position: "top-center",
+      });
+      return;
+    }
+
     axios
       .post(
         `export/${camera}/start/${Math.round(range.after)}/end/${Math.round(range.before)}`,

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -5,6 +5,9 @@ import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { type DayContentProps } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
+import { usePersistence } from "@/hooks/use-persistence";
+
+type WeekStartsOnType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 type ReviewActivityCalendarProps = {
   reviewSummary?: ReviewSummary;
@@ -16,6 +19,8 @@ export default function ReviewActivityCalendar({
   selectedDay,
   onSelect,
 }: ReviewActivityCalendarProps) {
+  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+
   const disabledDates = useMemo(() => {
     const tomorrow = new Date();
     tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0);
@@ -61,6 +66,7 @@ export default function ReviewActivityCalendar({
 
   return (
     <Calendar
+      key={selectedDay ? selectedDay.toISOString() : "reset"}
       mode="single"
       disabled={disabledDates}
       showOutsideDays={false}
@@ -70,6 +76,8 @@ export default function ReviewActivityCalendar({
       components={{
         DayContent: ReviewActivityDay,
       }}
+      defaultMonth={selectedDay ?? new Date()}
+      weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
     />
   );
 }
@@ -107,6 +115,8 @@ export function TimezoneAwareCalendar({
   selectedDay,
   onSelect,
 }: TimezoneAwareCalendarProps) {
+  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+
   const timezoneOffset = useMemo(
     () =>
       timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined,
@@ -152,12 +162,15 @@ export function TimezoneAwareCalendar({
 
   return (
     <Calendar
+      key={selectedDay ? selectedDay.toISOString() : "reset"}
       mode="single"
       disabled={disabledDates}
       showOutsideDays={false}
       today={today}
       selected={selectedDay}
       onSelect={onSelect}
+      defaultMonth={selectedDay ?? new Date()}
+      weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
     />
   );
 }

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -11,16 +11,18 @@ type LivePlayerProps = {
   className?: string;
   birdseyeConfig: BirdseyeConfig;
   liveMode: LivePlayerMode;
+  pip?: boolean;
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
   onClick?: () => void;
-  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 
 export default function BirdseyeLivePlayer({
   className,
   birdseyeConfig,
   liveMode,
-  onClick,
+  pip,
   containerRef,
+  onClick,
 }: LivePlayerProps) {
   let player;
   if (liveMode == "webrtc") {
@@ -28,6 +30,7 @@ export default function BirdseyeLivePlayer({
       <WebRtcPlayer
         className={`size-full rounded-lg md:rounded-2xl`}
         camera="birdseye"
+        pip={pip}
       />
     );
   } else if (liveMode == "mse") {
@@ -36,13 +39,13 @@ export default function BirdseyeLivePlayer({
         <MSEPlayer
           className={`size-full rounded-lg md:rounded-2xl`}
           camera="birdseye"
+          pip={pip}
         />
       );
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
-          MSE is only supported on iOS 17.1+. You'll need to update if available
-          or use jsmpeg / webRTC streams. See the docs for more info.
+          iOS 17.1 or greater is required for this live stream type.
         </div>
       );
     }
@@ -54,6 +57,7 @@ export default function BirdseyeLivePlayer({
         width={birdseyeConfig.width}
         height={birdseyeConfig.height}
         containerRef={containerRef}
+        playbackEnabled={true}
       />
     );
   } else {
@@ -62,6 +66,7 @@ export default function BirdseyeLivePlayer({
 
   return (
     <div
+      ref={containerRef}
       className={cn(
         "relative flex w-full cursor-pointer justify-center",
         className,

web/src/components/player/HlsVideoPlayer.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import Hls from "hls.js";
-import { isAndroid, isDesktop, isIOS, isMobile } from "react-device-detect";
+import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 import { VideoResolutionType } from "@/types/live";
@@ -17,7 +17,7 @@ import { toast } from "sonner";
 import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
-import { ASPECT_VERTICAL_LAYOUT } from "@/types/record";
+import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -29,9 +29,11 @@ const unsupportedErrorCodes = [
 
 type HlsVideoPlayerProps = {
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   visible: boolean;
   currentSource: string;
   hotKeys: boolean;
+  supportsFullscreen: boolean;
   fullscreen: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
@@ -40,12 +42,15 @@ type HlsVideoPlayerProps = {
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
+  onError?: (error: RecordingPlayerError) => void;
 };
 export default function HlsVideoPlayer({
   videoRef,
+  containerRef,
   visible,
   currentSource,
   hotKeys,
+  supportsFullscreen,
   fullscreen,
   onClipEnded,
   onPlayerLoaded,
@@ -54,6 +59,7 @@ export default function HlsVideoPlayer({
   setFullResolution,
   onUploadFrame,
   toggleFullscreen,
+  onError,
 }: HlsVideoPlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -62,6 +68,7 @@ export default function HlsVideoPlayer({
   const hlsRef = useRef<Hls>();
   const [useHlsCompat, setUseHlsCompat] = useState(false);
   const [loadedMetadata, setLoadedMetadata] = useState(false);
+  const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
 
   const handleLoadedMetadata = useCallback(() => {
     setLoadedMetadata(true);
@@ -159,7 +166,7 @@ export default function HlsVideoPlayer({
   }, [videoRef, controlsOpen]);
 
   return (
-    <TransformWrapper minScale={1.0}>
+    <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
       <VideoControls
         className={cn(
           "absolute left-1/2 z-50 -translate-x-1/2",
@@ -175,7 +182,7 @@ export default function HlsVideoPlayer({
           seek: true,
           playbackRate: true,
           plusUpload: config?.plus?.enabled == true,
-          fullscreen: !isIOS,
+          fullscreen: supportsFullscreen,
         }}
         setControlsOpen={setControlsOpen}
         setMuted={(muted) => setMuted(muted, true)}
@@ -202,7 +209,7 @@ export default function HlsVideoPlayer({
           videoRef.current.currentTime = Math.max(0, currentTime + diff);
         }}
         onSetPlaybackRate={(rate) => {
-          setPlaybackRate(rate);
+          setPlaybackRate(rate, true);
 
           if (videoRef.current) {
             videoRef.current.playbackRate = rate;
@@ -225,6 +232,7 @@ export default function HlsVideoPlayer({
         }}
         fullscreen={fullscreen}
         toggleFullscreen={toggleFullscreen}
+        containerRef={containerRef}
       />
       <TransformComponent
         wrapperStyle={{
@@ -262,11 +270,42 @@ export default function HlsVideoPlayer({
           onPlaying={onPlaying}
           onPause={() => {
             setIsPlaying(false);
+            clearTimeout(bufferTimeout);
 
             if (isMobile && mobileCtrlTimeout) {
               clearTimeout(mobileCtrlTimeout);
             }
           }}
+          onWaiting={() => {
+            if (onError != undefined) {
+              if (videoRef.current?.paused) {
+                return;
+              }
+
+              setBufferTimeout(
+                setTimeout(() => {
+                  if (
+                    document.visibilityState === "visible" &&
+                    videoRef.current
+                  ) {
+                    onError("stalled");
+                  }
+                }, 3000),
+              );
+            }
+          }}
+          onProgress={() => {
+            if (onError != undefined) {
+              if (videoRef.current?.paused) {
+                return;
+              }
+
+              if (bufferTimeout) {
+                clearTimeout(bufferTimeout);
+                setBufferTimeout(undefined);
+              }
+            }
+          }}
           onTimeUpdate={() =>
             onTimeUpdate && videoRef.current
               ? onTimeUpdate(videoRef.current.currentTime)

web/src/components/player/JSMpegPlayer.tsx

@@ -3,14 +3,15 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import { cn } from "@/lib/utils";
 // @ts-expect-error we know this doesn't have types
 import JSMpeg from "@cycjimmy/jsmpeg-player";
-import React, { useEffect, useMemo, useRef, useId, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 type JSMpegPlayerProps = {
   className?: string;
   camera: string;
   width: number;
   height: number;
-  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
+  playbackEnabled: boolean;
   onPlaying?: () => void;
 };
 
@@ -20,18 +21,24 @@ export default function JSMpegPlayer({
   height,
   className,
   containerRef,
+  playbackEnabled,
   onPlaying,
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
-  const playerRef = useRef<HTMLDivElement | null>(null);
-  const videoRef = useRef(null);
+  const videoRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
   const onPlayingRef = useRef(onPlaying);
   const [showCanvas, setShowCanvas] = useState(false);
+  const [hasData, setHasData] = useState(false);
+  const hasDataRef = useRef(hasData);
+  const [dimensionsReady, setDimensionsReady] = useState(false);
 
   const selectedContainerRef = useMemo(
-    () => containerRef ?? internalContainerRef,
-    [containerRef, internalContainerRef],
+    () => (containerRef.current ? containerRef : internalContainerRef),
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containerRef, containerRef.current, internalContainerRef],
   );
 
   const [{ width: containerWidth, height: containerHeight }] =
@@ -66,6 +73,7 @@ export default function JSMpegPlayer({
         return finalHeight;
       }
     }
+    return undefined;
   }, [
     aspectRatio,
     containerWidth,
@@ -81,44 +89,96 @@ export default function JSMpegPlayer({
     if (aspectRatio && scaledHeight) {
       return Math.ceil(scaledHeight * aspectRatio);
     }
+    return undefined;
   }, [scaledHeight, aspectRatio]);
 
-  const uniqueId = useId();
+  useEffect(() => {
+    if (scaledWidth && scaledHeight) {
+      setDimensionsReady(true);
+    }
+  }, [scaledWidth, scaledHeight]);
 
   useEffect(() => {
     onPlayingRef.current = onPlaying;
   }, [onPlaying]);
 
   useEffect(() => {
-    if (!playerRef.current || videoRef.current) {
+    if (!selectedContainerRef?.current || !url) {
       return;
     }
 
-    videoRef.current = new JSMpeg.VideoElement(
-      playerRef.current,
-      url,
-      { canvas: `#${CSS.escape(uniqueId)}` },
-      {
-        protocols: [],
-        audio: false,
-        videoBufferSize: 1024 * 1024 * 4,
-        onPlay: () => {
-          setShowCanvas(true);
-          onPlayingRef.current?.();
-        },
-      },
-    );
-  }, [url, uniqueId]);
+    const videoWrapper = videoRef.current;
+    const canvas = canvasRef.current;
+    let videoElement: JSMpeg.VideoElement | null = null;
+
+    setHasData(false);
+
+    if (videoWrapper && playbackEnabled) {
+      // Delayed init to avoid issues with react strict mode
+      const initPlayer = setTimeout(() => {
+        videoElement = new JSMpeg.VideoElement(
+          videoWrapper,
+          url,
+          { canvas: canvas },
+          {
+            protocols: [],
+            audio: false,
+            disableGl: true,
+            disableWebAssembly: true,
+            videoBufferSize: 1024 * 1024 * 4,
+            onVideoDecode: () => {
+              if (!hasDataRef.current) {
+                setHasData(true);
+                onPlayingRef.current?.();
+              }
+            },
+          },
+        );
+      }, 0);
+
+      return () => {
+        clearTimeout(initPlayer);
+        if (videoElement) {
+          try {
+            // this causes issues in react strict mode
+            // https://stackoverflow.com/questions/76822128/issue-with-cycjimmy-jsmpeg-player-in-react-18-cannot-read-properties-of-null-o
+            videoElement.destroy();
+            // eslint-disable-next-line no-empty
+          } catch (e) {}
+        }
+      };
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playbackEnabled, url]);
+
+  useEffect(() => {
+    setShowCanvas(hasData && dimensionsReady);
+  }, [hasData, dimensionsReady]);
+
+  useEffect(() => {
+    hasDataRef.current = hasData;
+  }, [hasData]);
 
   return (
-    <div className={className}>
-      <div className="size-full" ref={internalContainerRef}>
-        <div ref={playerRef} className={cn("jsmpeg", !showCanvas && "hidden")}>
+    <div className={cn(className, !containerRef.current && "size-full")}>
+      <div
+        className="internal-jsmpeg-container size-full"
+        ref={internalContainerRef}
+      >
+        <div
+          ref={videoRef}
+          className={cn(
+            "jsmpeg flex h-full w-auto items-center justify-center",
+            !showCanvas && "hidden",
+          )}
+        >
           <canvas
-            id={uniqueId}
+            ref={canvasRef}
+            className="rounded-lg md:rounded-2xl"
             style={{
-              width: scaledWidth ?? width,
-              height: scaledHeight ?? height,
+              width: scaledWidth,
+              height: scaledHeight,
             }}
           ></canvas>
         </div>

web/src/components/player/LivePlayer.tsx

@@ -2,7 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
 import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
@@ -13,19 +13,19 @@ import {
   LivePlayerMode,
   VideoResolutionType,
 } from "@/types/live";
-import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { cn } from "@/lib/utils";
 import { TbExclamationCircle } from "react-icons/tb";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   className?: string;
   cameraConfig: CameraConfig;
-  preferredLiveMode?: LivePlayerMode;
+  preferredLiveMode: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
   playAudio?: boolean;
@@ -36,6 +36,7 @@ type LivePlayerProps = {
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
+  onResetLiveMode?: () => void;
 };
 
 export default function LivePlayer({
@@ -54,7 +55,9 @@ export default function LivePlayer({
   onClick,
   setFullResolution,
   onError,
+  onResetLiveMode,
 }: LivePlayerProps) {
+  const internalContainerRef = useRef<HTMLDivElement | null>(null);
   // camera activity
 
   const { activeMotion, activeTracking, objects, offline } =
@@ -69,24 +72,32 @@ export default function LivePlayer({
 
   // camera live state
 
-  const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
-
   const [liveReady, setLiveReady] = useState(false);
+
+  const liveReadyRef = useRef(liveReady);
+  const cameraActiveRef = useRef(cameraActive);
+
   useEffect(() => {
-    if (!autoLive) {
-      return;
-    }
-
-    if (!liveReady) {
-      if (cameraActive && liveMode == "jsmpeg") {
-        setLiveReady(true);
-      }
+    liveReadyRef.current = liveReady;
+    cameraActiveRef.current = cameraActive;
+  }, [liveReady, cameraActive]);
 
+  useEffect(() => {
+    if (!autoLive || !liveReady) {
       return;
     }
 
     if (!cameraActive) {
-      setTimeout(() => setLiveReady(false), 500);
+      const timer = setTimeout(() => {
+        if (liveReadyRef.current && !cameraActiveRef.current) {
+          setLiveReady(false);
+          onResetLiveMode?.();
+        }
+      }, 500);
+
+      return () => {
+        clearTimeout(timer);
+      };
     }
     // live mode won't change
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -99,6 +110,10 @@ export default function LivePlayer({
       return -1; // no reason to update the image when the window is not visible
     }
 
+    if (liveReady && !cameraActive) {
+      return 300;
+    }
+
     if (liveReady) {
       return 60000;
     }
@@ -120,6 +135,7 @@ export default function LivePlayer({
     activeTracking,
     offline,
     windowVisible,
+    cameraActive,
   ]);
 
   useEffect(() => {
@@ -137,12 +153,12 @@ export default function LivePlayer({
   let player;
   if (!autoLive) {
     player = null;
-  } else if (liveMode == "webrtc") {
+  } else if (preferredLiveMode == "webrtc") {
     player = (
       <WebRtcPlayer
         className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
-        playbackEnabled={cameraActive}
+        playbackEnabled={cameraActive || liveReady}
         audioEnabled={playAudio}
         microphoneEnabled={micEnabled}
         iOSCompatFullScreen={iOSCompatFullScreen}
@@ -151,13 +167,13 @@ export default function LivePlayer({
         onError={onError}
       />
     );
-  } else if (liveMode == "mse") {
+  } else if (preferredLiveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
           className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.live.stream_name}
-          playbackEnabled={cameraActive}
+          playbackEnabled={cameraActive || liveReady}
           audioEnabled={playAudio}
           onPlaying={playerIsPlaying}
           pip={pip}
@@ -168,20 +184,22 @@ export default function LivePlayer({
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
-          MSE is only supported on iOS 17.1+. You'll need to update if available
-          or use jsmpeg / webRTC streams. See the docs for more info.
+          iOS 17.1 or greater is required for this live stream type.
         </div>
       );
     }
-  } else if (liveMode == "jsmpeg") {
-    if (cameraActive || !showStillWithoutActivity) {
+  } else if (preferredLiveMode == "jsmpeg") {
+    if (cameraActive || !showStillWithoutActivity || liveReady) {
       player = (
         <JSMpegPlayer
           className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
-          camera={cameraConfig.live.stream_name}
+          camera={cameraConfig.name}
           width={cameraConfig.detect.width}
           height={cameraConfig.detect.height}
-          containerRef={containerRef}
+          playbackEnabled={
+            cameraActive || !showStillWithoutActivity || liveReady
+          }
+          containerRef={containerRef ?? internalContainerRef}
           onPlaying={playerIsPlaying}
         />
       );
@@ -194,7 +212,7 @@ export default function LivePlayer({
 
   return (
     <div
-      ref={cameraRef}
+      ref={cameraRef ?? internalContainerRef}
       data-camera={cameraConfig.name}
       className={cn(
         "relative flex w-full cursor-pointer justify-center outline",
@@ -241,31 +259,31 @@ export default function LivePlayer({
                   </div>
                 </TooltipTrigger>
               </div>
-              <TooltipContent className="capitalize">
-                {[
-                  ...new Set([
-                    ...(objects || []).map(({ label, sub_label }) =>
-                      label.endsWith("verified") ? sub_label : label,
-                    ),
-                  ]),
-                ]
-                  .filter(
-                    (label) =>
-                      label !== undefined && !label.includes("-verified"),
-                  )
-                  .map((label) => capitalizeFirstLetter(label))
-                  .sort()
-                  .join(", ")
-                  .replaceAll("-verified", "")}
-              </TooltipContent>
+              <TooltipPortal>
+                <TooltipContent className="capitalize">
+                  {[
+                    ...new Set([
+                      ...(objects || []).map(({ label, sub_label }) =>
+                        label.endsWith("verified") ? sub_label : label,
+                      ),
+                    ]),
+                  ]
+                    .filter((label) => label?.includes("-verified") == false)
+                    .map((label) => capitalizeFirstLetter(label))
+                    .sort()
+                    .join(", ")
+                    .replaceAll("-verified", "")}
+                </TooltipContent>
+              </TooltipPortal>
             </Tooltip>
           </div>
         )}
 
       <div
-        className={`absolute inset-0 w-full ${
-          showStillWithoutActivity && !liveReady ? "visible" : "invisible"
-        }`}
+        className={cn(
+          "absolute inset-0 w-full",
+          showStillWithoutActivity && !liveReady ? "visible" : "invisible",
+        )}
       >
         <AutoUpdatingCameraImage
           className="size-full"

web/src/components/player/MsePlayer.tsx

@@ -31,7 +31,8 @@ function MSEPlayer({
   setFullResolution,
   onError,
 }: MSEPlayerProps) {
-  const RECONNECT_TIMEOUT: number = 30000;
+  const RECONNECT_TIMEOUT: number = 10000;
+  const BUFFERING_COOLDOWN_TIMEOUT: number = 5000;
 
   const CODECS: string[] = [
     "avc1.640029", // H.264 high 4.1 (Chromecast 1st and 2nd Gen)
@@ -45,10 +46,17 @@ function MSEPlayer({
   ];
 
   const visibilityCheck: boolean = !pip;
+  const [isPlaying, setIsPlaying] = useState(false);
+  const lastJumpTimeRef = useRef(0);
+
+  const MAX_BUFFER_ENTRIES = 10; // Size of the rolling window  of buffered times
+  const bufferTimes = useRef<number[]>([]);
+  const bufferIndex = useRef(0);
 
   const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
   const [connectTS, setConnectTS] = useState<number>(0);
   const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
+  const [errorCount, setErrorCount] = useState<number>(0);
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const wsRef = useRef<WebSocket | null>(null);
@@ -117,12 +125,26 @@ function MSEPlayer({
   }, [wsURL]);
 
   const onDisconnect = useCallback(() => {
-    if (wsRef.current && wsState == WebSocket.OPEN) {
+    if (bufferTimeout) {
+      clearTimeout(bufferTimeout);
+      setBufferTimeout(undefined);
+    }
+
+    setIsPlaying(false);
+
+    if (wsRef.current) {
       setWsState(WebSocket.CLOSED);
       wsRef.current.close();
       wsRef.current = null;
     }
-  }, [wsState]);
+  }, [bufferTimeout]);
+
+  const handlePause = useCallback(() => {
+    // don't let the user pause the live stream
+    if (isPlaying && playbackEnabled) {
+      videoRef.current?.play();
+    }
+  }, [isPlaying, playbackEnabled]);
 
   const onOpen = () => {
     setWsState(WebSocket.OPEN);
@@ -162,17 +184,50 @@ function MSEPlayer({
     reconnect();
   };
 
+  const sendWithTimeout = (value: object, timeout: number) => {
+    return new Promise<void>((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        reject(new Error("Timeout waiting for response"));
+      }, timeout);
+
+      send(value);
+
+      // Override the onmessageRef handler for mse type to resolve the promise on response
+      const originalHandler = onmessageRef.current["mse"];
+      onmessageRef.current["mse"] = (msg) => {
+        if (msg.type === "mse") {
+          clearTimeout(timeoutId);
+          if (originalHandler) originalHandler(msg);
+          resolve();
+        }
+      };
+    });
+  };
+
   const onMse = () => {
     if ("ManagedMediaSource" in window) {
+      // safari
       const MediaSource = window.ManagedMediaSource;
 
       msRef.current?.addEventListener(
         "sourceopen",
         () => {
-          send({
-            type: "mse",
-            // @ts-expect-error for typing
-            value: codecs(MediaSource.isTypeSupported),
+          sendWithTimeout(
+            {
+              type: "mse",
+              // @ts-expect-error for typing
+              value: codecs(MediaSource.isTypeSupported),
+            },
+            3000,
+          ).catch(() => {
+            if (wsRef.current) {
+              onDisconnect();
+            }
+            if (isIOS || isSafari) {
+              onError?.("mse-decode");
+            } else {
+              onError?.("startup");
+            }
           });
         },
         { once: true },
@@ -183,26 +238,59 @@ function MSEPlayer({
         videoRef.current.srcObject = msRef.current;
       }
     } else {
+      // non safari
       msRef.current?.addEventListener(
         "sourceopen",
         () => {
           URL.revokeObjectURL(videoRef.current?.src || "");
-          send({
-            type: "mse",
-            value: codecs(MediaSource.isTypeSupported),
+          sendWithTimeout(
+            {
+              type: "mse",
+              value: codecs(MediaSource.isTypeSupported),
+            },
+            3000,
+          ).catch(() => {
+            if (wsRef.current) {
+              onDisconnect();
+            }
+            if (isIOS || isSafari) {
+              onError?.("mse-decode");
+            } else {
+              onError?.("startup");
+            }
           });
         },
         { once: true },
       );
-      videoRef.current!.src = URL.createObjectURL(msRef.current!);
-      videoRef.current!.srcObject = null;
+      if (videoRef.current && msRef.current) {
+        videoRef.current.src = URL.createObjectURL(msRef.current);
+        videoRef.current.srcObject = null;
+      }
     }
     play();
 
     onmessageRef.current["mse"] = (msg) => {
       if (msg.type !== "mse") return;
 
-      const sb = msRef.current?.addSourceBuffer(msg.value);
+      let sb: SourceBuffer | undefined;
+      try {
+        sb = msRef.current?.addSourceBuffer(msg.value);
+        if (sb?.mode) {
+          sb.mode = "segments";
+        }
+      } catch (e) {
+        // Safari sometimes throws this error
+        if (e instanceof DOMException && e.name === "InvalidStateError") {
+          if (wsRef.current) {
+            onDisconnect();
+          }
+          onError?.("mse-decode");
+          return;
+        } else {
+          throw e; // Re-throw if it's not the error we're handling
+        }
+      }
+
       sb?.addEventListener("updateend", () => {
         if (sb.updating) return;
 
@@ -244,6 +332,142 @@ function MSEPlayer({
     };
   };
 
+  const getBufferedTime = (video: HTMLVideoElement | null) => {
+    if (!video || video.buffered.length === 0) return 0;
+    return video.buffered.end(video.buffered.length - 1) - video.currentTime;
+  };
+
+  const jumpToLive = () => {
+    if (!videoRef.current) return;
+
+    const buffered = videoRef.current.buffered;
+    if (buffered.length > 0) {
+      const liveEdge = buffered.end(buffered.length - 1);
+      // Jump to the live edge
+      videoRef.current.currentTime = liveEdge - 0.75;
+      lastJumpTimeRef.current = Date.now();
+    }
+  };
+
+  const calculateAdaptiveBufferThreshold = () => {
+    const filledEntries = bufferTimes.current.length;
+    const sum = bufferTimes.current.reduce((a, b) => a + b, 0);
+    const averageBufferTime = filledEntries ? sum / filledEntries : 0;
+    return averageBufferTime * (isSafari || isIOS ? 3 : 1.5);
+  };
+
+  const calculateAdaptivePlaybackRate = (
+    bufferTime: number,
+    bufferThreshold: number,
+  ) => {
+    const alpha = 0.2; // aggressiveness of playback rate increase
+    const beta = 0.5; // steepness of exponential growth
+
+    // don't adjust playback rate if we're close enough to live
+    // or if we just started streaming
+    if (
+      ((bufferTime <= bufferThreshold && bufferThreshold < 3) ||
+        bufferTime < 3) &&
+      bufferTimes.current.length <= MAX_BUFFER_ENTRIES
+    ) {
+      return 1;
+    }
+    const rate = 1 + alpha * Math.exp(beta * bufferTime - bufferThreshold);
+    return Math.min(rate, 2);
+  };
+
+  const onProgress = useCallback(() => {
+    const bufferTime = getBufferedTime(videoRef.current);
+
+    if (
+      videoRef.current &&
+      (videoRef.current.playbackRate === 1 || bufferTime < 3)
+    ) {
+      if (bufferTimes.current.length < MAX_BUFFER_ENTRIES) {
+        bufferTimes.current.push(bufferTime);
+      } else {
+        bufferTimes.current[bufferIndex.current] = bufferTime;
+        bufferIndex.current = (bufferIndex.current + 1) % MAX_BUFFER_ENTRIES;
+      }
+    }
+
+    const bufferThreshold = calculateAdaptiveBufferThreshold();
+
+    // if we have > 3 seconds of buffered data and we're still not playing,
+    // something might be wrong - maybe codec issue, no audio, etc
+    // so mark the player as playing so that error handlers will fire
+    if (!isPlaying && playbackEnabled && bufferTime > 3) {
+      setIsPlaying(true);
+      lastJumpTimeRef.current = Date.now();
+      onPlaying?.();
+    }
+
+    // if we have more than 10 seconds of buffer, something's wrong so error out
+    if (
+      isPlaying &&
+      playbackEnabled &&
+      (bufferThreshold > 10 || bufferTime > 10)
+    ) {
+      onDisconnect();
+      onError?.("stalled");
+    }
+
+    const playbackRate = calculateAdaptivePlaybackRate(
+      bufferTime,
+      bufferThreshold,
+    );
+
+    // if we're above our rolling average threshold or have > 3 seconds of
+    // buffered data and we're playing, we may have drifted from actual live
+    // time
+    if (videoRef.current && isPlaying && playbackEnabled) {
+      if (
+        (isSafari || isIOS) &&
+        bufferTime > 3 &&
+        Date.now() - lastJumpTimeRef.current > BUFFERING_COOLDOWN_TIMEOUT
+      ) {
+        // Jump to live on Safari/iOS due to a change of playback rate causing re-buffering
+        jumpToLive();
+      } else {
+        // increase/decrease playback rate to compensate - non Safari/iOS only
+        if (videoRef.current.playbackRate !== playbackRate) {
+          videoRef.current.playbackRate = playbackRate;
+        }
+      }
+    }
+
+    if (onError != undefined) {
+      if (videoRef.current?.paused) {
+        return;
+      }
+
+      if (bufferTimeout) {
+        clearTimeout(bufferTimeout);
+        setBufferTimeout(undefined);
+      }
+
+      setBufferTimeout(
+        setTimeout(() => {
+          if (
+            document.visibilityState === "visible" &&
+            wsRef.current != null &&
+            videoRef.current
+          ) {
+            onDisconnect();
+            onError("stalled");
+          }
+        }, 3000),
+      );
+    }
+  }, [
+    bufferTimeout,
+    isPlaying,
+    onDisconnect,
+    onError,
+    onPlaying,
+    playbackEnabled,
+  ]);
+
   useEffect(() => {
     if (!playbackEnabled) {
       return;
@@ -260,10 +484,6 @@ function MSEPlayer({
 
     return () => {
       onDisconnect();
-      if (bufferTimeout) {
-        clearTimeout(bufferTimeout);
-        setBufferTimeout(undefined);
-      }
     };
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -305,6 +525,23 @@ function MSEPlayer({
     videoRef.current.requestPictureInPicture();
   }, [pip, videoRef]);
 
+  // ensure we disconnect for slower connections
+
+  useEffect(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN && !playbackEnabled) {
+      if (bufferTimeout) {
+        clearTimeout(bufferTimeout);
+        setBufferTimeout(undefined);
+      }
+
+      setTimeout(() => {
+        if (!playbackEnabled) onDisconnect();
+      }, 10000);
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playbackEnabled]);
+
   return (
     <video
       ref={videoRef}
@@ -314,39 +551,20 @@ function MSEPlayer({
       onLoadedData={() => {
         handleLoadedMetadata?.();
         onPlaying?.();
+        setIsPlaying(true);
+        lastJumpTimeRef.current = Date.now();
       }}
       muted={!audioEnabled}
-      onProgress={() => {
-        if (isSafari || isIOS) {
-          onPlaying?.();
-        }
-        if (onError != undefined) {
-          if (videoRef.current?.paused) {
-            return;
-          }
-
-          if (bufferTimeout) {
-            clearTimeout(bufferTimeout);
-            setBufferTimeout(undefined);
-          }
-
-          setBufferTimeout(
-            setTimeout(() => {
-              if (
-                document.visibilityState === "visible" &&
-                wsRef.current != null
-              ) {
-                onError("stalled");
-              }
-            }, 3000),
-          );
-        }
-      }}
+      onPause={handlePause}
+      onProgress={onProgress}
       onError={(e) => {
         if (
           // @ts-expect-error code does exist
           e.target.error.code == MediaError.MEDIA_ERR_NETWORK
         ) {
+          if (wsRef.current) {
+            onDisconnect();
+          }
           onError?.("startup");
         }
 
@@ -355,15 +573,22 @@ function MSEPlayer({
           e.target.error.code == MediaError.MEDIA_ERR_DECODE &&
           (isSafari || isIOS)
         ) {
+          if (wsRef.current) {
+            onDisconnect();
+          }
           onError?.("mse-decode");
-          clearTimeout(bufferTimeout);
-          setBufferTimeout(undefined);
         }
 
+        setErrorCount((prevCount) => prevCount + 1);
+
         if (wsRef.current) {
-          wsRef.current.close();
-          wsRef.current = null;
-          reconnect(5000);
+          onDisconnect();
+          if (errorCount >= 3) {
+            // too many mse errors, try jsmpeg
+            onError?.("startup");
+          } else {
+            reconnect(5000);
+          }
         }
       }}
     />

web/src/components/player/PreviewPlayer.tsx

@@ -16,6 +16,10 @@ import { isAndroid, isChrome, isMobile } from "react-device-detect";
 import { TimeRange } from "@/types/timeline";
 import { Skeleton } from "../ui/skeleton";
 import { cn } from "@/lib/utils";
+import {
+  getPreviewForTimeRange,
+  usePreviewForTimeRange,
+} from "@/hooks/use-camera-previews";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -39,15 +43,11 @@ export default function PreviewPlayer({
   onClick,
 }: PreviewPlayerProps) {
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
-
-  const currentPreview = useMemo(() => {
-    return cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
-  }, [cameraPreviews, camera, timeRange]);
+  const currentPreview = usePreviewForTimeRange(
+    cameraPreviews,
+    camera,
+    timeRange,
+  );
 
   if (currentPreview) {
     return (
@@ -246,12 +246,7 @@ function PreviewVideoPlayer({
       return;
     }
 
-    const preview = cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
+    const preview = getPreviewForTimeRange(cameraPreviews, camera, timeRange);
 
     if (preview != currentPreview) {
       controller.newPreviewLoaded = false;
@@ -328,7 +323,7 @@ function PreviewVideoPlayer({
         )}
       </video>
       {cameraPreviews && !currentPreview && (
-        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl">
+        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
           No Preview Found for {camera.replaceAll("_", " ")}
         </div>
       )}
@@ -547,7 +542,7 @@ function PreviewFramesPlayer({
         onLoad={onImageLoaded}
       />
       {previewFrames?.length === 0 && (
-        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
+        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
           No Preview Found for {camera.replaceAll("_", " ")}
         </div>
       )}

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -21,11 +21,12 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import useContextMenu from "@/hooks/use-contextmenu";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { TimeRange } from "@/types/timeline";
+import { TimelineScrubMode, TimeRange } from "@/types/timeline";
 import { NoThumbSlider } from "../ui/slider";
 import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { baseUrl } from "@/api/baseUrl";
+import { cn } from "@/lib/utils";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -229,8 +230,15 @@ export default function PreviewThumbnailPlayer({
             onImgLoad();
           }}
         />
-
-        <div className="absolute left-0 top-2 z-40">
+        {!playingBack && (
+          <div
+            className={cn(
+              "rounded-t-l pointer-events-none absolute inset-x-0 top-0 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent",
+              !isSafari && "z-10",
+            )}
+          />
+        )}
+        <div className={cn("absolute left-0 top-2", !isSafari && "z-40")}>
           <Tooltip>
             <div
               className="flex"
@@ -276,21 +284,23 @@ export default function PreviewThumbnailPlayer({
           </Tooltip>
         </div>
         {!playingBack && (
-          <>
-            <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
-            <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
-              <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
-                {review.end_time ? (
-                  <TimeAgo time={review.start_time * 1000} dense />
-                ) : (
-                  <div>
-                    <ActivityIndicator size={24} />
-                  </div>
-                )}
-                {formattedDate}
-              </div>
+          <div
+            className={cn(
+              "rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent",
+              !isSafari && "z-10",
+            )}
+          >
+            <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
+              {review.end_time ? (
+                <TimeAgo time={review.start_time * 1000} dense />
+              ) : (
+                <div>
+                  <ActivityIndicator size={24} />
+                </div>
+              )}
+              {formattedDate}
             </div>
-          </>
+          </div>
         )}
       </div>
     </div>
@@ -404,7 +414,7 @@ export function VideoPreview({
 
     if (isSafari || (isFirefox && isMobile)) {
       playerRef.current.pause();
-      setManualPlayback(true);
+      setPlaybackMode("compat");
     } else {
       playerRef.current.currentTime = playerStartTime;
       playerRef.current.playbackRate = PREVIEW_FPS;
@@ -443,9 +453,9 @@ export function VideoPreview({
       setReviewed();
 
       if (loop && playerRef.current) {
-        if (manualPlayback) {
-          setManualPlayback(false);
-          setTimeout(() => setManualPlayback(true), 100);
+        if (playbackMode != "auto") {
+          setPlaybackMode("auto");
+          setTimeout(() => setPlaybackMode("compat"), 100);
         }
 
         playerRef.current.currentTime = playerStartTime;
@@ -462,7 +472,7 @@ export function VideoPreview({
         playerRef.current?.pause();
       }
 
-      setManualPlayback(false);
+      setPlaybackMode("auto");
       setProgress(100.0);
     } else {
       setProgress(playerPercent);
@@ -476,9 +486,10 @@ export function VideoPreview({
   // safari is incapable of playing at a speed > 2x
   // so manual seeking is required on iOS
 
-  const [manualPlayback, setManualPlayback] = useState(false);
+  const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
+
   useEffect(() => {
-    if (!manualPlayback || !playerRef.current) {
+    if (playbackMode != "compat" || !playerRef.current) {
       return;
     }
 
@@ -493,10 +504,14 @@ export function VideoPreview({
 
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [manualPlayback, playerRef]);
+  }, [playbackMode, playerRef]);
 
   // user interaction
 
+  useEffect(() => {
+    setIgnoreClick(playbackMode != "auto" && playbackMode != "compat");
+  }, [playbackMode, setIgnoreClick]);
+
   const onManualSeek = useCallback(
     (values: number[]) => {
       const value = values[0];
@@ -505,14 +520,8 @@ export function VideoPreview({
         return;
       }
 
-      if (manualPlayback) {
-        setManualPlayback(false);
-        setIgnoreClick(true);
-      }
-
       if (playerRef.current.paused == false) {
         playerRef.current.pause();
-        setIgnoreClick(true);
       }
 
       if (setReviewed) {
@@ -526,27 +535,21 @@ export function VideoPreview({
 
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      manualPlayback,
-      playerDuration,
-      playerRef,
-      playerStartTime,
-      setIgnoreClick,
-    ],
+    [playerDuration, playerRef, playerStartTime, setIgnoreClick],
   );
 
   const onStopManualSeek = useCallback(() => {
     setTimeout(() => {
-      setIgnoreClick(false);
       setHoverTimeout(undefined);
 
       if (isSafari || (isFirefox && isMobile)) {
-        setManualPlayback(true);
+        setPlaybackMode("compat");
       } else {
+        setPlaybackMode("auto");
         playerRef.current?.play();
       }
     }, 500);
-  }, [playerRef, setIgnoreClick]);
+  }, [playerRef]);
 
   const onProgressHover = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
@@ -562,10 +565,8 @@ export function VideoPreview({
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
       }
-
-      setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
     },
-    [sliderRef, hoverTimeout, onManualSeek, onStopManualSeek, setHoverTimeout],
+    [sliderRef, hoverTimeout, onManualSeek],
   );
 
   return (
@@ -587,14 +588,37 @@ export function VideoPreview({
       {showProgress && (
         <NoThumbSlider
           ref={sliderRef}
-          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${hoverTimeout != undefined ? "h-4" : "h-2"}`}
+          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode == "hover" || playbackMode == "drag" ? "h-4" : "h-2"}`}
           value={[progress]}
-          onValueChange={onManualSeek}
+          onValueChange={(event) => {
+            setPlaybackMode("drag");
+            onManualSeek(event);
+          }}
           onValueCommit={onStopManualSeek}
           min={0}
           step={1}
           max={100}
-          onMouseMove={isMobile ? undefined : onProgressHover}
+          onMouseMove={
+            isMobile
+              ? undefined
+              : (event) => {
+                  if (playbackMode != "drag") {
+                    setPlaybackMode("hover");
+                    onProgressHover(event);
+                  }
+                }
+          }
+          onMouseLeave={
+            isMobile
+              ? undefined
+              : () => {
+                  if (!sliderRef.current) {
+                    return;
+                  }
+
+                  setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
+                }
+          }
         />
       )}
     </div>
@@ -632,7 +656,8 @@ export function InProgressPreview({
     }/frames`,
     { revalidateOnFocus: false },
   );
-  const [manualFrame, setManualFrame] = useState(false);
+
+  const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
   const [key, setKey] = useState(0);
 
@@ -645,7 +670,7 @@ export function InProgressPreview({
       onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
     }
 
-    if (manualFrame) {
+    if (playbackMode != "auto") {
       return;
     }
 
@@ -682,19 +707,18 @@ export function InProgressPreview({
 
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, manualFrame, previewFrames]);
+  }, [key, playbackMode, previewFrames]);
 
   // user interaction
 
+  useEffect(() => {
+    setIgnoreClick(playbackMode != "auto");
+  }, [playbackMode, setIgnoreClick]);
+
   const onManualSeek = useCallback(
     (values: number[]) => {
       const value = values[0];
 
-      if (!manualFrame) {
-        setManualFrame(true);
-        setIgnoreClick(true);
-      }
-
       if (!review.has_been_reviewed) {
         setReviewed(review.id);
       }
@@ -704,19 +728,18 @@ export function InProgressPreview({
 
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [manualFrame, setIgnoreClick, setManualFrame, setKey],
+    [setIgnoreClick, setKey],
   );
 
   const onStopManualSeek = useCallback(
     (values: number[]) => {
       const value = values[0];
       setTimeout(() => {
-        setIgnoreClick(false);
-        setManualFrame(false);
+        setPlaybackMode("auto");
         setKey(value - 1);
       }, 500);
     },
-    [setManualFrame, setIgnoreClick],
+    [setPlaybackMode],
   );
 
   const onProgressHover = useCallback(
@@ -734,17 +757,8 @@ export function InProgressPreview({
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
       }
-
-      setHoverTimeout(setTimeout(() => onStopManualSeek(progress), 500));
     },
-    [
-      sliderRef,
-      hoverTimeout,
-      previewFrames,
-      onManualSeek,
-      onStopManualSeek,
-      setHoverTimeout,
-    ],
+    [sliderRef, hoverTimeout, previewFrames, onManualSeek],
   );
 
   if (!previewFrames || previewFrames.length == 0) {
@@ -766,14 +780,46 @@ export function InProgressPreview({
       {showProgress && (
         <NoThumbSlider
           ref={sliderRef}
-          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${manualFrame ? "h-4" : "h-2"}`}
+          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode != "auto" ? "h-4" : "h-2"}`}
           value={[key]}
-          onValueChange={onManualSeek}
+          onValueChange={(event) => {
+            setPlaybackMode("drag");
+            onManualSeek(event);
+          }}
           onValueCommit={onStopManualSeek}
           min={0}
           step={1}
           max={previewFrames.length - 1}
-          onMouseMove={isMobile ? undefined : onProgressHover}
+          onMouseMove={
+            isMobile
+              ? undefined
+              : (event) => {
+                  if (playbackMode != "drag") {
+                    setPlaybackMode("hover");
+                    onProgressHover(event);
+                  }
+                }
+          }
+          onMouseLeave={
+            isMobile
+              ? undefined
+              : (event) => {
+                  if (!sliderRef.current || !previewFrames) {
+                    return;
+                  }
+
+                  const rect = sliderRef.current.getBoundingClientRect();
+                  const positionX = event.clientX - rect.left;
+                  const width = sliderRef.current.clientWidth;
+                  const progress = [
+                    Math.round((positionX / width) * previewFrames.length),
+                  ];
+
+                  setHoverTimeout(
+                    setTimeout(() => onStopManualSeek(progress), 500),
+                  );
+                }
+          }
         />
       )}
     </div>