Spaces:

jbilcke-hf
/

VideoChain-UI

Paused

App Files Files Community

jbilcke-hf HF Staff commited on Jul 21, 2023

Commit

92864d8

1 Parent(s): 0268247

let's try again

Browse files

Files changed (7) hide show

src/app/studio/[ownerId]/main.tsx +5 -2
src/app/studio/[ownerId]/page.tsx +0 -2
src/components/business/refresh.tsx +22 -0
src/components/business/tasks/columns.tsx +5 -14
src/components/business/tasks/video-tasks-queue.tsx +6 -6
src/server/actions.ts +8 -2
src/server/base.ts +2 -2

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

@@ -1,12 +1,14 @@
 "use server"
 // import { experimental_useFormStatus as useFormStatus } from "react-dom"
-import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { formSubmit } from "@/server/actions"
 import { getTasks } from "@/server"
 export default async function Main({ ownerId }: { ownerId: string }) {
   const tasks = await getTasks(ownerId)
@@ -62,6 +64,7 @@ export default async function Main({ ownerId }: { ownerId: string }) {
         </Button>
       </div>
       <VideoTasksQueue tasks={tasks} />
     </form>
   )
 }

 "use server"
 // 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 { getTasks } from "@/server"
+import { VideoTasksQueue } from "@/components/business/tasks/video-tasks-queue"
+import { RefreshStudio } from "@/components/business/refresh"
 export default async function Main({ ownerId }: { ownerId: string }) {
   const tasks = await getTasks(ownerId)
         </Button>
       </div>
       <VideoTasksQueue tasks={tasks} />
+      <RefreshStudio />
     </form>
   )
 }

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

@@ -3,8 +3,6 @@ import Head from "next/head"
 import Main from "./main"
 export default async function StudioPage({ params: { ownerId } }: { params: { ownerId: string }}) {
-  console.log('ownerId:', ownerId)
   return (
     <div>
       <Head>

 import Main from "./main"
 export default async function StudioPage({ params: { ownerId } }: { params: { ownerId: string }}) {
   return (
     <div>
       <Head>

src/components/business/refresh.tsx ADDED Viewed

	@@ -0,0 +1,22 @@

+"use client"
+import { useEffect, useTransition } from "react"
+import { usePathname } from "next/navigation"
+import { refreshStudio } from "@/server/actions"
+export function RefreshStudio() {
+  const pathname = usePathname()
+  const [isPending, startTransition] = useTransition()
+  useEffect(() => {
+    const slug = `${pathname.split("/").pop()}`
+    setInterval(() => {
+      console.log("refresh things!", slug)
+      startTransition(() => refreshStudio(slug))
+    }, 2000)
+  }, [])
+  // TODO we could display a spinner here
+  return <></>
+}

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

@@ -57,25 +57,16 @@ export const columns: ColumnDef<VideoTask>[] = [
     },
   },
   {
-    accessorKey: "status",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Status" />
     ),
     cell: ({ row }) => {
-      const status = statuses.find(
-        (status) => status.value === row.getValue("status")
-      )
-      if (!status) {
-        return null
-      }
       return (
         <div className="flex w-[100px] items-center">
-          {status.icon && (
-            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-          )}
-          <span>{status.label}</span>
         </div>
       )
     },
@@ -93,7 +84,7 @@ export const columns: ColumnDef<VideoTask>[] = [
         className="hover:underline cursor-pointer"
         target="_blank"
         href={`/api/download/${row.getValue("fileName")}`}>
-        <video src={`/api/download/${row.getValue("fileName")}`} muted autoPlay />
       </a>
     </div>,
     enableSorting: false,

     },
   },
   {
+    accessorKey: "progressPercent",
     header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Progress" />
     ),
     cell: ({ row }) => {
+      const progress = Number(row.getValue("progressPercent") || 0)
       return (
         <div className="flex w-[100px] items-center">
+          <span>{progress}%</span>
         </div>
       )
     },
         className="hover:underline cursor-pointer"
         target="_blank"
         href={`/api/download/${row.getValue("fileName")}`}>
+        <video src={`/api/download/${row.getValue("fileName")}?progress=${row.getValue("progressPercent") || 0}`} muted autoPlay loop />
       </a>
     </div>,
     enableSorting: false,

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

@@ -1,6 +1,5 @@
 "use client"
-import * as React from "react"
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -27,19 +26,20 @@ import {
 import { columns } from "@/components/business/tasks/columns"
 import { VideoTask } from "@/app/types"
 export function VideoTasksQueue({
   tasks
 }: {
   tasks: VideoTask[]
 }) {
-  const [rowSelection, setRowSelection] = React.useState({})
   const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     []
   )
-  const [sorting, setSorting] = React.useState<SortingState>([])
   const table = useReactTable({
     data: tasks,
@@ -62,7 +62,7 @@ export function VideoTasksQueue({
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
   })
   return (
     <div className="rounded-lg border overflow-hidden">
       <Table>

 "use client"
 import {
   ColumnDef,
   ColumnFiltersState,
 import { columns } from "@/components/business/tasks/columns"
 import { VideoTask } from "@/app/types"
+import { useState } from "react"
 export function VideoTasksQueue({
   tasks
 }: {
   tasks: VideoTask[]
 }) {
+  const [rowSelection, setRowSelection] = useState({})
   const [columnVisibility, setColumnVisibility] =
+    useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
     []
   )
+  const [sorting, setSorting] = useState<SortingState>([])
   const table = useReactTable({
     data: tasks,
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
   })
   return (
     <div className="rounded-lg border overflow-hidden">
       <Table>

src/server/actions.ts CHANGED Viewed

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

 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 refreshStudio(ownerId: string) {
+  revalidatePath(`/studio/${ownerId}`)
 }

src/server/base.ts CHANGED Viewed

@@ -11,9 +11,9 @@ export const get = async <T>(path: string = '', defaultValue: T): Promise<T> =>
         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: 10 }
     })
     // The return value is *not* serialized

         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: 2 }
     })
     // The return value is *not* serialized