⚡Displacy video processing error on the App

streamethorg · Aug 12, 2024 · d0c93ef · d0c93ef
1 parent 11c0363
commit d0c93ef
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 35 deletions.
diff --git a/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx b/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx
@@ -22,7 +22,7 @@ const DeleteAsset = ({
   TriggerComponent,
 }: {
   session: IExtendedSession;
-  href: string | 'refresh';
+  href?: string;
   TriggerComponent: ReactNode;
 }) => {
   const router = useRouter();
@@ -36,22 +36,29 @@ const DeleteAsset = ({
     });
     setLoading(false);
 
-    if (href === 'refresh') {
-      router.refresh();
+    if (href) {
+      router.push(href);
     }
-    router.push(href);
   };
 
   return (
     <Dialog>
       <DialogTrigger asChild>{TriggerComponent}</DialogTrigger>
-      <DialogContent className="p-10 sm:max-w-[475px]">
+      <DialogContent className="p-10">
         <DialogHeader className="mx-auto space-y-4">
           <div className="mx-auto rounded-full bg-red-500 p-4">
             <Trash2 className="text-white" />
           </div>
-          <DialogTitle>Are you sure you want to delete?</DialogTitle>
+          <DialogTitle className="text-center">
+            Are you sure you want to delete this?
+          </DialogTitle>
         </DialogHeader>
+        <div>
+          <p>
+            If the video was created from a livestream, you can simply re-clip
+            the video without having to delete anything.
+          </p>
+        </div>
         <DialogFooter className="mx-auto">
           <DialogClose>
             <Button variant={'secondary'}>Cancel</Button>

diff --git a/packages/app/app/studio/[organization]/library/components/TableCells.tsx b/packages/app/app/studio/[organization]/library/components/TableCells.tsx
@@ -14,6 +14,7 @@ import {
 import { generateThumbnailAction } from '@/lib/actions/sessions';
 import Thumbnail from '@/components/misc/VideoCard/thumbnail';
 import PublishCell from './PublishCell';
+import { ClippingStatus } from 'streameth-new-server/src/interfaces/session.interface';
 
 const TableCells = async ({
   item,
@@ -27,7 +28,10 @@ const TableCells = async ({
     await fetchSessionMetrics({ playbackId: item.playbackId ?? '' })
   ).viewCount;
 
-  if (!item.videoUrl) {
+  if (
+    item.clippingStatus === ClippingStatus.pending ||
+    item.clippingStatus === ClippingStatus.failed
+  ) {
     return <ProcessingSkeleton item={item} />;
   }
 

diff --git a/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx b/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx
@@ -86,7 +86,6 @@ export const PopoverActions = ({
         )}
         <DeleteAsset
           session={session}
-          href={`/studio/${organizationSlug}/library`}
           TriggerComponent={
             <span
               className={buttonVariants({

diff --git a/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx b/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx
@@ -1,17 +1,24 @@
 'use client';
 
 import { TableCell } from '@/components/ui/table';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Trash2 } from 'lucide-react';
 import Image from 'next/image';
 import DefaultThumbnail from '@/lib/svg/DefaultThumbnail';
 import { AspectRatio } from '@radix-ui/react-aspect-ratio';
 import { formatDate } from '@/lib/utils/time';
 import { IExtendedSession } from '@/lib/types';
+import { ClippingStatus } from 'streameth-new-server/src/interfaces/session.interface';
+import DeleteAsset from '../DeleteAsset';
+import { Button } from '@/components/ui/button';
 
 const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
+  const isPending = item.clippingStatus === ClippingStatus.pending;
+
+  const getStatusClassName = () =>
+    isPending ? 'bg-muted cursor-not-allowed opacity-50' : '';
   return (
     <>
-      <TableCell className="relative cursor-not-allowed bg-muted font-medium opacity-50">
+      <TableCell className={`relative  font-medium ${getStatusClassName()}`}>
         <div className="flex w-full flex-row items-center space-x-4">
           <div className="min-w-[100px]">
             <AspectRatio ratio={16 / 9}>
@@ -33,21 +40,40 @@ const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
           <span className="line-clamp-3 text-gray-400">{item.name}</span>
         </div>
       </TableCell>
-      <TableCell className="cursor-not-allowed bg-muted opacity-50">
-        <div className="flex items-center justify-start space-x-2">
-          <span>Processing...</span>
-          <Loader2 className="animate-spin" />
-        </div>
+      <TableCell className={`  ${getStatusClassName()}`}>
+        {isPending ? (
+          <div className="flex items-center  justify-start space-x-2">
+            <span>Processing...</span>
+            <Loader2 className="animate-spin" />
+          </div>
+        ) : (
+          <span className="text-destructive">Processing Failed!</span>
+        )}
       </TableCell>
       {item.createdAt && (
-        <TableCell className="cursor-not-allowed truncate bg-muted opacity-50">
+        <TableCell className={` truncate ${getStatusClassName()}`}>
           {formatDate(new Date(item.createdAt as string), 'ddd. MMM. D, YYYY')}
         </TableCell>
       )}
-      <TableCell className="relative cursor-not-allowed bg-muted opacity-50">
+      <TableCell className={`relative  ${getStatusClassName()}`}>
         <div className="h-[15px] w-[200px] animate-pulse rounded-md bg-gray-200"></div>
       </TableCell>
-      <TableCell className="cursor-not-allowed bg-muted opacity-50"></TableCell>
+      <TableCell className={`  ${getStatusClassName()}`}>
+        {!isPending && (
+          <DeleteAsset
+            session={item}
+            TriggerComponent={
+              <Button
+                variant={'destructive-outline'}
+                className="space-x-2 hover:bg-gray-100"
+              >
+                <Trash2 />
+                <p>Delete video</p>
+              </Button>
+            }
+          />
+        )}
+      </TableCell>
     </>
   );
 };

diff --git a/packages/app/app/studio/[organization]/library/page.tsx b/packages/app/app/studio/[organization]/library/page.tsx
@@ -17,11 +17,6 @@ import Pagination from '@/app/[organization]/videos/components/pagination';
 import SearchBar from '@/components/misc/SearchBar';
 import LibraryFilter from './components/LibraryFilter';
 import { fetchOrganizationStages } from '@/lib/services/stageService';
-import { fetchAllStates } from '@/lib/services/stateService';
-import {
-  StateStatus,
-  StateType,
-} from 'streameth-new-server/src/interfaces/state.interface';
 
 const Loading = ({ layout }: { layout: string }) => {
   return (
@@ -72,15 +67,6 @@ const Library = async ({
     organizationId: organization._id,
   });
 
-  const statesSet = new Set(
-    (
-      await fetchAllStates({
-        type: StateType.video,
-        status: StateStatus.pending,
-      })
-    ).map((state) => state.sessionId) as unknown as Set<string>
-  );
-
   let sessions = await fetchAllSessions({
     organizationSlug: params.organization,
     limit: searchParams.limit || 20,
@@ -93,7 +79,7 @@ const Library = async ({
   });
 
   let filteredSession = sessions.sessions.filter(
-    (session) => session.videoUrl || statesSet.has(session._id.toString())
+    (session) => session.playbackId
   );
 
   const sortedSessions = sortArray(

diff --git a/packages/server/src/routes/routes.ts b/packages/server/src/routes/routes.ts
@@ -294,7 +294,7 @@ const models: TsoaRoute.Models = {
   // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
   StateStatus: {
     dataType: 'refEnum',
-    enums: ['pending', 'completed', 'canceled', 'sync', 'error'],
+    enums: ['pending', 'completed', 'canceled', 'sync', 'failed'],
   },
   // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
   StateType: {
@@ -797,6 +797,11 @@ const models: TsoaRoute.Models = {
     enums: ['clip', 'livestream', 'video'],
   },
   // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
+  ClippingStatus: {
+    dataType: 'refEnum',
+    enums: ['pending', 'failed', 'completed'],
+  },
+  // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
   ISession: {
     dataType: 'refObject',
     properties: {
@@ -869,6 +874,7 @@ const models: TsoaRoute.Models = {
       },
       firebaseId: { dataType: 'string' },
       talkType: { dataType: 'string' },
+      clippingStatus: { ref: 'ClippingStatus' },
     },
     additionalProperties: false,
   },
@@ -956,6 +962,7 @@ const models: TsoaRoute.Models = {
         },
         firebaseId: { dataType: 'string' },
         talkType: { dataType: 'string' },
+        clippingStatus: { ref: 'ClippingStatus' },
       },
       validators: {},
     },
@@ -1014,6 +1021,7 @@ const models: TsoaRoute.Models = {
       },
       firebaseId: { dataType: 'string' },
       talkType: { dataType: 'string' },
+      clippingStatus: { ref: 'ClippingStatus' },
       autolabels: { dataType: 'array', array: { dataType: 'string' } },
     },
     additionalProperties: false,

diff --git a/packages/server/src/swagger/swagger.json b/packages/server/src/swagger/swagger.json
@@ -420,7 +420,7 @@
         "type": "string"
       },
       "StateStatus": {
-        "enum": ["pending", "completed", "canceled", "sync", "error"],
+        "enum": ["pending", "completed", "canceled", "sync", "failed"],
         "type": "string"
       },
       "StateType": {
@@ -1268,6 +1268,10 @@
         "enum": ["clip", "livestream", "video"],
         "type": "string"
       },
+      "ClippingStatus": {
+        "enum": ["pending", "failed", "completed"],
+        "type": "string"
+      },
       "ISession": {
         "properties": {
           "_id": {
@@ -1422,6 +1426,9 @@
           },
           "talkType": {
             "type": "string"
+          },
+          "clippingStatus": {
+            "$ref": "#/components/schemas/ClippingStatus"
           }
         },
         "required": [
@@ -1602,6 +1609,9 @@
           },
           "talkType": {
             "type": "string"
+          },
+          "clippingStatus": {
+            "$ref": "#/components/schemas/ClippingStatus"
           }
         },
         "required": [
@@ -1746,6 +1756,9 @@
           "talkType": {
             "type": "string"
           },
+          "clippingStatus": {
+            "$ref": "#/components/schemas/ClippingStatus"
+          },
           "autolabels": {
             "items": {
               "type": "string"