Media Transcript Queue

1"use client";
2 
3import { FileAudio, Upload, X } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone } from "@/components/ui/dropzone";
7import { formatFileSize } from "@/components/ui/file-size-format";
8import { FileThumbnail } from "@/components/ui/file-thumbnail";
9 
10import {
11  RejectionRows,
12  type DropzoneExampleProps,
13} from "./dropzone-example-shared";
14 
15export function MediaTranscriptQueue({ className }: DropzoneExampleProps) {
16  const dropzone = useDropzone({
17    accept: "audio/*,video/*,.mp3,.wav,.m4a,.mp4,.mov",
18    maxFiles: 5,
19    multiple: true,
20  });
21  const totalSize = dropzone.files.reduce(
22    (total, item) => total + item.file.size,
23    0,
24  );
25 
26  return (
27    <section
28      {...dropzone.getRootProps({
29        className: cn(
30          "rounded-lg border bg-background p-4 transition-colors",
31          dropzone.isDragging && "border-foreground/40 bg-accent/35",
32          className,
33        ),
34      })}
35    >
36      <input {...dropzone.getInputProps({ className: "hidden" })} />
37      <div className="flex items-start justify-between gap-3">
38        <div className="min-w-0">
39          <div className="flex items-center gap-2 text-sm font-medium">
40            <FileAudio className="text-muted-foreground size-4" aria-hidden />
41            Audio transcript queue
42          </div>
43          <div className="text-muted-foreground mt-1 text-xs">
44            Audio or video files become transcript jobs.
45          </div>
46        </div>
47        <button
48          {...dropzone.getTriggerProps({
49            native: true,
50            className:
51              "inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-md border bg-background px-3 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/24",
52          })}
53        >
54          <Upload className="size-3.5" aria-hidden />
55          Add media
56        </button>
57      </div>
58      <div className="bg-muted/20 mt-4 min-h-36 rounded-md border border-dashed p-2">
59        {dropzone.files.length ? (
60          <div className="space-y-2">
61            <div className="text-muted-foreground flex items-center justify-between px-1 text-xs">
62              <span>{dropzone.files.length} jobs queued</span>
63              <span>{formatFileSize(totalSize)}</span>
64            </div>
65            {dropzone.files.map((item) => (
66              <div
67                key={item.id}
68// … truncated