feat(upload): preview uploaded videos with ProtectedVideoPlayer

src/app/(modules)/upload/page.tsx

@@ -8,11 +8,11 @@ import { Button } from '@/components/ui/button';
 import type { UploadVideo } from '@/types';
 
 import { CreateUploadDialog } from './components/CreateUploadDialog';
-import { ProcessedVideoDialog } from './components/ProcessedVideoDialog';
 import { UploadCardGrid } from './components/UploadCardGrid';
 import { useUploadColumns } from './components/UploadColumns';
 import { UploadDetailsDialog } from './components/UploadDetailsDialog';
 import { UploadTable } from './components/UploadTable';
+import { UploadVideoDialog } from './components/UploadVideoDialog';
 import { ViewSwitcher } from './components/ViewSwitcher';
 import { useUploadFilters } from './hooks/useUploadFilters';
 import { useMyUploadsQuery } from './hooks/useUploadQueries';
@@ -23,9 +23,7 @@ export default function UploadPage() {
   const uploadsQuery = useMyUploadsQuery({ skip, limit });
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [detailsUpload, setDetailsUpload] = useState<UploadVideo | null>(null);
-  const [processedUpload, setProcessedUpload] = useState<UploadVideo | null>(
-    null,
-  );
+  const [videoUpload, setVideoUpload] = useState<UploadVideo | null>(null);
 
   const uploads = uploadsQuery.data?.items ?? [];
   const total = uploadsQuery.data?.total ?? 0;
@@ -35,24 +33,22 @@ export default function UploadPage() {
     setDetailsUpload(upload);
   }, []);
 
-  const handleViewProcessedVideo = useCallback((upload: UploadVideo) => {
-    setProcessedUpload(upload);
+  const handleViewUploadVideo = useCallback((upload: UploadVideo) => {
+    setVideoUpload(upload);
   }, []);
 
   const handleOpenUpload = useCallback(
     (upload: UploadVideo) => {
-      if (upload.processed_video_url) {
-        handleViewProcessedVideo(upload);
-        return;
+      if (upload.video_url) {
+        handleViewUploadVideo(upload);
       }
-      handleViewDetails(upload);
     },
-    [handleViewDetails, handleViewProcessedVideo],
+    [handleViewUploadVideo],
   );
 
   const columns = useUploadColumns({
+    onViewVideo: handleViewUploadVideo,
     onViewDetails: handleViewDetails,
-    onViewProcessedVideo: handleViewProcessedVideo,
   });
 
   return (
@@ -85,8 +81,8 @@ export default function UploadPage() {
             onLimitChange={setLimit}
             onUploadNew={() => setIsCreateOpen(true)}
             onOpenUpload={handleOpenUpload}
+            onViewVideo={handleViewUploadVideo}
             onViewDetails={handleViewDetails}
-            onViewProcessedVideo={handleViewProcessedVideo}
           />
         ) : (
           <UploadTable
@@ -111,11 +107,11 @@ export default function UploadPage() {
           if (!open) setDetailsUpload(null);
         }}
       />
-      <ProcessedVideoDialog
-        upload={processedUpload}
-        open={Boolean(processedUpload)}
+      <UploadVideoDialog
+        upload={videoUpload}
+        open={Boolean(videoUpload)}
         onOpenChange={(open) => {
-          if (!open) setProcessedUpload(null);
+          if (!open) setVideoUpload(null);
         }}
       />
     </>