Upload flow refactor - Add video upload API endpoint and refactor video components and schema (#4)

Author: BetrixDev

app/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from "@tanstack/start/api";
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler);

app/components/dialogs/trim-video-dialog.tsx

@@ -52,7 +52,6 @@ function TrimVideoDialogChild() {
   const [videoDurationSeconds, setVideoDurationSeconds] = useState<number>();
 
   const videoUrl = useMemo(
-    // biome-ignore lint/style/noNonNullAssertion: will never be null
     () => URL.createObjectURL(trimVideoData!.file),
     [trimVideoData]
   );

app/components/uploading-videos-container.tsx

@@ -29,9 +29,13 @@ export function UploadingVideosContainer() {
         ),
       };
     });
-    onUploadCancelledServerFn({ data: { videoId } });
 
-    toast.success("Cancelled uploading video", { description: videoTitle });
+    toast.promise(onUploadCancelledServerFn({ data: { videoId } }), {
+      loading: "Cancelling upload...",
+      success: "Upload cancelled",
+      error: "Failed to cancel upload",
+      description: videoTitle,
+    });
   }
 
   return (

app/components/videos-board.tsx

@@ -47,10 +47,10 @@ type Video = {
   smallThumbnailUrl?: string | null;
   triggerAccessToken?: string;
   videoLengthSeconds?: number | null;
-  isProcessing: boolean;
+  status: "uploading" | "processing" | "ready" | "deleting";
   isPrivate: boolean;
   createdAt: string;
-  deletionDate?: string | null;
+  pendingDeletionDate?: string | null;
 };
 
 export function VideosBoard({ videos }: { videos: Video[] }) {
@@ -85,24 +85,17 @@ function UploadedVideo({ video }: { video: Video }) {
       className="dark relative bg-card rounded-lg overflow-hidden shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg group aspect-video border-border/50 hover:border-border flex flex-col justify-between"
     >
       <div className="absolute inset-0">
-        {video.smallThumbnailUrl ? (
-          <img
-            src={video.smallThumbnailUrl}
-            alt={`${video.title} thumbnail`}
-            className="transition-transform duration-200 ease-in-out group-hover:scale-105 w-full"
-          />
-        ) : (
-          <TriggerAuthContext.Provider
-            value={{ accessToken: video.triggerAccessToken }}
-          >
-            <ThumbnailPlaceholder videoId={video.id} />
-          </TriggerAuthContext.Provider>
-        )}
-        <div className="absolute inset-0 bg-black bg-opacity-60 transition-opacity duration-300 ease-in-out group-hover:bg-opacity-40" />
+        <VideoThumbnail
+          smallThumbnailUrl={video.smallThumbnailUrl}
+          title={video.title}
+          videoId={video.id}
+          triggerAccessToken={video.triggerAccessToken}
+        />
+        <div className="absolute inset-0 bg-black bg-opacity-40 transition-opacity duration-300 ease-in-out group-hover:bg-opacity-20" />
       </div>
       <div className="absolute right-0 text-xs flex gap-1 m-1">
-        {!!video.deletionDate && (
-          <PendingDeletionChip deletionDate={video.deletionDate} />
+        {!!video.pendingDeletionDate && (
+          <PendingDeletionChip deletionDate={video.pendingDeletionDate} />
         )}
         {!Number.isNaN(Number.parseFloat(`${video.videoLengthSeconds}`)) && (
           <span className="p-1 bg-black/50 rounded-md backdrop-blur-md">
@@ -199,11 +192,49 @@ function UploadedVideo({ video }: { video: Video }) {
   );
 }
 
+type VideoThumbnailProps = {
+  smallThumbnailUrl?: string | null;
+  title: string;
+  videoId: string;
+  triggerAccessToken?: string;
+};
+
+function VideoThumbnail({
+  smallThumbnailUrl,
+  title,
+  triggerAccessToken,
+  videoId,
+}: VideoThumbnailProps) {
+  if (smallThumbnailUrl) {
+    return (
+      <img
+        src={smallThumbnailUrl}
+        alt={`Thumbnail for ${title}`}
+        className="transition-transform duration-200 ease-in-out group-hover:scale-105 w-full"
+        loading="lazy"
+        decoding="async"
+        draggable="false"
+      />
+    );
+  }
+
+  if (triggerAccessToken) {
+    return (
+      <TriggerAuthContext.Provider value={{ accessToken: triggerAccessToken }}>
+        <ThumbnailPlaceholder videoId={videoId} />
+      </TriggerAuthContext.Provider>
+    );
+  }
+
+  return null;
+}
+
 type ThumbnailPlaceholderProps = {
   videoId: string;
 };
+
 function ThumbnailPlaceholder(props: ThumbnailPlaceholderProps) {
-  const { runs } = useRealtimeRunsWithTag(`video-processing-${props.videoId}`);
+  const { runs } = useRealtimeRunsWithTag(`videoProcessing_${props.videoId}`);
 
   useEffect(() => {
     for (const run of runs) {

app/lib/env.ts

@@ -23,11 +23,11 @@ export const env = createEnv({
     PREMIUM_PRODUCT_ID: z.string(),
     PRO_PRODUCT_ID: z.string(),
     TOKEN_SIGNING_SECRET: z.string(),
+    UPLOADTHING_TOKEN: z.string(),
+    UPLOADTHING_APP_ID: z.string(),
   },
   clientPrefix: "VITE_",
-  client: {
-    VITE_CLERK_PUBLISHABLE_KEY: z.string().min(1),
-  },
+  client: {},
   skipValidation: process.env.NODE_ENV === undefined,
   runtimeEnv: process.env,
   emptyStringAsUndefined: true,

app/lib/query-utils.ts

@@ -35,18 +35,18 @@ const fetchVideos = createServerFn({ method: "GET" })
         id: true,
         isPrivate: true,
         videoLengthSeconds: true,
-        isProcessing: true,
+        status: true,
         createdAt: true,
         smallThumbnailKey: true,
-        deletionDate: true,
+        pendingDeletionDate: true,
       },
     });
 
     const mappedVideos = (videoData ?? []).map((video) => {
       const data = {
         ...video,
         createdAt: video.createdAt.toISOString(),
-        deletionDate: video.deletionDate?.toISOString(),
+        pendingDeletionDate: video.pendingDeletionDate?.toISOString(),
         smallThumbnailUrl: video.smallThumbnailKey
           ? `${env.THUMBNAIL_BASE_URL}/${video.smallThumbnailKey}`
           : undefined,

app/lib/schema.ts

@@ -38,6 +38,38 @@ export const usersRelations = relations(users, ({ many }) => ({
   videos: many(videos),
 }));
 
+export type UtVideoSource = {
+  source: "ut";
+  url: string;
+  key: string;
+  isNative: boolean;
+  type?: string;
+};
+
+export type S3VideoSource = {
+  source: "s3";
+  key: string;
+  isNative: boolean;
+  type?: string;
+  width?: number;
+  height?: number;
+  bitrate?: number;
+};
+
+export type VideoSource = UtVideoSource | S3VideoSource;
+
+export type VideoStatus = "uploading" | "processing" | "ready" | "deleting";
+
+export type VideoStoryboard = {
+  tileWidth: number;
+  tileHeight: number;
+  tiles: {
+    startTime: number;
+    x: number;
+    y: number;
+  }[];
+};
+
 export const videos = pgTable(
   "videos",
   {
@@ -46,7 +78,8 @@ export const videos = pgTable(
       .references(() => users.id, { onDelete: "cascade" })
       .notNull(),
     title: text("title").notNull(),
-    nativeFileKey: text("native_file_key").notNull(),
+    status: text("status").$type<VideoStatus>().notNull().default("uploading"),
+    sources: jsonb("sources").$type<VideoSource[]>().notNull().default([]),
     smallThumbnailKey: text("small_thumbnail_key"),
     largeThumbnailKey: text("large_thumbnail_key"),
     createdAt: timestamp("created_at", { withTimezone: false })
@@ -55,40 +88,20 @@ export const videos = pgTable(
     updatedAt: timestamp("updated_at", { withTimezone: false })
       .notNull()
       .defaultNow(),
-    deletionDate: timestamp("deletion_date", { withTimezone: false }),
-    isPrivate: boolean("is_private").notNull().default(false),
     views: bigint("views", { mode: "number" }).notNull().default(0),
     fileSizeBytes: real("file_size_bytes").notNull(),
     videoLengthSeconds: integer("video_length_seconds"),
-    isProcessing: boolean("is_processing").notNull().default(true),
-    storyboardJson: jsonb("storyboard_json").$type<{
-      tileWidth: number;
-      tileHeight: number;
-      tiles: {
-        startTime: number;
-        x: number;
-        y: number;
-      }[];
-    }>(),
-    sources: jsonb("sources")
-      .$type<
-        {
-          key: string;
-          type: string;
-          width?: number;
-          height?: number;
-          bitrate?: number;
-          isNative: boolean;
-        }[]
-      >()
-      .notNull()
-      .default([]),
+    isPrivate: boolean("is_private").notNull().default(false),
+    storyboardJson: jsonb("storyboard_json").$type<VideoStoryboard>(),
+    pendingDeletionDate: timestamp("pending_deletion_date"),
   },
   (table) => ({
     authorId_idx: index("authorId_idx").on(table.authorId),
     videoId_idx: index("videoId_idx").on(table.id),
     createdAt_idx: index("createdAt_idx").on(table.createdAt),
-    deletionDate_idx: index("deletionDate_idx").on(table.deletionDate),
+    pendingDeletionDate_idx: index("pendingDeletionDate_idx").on(
+      table.pendingDeletionDate
+    ),
   })
 );