Spaces:
Paused
Paused
File size: 4,539 Bytes
e5c2fd4 8f24b44 e5c2fd4 8f24b44 2f34958 e411e71 43dd1ac 8f24b44 1994a9c e5c2fd4 43dd1ac e5c2fd4 1994a9c e5c2fd4 c90a662 e5c2fd4 c90a662 e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 8f24b44 b9ae471 e5c2fd4 92864d8 e5c2fd4 92864d8 e5c2fd4 db81aaa 8f24b44 b9ae471 e5c2fd4 2f34958 8f24b44 2f34958 43dd1ac 2f34958 8f24b44 2f34958 43dd1ac 8f24b44 43dd1ac e5c2fd4 8f24b44 e411e71 2f34958 db81aaa 2f34958 8f24b44 db81aaa e411e71 8f24b44 2f34958 e5c2fd4 8f24b44 e5c2fd4 2f34958 e5c2fd4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
"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>[] = [
/*
{
id: "select",
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
className="translate-y-[2px]"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select video"
className="translate-y-[2px]"
/>
),
enableSorting: false,
enableHiding: false,
},
*/
{
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,// no header
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, // no header
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, // no header
cell: ({ row: { original, original: { status } } }) =>
<ChangeStatusButton video={original} status="delete">Delete</ChangeStatusButton>,
enableSorting: false,
enableHiding: false,
},
/*
{
id: "actions",
cell: ({ row }) => <VideoActions row={row} />,
},
*/
] |