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

Improve remaining time styling and settings button logic

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:00:59 +03:00
parent 8f872951e4
commit 0f135e61bb
2 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
View File

@ -9,4 +9,43 @@
justify-content: center;
height: 100%;
color: #fff;
white-space: nowrap;
padding: 0 4px;
}
.vjs-control-bar .custom-remaining-time {
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* Responsive time display sizing */
@media (max-width: 767px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 11px !important;
padding: 0 2px;
}
}
@media (max-width: 500px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 9px !important;
padding: 0 1px;
letter-spacing: -0.3px;
}
}
@media (max-width: 480px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 9px !important;
padding: 0 1px;
letter-spacing: -0.3px;
}
}
@media (max-width: 399px) {
.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
font-size: 8px !important;
padding: 0;
letter-spacing: -0.5px;
}
}

13
frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
View File

@ -494,17 +494,8 @@ class CustomSettingsMenu extends Component {
}
positionButton() {
const controlBar = this.player().getChild('controlBar');
const fullscreenToggle = controlBar.getChild('fullscreenToggle');
if (this.settingsButton && fullscreenToggle) {
// Small delay to ensure all buttons are created
setTimeout(() => {
const fullscreenIndex = controlBar.children().indexOf(fullscreenToggle);
controlBar.removeChild(this.settingsButton);
controlBar.addChild(this.settingsButton, {}, fullscreenIndex + 1);
}, 50);
}
// CSS flexbox order handles positioning - no manual repositioning needed
// The settings button will be positioned according to the order property in CSS
}
setupEventListeners() {