From b21206ecc44020c88407dc2182df96e66068fa3c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:35:31 +0000
Subject: [PATCH] Improve video player by hiding picture-in-picture controls

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
---
 client/src/components/netflix-grid.tsx |  8 +-------
 client/src/index.css                   | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 23e526f..59aec91 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -219,13 +219,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   return (
     <div className="relative group mb-8">
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
-        {category.title} ({category.videos.length} videos)
-        <button 
-          onClick={() => alert(`Category: ${category.title}`)}
-          className="ml-4 px-2 py-1 bg-red-500 text-white text-sm rounded"
-        >
-          TEST
-        </button>
+        {category.title}
       </h2>
       
       <div className="relative">
diff --git a/client/src/index.css b/client/src/index.css
index b9dea97..3b895dc 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -359,15 +359,34 @@ input[data-testid*="search"]::placeholder {
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
 video::-moz-picture-in-picture-button {
   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"],
 *[title*="picture"],
-*[data-title*="picture"] {
+*[data-title*="picture"],
+*[class*="picture"],
+*[class*="pip"],
+.vjs-picture-in-picture-control,
+.vjs-pip-button {
   display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
\ No newline at end of file