feat: implement thumbnail restoration functionality and enhance video upload process

Author: Lostovayne

next.config.ts

@@ -4,10 +4,6 @@ const nextConfig: NextConfig = {
   /* config options here */
   images: {
     remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "image.mux.com",
-      },
       {
         protocol: "https",
         hostname: "stream.mux.com",

src/app/api/uploadthing/core.ts

@@ -3,7 +3,7 @@ import { users, videos } from "@/db/schema";
 import { auth } from "@clerk/nextjs/server";
 import { and, eq } from "drizzle-orm";
 import { createUploadthing, type FileRouter } from "uploadthing/next";
-import { UploadThingError } from "uploadthing/server";
+import { UploadThingError, UTApi } from "uploadthing/server";
 import z from "zod";
 
 const f = createUploadthing();
@@ -23,13 +23,38 @@ export const ourFileRouter = {
       // Id del usuario de Clerk
       const [user] = await db.select().from(users).where(eq(users.clerkId, clerkUserId));
       if (!user) throw new UploadThingError("Unauthorized");
+
+      // Revisar el video
+      const [existingVideo] = await db
+        .select({
+          thumbnailKey: videos.thumbnailKey,
+        })
+        .from(videos)
+        .where(and(eq(videos.id, input.videoId), eq(videos.userId, user.id)));
+
+      if (!existingVideo) throw new UploadThingError("Video not found");
+
+      if (existingVideo.thumbnailKey) {
+        const utapi = new UTApi();
+        await utapi.deleteFiles(existingVideo.thumbnailKey);
+
+        await db
+          .update(videos)
+          .set({
+            thumbnailUrl: null,
+            thumbnailKey: null,
+          })
+          .where(and(eq(videos.id, input.videoId), eq(videos.userId, user.id)));
+      }
+
       return { user, ...input };
     })
     .onUploadComplete(async ({ metadata, file }) => {
       await db
         .update(videos)
         .set({
           thumbnailUrl: file.ufsUrl,
+          thumbnailKey: file.key,
         })
         .where(and(eq(videos.id, metadata.videoId), eq(videos.userId, metadata.user.id)));
 

src/app/api/videos/webhook/route.ts

@@ -1,6 +1,8 @@
 import { eq } from "drizzle-orm";
 import { headers } from "next/headers";
 
+import { UTApi } from "uploadthing/server";
+
 import { db } from "@/db";
 import { videos } from "@/db/schema";
 import { mux } from "@/lib/mux";
@@ -71,18 +73,33 @@ export const POST = async (request: NextRequest) => {
       if (!playbackId) {
         return new Response("Missing playback ID ", { status: 400 });
       }
-      const thumbnailUrl = `https://image.mux.com/${playbackId}/thumbnail.png`;
-      const previewUrl = `https://image.mux.com/${playbackId}/animated.gif`;
+      const tempThumbnailUrl = `https://image.mux.com/${playbackId}/thumbnail.png`;
+      const tempPreviewUrl = `https://image.mux.com/${playbackId}/animated.gif`;
       const duration = data.duration ? Math.round(data.duration * 1000) : 0;
 
+      const utapi = new UTApi();
+      const [uploadedThumbnail, uploadedPreview] = await utapi.uploadFilesFromUrl([
+        tempThumbnailUrl,
+        tempPreviewUrl,
+      ]);
+
+      if (!uploadedThumbnail.data || !uploadedPreview.data) {
+        return new Response("Failed to upload thumbnails", { status: 500 });
+      }
+
+      const { key: thumbnailKey, ufsUrl: thumbnailUrl } = uploadedThumbnail.data;
+      const { key: previewKey, ufsUrl: previewUrl } = uploadedPreview.data;
+
       await db
         .update(videos)
         .set({
           muxStatus: data.status,
           muxPlaybackId: playbackId,
           muxAssetId: data.id,
           thumbnailUrl,
+          thumbnailKey,
           previewUrl,
+          previewKey,
           duration,
         })
         .where(eq(videos.muxUploadId, data.upload_id));

src/db/schema.ts

@@ -50,7 +50,9 @@ export const videos = pgTable("videos", {
   muxTrackId: text("mux_track_id").unique(),
   muxTrackStatus: text("mux_track_status"),
   thumbnailUrl: text("thumbnail_url"),
+  thumbnailKey: text("thumbnail_key"),
   previewUrl: text("preview_url"),
+  previewKey: text("preview_key"),
   duration: integer("duration").default(0).notNull(),
   visibility: videoVisibility("visibility").notNull().default("private"),
   userId: uuid("user_id")

src/modules/studio/ui/sections/form-section.tsx

@@ -43,15 +43,15 @@ import {
   TrashIcon,
 } from "lucide-react";
 
+import { THUMBNAIL_FALLBACK } from "@/modules/videos/constants";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import { FC, Suspense, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { THUMBNAIL_FALLBACK } from "@/modules/videos/constants";
 import { ThumbnailUploadModal } from "../components/thumbnail-upload-modal";
 
 interface FormSectionProps {
@@ -119,6 +119,24 @@ const FormSectionSuspense: FC<FormSectionProps> = ({ videoId }) => {
     })
   );
 
+  const restoreThumbnail = useMutation(
+    trpc.videos.restoreThumbnail.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: trpc.studio.getMany.queryKey(),
+        });
+        queryClient.invalidateQueries({
+          queryKey: trpc.studio.getOne.queryKey({ id: videoId }),
+        });
+        toast.success("Thumbnail restored successfully");
+      },
+
+      onError: () => {
+        toast.error("Something went wrong");
+      },
+    })
+  );
+
   const form = useForm<z.infer<typeof videoUpdateSchema>>({
     resolver: zodResolver(videoUpdateSchema),
     defaultValues: video,
@@ -242,7 +260,9 @@ const FormSectionSuspense: FC<FormSectionProps> = ({ videoId }) => {
                               <SparklesIcon className="size-4 mr-" />
                               AI-generate
                             </DropdownMenuItem>
-                            <DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => restoreThumbnail.mutate({ id: videoId })}
+                            >
                               <RotateCcwIcon className="size-4 mr-" />
                               Restore
                             </DropdownMenuItem>

src/modules/videos/server/procedures.ts

@@ -4,9 +4,48 @@ import { mux } from "@/lib/mux";
 import { createTRPCRouter, protectedProcedure } from "@/trpc/init";
 import { TRPCError } from "@trpc/server";
 import { and, eq } from "drizzle-orm";
+import { UTApi } from "uploadthing/server";
 import z from "zod";
 
 export const videosRouter = createTRPCRouter({
+  restoreThumbnail: protectedProcedure
+    .input(z.object({ id: z.uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const { id: userId } = ctx.user;
+
+      const [existingVideo] = await db
+        .select()
+        .from(videos)
+        .where(and(eq(videos.id, input.id), eq(videos.userId, userId)));
+
+      if (!existingVideo) {
+        throw new TRPCError({ code: "NOT_FOUND" });
+      }
+
+      if (!existingVideo.muxPlaybackId) {
+        throw new TRPCError({ code: "BAD_REQUEST" });
+      }
+
+      const tempthumbnailUrl = `https://image.mux.com/${existingVideo.muxPlaybackId}/thumbnail.png`;
+
+      const utapi = new UTApi();
+      const uploadedThumbnail = await utapi.uploadFilesFromUrl(tempthumbnailUrl);
+
+      if (!uploadedThumbnail.data) {
+        throw new TRPCError({ code: "BAD_REQUEST" });
+      }
+
+      const { key: thumbnailKey, ufsUrl: thumbnailUrl } = uploadedThumbnail.data;
+
+      const [updatedVideo] = await db
+        .update(videos)
+        .set({ thumbnailUrl, thumbnailKey })
+        .where(and(eq(videos.id, input.id), eq(videos.userId, userId)))
+        .returning();
+
+      return updatedVideo;
+    }),
+
   remove: protectedProcedure.input(z.object({ id: z.uuid() })).mutation(async ({ ctx, input }) => {
     const { id: userId } = ctx.user;