See a preview when using the timeline to export footage (#14321)

* custom hook and generic video player component

* add export preview dialog

* export preview dialog when using timeline export

* refactor search detail dialog to use new generic video player component

* clean up

web/src/components/overlay/SaveExportOverlay.tsx

@@ -1,4 +1,4 @@
-import { LuX } from "react-icons/lu";
+import { LuVideo, LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
 import { cn } from "@/lib/utils";
@@ -6,12 +6,14 @@ import { cn } from "@/lib/utils";
 type SaveExportOverlayProps = {
   className: string;
   show: boolean;
+  onPreview: () => void;
   onSave: () => void;
   onCancel: () => void;
 };
 export default function SaveExportOverlay({
   className,
   show,
+  onPreview,
   onSave,
   onCancel,
 }: SaveExportOverlayProps) {
@@ -24,6 +26,22 @@ export default function SaveExportOverlay({
           "mx-auto mt-5 text-center",
         )}
       >
+        <Button
+          className="flex items-center gap-1 text-primary"
+          size="sm"
+          onClick={onCancel}
+        >
+          <LuX />
+          Cancel
+        </Button>
+        <Button
+          className="flex items-center gap-1"
+          size="sm"
+          onClick={onPreview}
+        >
+          <LuVideo />
+          Preview Export
+        </Button>
         <Button
           className="flex items-center gap-1"
           variant="select"
@@ -33,14 +51,6 @@ export default function SaveExportOverlay({
           <FaCompactDisc />
           Save Export
         </Button>
-        <Button
-          className="flex items-center gap-1 text-primary"
-          size="sm"
-          onClick={onCancel}
-        >
-          <LuX />
-          Cancel
-        </Button>
       </div>
     </div>
   );