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

Remove video loading indicator and related states

Browse Source 
Removes the `isVideoLoading` state and associated logic in `VideoPage.tsx` to simplify video playback initialization.

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 23:01:03 +00:00
parent 69b7473ce0
commit b035404a3b
1 changed files with 9 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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