Spaces:

jbilcke-hf
/

VideoChain-UI

Paused

App Files Files Community

jbilcke-hf HF staff commited on Jul 21, 2023

Commit

c90a662

•

1 Parent(s): 40e9c34

added preview

Browse files

Files changed (9) hide show

src/app/studio/[ownerId]/main.tsx +17 -9
src/app/studio/[ownerId]/page.tsx +6 -1
src/components/business/refresh.tsx +2 -0
src/components/business/tasks/columns.tsx +6 -8
src/components/business/tasks/video-tasks-queue.tsx +13 -4
src/components/business/{videoForm.tsx → video-form.tsx} +0 -0
src/components/business/video-player.tsx +29 -0
src/server/actions.ts +2 -1
src/server/base.ts +2 -2

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

@@ -1,18 +1,26 @@
-"use server"
-import { getTasks } from "@/server"
 import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
 import { RefreshStudio } from "@/components/business/refresh"
-import { VideoForm } from "@/components/business/videoForm"
-export default async function Main({ ownerId }: { ownerId: string }) {
-  const tasks = await getTasks(ownerId)
   return (
-    <div className="h-full flex flex-col space-y-4 max-w-4xl w-full px-4 py-8">
-      <VideoForm />
-      <VideoTasksQueue tasks={tasks} />
-      <RefreshStudio />
     </div>
   )
 }

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

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

