Redesign exports page

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>