Rename nickname to friendly_name (#19782)

Better aligns with convention from Home Assistant since many Frigate users are also HA users

web/src/components/camera/CameraNameLabel.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { CameraConfig } from "@/types/frigateConfig";
 
 interface CameraNameLabelProps
@@ -12,7 +12,7 @@ const CameraNameLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   CameraNameLabelProps
 >(({ className, camera, ...props }, ref) => {
-  const displayName = useCameraNickname(camera);
+  const displayName = useCameraFriendlyName(camera);
   return (
     <LabelPrimitive.Root ref={ref} className={className} {...props}>
       {displayName}

web/src/components/overlay/CameraInfoDialog.tsx

@@ -16,7 +16,7 @@ import axios from "axios";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
 import { Trans, useTranslation } from "react-i18next";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 
 type CameraInfoDialogProps = {
   camera: CameraConfig;
@@ -75,7 +75,7 @@ export default function CameraInfoDialog({
     return b === 0 ? a : gcd(b, a % b);
   }
 
-  const cameraName = useCameraNickname(camera);
+  const cameraName = useCameraFriendlyName(camera);
 
   return (
     <>

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -37,7 +37,7 @@ import ImagePicker from "@/components/overlay/ImagePicker";
 import { Trigger, TriggerAction, TriggerType } from "@/types/trigger";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "../ui/textarea";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 
 type CreateTriggerDialogProps = {
   show: boolean;
@@ -162,7 +162,7 @@ export default function CreateTriggerDialog({
     onCancel();
   };
 
-  const cameraName = useCameraNickname(selectedCamera);
+  const cameraName = useCameraFriendlyName(selectedCamera);
 
   return (
     <Dialog open={show} onOpenChange={onCancel}>

web/src/components/player/LivePlayer.tsx

@@ -24,7 +24,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { PlayerStats } from "./PlayerStats";
 import { LuVideoOff } from "react-icons/lu";
 import { Trans, useTranslation } from "react-i18next";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -77,7 +77,7 @@ export default function LivePlayer({
 
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
-  const cameraName = useCameraNickname(cameraConfig);
+  const cameraName = useCameraFriendlyName(cameraConfig);
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({

web/src/components/player/PreviewPlayer.tsx

@@ -21,7 +21,7 @@ import {
   usePreviewForTimeRange,
 } from "@/hooks/use-camera-previews";
 import { useTranslation } from "react-i18next";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 
 type PreviewPlayerProps = {
   previewRef?: (ref: HTMLDivElement | null) => void;
@@ -149,7 +149,7 @@ function PreviewVideoPlayer({
   const { t } = useTranslation(["components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const cameraName = useCameraNickname(camera);
+  const cameraName = useCameraFriendlyName(camera);
   // controlling playback
 
   const previewRef = useRef<HTMLVideoElement | null>(null);
@@ -466,7 +466,7 @@ function PreviewFramesPlayer({
 }: PreviewFramesPlayerProps) {
   const { t } = useTranslation(["components/player"]);
 
-  const cameraName = useCameraNickname(camera);
+  const cameraName = useCameraFriendlyName(camera);
   // frames data
 
   const { data: previewFrames } = useSWR<string[]>(

web/src/components/settings/CameraEditForm.tsx

@@ -107,7 +107,7 @@ export default function CameraEditForm({
   const cameraInfo = useMemo(() => {
     if (!cameraName || !config?.cameras[cameraName]) {
       return {
-        nickname: undefined,
+        friendly_name: undefined,
         name: cameraName || "",
         roles: new Set<Role>(),
       };
@@ -121,14 +121,14 @@ export default function CameraEditForm({
     });
 
     return {
-      nickname: camera?.nickname || cameraName,
+      friendly_name: camera?.friendly_name || cameraName,
       name: cameraName,
       roles,
     };
   }, [cameraName, config]);
 
   const defaultValues: FormValues = {
-    cameraName: cameraInfo?.nickname || cameraName || "",
+    cameraName: cameraInfo?.friendly_name || cameraName || "",
     enabled: true,
     ffmpeg: {
       inputs: [
@@ -169,18 +169,18 @@ export default function CameraEditForm({
   const saveCameraConfig = (values: FormValues) => {
     setIsLoading(true);
     let finalCameraName = values.cameraName;
-    let nickname: string | undefined = undefined;
+    let friendly_name: string | undefined = undefined;
     const isValidName = /^[a-zA-Z0-9_-]+$/.test(values.cameraName);
     if (!isValidName) {
       finalCameraName = generateFixedHash(finalCameraName);
-      nickname = values.cameraName;
+      friendly_name = values.cameraName;
     }
 
     const configData: ConfigSetBody["config_data"] = {
       cameras: {
         [finalCameraName]: {
           enabled: values.enabled,
-          ...(nickname && { nickname }),
+          ...(friendly_name && { friendly_name }),
           ffmpeg: {
             inputs: values.ffmpeg.inputs.map((input) => ({
               path: input.path,
@@ -235,7 +235,7 @@ export default function CameraEditForm({
     if (
       cameraName &&
       values.cameraName !== cameraName &&
-      values.cameraName !== cameraInfo?.nickname
+      values.cameraName !== cameraInfo?.friendly_name
     ) {
       // If camera name changed, delete old camera config
       const deleteRequestBody: ConfigSetBody = {

web/src/components/settings/CameraStreamingDialog.tsx

@@ -33,7 +33,7 @@ import { Link } from "react-router-dom";
 import { LiveStreamMetadata } from "@/types/live";
 import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
-import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 
 type CameraStreamingDialogProps = {
   camera: string;
@@ -57,7 +57,7 @@ export function CameraStreamingDialog({
   const { getLocaleDocUrl } = useDocDomain();
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const cameraName = useCameraNickname(camera);
+  const cameraName = useCameraFriendlyName(camera);
 
   const [isLoading, setIsLoading] = useState(false);