Add skeleton for loading exports and improve spacing on bottom sheet (#10463)

* Add skeleton for loading exports and improve spacing on bottom sheet

* Hide non object frigate plus items

web/src/components/card/ExportCard.tsx

@@ -6,6 +6,7 @@ import { useMemo, useRef, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
+import { Skeleton } from "../ui/skeleton";
 
 type ExportProps = {
   file: {
@@ -18,6 +19,7 @@ export default function ExportCard({ file, onDelete }: ExportProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [hovered, setHovered] = useState(false);
   const [playing, setPlaying] = useState(false);
+  const [loading, setLoading] = useState(true);
   const inProgress = useMemo(
     () => file.name.startsWith("in_progress"),
     [file.name],
@@ -65,10 +67,14 @@ export default function ExportCard({ file, onDelete }: ExportProps) {
           preload="auto"
           muted
           controls={playing}
+          onLoadedData={() => setLoading(false)}
         >
           <source src={`${baseUrl}exports/${file.name}`} type="video/mp4" />
         </video>
       )}
+      {loading && (
+        <Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
+      )}
       {!playing && (
         <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
           <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
@@ -79,23 +85,3 @@ export default function ExportCard({ file, onDelete }: ExportProps) {
     </div>
   );
 }
-
-/**
- *             <Button variant="secondary" onClick={() => onSelect(file.name)}>
-            <LuPlay className="h-4 w-4 text-green-600" />
-          </Button>
-          <a
-            className="text-blue-500 hover:underline overflow-hidden"
-            href={`${baseUrl}exports/${file.name}`}
-            download
-          >
-            {file.name.substring(0, file.name.length - 4)}
-          </a>
-          <Button
-            className="ml-auto"
-            variant="secondary"
-            onClick={() => onDelete(file.name)}
-          >
-            <LuTrash className="h-4 w-4" stroke="#f87171" />
-          </Button>
- */

web/src/pages/Export.tsx

@@ -172,16 +172,16 @@ function Export() {
             <Button variant="select">New Export</Button>
           </Trigger>
           <Content className="flex flex-col justify-center items-center">
-            <div className="w-full flex justify-evenly items-center">
+            <div className="w-full flex justify-evenly items-center mt-4 md:mt-0">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button className="capitalize" variant="secondary">
-                    {camera?.replaceAll("_", " ") || "Select A Camera"}
+                    {camera?.replaceAll("_", " ") || "Select Camera"}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuLabel className="flex justify-center items-center">
-                    Select A Camera
+                    Select Camera
                   </DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   <DropdownMenuRadioGroup
@@ -203,12 +203,12 @@ function Export() {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button className="capitalize" variant="secondary">
-                    {playback?.split("_")[0] || "Select A Playback Factor"}
+                    {playback?.split("_")[0] || "Select Playback"}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuLabel className="flex justify-center items-center">
-                    Select A Playback Factor
+                    Select Playback
                   </DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   <DropdownMenuRadioGroup

web/src/pages/SubmitPlus.tsx

@@ -125,6 +125,10 @@ export default function SubmitPlus() {
           </Dialog>
 
           {events?.map((event) => {
+            if (event.data.type != "object") {
+              return;
+            }
+
             return (
               <div
                 className="w-full rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"