keep spaces in friendly name

web/src/utils/cameraUtil.ts

@@ -5,12 +5,12 @@
  * @param name - The original camera name/display name
  * @returns A valid camera identifier (lowercase, alphanumeric, max 8 chars)
  */
-export const generateFixedHash = (name: string): string => {
+export function generateFixedHash(name: string): string {
   const encoded = encodeURIComponent(name);
   const base64 = btoa(encoded);
   const cleanHash = base64.replace(/[^a-zA-Z0-9]/g, "").substring(0, 8);
   return `cam_${cleanHash.toLowerCase()}`;
-};
+}
 
 /**
  * Checks if a string is a valid camera name identifier.
@@ -19,9 +19,9 @@ export const generateFixedHash = (name: string): string => {
  * @param name - The camera name to validate
  * @returns True if the name is valid, false otherwise
  */
-export const isValidCameraName = (name: string): boolean => {
+export function isValidCameraName(name: string): boolean {
   return /^[a-zA-Z0-9_-]+$/.test(name);
-};
+}
 
 /**
  * Processes a user-entered camera name and returns both the final camera name
@@ -30,18 +30,21 @@ export const isValidCameraName = (name: string): boolean => {
  * @param userInput - The name entered by the user (could be display name)
  * @returns Object with finalCameraName and friendlyName
  */
-export const processCameraName = (
-  userInput: string,
-): {
+export function processCameraName(userInput: string): {
   finalCameraName: string;
   friendlyName?: string;
-} => {
-  if (isValidCameraName(userInput)) {
-    return { finalCameraName: userInput };
-  } else {
+} {
+  const normalizedInput = userInput.replace(/\s+/g, "_");
+
+  if (isValidCameraName(normalizedInput)) {
+    return {
+      finalCameraName: normalizedInput,
+      friendlyName: userInput.includes(" ") ? userInput : undefined,
+    };
+  }
+
   return {
     finalCameraName: generateFixedHash(userInput),
     friendlyName: userInput,
   };
 }
-};