feat(upload): preview uploaded videos with ProtectedVideoPlayer

src/components/media/ProtectedVideoPlayer.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Video } from 'lucide-react';
+import { Loader2, Video } from 'lucide-react';
 
-import { Skeleton } from '@/components/ui/skeleton';
 import { useProtectedMediaObjectUrl } from '@/hooks/useProtectedMedia';
 import { cn } from '@/lib/utils';
 
@@ -39,9 +38,20 @@ export function ProtectedVideoPlayer({
 
   if (isLoading) {
     return (
-      <Skeleton
-        className={cn('aspect-video w-full rounded-md border', className)}
-      />
+      <div
+        className={cn(
+          'flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-md border bg-muted/30 text-foreground',
+          className,
+        )}
+      >
+        <Loader2 className="size-7 animate-spin text-primary" />
+        <div className="text-center">
+          <p className="text-sm font-medium">Loading video</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Preparing secure playback...
+          </p>
+        </div>
+      </div>
     );
   }