|
"use client" |
|
|
|
import { ColumnDef } from "@tanstack/react-table" |
|
import { Checkbox } from "@/components/ui/checkbox" |
|
|
|
import { DataTableColumnHeader } from "./column-header" |
|
|
|
import { Video } from "@/app/types" |
|
import { triggerDownload } from "@/lib/triggerDownload" |
|
import { ChangeStatusButton } from "./change-status-button" |
|
|
|
export const columns: ColumnDef<Video>[] = [ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ |
|
accessorKey: "id", |
|
header: ({ column }) => null, |
|
cell: ({ row }) => null, |
|
enableSorting: false, |
|
enableHiding: true, |
|
}, |
|
{ |
|
accessorKey: "videoPrompt", |
|
header: ({ column }) => ( |
|
<DataTableColumnHeader column={column} title="Prompt" /> |
|
), |
|
cell: ({ row: { original: { videoPrompt }} }) => ( |
|
<div className="flex space-x-2"> |
|
<span className="max-w-[500px] font-medium">{videoPrompt}</span> |
|
</div> |
|
), |
|
enableSorting: false, |
|
}, |
|
{ |
|
accessorKey: "progressPercent", |
|
header: ({ column }) => ( |
|
<DataTableColumnHeader column={column} title="Progress" /> |
|
), |
|
cell: ({ row: { original: { progressPercent, status }} }) => ( |
|
<div className="flex items-center"><span>{ |
|
status === "pending" |
|
? `${Number(progressPercent || 0)}%` |
|
: status === "completed" |
|
? "done" |
|
: status === "abort" |
|
? "N.A." |
|
: status === "delete" |
|
? "N.A." |
|
: status === "pause" |
|
? "paused" |
|
: "N.A." |
|
}</span></div> |
|
), |
|
enableSorting: false, |
|
}, |
|
{ |
|
id: "preview", |
|
header: ({ column }) => null, |
|
cell: ({ row: { original: { ownerId, id, progressPercent } } }) => <div className="w-[100px]"> |
|
<video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4?progress=${progressPercent || 0}`} muted /> |
|
</div>, |
|
enableSorting: false, |
|
enableHiding: false, |
|
}, |
|
{ |
|
id: "save", |
|
header: ({ column }) => null, |
|
cell: ({ row: { original: { ownerId, id }} }) => <div className=""> |
|
<a |
|
className="hover:underline cursor-pointer" |
|
target="_blank" |
|
href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4`}>Save</a> |
|
</div>, |
|
enableSorting: false, |
|
enableHiding: false, |
|
}, |
|
{ |
|
id: "scene", |
|
header: ({ column }) => null, |
|
cell: ({ row: { original } }) => { |
|
const scene = JSON.stringify({ |
|
videoPrompt: original.videoPrompt, |
|
backgroundAudioPrompt: original.backgroundAudioPrompt, |
|
foregroundAudioPrompt: original.foregroundAudioPrompt, |
|
shots: original.shots.map(shot => ({ |
|
shotPrompt: shot.shotPrompt, |
|
backgroundAudioPrompt: shot.backgroundAudioPrompt, |
|
foregroundAudioPrompt: shot.foregroundAudioPrompt, |
|
actorPrompt: shot.actorPrompt, |
|
actorVoicePrompt: shot.actorVoicePrompt, |
|
actorDialoguePrompt: shot.actorDialoguePrompt, |
|
})) |
|
}, null, 2) |
|
return (<div className=""> |
|
<a |
|
className="hover:underline cursor-pointer" |
|
target="_blank" |
|
onClick={() => triggerDownload("scene.json", scene)}>Scene</a> |
|
</div> |
|
) |
|
}, |
|
enableSorting: false, |
|
enableHiding: false, |
|
}, |
|
{ |
|
id: "status", |
|
header: ({ column }) => null, |
|
cell: ({ row: { original, original: { status } } }) => |
|
status === "pending" ? <ChangeStatusButton video={original} status="pause">Pause</ChangeStatusButton> : |
|
status === "pause" ? <ChangeStatusButton video={original} status="pending">Continue</ChangeStatusButton> : |
|
null, |
|
enableSorting: false, |
|
enableHiding: false, |
|
}, |
|
|
|
{ |
|
id: "delete", |
|
header: ({ column }) => null, |
|
cell: ({ row: { original, original: { status } } }) => |
|
<ChangeStatusButton video={original} status="delete">Delete</ChangeStatusButton>, |
|
enableSorting: false, |
|
enableHiding: false, |
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
] |