From 69b7473ce0c88f540126e8101eb9ec621d256842 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 22:59:56 +0000
Subject: [PATCH] Improve video playback by hiding thumbnail before video loads

Add a loading indicator and manage video loading state to prevent the thumbnail from appearing briefly before playback starts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
---
 client/src/pages/VideoPage.tsx | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index a088bb0..2eaa0ec 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -60,6 +60,7 @@ export default function VideoPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
 
   // Fetch current video
   const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@@ -102,6 +103,11 @@ export default function VideoPage() {
   };
   
   
+  // Reset video loading state when video changes
+  useEffect(() => {
+    setIsVideoLoading(true);
+  }, [videoId]);
+
   // Update page meta tags for social sharing
   useEffect(() => {
     if (currentVideo) {
@@ -179,6 +185,7 @@ export default function VideoPage() {
   };
 
   const handleVideoPlay = async () => {
+    setIsVideoLoading(false);
     if (currentVideo) {
       try {
         await apiRequest("POST", `/api/videos/${currentVideo.id}/view`);
@@ -433,15 +440,23 @@ export default function VideoPage() {
                 </>
               )}
               {currentVideo.videoUrlIframe ? (
-                <iframe
-                  src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
-                  className="absolute inset-0 w-full h-full"
-                  frameBorder="0"
-                  allowFullScreen
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  onLoad={handleVideoPlay}
-                  title={currentVideo.title}
-                />
+                <>
+                  {/* Loading overlay with smooth fade out */}
+                  {isVideoLoading && (
+                    <div className="absolute inset-0 bg-black flex items-center justify-center z-10 transition-opacity duration-300">
+                      <div className="text-white text-lg">Lade Video...</div>
+                    </div>
+                  )}
+                  <iframe
+                    src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
+                    className="absolute inset-0 w-full h-full"
+                    frameBorder="0"
+                    allowFullScreen
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    onLoad={handleVideoPlay}
+                    title={currentVideo.title}
+                  />
+                </>
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">
                   <p>Video nicht verfügbar</p>