preparing repo for multivideo

next.config.js

@@ -6,6 +6,7 @@ const nextConfig = {
     serverActions: true,
   },
 
+  /*
   async redirects() {
     return [
       {
@@ -15,6 +16,7 @@ const nextConfig = {
       },
     ]
   },
+  */
 }
 
 module.exports = nextConfig

scripts/test.js

@@ -2,7 +2,7 @@ const { promises: fs } = require("node:fs")
 
 const main = async () => {
   console.log('generating shot..')
-  const response = await fetch(process.env."http://localhost:3000/api/shot", {
+  const response = await fetch("http://localhost:3000/api/shot", {
     method: "POST",
     headers: {
       "Accept": "application/json",

src/app/api/tasks/[uuid]/route.ts

@@ -1,9 +1,9 @@
 import { NextRequest, NextResponse } from "next/server"
-import { getTask } from "@/server"
+import { getVideo } from "@/server"
 
 // TODO: implement some kind of quota system
 export async function GET(req: NextRequest) {
   return NextResponse.json({
-    task: await getTask(`${req.url?.split('/').pop() || ""}`)
+    video: await getVideo(`${req.url?.split('/').pop() || ""}`)
   })
 }

src/app/api/tasks/route.ts

@@ -1,24 +1,23 @@
-import { VideoTask, VideoTaskRequest } from "@/app/types"
-import { getPendingTasks, submitNewTask } from "@/server"
+import { Video, VideoRequest } from "@/app/types"
+import { getAllVideos, createNewVideo } from "@/server"
 import { NextApiResponse } from "next"
 import { NextRequest, NextResponse } from "next/server"
  
 // TODO: implement some kind of quota system
 export async function GET() {
   return NextResponse.json({
-    tasks: await getPendingTasks()
+    videos: await getAllVideos()
   })
 }
 
 // TODO: implement some kind of quota system
 export async function POST(
   req: NextRequest,
-  res: NextApiResponse<VideoTask | {
+  res: NextApiResponse<Video | {
     error?: string
   }>
 ) {
-  console.log('POST req.body:', req.body)
-  const taskRequest = req.body as VideoTaskRequest
-  const task = await submitNewTask(taskRequest)
+  const taskRequest = req.body as VideoRequest
+  const task = await createNewVideo(taskRequest)
   res.status(200).json(task)
 }

src/app/studio/[ownerId]/main.tsx

@@ -2,20 +2,20 @@
 
 import { useState } from "react"
 
-import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
+import { VideosQueue } from "@/components/business/videos/video-table"
 import { RefreshStudio } from "@/components/business/refresh"
 import { VideoForm } from "@/components/business/video-form"
-import { VideoTask } from "@/app/types"
+import { Video } from "@/app/types"
 import { VideoPlayer } from "@/components/business/video-player"
 
-export default function Main({ videoTasks }: { videoTasks: VideoTask[] }) {
-  const [selectedVideo, selectVideo] = useState<VideoTask>()
+export default function Main({ videos }: { videos: Video[] }) {
+  const [selectedVideo, selectVideo] = useState<Video>()
 
   return (
     <div className="flex flex-col md:flex-row">
       <div className="h-full flex flex-col space-y-4 w-full md:w-[800px] px-4 py-8">
         <VideoForm />
-        <VideoTasksQueue videoTasks={videoTasks} onSelectVideo={selectVideo} />
+        <VideosQueue videos={videos} onSelectVideo={selectVideo} />
         <RefreshStudio />
       </div>
       <div className="flex flex-col w-auto">

src/app/studio/[ownerId]/page.tsx

@@ -2,11 +2,12 @@
 
 import Head from "next/head"
 
+import { getVideos } from "@/server"
+
 import Main from "./main"
-import { getTasks } from "@/server"
 
 export default async function StudioPage({ params: { ownerId } }: { params: { ownerId: string }}) {
-  const videoTasks = await getTasks(ownerId)
+  const videos = await getVideos(ownerId)
 
   return (
     <div>
@@ -14,7 +15,7 @@ export default async function StudioPage({ params: { ownerId } }: { params: { ow
         <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
       </Head>
       <main className="dark fixed inset-0 flex flex-col items-center bg-stone-900 text-stone-10 overflow-y-scroll">
-        <Main videoTasks={videoTasks} />
+        <Main videos={videos} />
       </main>
     </div>
   )

src/app/types.ts

@@ -1,3 +1,12 @@
+export type VideoStatus =
+  | 'pending'
+  | 'abort' // this is an order (the video might still being processed by a task)
+  | 'delete' // this is an order (the video might still being processed by a task)
+  | 'pause' // this is an order (the video might still being processed by a task)
+  | 'completed'
+  | 'unknown'
+
+
 export type VideoTransition =
   | 'dissolve'
   | 'bookflip'
@@ -139,6 +148,8 @@ export interface VideoShotMeta {
 export interface VideoShotData {
   // must be unique
   id: string
+  sequenceId: string
+  ownerId: string
 
   fileName: string
 
@@ -158,6 +169,7 @@ export interface VideoShotData {
   nbCompletedSteps: number
   nbTotalSteps: number
   progressPercent: number
+  createdAt: string
   completedAt: string
   completed: boolean
   error: string
@@ -204,15 +216,21 @@ export interface VideoSequenceMeta {
 export interface VideoSequenceData {
   // must be unique
   id: string
-  
+
+  ownerId: string
+
   fileName: string
 
   // used to check compatibility
   version: number
 
+  status: VideoStatus
+
+  hasGeneratedSpecs: boolean
   hasAssembledVideo: boolean
   nbCompletedShots: number
   progressPercent: number
+  createdAt: string
   completedAt: string
   completed: boolean
   error: string
@@ -220,13 +238,21 @@ export interface VideoSequenceData {
 
 export type VideoSequence = VideoSequenceMeta & VideoSequenceData
 
-export type VideoTaskRequest = Partial<{
+export type VideoStatusRequest = {
+  status: VideoStatus
+}
+
+export type GenericAPIResponse = {
+  success?: boolean
+  error?: string
+}
+
+export type VideoAPIRequest = Partial<{
   prompt: string
-  ownerId: string
   sequence: Partial<VideoSequenceMeta>
   shots: Array<Partial<VideoShotMeta>>
 }>
 
-export type VideoTask = VideoSequence & {
+export type Video = VideoSequence & {
   shots: VideoShot[]
 }

src/components/business/video-form.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation"
 import { experimental_useFormStatus as useFormStatus } from "react-dom"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
-import { formSubmit } from "@/server/actions"
+import { handleFormSubmit } from "@/server/actions"
 
 export const VideoForm = () => {
   const pathname = usePathname()
@@ -15,7 +15,7 @@ export const VideoForm = () => {
 
   return (
     <form
-      action={formSubmit}
+      action={handleFormSubmit}
     >
       <div className="flex flex-col md:hidden w-full text-center">
         <h2 className="text-4xl font-thin tracking-tight">VideoChain UI</h2>

src/components/business/video-player.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { VideoTask } from "@/app/types"
+import { Video } from "@/app/types"
 
-export const VideoPlayer = ({ video }: { video?: VideoTask }) => {
+export const VideoPlayer = ({ video }: { video?: Video }) => {
 
   if (typeof video === "undefined") {
     return <div className="flex w-full h-screen items-center justify-center text-center">

src/components/business/{tasks → videos}/columns.tsx

@@ -3,12 +3,13 @@
 import { ColumnDef } from "@tanstack/react-table"
 import { Checkbox } from "@/components/ui/checkbox"
 
-import { DataTableColumnHeader } from "./data-table-column-header"
-import { DataTableRowActions } from "./data-table-row-actions"
+import { DataTableColumnHeader } from "./column-header"
+import { VideoActions } from "./video-actions"
 
-import { VideoTask } from "@/app/types"
+import { Video } from "@/app/types"
+import { deleteVideo } from "@/server"
 
-export const columns: ColumnDef<VideoTask>[] = [
+export const columns: ColumnDef<Video>[] = [
   {
     id: "select",
     header: ({ table }) => (
@@ -42,15 +43,11 @@ export const columns: ColumnDef<VideoTask>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Prompt" />
     ),
-    cell: ({ row }) => {
-      return (
-        <div className="flex space-x-2">
-          <span className="max-w-[500px] font-medium">
-            {row.getValue("videoPrompt")}
-          </span>
-        </div>
-      )
-    },
+    cell: ({ row: { original: { videoPrompt }} }) => (
+      <div className="flex space-x-2">
+        <span className="max-w-[500px] font-medium">{videoPrompt}</span>
+      </div>
+    ),
     enableSorting: false,
   },
   {
@@ -58,52 +55,50 @@ export const columns: ColumnDef<VideoTask>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Progress" />
     ),
-    cell: ({ row }) => {
-      const progress = Number(row.getValue("progressPercent") || 0)
-
-      return (
-        <div className="flex items-center">
-          <span>{progress}%</span>
-        </div>
-      )
-    },
+    cell: ({ row: { original: { progressPercent }} }) => (
+      <div className="flex items-center"><span>{Number(progressPercent || 0)}%</span></div>
+    ),
     enableSorting: false,
   },
   {
-    accessorKey: "preview",
-    header: ({ column }) => (
-      null // no header
-    ),
-    cell: ({ row }) => <div className="w-[100px]">
+    accessorKey: "fileName",
+    header: ({ column }) => null,// no header
+    cell: ({ row: { original: { ownerId, id, progressPercent } } }) => <div className="w-[100px]">
       <a
         className="hover:underline cursor-pointer"
         target="_blank"
-        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${row.getValue("fileName")}`}>
-        <video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${row.getValue("fileName")}?progress=${row.getValue("progressPercent") || 0}`} muted />
+        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4`}>
+        <video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4?progress=${progressPercent || 0}`} muted />
       </a>
     </div>,
     enableSorting: false,
     enableHiding: false,
   },
+  /*
   {
     accessorKey: "fileName",
-    header: ({ column }) => (
-      null // no header
-    ),
-    cell: ({ row }) => <div className="">
+    header: ({ column }) => null,
+    cell: ({ row: { original: { fileName, ownerId, id }} }) => <div className="">
       <a
         className="hover:underline cursor-pointer"
         target="_blank"
-        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${row.getValue("fileName")}`}>Save</a>
+        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4`}>Save</a>
     </div>,
     enableSorting: false,
     enableHiding: false,
   },
-  /*
-  action menu (currently disabled)
+  */
+  {
+    accessorKey: "delete",
+    header: ({ column }) => null, // no header
+    cell: ({ row: { original } }) => <div
+      className="hover:underline cursor-pointer"
+      onClick={() => { deleteVideo(original.ownerId, original.id) }}>Delete</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
   {
     id: "actions",
-    cell: ({ row }) => <DataTableRowActions row={row} />,
+    cell: ({ row }) => <VideoActions row={row} />,
   },
-  */
 ]

src/components/business/{tasks/data-table-row-actions.tsx → videos/video-actions.tsx}

@@ -13,12 +13,12 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
-import { VideoTask } from "@/app/types"
+import { Video } from "@/app/types"
 
-export function DataTableRowActions({
+export function VideoActions({
   row,
 }: {
-  row: Row<VideoTask>
+  row: Row<Video>
 }) {
   const task = row.original
 
@@ -34,6 +34,10 @@ export function DataTableRowActions({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[160px]">
+      <DropdownMenuItem>
+          Pause generation
+          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+        </DropdownMenuItem>
         <DropdownMenuItem>Download</DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem>

src/components/business/{tasks/video-tasks-queue.tsx → videos/video-table.tsx}

@@ -24,16 +24,16 @@ import {
   TableRow,
 } from "@/components/ui/table"
 
-import { columns } from "@/components/business/tasks/columns"
-import { VideoTask } from "@/app/types"
+import { columns } from "@/components/business/videos/columns"
+import { Video } from "@/app/types"
 import { useState } from "react"
 
-export function VideoTasksQueue({
-  videoTasks = [],
+export function VideosQueue({
+  videos = [],
   onSelectVideo,
 }: {
-  videoTasks: VideoTask[]
-  onSelectVideo: (task: VideoTask) => void
+  videos: Video[]
+  onSelectVideo: (task: Video) => void
 }) {
   const [rowSelection, setRowSelection] = useState({})
   const [columnVisibility, setColumnVisibility] =
@@ -44,8 +44,8 @@ export function VideoTasksQueue({
   const [sorting, setSorting] = useState<SortingState>([])
 
   const table = useReactTable({
-    data: videoTasks,
-    columns: columns as ColumnDef<VideoTask, any>[],
+    data: videos,
+    columns: columns as ColumnDef<Video, any>[],
     state: {
       sorting,
       columnVisibility,
@@ -98,7 +98,7 @@ export function VideoTasksQueue({
                   className="cursor-pointer"
                   onClick={() => {
                     const videoId = `${row.getValue("id") || ""}`
-                    const video = videoTasks.find(({ id }) => id === videoId)
+                    const video = videos.find(({ id }) => id === videoId)
                     if (video) {
                       onSelectVideo(video)
                     }

src/server/actions.ts

@@ -1,17 +1,13 @@
 "use server"
 
 import { revalidatePath } from "next/cache"
-import { submitNewTask } from "."
-
-export async function formSubmit(formData: FormData) {
+import { createNewVideo } from "."
 
+export async function handleFormSubmit(formData: FormData) {
   const ownerId = `${formData.get("ownerId") || ""}`
-  console.log('submitting to ', ownerId)
-  await submitNewTask({
+  await createNewVideo(ownerId, {
     prompt: `${formData.get("prompt") || ""}`,
-    ownerId,
   })
-  console.log('calling revalidate', ownerId)
   // for doc see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
   revalidatePath(`/studio/${ownerId}`)
 }

src/server/base.ts

@@ -3,7 +3,7 @@
 // so we have to add it ourselves if needed
 const apiUrl = process.env.VC_VIDEOCHAIN_API_URL
 
-export const get = async <T>(path: string = '', defaultValue: T): Promise<T> => {
+export const GET = async <T>(path: string = '', defaultValue: T): Promise<T> => {
   try {
     const res = await fetch(`${apiUrl}/${path}`, {
       method: "GET",
@@ -35,7 +35,38 @@ export const get = async <T>(path: string = '', defaultValue: T): Promise<T> =>
 }
 
 
-export const post = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+export const DELETE = async <T>(path: string = '', defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "DELETE",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+     cache: 'no-store',
+     // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+     // next: { revalidate: 1 }
+    })
+
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    console.error(err)
+    return defaultValue
+  }
+}
+
+export const POST = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
   try {
     const res = await fetch(`${apiUrl}/${path}`, {
       method: "POST",
@@ -60,6 +91,69 @@ export const post = async <S, T>(path: string = '', payload: S, defaultValue: T)
     
     const data = await res.json()
 
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    return defaultValue
+  }
+}
+
+
+export const PUT = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "PUT",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify(payload),
+      // cache: 'no-store',
+      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+      next: { revalidate: 1 }
+    })
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to post data')
+    }
+    
+    const data = await res.json()
+
+    return ((data as T) || defaultValue)
+  } catch (err) {
+    return defaultValue
+  }
+}
+
+export const PATCH = async <S, T>(path: string = '', payload: S, defaultValue: T): Promise<T> => {
+  try {
+    const res = await fetch(`${apiUrl}/${path}`, {
+      method: "PATCH",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.VC_SECRET_ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify(payload),
+      // cache: 'no-store',
+      // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+      next: { revalidate: 1 }
+    })
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to post data')
+    }
+    
+    const data = await res.json()
+
     return ((data as T) || defaultValue)
   } catch (err) {
     return defaultValue

src/server/index.ts

@@ -1,39 +1,60 @@
 "use server"
 
-import { VideoTask, VideoTaskRequest } from "@/app/types"
+import { Video, VideoAPIRequest, GenericAPIResponse, VideoStatusRequest, VideoStatus } from "@/app/types"
 
-import { get, post } from "./base"
+import { GET, POST, DELETE, PATCH } from "./base"
 
 // note: for security purposes we do not directly expose the VideoChain API:
 // all calls are protected with a token, that way it the VideooChain API can stay
 // lightweight, security and quotas are handled outside
 
-// attention: this return *ALL* pending tasks, including those of other users
-export const getPendingTasks = async () => {
-  const tasks = await get<VideoTask[]>("", [])
+// this should be used by the admin only
+export const getAllVideos = async () => {
+  const tasks = await GET<Video[]>("", [])
 
   return tasks
 }
 
 // return all tasks of a owner
-export const getTasks = async (ownerId: string) => {
-  const tasks = await get<VideoTask[]>(`owner/${ownerId}`, [])
+export const getVideos = async (ownerId: string) => {
+  const tasks = await GET<Video[]>(ownerId, [])
 
   return tasks
 }
 
-export const getTask = async (ownerAndVideoId: string) => {
-  const task = await get<VideoTask>(ownerAndVideoId, null as unknown as VideoTask)
+export const getVideo = async (ownerId: string, videoId: string) => {
+  const task = await GET<Video>(`${ownerId}/${videoId}`, null as unknown as Video)
 
   return task
 }
 
-export const submitNewTask = async (taskRequest: VideoTaskRequest) => {
-  const task = await post<VideoTaskRequest, VideoTask>(
-    "",
+export const setVideoStatus = async (ownerId: string, videoId: string, status: VideoStatus) => {
+  const task = await PATCH<VideoStatusRequest, GenericAPIResponse>(`${ownerId}/${videoId}`, { status }, null as unknown as Video)
+
+  return task
+}
+
+export const deleteVideo = async (ownerId: string, videoId: string) => {
+  const task = await DELETE<GenericAPIResponse>(`${ownerId}/${videoId}`, { success: true })
+
+  return task
+}
+
+/*
+export async function deleteVideos(ownerId: string, videoIds: string[]) {
+  const task = await DELETE<GenericAPIResponse>(ownerAndVideoId, { success: true })
+  
+  return task
+}
+*/
+
+export const createNewVideo = async (ownerId: string, taskRequest: VideoAPIRequest) => {
+  const task = await POST<VideoAPIRequest, Video>(
+    ownerId,
     taskRequest,
-    null as unknown as VideoTask
+    null as unknown as Video
   )
 
   return task
-}
+}
+