From b2279f73f611f9403c2a7b56968047c3797434fa Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Fri, 10 Oct 2025 09:11:40 +0300
Subject: [PATCH] Enable user actions and update progress bar styles

Uncommented and enabled click, tap, and doubleClick user actions in VideoJSPlayer. Adjusted progress bar margin and padding for improved layout. Cleaned up VideoJSPlayerRoundedCorners.css by removing commented-out gradient overlay and related styles.
---
 .../components/video-player/VideoJSPlayer.jsx | 17 +++++-----
 .../VideoJSPlayerRoundedCorners.css           | 31 +------------------
 2 files changed, 10 insertions(+), 38 deletions(-)

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 149d0872..69cbcf9f 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useMemo } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
-//import 'video.js/dist/video-js.css';
 // import '../../VideoJS.css';
 import '../../styles/embed.css';
 // import '../controls/SubtitlesButton.css';
@@ -1982,11 +1981,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     // User interaction options
                     userActions: {
                         // Enable/disable or customize click behavior
-                        // click: true,
-                        // tap: true,
+                        click: true,
+                        tap: true,
 
                         // // Enable/disable or customize double-click behavior (fullscreen toggle)
-                        // doubleClick: true,
+                        doubleClick: true,
 
                         hotkeys: true,
                         // Hotkey configuration
@@ -2556,8 +2555,10 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             const progressEl = progressControl.el();
                             const controlBarEl = controlBar.el();
                             controlBarEl.style.gap = 0;
-                            // controlBarEl.style.background = 'none';
-                            // progressEl.style.background = 'none';
+                            controlBarEl.style.background = 'none';
+                            progressEl.style.background = 'none';
+                            // controlBarEl.style.background = 'yellow';
+                            // progressEl.style.background = 'red';
 
                             // Remove progress control from control bar
                             controlBar.removeChild(progressControl);
@@ -2589,8 +2590,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             progressEl.style.position = 'relative';
                             progressEl.style.width = '100%';
                             progressEl.style.height = '15px';
-                            progressEl.style.margin = '8px 0'; // Add top and bottom margin
-                            progressEl.style.padding = '5px 10px'; // Add left and right padding/gap
+                            progressEl.style.margin = '0 0'; // Add top and bottom margin
+                            progressEl.style.padding = '5px 0'; // Add left and right padding/gap
                             progressEl.style.display = 'block';
                             progressEl.style.transition = 'opacity 0.3s, visibility 0.3s'; // Smooth transition
                             progressEl.style.boxSizing = 'border-box'; // Ensure padding doesn't increase width
diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayerRoundedCorners.css b/frontend-tools/video-js/src/components/video-player/VideoJSPlayerRoundedCorners.css
index 613c7db9..18953e2b 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayerRoundedCorners.css
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayerRoundedCorners.css
@@ -1,6 +1,4 @@
 /* ===== VIDEO.JS ROUNDED CORNERS STYLES ===== */
-/* Extracted from VideoJS.css for modular import */
-
 .video-js-root-main .video-js.video-js-rounded-corners,
 .video-js-root-main .video-js.video-js-rounded-corners.vjs-has-started,
 .video-js-root-main .video-js.video-js-rounded-corners.vjs-fullscreen,
@@ -19,36 +17,9 @@
 .video-js-root-main .video-js.video-js-rounded-corners video {
     border-radius: 12px !important;
 }
-
-/* YouTube-style bottom gradient overlay - covers entire video bottom when controls active */
-/* .video-js-root-main .video-js.video-js-rounded-corners::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 120px;
-    background: linear-gradient(
-        to top,
-        rgba(0, 0, 0, 0.8) 0%,
-        rgba(0, 0, 0, 0.6) 25%,
-        rgba(0, 0, 0, 0.4) 50%,
-        rgba(0, 0, 0, 0.2) 75%,
-        transparent 100%
-    );
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: 2;
-} */
-
-/* Show overlay when controls are active - YouTube style */
-.video-js-root-main .video-js.video-js-rounded-corners.vjs-user-active::after,
-.video-js-root-main .video-js.video-js-rounded-corners.vjs-paused::after,
-.video-js-root-main .video-js.video-js-rounded-corners.vjs-ended::after {
+.video-js-root-main .video-js.video-js-rounded-corners .vjs-control-bar {
     border-bottom-left-radius: 12px !important;
     border-bottom-right-radius: 12px !important;
-    opacity: 1;
 }
 
 /* Mobile responsive adjustments */