CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-05 23:18: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 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

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

@ -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 */