@@ -1,15 +1,20 @@
 import Head from "next/head"
 import Main from "./main"
 export default async function StudioPage({ params: { ownerId } }: { params: { ownerId: string }}) {
   return (
     <div>
       <Head>
         <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 ownerId={`${ownerId || ""}`} />
       </main>
     </div>
   )

+"use server"
 import Head from "next/head"
 import Main from "./main"
+import { getTasks } from "@/server"
 export default async function StudioPage({ params: { ownerId } }: { params: { ownerId: string }}) {
+  const videoTasks = await getTasks(ownerId)
   return (
     <div>
       <Head>
         <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>
     </div>
   )

src/components/business/refresh.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ export function RefreshStudio() {
   const pathname = usePathname()
   const [isPending, startTransition] = useTransition()
   useEffect(() => {
     const slug = `${pathname.split("/").pop()}`
     setInterval(() => {
@@ -22,6 +23,7 @@ export function RefreshStudio() {
       })
     }, 2000)
   }, [])
   // TODO we could display a spinner here
   return <></>

   const pathname = usePathname()
   const [isPending, startTransition] = useTransition()
+  /*
   useEffect(() => {
     const slug = `${pathname.split("/").pop()}`
     setInterval(() => {
       })
     }, 2000)
   }, [])
+  */
   // TODO we could display a spinner here
   return <></>

src/components/business/tasks/columns.tsx CHANGED Viewed

@@ -32,12 +32,10 @@ export const columns: ColumnDef<VideoTask>[] = [
   },
   {
     accessorKey: "id",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Video ID" />
-    ),
-    cell: ({ row }) => <div className="w-[80px]">{`${row.getValue("id") || ''}`.split("-")[0]}..</div>,
     enableSorting: false,
-    enableHiding: false,
   },
   {
     accessorKey: "videoPrompt",
@@ -63,7 +61,7 @@ export const columns: ColumnDef<VideoTask>[] = [
       const progress = Number(row.getValue("progressPercent") || 0)
       return (
-        <div className="flex w-[100px] items-center">
           <span>{progress}%</span>
         </div>
       )
@@ -77,12 +75,12 @@ export const columns: ColumnDef<VideoTask>[] = [
     header: ({ column }) => (
       null // no header
     ),
-    cell: ({ row }) => <div className="w-[200px]">
       <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 autoPlay loop />
       </a>
     </div>,
     enableSorting: false,

   },
   {
     accessorKey: "id",
+    header: ({ column }) => null,
+    cell: ({ row }) => null,
     enableSorting: false,
+    enableHiding: true,
   },
   {
     accessorKey: "videoPrompt",
       const progress = Number(row.getValue("progressPercent") || 0)
       return (
+        <div className="flex w-[30px] items-center">
           <span>{progress}%</span>
         </div>
       )
     header: ({ column }) => (
       null // no header
     ),
+    cell: ({ row }) => <div className="w-[120px]">
       <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 />
       </a>
     </div>,
     enableSorting: false,

src/components/business/tasks/video-tasks-queue.tsx CHANGED Viewed

@@ -29,9 +29,11 @@ import { VideoTask } from "@/app/types"
 import { useState } from "react"
 export function VideoTasksQueue({
-  tasks
 }: {
-  tasks: VideoTask[]
 }) {
   const [rowSelection, setRowSelection] = useState({})
   const [columnVisibility, setColumnVisibility] =
@@ -42,7 +44,7 @@ export function VideoTasksQueue({
   const [sorting, setSorting] = useState<SortingState>([])
   const table = useReactTable({
-    data: tasks,
     columns: columns as ColumnDef<VideoTask, any>[],
     state: {
       sorting,
@@ -92,7 +94,14 @@ export function VideoTasksQueue({
                 data-state={row.getIsSelected() && "selected"}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
                     {flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()

 import { useState } from "react"
 export function VideoTasksQueue({
+  videoTasks = [],
+  onSelectVideo,
 }: {
+  videoTasks: VideoTask[]
+  onSelectVideo: (task: VideoTask) => void
 }) {
   const [rowSelection, setRowSelection] = useState({})
   const [columnVisibility, setColumnVisibility] =
   const [sorting, setSorting] = useState<SortingState>([])
   const table = useReactTable({
+    data: videoTasks,
     columns: columns as ColumnDef<VideoTask, any>[],
     state: {
       sorting,
                 data-state={row.getIsSelected() && "selected"}
               >
                 {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}
+                  onClick={() => {
+                    const videoId = `${row.getValue("id") || ""}`
+                    const video = videoTasks.find(({ id }) => id === videoId)
+                    if (video) {
+                      onSelectVideo(video)
+                    }
+                  }}>
                     {flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()

src/components/business/{videoForm.tsx → video-form.tsx} RENAMED Viewed

File without changes

src/components/business/video-player.tsx ADDED Viewed

	@@ -0,0 +1,29 @@

+"use client"
+import { VideoTask } from "@/app/types"
+export const VideoPlayer = ({ video }: { video?: VideoTask }) => {
+  if (typeof video === "undefined") {
+    return <p>No video to display</p>
+  }
+  return (
+    <div className="w-full py-8 px-2">
+       <video
+          src={`${
+            process.env.NEXT_PUBLIC_DOWNLOAD_URL
+          }/${
+            video.fileName
+          }?progress=${
+            video.progressPercent
+          }`}
+          muted
+          autoPlay
+          loop
+          controls
+          className="w-full rounded-md overflow-hidden"
+        />
+    </div>
+  )
+}

src/server/actions.ts CHANGED Viewed

@@ -6,11 +6,12 @@ import { submitNewTask } from "."
 export async function formSubmit(formData: FormData) {
   const ownerId = `${formData.get("ownerId") || ""}`
   await submitNewTask({
     prompt: `${formData.get("prompt") || ""}`,
     ownerId,
   })
   // for doc see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
   revalidatePath(`/studio/${ownerId}`)
 }

 export async function formSubmit(formData: FormData) {
   const ownerId = `${formData.get("ownerId") || ""}`
+  console.log('submitting to ', ownerId)
   await submitNewTask({
     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 CHANGED Viewed

@@ -45,9 +45,9 @@ export const post = async <S, T>(path: string = '', payload: S, defaultValue: T)
         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: 10 }
     })
     // The return value is *not* serialized
     // You can return Date, Map, Set, etc.

         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.