sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video playback by hiding thumbnail before video loads

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 22:59:56 +00:00
parent 71d2f1fdae
commit 69b7473ce0
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/pages/VideoPage.tsx
View File

@ -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>