From 09bd4d59b14ac3cae43135b5b6f72fe38887d306 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 2 Oct 2025 12:20:36 +0300
Subject: [PATCH] Style and wrap picture-in-picture button in VideoJS

Added custom CSS for the picture-in-picture button wrapper to ensure consistent sizing and alignment with other controls. Updated VideoJSPlayer.jsx to wrap the PiP button in a styled container for improved UI consistency.
---
 frontend-tools/video-js/src/VideoJS.css       | 54 +++++++++++++++++++
 .../components/video-player/VideoJSPlayer.jsx | 18 +++++++
 2 files changed, 72 insertions(+)

diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index 4157d1f7..09fadf7f 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -119,6 +119,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-play-wrapper:hover {
@@ -137,6 +140,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-next-video-wrapper:hover {
@@ -155,6 +161,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: auto !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-volume-wrapper:hover {
@@ -173,6 +182,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-autoplay-wrapper:hover {
@@ -191,6 +203,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-chapters-button.vjs-menu-button:hover {
@@ -209,6 +224,9 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-subtitles-button.vjs-menu-button:hover {
@@ -227,12 +245,48 @@ html {
     padding: 2px !important;
     margin: 0 2px !important;
     transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
 }
 
 .video-js .vjs-settings-wrapper:hover {
     background: rgba(0, 0, 0, 0.2) !important;
 }
 
+/* Picture-in-picture button wrapper styling */
+.video-js .vjs-pip-wrapper {
+    order: 9 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: relative !important;
+    background: rgba(0, 0, 0, 0.1) !important;
+    border-radius: 6px !important;
+    padding: 2px !important;
+    margin: 0 2px !important;
+    transition: background-color 0.3s ease !important;
+    width: 40px !important;
+    height: 40px !important;
+    flex-shrink: 0 !important;
+}
+
+.video-js .vjs-pip-wrapper:hover {
+    background: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Center the pip button inside its wrapper */
+.video-js .vjs-pip-wrapper .vjs-picture-in-picture-control {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 36px !important;
+    height: 36px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: relative !important;
+}
+
 .video-js .vjs-control {
     height: auto !important;
 }
diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index c6820523..1d74a16f 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2737,6 +2737,24 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             }
                         }, 200); // Longer delay to ensure settings button is fully created
 
+                        // Wrap picture-in-picture button in custom div container
+                        setTimeout(() => {
+                            const controlBar = playerRef.current.getChild('controlBar');
+                            const pipControl = controlBar?.getChild('pictureInPictureToggle');
+                            if (pipControl) {
+                                const pipButtonEl = pipControl.el();
+                                if (pipButtonEl) {
+                                    const pipWrapper = document.createElement('div');
+                                    pipWrapper.className =
+                                        'vjs-pip-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
+
+                                    // Insert wrapper before the pip button and move button inside
+                                    pipButtonEl.parentNode.insertBefore(pipWrapper, pipButtonEl);
+                                    pipWrapper.appendChild(pipButtonEl);
+                                }
+                            }
+                        }, 100); // Small delay to ensure pip button is available
+
                         // END: Add Settings Menu Component
 
                         // BEGIN: Add Seek Indicator Component