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

Improve video player by hiding picture-in-picture controls

Browse Source 
Removes the picture-in-picture button from Video.js player using CSS targeting and updates the category row component to remove test button.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/EZqddeC
This commit is contained in:
sebastjanartic 2025-08-29 16:35:31 +00:00
parent 98af8fd85f
commit b21206ecc4
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/netflix-grid.tsx
View File

@ -219,13 +219,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
return ( return (
<div className="relative group mb-8"> <div className="relative group mb-8">
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4"> <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title} ({category.videos.length} videos) {category.title}
<button
onClick={() => alert(`Category: ${category.title}`)}
className="ml-4 px-2 py-1 bg-red-500 text-white text-sm rounded"
>
TEST
</button>
</h2> </h2>
<div className="relative"> <div className="relative">

23
client/src/index.css
View File

@ -359,15 +359,34 @@ input[data-testid*="search"]::placeholder {
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
} }
video::-moz-picture-in-picture-button { video::-moz-picture-in-picture-button {
display: none !important; display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
} }
/* Hide any picture-in-picture overlay icons */ /* Hide Video.js picture-in-picture button */
.video-js .vjs-picture-in-picture-control {
display: none !important;
visibility: hidden !important;
}
/* Hide all picture-in-picture related elements */
*[aria-label*="picture"], *[aria-label*="picture"],
*[title*="picture"], *[title*="picture"],
*[data-title*="picture"] { *[data-title*="picture"],
*[class*="picture"],
*[class*="pip"],
.vjs-picture-in-picture-control,
.vjs-pip-button {
display: none !important; display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
} }