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

Improve video player controls by showing them only on hover

Browse Source 
Add hover effects to video player navigation buttons, making them visible only when the user hovers over the video player.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
This commit is contained in:
sebastjanartic 2025-09-02 15:35:30 +00:00
parent 09320eb976
commit e0e20b7e8b
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -489,7 +489,7 @@ export default function VideoPage() {
<div className="flex-1">
{/* Video player */}
<div
className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"
className="group relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
@ -504,7 +504,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('prev');
}}
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-100"
size="sm"
data-testid="button-prev-video"
>
@ -516,7 +516,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('next');
}}
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-100"
size="sm"
data-testid="button-next-video"
>