Get video playback working

web/src/components/card/ExportCard.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { LuPencil, LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
@@ -14,6 +14,7 @@ import { Export } from "@/types/export";
 type ExportProps = {
   className: string;
   exportedRecording: Export;
+  onSelect: (selected: Export) => void;
   onRename: (original: string, update: string) => void;
   onDelete: (file: string) => void;
 };
@@ -21,12 +22,11 @@ type ExportProps = {
 export default function ExportCard({
   className,
   exportedRecording,
+  onSelect,
   onRename,
   onDelete,
 }: ExportProps) {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
   const [hovered, setHovered] = useState(false);
-  const [playing, setPlaying] = useState(false);
   const [loading, setLoading] = useState(true);
 
   // editing name
@@ -113,9 +113,7 @@ export default function ExportCard({
       >
         {hovered && (
           <>
-            {!playing && (
-              <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
-            )}
+            <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
             <div className="absolute top-1 right-1 flex items-center gap-2">
               <Chip
                 className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
@@ -132,25 +130,23 @@ export default function ExportCard({
                 <LuTrash className="size-4 text-destructive fill-destructive" />
               </Chip>
             </div>
-            {!playing && (
-              <Button
-                className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-20 h-20 z-20 text-white hover:text-white hover:bg-transparent"
-                variant="ghost"
-                onClick={() => {
-                  setPlaying(true);
-                  videoRef.current?.play();
-                }}
-              >
-                <FaPlay />
-              </Button>
-            )}
+
+            <Button
+              className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-20 h-20 z-20 text-white hover:text-white hover:bg-transparent"
+              variant="ghost"
+              onClick={() => {
+                onSelect(exportedRecording);
+              }}
+            >
+              <FaPlay />
+            </Button>
           </>
         )}
         {exportedRecording.in_progress ? (
           <ActivityIndicator />
         ) : (
           <img
-            className="absolute inset-0 aspect-video rounded-2xl"
+            className="absolute inset-0 object-contain aspect-video rounded-2xl"
             src={exportedRecording.thumb_path.replace("/media/frigate", "")}
             onLoad={() => setLoading(false)}
           />
@@ -158,13 +154,11 @@ export default function ExportCard({
         {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">
-              {exportedRecording.name}
-            </div>
+        <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">
+            {exportedRecording.name}
           </div>
-        )}
+        </div>
       </div>
     </>
   );

web/src/pages/Exports.tsx

@@ -1,3 +1,4 @@
+import { baseUrl } from "@/api/baseUrl";
 import ExportCard from "@/components/card/ExportCard";
 import {
   AlertDialog,
@@ -9,6 +10,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Export } from "@/types/export";
 import axios from "axios";
@@ -69,6 +71,10 @@ function Exports() {
     [mutate],
   );
 
+  // Viewing
+
+  const [selected, setSelected] = useState<Export>();
+
   return (
     <div className="size-full p-2 overflow-hidden flex flex-col gap-2">
       <AlertDialog
@@ -91,6 +97,32 @@ function Exports() {
         </AlertDialogContent>
       </AlertDialog>
 
+      <Dialog
+        open={selected != undefined}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelected(undefined);
+          }
+        }}
+      >
+        <DialogContent className="max-w-7xl">
+          <DialogTitle>{selected?.name}</DialogTitle>
+          <video
+            className="size-full rounded-2xl"
+            playsInline
+            preload="auto"
+            autoPlay
+            controls
+            muted
+          >
+            <source
+              src={`${baseUrl}${selected?.video_path?.replace("/media/frigate/", "")}`}
+              type="video/mp4"
+            />
+          </video>
+        </DialogContent>
+      </Dialog>
+
       <div className="w-full p-2 flex items-center justify-center">
         <Input
           className="w-full md:w-1/3 bg-muted"
@@ -110,6 +142,7 @@ function Exports() {
                   search == "" || filteredExports.includes(item) ? "" : "hidden"
                 }
                 exportedRecording={item}
+                onSelect={setSelected}
                 onRename={onHandleRename}
                 onDelete={(file) => setDeleteClip(file)}
               />