From 1c9626ecff38885e22dcb016621baedd822d63be Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 15:23:24 -0600
Subject: [PATCH] UI fixes (#11161)

* Don't save animated webp

* Fix bad export state

* Contain scroll for camera group

* Use dvh
---
 frigate/record/export.py                      |  2 +
 .../components/filter/CameraGroupSelector.tsx | 67 ++++++++++---------
 .../overlay/MobileReviewSettingsDrawer.tsx    |  5 +-
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/frigate/record/export.py b/frigate/record/export.py
index 89980c663..efc155838 100644
--- a/frigate/record/export.py
+++ b/frigate/record/export.py
@@ -110,6 +110,8 @@ class RecordingExporter(threading.Thread):
                 f"00:{minutes}:{seconds}",
                 "-i",
                 preview.path,
+                "-frames",
+                "1",
                 "-c:v",
                 "libwebp",
                 thumb_path,
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index f410e8e8a..651a4ca5a 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -282,7 +282,7 @@ function NewGroupDialog({
         }}
       >
         <Content
-          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
+          className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-hidden"}`}
         >
           <div className="flex flex-col my-4 overflow-y-auto">
             {editState === "none" && (
@@ -535,7 +535,10 @@ export function CameraGroupEdit({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="mt-2 space-y-6 overflow-y-hidden"
+      >
         <FormField
           control={form.control}
           name="name"
@@ -556,34 +559,38 @@ export function CameraGroupEdit({
         />
 
         <Separator className="flex my-2 bg-secondary" />
-        <FormField
-          control={form.control}
-          name="cameras"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Cameras</FormLabel>
-              <FormDescription>Select cameras for this group.</FormDescription>
-              {[
-                ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
-                ...Object.keys(config?.cameras ?? {}),
-              ].map((camera) => (
-                <FormControl key={camera}>
-                  <FilterSwitch
-                    isChecked={field.value && field.value.includes(camera)}
-                    label={camera.replaceAll("_", " ")}
-                    onCheckedChange={(checked) => {
-                      const updatedCameras = checked
-                        ? [...(field.value || []), camera]
-                        : (field.value || []).filter((c) => c !== camera);
-                      form.setValue("cameras", updatedCameras);
-                    }}
-                  />
-                </FormControl>
-              ))}
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <div className="max-h-[40dvh] overflow-y-auto">
+          <FormField
+            control={form.control}
+            name="cameras"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Cameras</FormLabel>
+                <FormDescription>
+                  Select cameras for this group.
+                </FormDescription>
+                {[
+                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
+                  ...Object.keys(config?.cameras ?? {}),
+                ].map((camera) => (
+                  <FormControl key={camera}>
+                    <FilterSwitch
+                      isChecked={field.value && field.value.includes(camera)}
+                      label={camera.replaceAll("_", " ")}
+                      onCheckedChange={(checked) => {
+                        const updatedCameras = checked
+                          ? [...(field.value || []), camera]
+                          : (field.value || []).filter((c) => c !== camera);
+                        form.setValue("cameras", updatedCameras);
+                      }}
+                    />
+                  </FormControl>
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <Separator className="flex my-2 bg-secondary" />
         <FormField
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index a7c8069c1..4825a8984 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -138,7 +138,10 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("export") && (
           <Button
             className="w-full flex justify-center items-center gap-2"
-            onClick={() => setDrawerMode("export")}
+            onClick={() => {
+              setDrawerMode("export");
+              setMode("select");
+            }}
           >
             <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
             Export