From 1f6bd20a13d8fa200adb07499d3ae4bc576f64a7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 7 Aug 2025 10:52:12 +0000
Subject: [PATCH] Improve video player experience with better controls and
 fallback images

Fixes issues with missing thumbnails by adding a fallback image and ensures video controls are properly displayed and hidden.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/AbkXVNx
---
 .../src/components/hls-preview-thumbnail.tsx  | 16 +++++
 client/src/components/video-modal.tsx         | 58 ++++++++++---------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/client/src/components/hls-preview-thumbnail.tsx b/client/src/components/hls-preview-thumbnail.tsx
index 2054801..6798471 100644
--- a/client/src/components/hls-preview-thumbnail.tsx
+++ b/client/src/components/hls-preview-thumbnail.tsx
@@ -192,8 +192,24 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
           alt={video.title}
           className="w-full h-full object-cover transition-all duration-300 group-hover:scale-105"
           data-testid={`img-hls-preview-${video.id}`}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            target.style.display = 'none';
+            // Show fallback background
+            if (target.parentElement) {
+              target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+            }
+          }}
         />
         
+        {/* Fallback for missing thumbnails */}
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-600 to-gray-700 flex items-center justify-center opacity-0">
+          <div className="text-white text-center">
+            <Play className="w-12 h-12 mx-auto mb-2 opacity-50" />
+            <p className="text-sm opacity-75">Video Preview</p>
+          </div>
+        </div>
+        
         {/* Overlay with play button */}
         <div className={`absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center ${
           isHovering ? 'bg-black/50' : ''
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 1fd5827..b1b331a 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -443,6 +443,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
               ref={videoRef}
               className="w-full h-auto max-h-[80vh] cursor-pointer"
               preload="metadata"
+              controls={false}
               onPlay={handleVideoPlay}
               data-testid="video-player"
               crossOrigin="anonymous"
@@ -452,16 +453,18 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
           </video>
           
           {/* Central Play/Pause Button */}
-          {!isPlaying && showControls && (
+          {showControls && (
             <div className="absolute inset-0 flex items-center justify-center">
               <Button
                 onClick={togglePlay}
                 variant="ghost"
                 size="icon"
-                className="w-20 h-20 rounded-full bg-black/50 hover:bg-black/70 text-white border-2 border-white/20 hover:border-white/40 transition-all duration-200"
+                className={`rounded-full bg-black/50 hover:bg-black/70 text-white border-2 border-white/20 hover:border-white/40 transition-all duration-200 ${
+                  isPlaying ? 'w-16 h-16 opacity-0 hover:opacity-100' : 'w-20 h-20 opacity-100'
+                }`}
                 data-testid="button-play-center"
               >
-                <Play className="w-8 h-8 ml-1" />
+                {isPlaying ? <Pause className="w-6 h-6" /> : <Play className="w-8 h-8 ml-1" />}
               </Button>
             </div>
           )}
@@ -645,30 +648,33 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
           </div>
           </div>
 
-          <div className="absolute bottom-16 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 pointer-events-none">
-            <h3 
-              className="text-xl font-semibold mb-2 text-white"
-              data-testid="text-modal-title"
-            >
-              {video.title}
-            </h3>
-            <div className="flex items-center space-x-4 text-sm text-gray-300">
-              <span data-testid="text-modal-views">
-                {formatViews(video.views)}
-              </span>
-              <span data-testid="text-modal-date">
-                {formatDate(video.createdAt)}
-              </span>
-              <span data-testid="text-modal-duration">
-                {formatDuration(video.duration)}
-              </span>
+          {/* Video info - only show when not playing or when controls are visible */}
+          {(!isPlaying || showControls) && (
+            <div className="absolute bottom-16 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 pointer-events-none transition-opacity duration-300">
+              <h3 
+                className="text-xl font-semibold mb-2 text-white"
+                data-testid="text-modal-title"
+              >
+                {video.title}
+              </h3>
+              <div className="flex items-center space-x-4 text-sm text-gray-300">
+                <span data-testid="text-modal-views">
+                  {formatViews(video.views)}
+                </span>
+                <span data-testid="text-modal-date">
+                  {formatDate(video.createdAt)}
+                </span>
+                <span data-testid="text-modal-duration">
+                  {formatDuration(video.duration)}
+                </span>
+              </div>
+              {video.description && (
+                <p className="mt-3 text-gray-300 text-sm" data-testid="text-modal-description">
+                  {video.description}
+                </p>
+              )}
             </div>
-            {video.description && (
-              <p className="mt-3 text-gray-300 text-sm" data-testid="text-modal-description">
-                {video.description}
-              </p>
-            )}
-          </div>
+          )}
         </div>
 
         {/* Video Edit Modal */}