From 68ed5d52d4cb81e81e3fc9d87bd4110bea9fe7e9 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 13 Oct 2025 12:03:11 +0000
Subject: [PATCH] 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 | 42 ++++++++++++++++---------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/client/src/components/preview-modal.tsx b/client/src/components/preview-modal.tsx
index 9b796f9..b47ee99 100644
--- a/client/src/components/preview-modal.tsx
+++ b/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
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Photo ${currentPhotoIndex + 1}`}
-            className="w-full h-auto"
-          />
+          {renderMedia(orderedMedia[currentPhotoIndex], "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
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Photo ${currentPhotoIndex + 1}`}
-            className="w-full h-full object-cover"
-          />
+          {renderMedia(orderedMedia[currentPhotoIndex], "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
-            src={getMediaUrl(orderedMedia[currentPhotoIndex])}
-            alt={`Story ${currentPhotoIndex + 1}`}
-            className="w-full h-full object-cover"
-          />
+          {renderMedia(orderedMedia[currentPhotoIndex], "w-full h-full object-cover")}
           {orderedMedia.length > 1 && (
             <>
               <div className="absolute top-3 left-3 right-3 flex gap-1">