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

Improve video player navigation and playback controls for better user experience

Browse Source 
Update VideoPage component to adjust styling for previous/next video buttons and iframe element. Specifically, modifies button background opacity, removes z-index from iframe, and adds pointer-events style to both buttons and iframe for improved interaction.

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/zJYuV6w
This commit is contained in:
sebastjanartic 2025-08-30 23:07:59 +00:00
parent 03b851afa9
commit 011730c699
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -416,7 +416,8 @@ export default function VideoPage() {
<>
<Button
onClick={() => navigateToVideo('prev')}
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-3 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center"
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center"
style={{ zIndex: 999, pointerEvents: 'auto' }}
size="sm"
data-testid="button-prev-video"
>
@ -424,7 +425,8 @@ export default function VideoPage() {
</Button>
<Button
onClick={() => navigateToVideo('next')}
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-3 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center"
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/90 hover:bg-black text-white border-none p-3 rounded-full shadow-lg hidden md:flex items-center justify-center"
style={{ zIndex: 999, pointerEvents: 'auto' }}
size="sm"
data-testid="button-next-video"
>
@ -435,7 +437,8 @@ export default function VideoPage() {
{currentVideo.videoUrlIframe ? (
<iframe
src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
className="absolute inset-0 w-full h-full z-10"
className="absolute inset-0 w-full h-full"
style={{ pointerEvents: 'auto' }}
frameBorder="0"
allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"