From cd54a8115084d0820f9f594a3e9b1e3d4fd07cd8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 8 Jul 2025 21:06:06 -0500
Subject: [PATCH] Fixes (#19038)

* Fix Norwegian language code for date-fns module import

* Fix incorrect apple compatibility change

* Add other and unused as separate storage items

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
---
 frigate/ffmpeg_presets.py                     |  2 +-
 .../components/graph/CombinedStorageGraph.tsx | 35 +++++++++++++++----
 web/src/hooks/use-date-locale.ts              |  2 +-
 web/src/views/system/StorageMetrics.tsx       |  7 ++--
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/frigate/ffmpeg_presets.py b/frigate/ffmpeg_presets.py
index 77b96057b..ee314e3c3 100644
--- a/frigate/ffmpeg_presets.py
+++ b/frigate/ffmpeg_presets.py
@@ -491,6 +491,6 @@ def parse_preset_output_record(arg: Any, force_record_hvc1: bool) -> list[str]:
 
     if force_record_hvc1:
         # Apple only supports HEVC if it is hvc1 (vs. hev1)
-        preset += FFMPEG_HVC1_ARGS
+        return preset + FFMPEG_HVC1_ARGS
 
     return preset
diff --git a/web/src/components/graph/CombinedStorageGraph.tsx b/web/src/components/graph/CombinedStorageGraph.tsx
index cad56056c..97b42ab9d 100644
--- a/web/src/components/graph/CombinedStorageGraph.tsx
+++ b/web/src/components/graph/CombinedStorageGraph.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@/context/theme-provider";
 import { generateColors } from "@/utils/colorUtil";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import {
   Table,
@@ -30,6 +30,7 @@ type CameraStorage = {
 
 type TotalStorage = {
   used: number;
+  camera: number;
   total: number;
 };
 
@@ -59,6 +60,13 @@ export function CombinedStorageGraph({
   }));
 
   // Add the unused percentage to the series
+  series.push({
+    name: "Other",
+    data: [(totalStorage.used / totalStorage.total) * 100],
+    usage: totalStorage.used,
+    bandwidth: 0,
+    color: (systemTheme || theme) == "dark" ? "#606060" : "#D5D5D5",
+  });
   series.push({
     name: "Unused",
     data: [
@@ -160,12 +168,27 @@ export function CombinedStorageGraph({
     ApexCharts.exec(graphId, "updateOptions", options, true, true);
   }, [graphId, options]);
 
+  // convenience
+
+  const getItemTitle = useCallback(
+    (name: string) => {
+      if (name == "Unused") {
+        return t("storage.cameraStorage.unused.title");
+      } else if (name == "Other") {
+        return t("label.other", { ns: "common" });
+      } else {
+        return name.replaceAll("_", " ");
+      }
+    },
+    [t],
+  );
+
   return (
     <div className="flex w-full flex-col gap-2.5">
       <div className="flex w-full items-center justify-between gap-1">
         <div className="flex items-center gap-1">
           <div className="text-xs text-primary">
-            {getUnitSize(totalStorage.used)}
+            {getUnitSize(totalStorage.camera)}
           </div>
           <div className="text-xs text-primary">/</div>
           <div className="text-xs text-muted-foreground">
@@ -197,10 +220,8 @@ export function CombinedStorageGraph({
                     className="size-3 rounded-md"
                     style={{ backgroundColor: item.color }}
                   ></div>
-                  {item.name === "Unused"
-                    ? t("storage.cameraStorage.unused.title")
-                    : item.name.replaceAll("_", " ")}
-                  {item.name === "Unused" && (
+                  {getItemTitle(item.name)}
+                  {(item.name === "Unused" || item.name == "Other") && (
                     <Popover>
                       <PopoverTrigger asChild>
                         <button
@@ -228,7 +249,7 @@ export function CombinedStorageGraph({
                 <TableCell>{getUnitSize(item.usage ?? 0)}</TableCell>
                 <TableCell>{item.data[0].toFixed(2)}%</TableCell>
                 <TableCell>
-                  {item.name === "Unused"
+                  {item.name === "Unused" || item.name == "Other"
                     ? "—"
                     : `${getUnitSize(item.bandwidth)} / hour`}
                 </TableCell>
diff --git a/web/src/hooks/use-date-locale.ts b/web/src/hooks/use-date-locale.ts
index 62cbc31bb..44b5f68b0 100644
--- a/web/src/hooks/use-date-locale.ts
+++ b/web/src/hooks/use-date-locale.ts
@@ -18,7 +18,7 @@ const localeMap: Record<string, () => Promise<Locale>> = {
   nl: () => import("date-fns/locale/nl").then((module) => module.nl),
   sv: () => import("date-fns/locale/sv").then((module) => module.sv),
   cs: () => import("date-fns/locale/cs").then((module) => module.cs),
-  nb: () => import("date-fns/locale/nb").then((module) => module.nb),
+  "nb-NO": () => import("date-fns/locale/nb").then((module) => module.nb),
   ko: () => import("date-fns/locale/ko").then((module) => module.ko),
   vi: () => import("date-fns/locale/vi").then((module) => module.vi),
   fa: () => import("date-fns/locale/fa-IR").then((module) => module.faIR),
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index 2a7e98828..c24230d38 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -42,12 +42,13 @@ export default function StorageMetrics({
     }
 
     const totalStorage = {
-      used: 0,
+      used: stats.service.storage["/media/frigate/recordings"]["used"],
+      camera: 0,
       total: stats.service.storage["/media/frigate/recordings"]["total"],
     };
 
     Object.values(cameraStorage).forEach(
-      (cam) => (totalStorage.used += cam.usage),
+      (cam) => (totalStorage.camera += cam.usage),
     );
     setLastUpdated(Date.now() / 1000);
     return totalStorage;
@@ -118,7 +119,7 @@ export default function StorageMetrics({
           </div>
           <StorageGraph
             graphId="general-recordings"
-            used={totalStorage.used}
+            used={totalStorage.camera}
             total={totalStorage.total}
           />
           {earliestDate && (