Enable video playback in post previews for better visualization

Update `PreviewModal.tsx` to conditionally render either a video element with controls or an image based on the media type, resolving an issue where videos were not displayed in previews.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis

client/src/components/preview-modal.tsx

@@ -64,6 +64,30 @@ export function PreviewModal({
     }
   };
 
+  const renderMedia = (media: Media, className: string = "w-full h-auto") => {
+    const url = getMediaUrl(media);
+    
+    if (media.type === 'video') {
+      return (
+        <video
+          src={url}
+          className={className}
+          controls
+          playsInline
+          data-testid="video-preview"
+        />
+      );
+    }
+    
+    return (
+      <img
+        src={url}
+        alt={`Photo ${currentPhotoIndex + 1}`}
+        className={className}
+      />
+    );
+  };
+
   const renderFacebookFeed = () => (
     <div className="bg-white rounded-lg overflow-hidden border border-gray-200 max-w-lg mx-auto">
       {/* Header */}
@@ -87,11 +111,7 @@ export function PreviewModal({
       {/* Media Carousel */}
       {orderedMedia.length > 0 && (
         <div className="relative bg-black">
-          <img
+          {renderMedia(orderedMedia[currentPhotoIndex], "w-full h-auto")}
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Photo ${currentPhotoIndex + 1}`}
-            className="w-full h-auto"
-          />
           {orderedMedia.length > 1 && (
             <>
               <button
@@ -149,11 +169,7 @@ export function PreviewModal({
       {/* Media Carousel */}
       {orderedMedia.length > 0 && (
         <div className="relative bg-black aspect-square">
-          <img
+          {renderMedia(orderedMedia[currentPhotoIndex], "w-full h-full object-cover")}
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Photo ${currentPhotoIndex + 1}`}
-            className="w-full h-full object-cover"
-          />
           {orderedMedia.length > 1 && (
             <>
               <button
@@ -221,11 +237,7 @@ export function PreviewModal({
       {/* Media */}
       {orderedMedia.length > 0 && (
         <div className="relative h-full">
-          <img
+          {renderMedia(orderedMedia[currentPhotoIndex], "w-full h-full object-cover")}
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Story ${currentPhotoIndex + 1}`}
-            className="w-full h-full object-cover"
-          />
           {orderedMedia.length > 1 && (
             <>
               <div className="absolute top-3 left-3 right-3 flex gap-1">