From 37464e5a86345a7e571a5e3e9f9427999b52e8d4 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 2 Oct 2025 12:15:06 +0300
Subject: [PATCH] Add custom wrapper for settings button in VideoJS

---
 frontend-tools/video-js/src/VideoJS.css       | 18 ++++++++++++++++
 .../components/video-player/VideoJSPlayer.jsx | 21 +++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index 8e4591b7..4157d1f7 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -215,6 +215,24 @@ html {
     background: rgba(0, 0, 0, 0.2) !important;
 }
 
+/* Settings button wrapper styling */
+.video-js .vjs-settings-wrapper {
+    order: 8 !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;
+}
+
+.video-js .vjs-settings-wrapper:hover {
+    background: rgba(0, 0, 0, 0.2) !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 2afa0ec7..c6820523 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2716,6 +2716,27 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             });
                         } catch (e) {}
 
+                        // Wrap settings button in custom div container
+                        setTimeout(() => {
+                            const controlBar = playerRef.current.getChild('controlBar');
+                            if (
+                                controlBar &&
+                                customComponents.current.settingsMenu &&
+                                customComponents.current.settingsMenu.settingsButton
+                            ) {
+                                const settingsButtonEl = customComponents.current.settingsMenu.settingsButton.el();
+                                if (settingsButtonEl) {
+                                    const settingsWrapper = document.createElement('div');
+                                    settingsWrapper.className =
+                                        'vjs-settings-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
+
+                                    // Insert wrapper before the settings button and move button inside
+                                    settingsButtonEl.parentNode.insertBefore(settingsWrapper, settingsButtonEl);
+                                    settingsWrapper.appendChild(settingsButtonEl);
+                                }
+                            }
+                        }, 200); // Longer delay to ensure settings button is fully created
+
                         // END: Add Settings Menu Component
 
                         // BEGIN: Add Seek Indicator Component