UI fixes (#11417)

* Set max width on the problems area in status bar and use unique keys so they do not duplicate

* Fix possibly missing media info

* Show full row of items on tablet

* remove debugging logic

web/src/components/Statusbar.tsx

@@ -116,7 +116,7 @@ export default function Statusbar() {
           );
         })}
       </div>
-      <div className="flex h-full items-center gap-2">
+      <div className="flex h-full items-center gap-2 max-w-[50%] overflow-x-auto no-scrollbar">
         {Object.entries(messages).length === 0 ? (
           <div className="flex items-center gap-2 text-sm">
             <FaCheck className="size-3 text-green-500" />
@@ -125,11 +125,11 @@ export default function Statusbar() {
         ) : (
           Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="flex h-full items-center gap-2">
-              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+              {messageArray.map(({ text, color, link }: StatusMessage) => {
                 const message = (
                   <div
-                    key={id}
-                    className={`flex items-center gap-2 text-sm ${link ? "cursor-pointer hover:underline" : ""}`}
+                    key={text}
+                    className={`flex items-center gap-2 text-sm whitespace-nowrap ${link ? "cursor-pointer hover:underline" : ""}`}
                   >
                     <IoIosWarning
                       className={`size-5 ${color || "text-danger"}`}
@@ -140,7 +140,7 @@ export default function Statusbar() {
 
                 if (link) {
                   return (
-                    <Link key={id} to={link}>
+                    <Link key={text} to={link}>
                       {message}
                     </Link>
                   );

web/src/hooks/use-stats.ts

@@ -51,7 +51,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         return;
       }
 
-      if (config.cameras[name].enabled && cam["camera_fps"] == 0) {
+      if (config.cameras[name].enabled && (cam["camera_fps"] == 0)) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
           color: "text-danger",

web/src/types/live.ts

@@ -10,8 +10,8 @@ type LiveProducerMetadata = {
   remote_addr: string;
   user_agent: string;
   sdp: string;
-  medias: string[];
-  receivers: string[];
+  medias?: string[];
+  receivers?: string[];
   recv: number;
 };
 
@@ -21,8 +21,8 @@ type LiveConsumerMetadata = {
   remote_addr: string;
   user_agent: string;
   sdp: string;
-  medias: string[];
-  senders: string[];
+  medias?: string[];
+  senders?: string[];
   send: number;
 };
 

web/src/views/live/LiveCameraView.tsx

@@ -36,6 +36,7 @@ import {
   isIOS,
   isMobile,
   isSafari,
+  isTablet,
   useMobileOrientation,
 } from "react-device-detect";
 import { BsThreeDotsVertical } from "react-icons/bs";
@@ -100,7 +101,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     return (
       cameraMetadata.producers.find(
         (prod) =>
-          prod.medias.find((media) => media.includes("audio, sendonly")) != undefined,
+          prod.medias && prod.medias.find((media) => media.includes("audio, sendonly")) != undefined,
       ) != undefined
     );
   }, [cameraMetadata]);
@@ -112,7 +113,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     return (
       cameraMetadata.producers.find(
         (prod) =>
-          prod.medias.find((media) => media.includes("audio, recvonly")) != undefined,
+          prod.medias && prod.medias.find((media) => media.includes("audio, recvonly")) != undefined,
       ) != undefined
     );
   }, [cameraMetadata])
@@ -622,7 +623,7 @@ function FrigateCameraFeatures({
     useAutotrackingState(camera);
 
   // desktop shows icons part of row
-  if (isDesktop) {
+  if (isDesktop || isTablet) {
     return (
       <>
         <CameraFeatureToggle