Redesign exports page (#10359)

* Redesign exports page

* Cleanup

* fix overhange

web/src/components/card/ExportCard.tsx

@@ -1,32 +1,87 @@
 import { baseUrl } from "@/api/baseUrl";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { Card } from "../ui/card";
-import { LuPlay, LuTrash } from "react-icons/lu";
+import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
+import { useMemo, useRef, useState } from "react";
+import { isDesktop } from "react-device-detect";
+import { FaPlay } from "react-icons/fa";
+import Chip from "../indicators/Chip";
 
 type ExportProps = {
   file: {
     name: string;
   };
-  onSelect: (file: string) => void;
   onDelete: (file: string) => void;
 };
 
-export default function ExportCard({ file, onSelect, onDelete }: ExportProps) {
+export default function ExportCard({ file, onDelete }: ExportProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [hovered, setHovered] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const inProgress = useMemo(
+    () => file.name.startsWith("in_progress"),
+    [file.name],
+  );
+
   return (
-    <Card className="my-4 p-4 bg-secondary flex justify-start text-center items-center">
-      {file.name.startsWith("in_progress") ? (
+    <div
+      className="relative aspect-video bg-black rounded-2xl flex justify-center items-center"
+      onMouseEnter={
+        isDesktop && !inProgress ? () => setHovered(true) : undefined
+      }
+      onMouseLeave={
+        isDesktop && !inProgress ? () => setHovered(false) : undefined
+      }
+      onClick={isDesktop || inProgress ? undefined : () => setHovered(!hovered)}
+    >
+      {!playing && hovered && (
         <>
-          <div className="p-2">
-            <ActivityIndicator size={16} />
-          </div>
-          <div className="px-2">
-            {file.name.substring(12, file.name.length - 4)}
-          </div>
+          <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
+          <Chip
+            className="absolute top-2 right-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
+            onClick={() => onDelete(file.name)}
+          >
+            <LuTrash className="w-4 h-4 text-destructive fill-destructive" />
+          </Chip>
+          <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>
         </>
+      )}
+      {inProgress ? (
+        <ActivityIndicator />
       ) : (
-        <>
-          <Button variant="secondary" onClick={() => onSelect(file.name)}>
+        <video
+          ref={videoRef}
+          className="absolute inset-0 aspect-video rounded-2xl"
+          playsInline
+          preload="auto"
+          muted
+          controls={playing}
+        >
+          <source src={`${baseUrl}exports/${file.name}`} type="video/mp4" />
+        </video>
+      )}
+      {!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">
+            {file.name.substring(0, file.name.length - 4).replaceAll("_", " ")}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ *             <Button variant="secondary" onClick={() => onSelect(file.name)}>
             <LuPlay className="h-4 w-4 text-green-600" />
           </Button>
           <a
@@ -43,8 +98,4 @@ export default function ExportCard({ file, onSelect, onDelete }: ExportProps) {
           >
             <LuTrash className="h-4 w-4" stroke="#f87171" />
           </Button>
-        </>
-      )}
-    </Card>
-  );
-}
+ */

web/src/components/indicators/Chip.tsx

@@ -3,14 +3,16 @@ import { CSSTransition } from "react-transition-group";
 
 type ChipProps = {
   className?: string;
-  children?: ReactNode[];
+  children?: ReactNode | ReactNode[];
   in?: boolean;
+  onClick?: () => void;
 };
 
 export default function Chip({
   className,
   children,
   in: inProp = true,
+  onClick,
 }: ChipProps) {
   const nodeRef = useRef(null);
 
@@ -30,6 +32,7 @@ export default function Chip({
       <div
         ref={nodeRef}
         className={`flex px-2 py-1.5 rounded-2xl items-center z-10 ${className}`}
+        onClick={onClick}
       >
         {children}
       </div>

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -217,7 +217,7 @@ export default function PreviewThumbnailPlayer({
               </div>
             </div>
             <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
-              <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
+              <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm">
                 <TimeAgo time={review.start_time * 1000} dense />
                 {formattedDate}
               </div>