CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enable user actions and update progress bar styles

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 09:11:40 +03:00
parent c4b73ec5ed
commit b2279f73f6
2 changed files with 10 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useRef, useMemo } from 'react'; import React, { useEffect, useRef, useMemo } from 'react';
import videojs from 'video.js'; import videojs from 'video.js';
import 'video.js/dist/video-js.css'; import 'video.js/dist/video-js.css';
//import 'video.js/dist/video-js.css';
// import '../../VideoJS.css'; // import '../../VideoJS.css';
import '../../styles/embed.css'; import '../../styles/embed.css';
// import '../controls/SubtitlesButton.css'; // import '../controls/SubtitlesButton.css';
@ -1982,11 +1981,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// User interaction options // User interaction options
userActions: { userActions: {
// Enable/disable or customize click behavior // Enable/disable or customize click behavior
// click: true, click: true,
// tap: true, tap: true,
// // Enable/disable or customize double-click behavior (fullscreen toggle) // // Enable/disable or customize double-click behavior (fullscreen toggle)
// doubleClick: true, doubleClick: true,
hotkeys: true, hotkeys: true,
// Hotkey configuration // Hotkey configuration
@ -2556,8 +2555,10 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const progressEl = progressControl.el(); const progressEl = progressControl.el();
const controlBarEl = controlBar.el(); const controlBarEl = controlBar.el();
controlBarEl.style.gap = 0; controlBarEl.style.gap = 0;
// controlBarEl.style.background = 'none'; controlBarEl.style.background = 'none';
// progressEl.style.background = 'none'; progressEl.style.background = 'none';
// controlBarEl.style.background = 'yellow';
// progressEl.style.background = 'red';
// Remove progress control from control bar // Remove progress control from control bar
controlBar.removeChild(progressControl); controlBar.removeChild(progressControl);
@ -2589,8 +2590,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
progressEl.style.position = 'relative'; progressEl.style.position = 'relative';
progressEl.style.width = '100%'; progressEl.style.width = '100%';
progressEl.style.height = '15px'; progressEl.style.height = '15px';
progressEl.style.margin = '8px 0'; // Add top and bottom margin progressEl.style.margin = '0 0'; // Add top and bottom margin
progressEl.style.padding = '5px 10px'; // Add left and right padding/gap progressEl.style.padding = '5px 0'; // Add left and right padding/gap
progressEl.style.display = 'block'; progressEl.style.display = 'block';
progressEl.style.transition = 'opacity 0.3s, visibility 0.3s'; // Smooth transition progressEl.style.transition = 'opacity 0.3s, visibility 0.3s'; // Smooth transition
progressEl.style.boxSizing = 'border-box'; // Ensure padding doesn't increase width progressEl.style.boxSizing = 'border-box'; // Ensure padding doesn't increase width

31
frontend-tools/video-js/src/components/video-player/VideoJSPlayerRoundedCorners.css
View File

@ -1,6 +1,4 @@
/* ===== VIDEO.JS ROUNDED CORNERS STYLES ===== */ /* ===== 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,
.video-js-root-main .video-js.video-js-rounded-corners.vjs-has-started, .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, .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 { .video-js-root-main .video-js.video-js-rounded-corners video {
border-radius: 12px !important; border-radius: 12px !important;
} }
.video-js-root-main .video-js.video-js-rounded-corners .vjs-control-bar {
/* 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 {
border-bottom-left-radius: 12px !important; border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important; border-bottom-right-radius: 12px !important;
opacity: 1;
} }
/* Mobile responsive adjustments */ /* Mobile responsive adjustments */