refactor: video section ui modification

2026-06-23 10:29:09 +05:30
parent 664d80809a
commit a731fca5e0
17 changed files with 668 additions and 378 deletions
--- a/src/components/media/ProtectedVideoPlayer.tsx
+++ b/src/components/media/ProtectedVideoPlayer.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { Video } from 'lucide-react';
+
+import { Skeleton } from '@/components/ui/skeleton';
+import { useProtectedMediaObjectUrl } from '@/hooks/useProtectedMedia';
+import { cn } from '@/lib/utils';
+
+interface ProtectedVideoPlayerProps {
+  url: string | null | undefined;
+  label?: string;
+  meta?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  unavailableTitle?: string;
+  className?: string;
+}
+
+export function ProtectedVideoPlayer({
+  url,
+  label,
+  meta,
+  emptyTitle = 'No video available',
+  emptyDescription,
+  unavailableTitle = 'Video unavailable',
+  className,
+}: ProtectedVideoPlayerProps) {
+  const { objectUrl, isLoading, isError } = useProtectedMediaObjectUrl(url);
+
+  if (!url) {
+    return (
+      <VideoState
+        title={emptyTitle}
+        description={emptyDescription}
+        className={className}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Skeleton
+        className={cn('aspect-video w-full rounded-md border', className)}
+      />
+    );
+  }
+
+  if (isError || !objectUrl) {
+    return (
+      <VideoState
+        title={unavailableTitle}
+        description="The video could not be loaded right now."
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative overflow-hidden rounded-md border bg-black/90',
+        className,
+      )}
+    >
+      <video
+        src={objectUrl}
+        className="aspect-video w-full object-cover"
+        controls
+        playsInline
+      />
+
+      {label ? (
+        <span className="absolute top-3 left-3 rounded bg-black/65 px-2.5 py-1 text-[11px] font-semibold text-white backdrop-blur-sm">
+          {label}
+        </span>
+      ) : null}
+
+      {meta ? (
+        <span className="pointer-events-none absolute top-3 right-3 max-w-[55%] truncate text-xs font-medium">
+          {meta}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function VideoState({
+  title,
+  description,
+  className,
+}: {
+  title: string;
+  description?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex aspect-video flex-col items-center justify-center rounded-md border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center',
+        className,
+      )}
+    >
+      <Video className="mb-3 size-6 text-muted-foreground" />
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      {description ? (
+        <p className="mt-1 max-w-xs text-xs text-muted-foreground/80">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}