add actions

src/components/business/video-form.tsx

@@ -26,10 +26,9 @@ export const VideoForm = () => {
         </div>
         <div className="flex flex-col w-1/2 text-center">
           <p className="text-md font-thin">
-            This is an experimental Space, for research and demonstration purposes only.
-          </p>
-          <p className="text-md font-thin">
-            This page has a unique URL, keep <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">the link</a> to share videos!
+            Video generation use shared resources, so please use responsibly. You can delete pending videos to accelerate other ones.
+            You have been assigned this temporary unique URL ID: <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">{ownerId}</a>
+
           </p>
         </div>
       </div>

src/components/business/videos/columns.tsx

@@ -57,8 +57,20 @@ export const columns: ColumnDef<Video>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Progress" />
     ),
-    cell: ({ row: { original: { progressPercent }} }) => (
-      <div className="flex items-center"><span>{Number(progressPercent || 0)}%</span></div>
+    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,
   },
@@ -111,10 +123,21 @@ export const columns: ColumnDef<Video>[] = [
     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 } }) =>
+    cell: ({ row: { original, original: { status } } }) =>
       <ChangeStatusButton video={original} status="delete">Delete</ChangeStatusButton>,
     enableSorting: false,
     enableHiding: false,