Update media Postman collections and dashboard playback

oudelaa_dashboard/components/dashboard/post-preview-card.tsx

@@ -30,15 +30,18 @@ export function PostPreviewCard({ post }: { post: ApiPost }) {
   const durationLabel = formatDuration(post.durationSeconds);
   const [imageFailed, setImageFailed] = useState(false);
   const [sourceFailed, setSourceFailed] = useState(false);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
 
   useEffect(() => {
     setImageFailed(false);
     setSourceFailed(false);
+    setIsVideoPlaying(false);
   }, [media.url, media.sourceUrl]);
 
   const showAudioPreview = media.kind === "audio" && !!media.sourceUrl && !sourceFailed;
-  const showVideoPreview = media.kind === "video" && !!media.sourceUrl && !sourceFailed && (!media.url || imageFailed);
-  const showImagePreview = !!media.url && !imageFailed;
+  const showVideoPreview =
+    media.kind === "video" && !!media.sourceUrl && !sourceFailed && (isVideoPlaying || !media.url || imageFailed);
+  const showImagePreview = !!media.url && !imageFailed && !(media.kind === "video" && isVideoPlaying);
   const showMediaShell = media.kind !== "text";
   const showUnavailable = !showImagePreview && !showVideoPreview && !showAudioPreview;
 
@@ -62,7 +65,9 @@ export function PostPreviewCard({ post }: { post: ApiPost }) {
               <video
                 src={media.sourceUrl}
                 preload="metadata"
-                muted
+                controls={isVideoPlaying}
+                autoPlay={isVideoPlaying}
+                muted={!isVideoPlaying}
                 playsInline
                 onError={() => setSourceFailed(true)}
                 className="h-full w-full object-cover"
@@ -114,7 +119,17 @@ export function PostPreviewCard({ post }: { post: ApiPost }) {
                 </Badge>
               ) : null}
             </div>
-            <div className="absolute bottom-3 right-3 rounded-full border border-border/60 bg-background/85 p-2 text-foreground">
+            {media.kind === "video" && media.sourceUrl && !isVideoPlaying && !sourceFailed ? (
+              <button
+                type="button"
+                aria-label="Play video"
+                onClick={() => setIsVideoPlaying(true)}
+                className="absolute inset-0 z-10 cursor-pointer bg-transparent"
+              >
+                <span className="sr-only">Play video</span>
+              </button>
+            ) : null}
+            <div className="pointer-events-none absolute bottom-3 right-3 z-20 rounded-full border border-border/60 bg-background/85 p-2 text-foreground">
               {media.kind === "audio" ? <AudioLines className="h-4 w-4" /> : <PlayCircle className="h-4 w-4" />}
             </div>
           </div>