Misc fixes (#14064)

* Add loading indicator when explore view is revalidating

* Portal tooltip in object lifecycle pane

* Better config file handling

* Only manually set aspect ratio when using alert videos

frigate/ptz/autotrack.py

@@ -325,6 +325,12 @@ class PtzAutoTracker:
     def _write_config(self, camera):
         config_file = os.environ.get("CONFIG_FILE", f"{CONFIG_DIR}/config.yml")
 
+        # Check if we can use .yaml instead of .yml
+        config_file_yaml = config_file.replace(".yml", ".yaml")
+
+        if os.path.isfile(config_file_yaml):
+            config_file = config_file_yaml
+
         logger.debug(
             f"{camera}: Writing new config with autotracker motion coefficients: {self.config.cameras[camera].onvif.autotracking.movement_weights}"
         )

frigate/util/builtin.py

@@ -198,12 +198,23 @@ def update_yaml_from_url(file_path, url):
 def update_yaml_file(file_path, key_path, new_value):
     yaml = YAML()
     yaml.indent(mapping=2, sequence=4, offset=2)
+
+    try:
         with open(file_path, "r") as f:
             data = yaml.load(f)
+    except FileNotFoundError:
+        logger.error(
+            f"Unable to read from Frigate config file {file_path}. Make sure it exists and is readable."
+        )
+        return
 
     data = update_yaml(data, key_path, new_value)
+
+    try:
         with open(file_path, "w") as f:
             yaml.dump(data, f)
+    except Exception as e:
+        logger.error(f"Unable to write to Frigate config file {file_path}: {e}")
 
 
 def update_yaml(data, key_path, new_value):

web/src/components/card/AnimatedEventCard.tsx

@@ -109,7 +109,7 @@ export function AnimatedEventCard({
         <div
           className="relative h-24 4k:h-32"
           style={{
-            aspectRatio: aspectRatio,
+            aspectRatio: alertVideos ? aspectRatio : undefined,
           }}
           onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
           onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -334,7 +334,9 @@ export default function ObjectLifecycle({
                 />
               </Button>
             </TooltipTrigger>
+            <TooltipPortal>
               <TooltipContent>Adjust annotation settings</TooltipContent>
+            </TooltipPortal>
           </Tooltip>
         </div>
       </div>

web/src/views/explore/ExploreView.tsx

@@ -35,7 +35,12 @@ export default function ExploreView({
 
   // data
 
-  const { data: events, mutate } = useSWR<SearchResult[]>(
+  const {
+    data: events,
+    mutate,
+    isLoading,
+    isValidating,
+  } = useSWR<SearchResult[]>(
     [
       "events/explore",
       {
@@ -81,7 +86,7 @@ export default function ExploreView({
     }
   }, [events, searchDetail, setSearchDetail]);
 
-  if (!events) {
+  if (isLoading) {
     return (
       <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
     );
@@ -93,6 +98,7 @@ export default function ExploreView({
         <ThumbnailRow
           key={label}
           searchResults={filteredEvents}
+          isValidating={isValidating}
           objectType={label}
           setSearchDetail={setSearchDetail}
         />
@@ -104,12 +110,14 @@ export default function ExploreView({
 type ThumbnailRowType = {
   objectType: string;
   searchResults?: SearchResult[];
+  isValidating: boolean;
   setSearchDetail: (search: SearchResult | undefined) => void;
 };
 
 function ThumbnailRow({
   objectType,
   searchResults,
+  isValidating,
   setSearchDetail,
 }: ThumbnailRowType) {
   const navigate = useNavigate();
@@ -123,7 +131,7 @@ function ThumbnailRow({
 
   return (
     <div className="rounded-lg bg-background_alt p-2 md:px-4">
-      <div className="text-lg capitalize">
+      <div className="flex flex-row items-center text-lg capitalize">
         {objectType.replaceAll("_", " ")}
         {searchResults && (
           <span className="ml-3 text-sm text-secondary-foreground">
@@ -135,6 +143,7 @@ function ThumbnailRow({
             tracked objects){" "}
           </span>
         )}
+        {isValidating && <ActivityIndicator className="ml-2 size-4" />}
       </div>
       <div className="flex flex-row items-center space-x-2 py-2">
         {searchResults?.map((event) => (