UI Tweaks (#11263)

* Add icons for frigate+ items

* Fix bug where export didn't start

* Fix mobile overflow

* Capitalize first letter function

web/src/components/filter/CameraGroupSelector.tsx

@@ -568,7 +568,7 @@ export function CameraGroupEdit({
         />
 
         <Separator className="flex my-2 bg-secondary" />
-        <div className="max-h-[40dvh] overflow-y-auto">
+        <div className="max-h-[25dvh] md:max-h-[40dvh] overflow-y-auto">
           <FormField
             control={form.control}
             name="cameras"

web/src/components/overlay/ExportDialog.tsx

@@ -121,6 +121,14 @@ export default function ExportDialog({
             className="flex items-center gap-2"
             size="sm"
             onClick={() => {
+              const now = new Date(latestTime * 1000);
+              let start = 0;
+              now.setHours(now.getHours() - 1);
+              start = now.getTime() / 1000;
+              setRange({
+                before: latestTime,
+                after: start,
+              });
               setMode("select");
             }}
           >

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -24,6 +24,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
 import { NoThumbSlider } from "../ui/slider";
 import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -263,7 +264,7 @@ export default function PreviewThumbnailPlayer({
                 .filter(
                   (item) => item !== undefined && !item.includes("-verified"),
                 )
-                .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+                .map((text) => capitalizeFirstLetter(text))
                 .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}

web/src/pages/SubmitPlus.tsx

@@ -3,6 +3,7 @@ import {
   CamerasFilterButton,
   GeneralFilterContent,
 } from "@/components/filter/ReviewFilterGroup";
+import Chip from "@/components/indicators/Chip";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -23,8 +24,15 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { DualThumbSlider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Event } from "@/types/event";
 import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
+import { getIconForLabel } from "@/utils/iconUtil";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
@@ -182,9 +190,36 @@ export default function SubmitPlus() {
             return (
               <div
                 key={event.id}
-                className="w-full rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
+                className="w-full relative rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
                 onClick={() => setUpload(event)}
               >
+                <div className="absolute left-0 top-2 z-40">
+                  <Tooltip>
+                    <div className="flex">
+                      <TooltipTrigger asChild>
+                        <div className="mx-3 pb-1 text-white text-sm">
+                          <Chip
+                            className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                          >
+                            {[event.label].map((object) => {
+                              return getIconForLabel(
+                                object,
+                                "size-3 text-white",
+                              );
+                            })}
+                          </Chip>
+                        </div>
+                      </TooltipTrigger>
+                    </div>
+                    <TooltipContent className="capitalize">
+                      {[event.label]
+                        .map((text) => capitalizeFirstLetter(text))
+                        .sort()
+                        .join(", ")
+                        .replaceAll("-verified", "")}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
                 <img
                   className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
                   src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}