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

style: Place the main tool icons to the right

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-07-22 00:12:15 +03:00
parent a66d823d1d
commit 449baeabd1
2 changed files with 39 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend-tools/video-js/src/VideoJS.css
View File

@ -509,39 +509,7 @@
gap: 6px !important; gap: 6px !important;
} }
/* Create a spacer to push remaining controls to the right */ /* Basic control bar styling - let JavaScript handle positioning */
.video-js .vjs-control-bar .vjs-volume-panel::after { .video-js .vjs-control-bar .vjs-control {
content: ""; /* Natural flex flow */
flex: 1;
margin-left: auto;
}
/* Move these 5 controls to the right */
.video-js .vjs-playback-rate,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-chapters-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-fullscreen-control,
.video-js .vjs-subs-caps-button {
margin-left: auto !important;
order: 999 !important;
}
/* Remove auto margin from subsequent items to keep them grouped */
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-chapters-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-fullscreen-control,
.video-js .vjs-subs-caps-button {
margin-left: 0 !important;
}
/* Alternative approach - target by position */
.video-js .vjs-control-bar > *:nth-last-child(-n + 5) {
margin-left: auto !important;
order: 999 !important;
}
.video-js .vjs-control-bar > *:nth-last-child(-n + 4) {
margin-left: 0 !important;
} }

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

@ -1135,6 +1135,24 @@ function VideoJSPlayer() {
// BEGIN: Move CC (subtitles) and PiP buttons to the right side // BEGIN: Move CC (subtitles) and PiP buttons to the right side
setTimeout(() => { setTimeout(() => {
// Create a spacer element to push buttons to the right
const spacer = videojs.dom.createEl('div', {
className: 'vjs-spacer-control vjs-control',
});
spacer.style.flex = '1';
spacer.style.minWidth = '1px';
// Find insertion point after time displays
const durationDisplay = controlBar.getChild('durationDisplay');
const customRemainingTime = controlBar.getChild('customRemainingTime');
const insertAfter = customRemainingTime || durationDisplay;
if (insertAfter) {
const insertIndex = controlBar.children().indexOf(insertAfter) + 1;
controlBar.el().insertBefore(spacer, controlBar.children()[insertIndex]?.el() || null);
console.log('✓ Spacer added after time displays');
}
// Find the subtitles/captions button (CC button) // Find the subtitles/captions button (CC button)
const possibleTextTrackButtons = ['subtitlesButton', 'captionsButton', 'subsCapsButton']; const possibleTextTrackButtons = ['subtitlesButton', 'captionsButton', 'subsCapsButton'];
let textTrackButton = null; let textTrackButton = null;
@ -1148,37 +1166,31 @@ function VideoJSPlayer() {
} }
} }
// Find the picture-in-picture button // Find other buttons to move to the right
const pipButton = controlBar.getChild('pictureInPictureToggle'); const pipButton = controlBar.getChild('pictureInPictureToggle');
const playbackRateButton = controlBar.getChild('playbackRateMenuButton');
const chaptersButton = controlBar.getChild('chaptersButton');
// Move buttons to the right side in desired order // Move buttons to the right side (after spacer)
if (fullscreenToggle) { const buttonsToMove = [
const fullscreenIndex = controlBar.children().indexOf(fullscreenToggle); playbackRateButton,
let insertIndex = fullscreenIndex; textTrackButton,
pipButton,
chaptersButton,
fullscreenToggle,
].filter(Boolean);
// Move PiP button first (will be rightmost before fullscreen) buttonsToMove.forEach((button) => {
if (pipButton) { if (button) {
try { try {
controlBar.removeChild(pipButton); controlBar.removeChild(button);
controlBar.addChild(pipButton, {}, insertIndex); controlBar.addChild(button);
console.log('✓ Picture-in-Picture button moved to right side'); console.log(`✓ Moved ${button.name_ || 'button'} to right side`);
insertIndex = controlBar.children().indexOf(fullscreenToggle); // Update index
} catch (e) { } catch (e) {
console.log('✗ Failed to move PiP button:', e); console.log(`✗ Failed to move button:`, e);
} }
} }
});
// Move CC button (will be before PiP)
if (textTrackButton) {
try {
controlBar.removeChild(textTrackButton);
controlBar.addChild(textTrackButton, {}, insertIndex);
console.log('✓ CC button moved to right side');
} catch (e) {
console.log('✗ Failed to move CC button:', e);
}
}
}
}, 100); }, 100);
// END: Move CC (subtitles) and PiP buttons to the right side // END: Move CC (subtitles) and PiP buttons to the right side