CDN/mediacms
3
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-10-06 22:32:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: User rounded corners based on py value USE_ROUNDED_CORNERS

Browse Source
This commit is contained in:
Yiannis Christodoulou
2025-09-25 00:50:10 +03:00
parent 44a44d39f2
commit 380b537d45
8 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-tools/video-js/src/VideoJS.css
+25 -15
View File
@@ -12,14 +12,25 @@ html {
text-decoration: none !important;
}
.video-js.video-js-rounded-corners,
.video-js.video-js-rounded-corners.vjs-has-started,
.video-js.video-js-rounded-corners.vjs-fullscreen,
.video-js.video-js-rounded-corners.vjs-paused,
.video-js.video-js-rounded-corners.vjs-ended,
.video-js.video-js-rounded-corners.chapters-open {
/* background-color: transparent !important; */
outline: none !important;
border-radius: 12px !important;
}
.video-js video {
outline: none !important;
}
.video-js .vjs-poster {
border-radius: 0 !important;
.video-js.video-js-rounded-corners .vjs-poster {
border-radius: 12px !important;
}
.video-js video {
border-radius: 0 !important;
.video-js.video-js-rounded-corners video {
border-radius: 12px !important;
}
/* Fullscreen video styles for embedded video player */
@@ -50,7 +61,7 @@ html {
}
/* YouTube-style bottom gradient overlay - covers entire video bottom when controls active */
.video-js::after {
.video-js.video-js-rounded-corners::after {
content: "";
position: absolute;
bottom: 0;
@@ -72,9 +83,11 @@ html {
}
/* Show overlay when controls are active - YouTube style */
.video-js.vjs-user-active::after,
.video-js.vjs-paused::after,
.video-js.vjs-ended::after {
.video-js.video-js-rounded-corners.vjs-user-active::after,
.video-js.video-js-rounded-corners.vjs-paused::after,
.video-js.video-js-rounded-corners.vjs-ended::after {
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
opacity: 1;
}
@@ -833,16 +846,9 @@ button {
.video-js {
padding: 0;
height: 100% !important;
border-radius: 0;
outline: none; /* Remove default browser focus outline */
}
/* Custom focus styles for video player */
.video-js:focus {
/* box-shadow: 0 0 0 3px rgba(25, 153, 50, 0.5); */
border-radius: 0;
}
/* Ensure video player is focusable */
.video-js[tabindex] {
outline: none;
@@ -1559,6 +1565,10 @@ button.vjs-button > .vjs-icon-placeholder:before {
.vjs-chapter-floating-tooltip {
font-size: 11px !important;
}
.video-js.video-js-rounded-corners .custom-chapters-overlay {
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.custom-chapters-overlay .video-chapter {
right: 10px;
left: auto;
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+12 -2
View File
@@ -967,7 +967,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
'240_iframe': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-4/iframes.m3u8',
'480_iframe': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-5/iframes.m3u8',
'1080_playlist': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-1/stream.m3u8',
'720_playlist': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-2/stream.m3u8',
'720_playlist':
'https://demo.mediacms.io/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-2/stream.m3u8',
'360_playlist': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-3/stream.m3u8',
'240_playlist': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-4/stream.m3u8',
'480_playlist': '/media/hls/6497e960081b4b8abddcf4cbdf2bf4eb/media-5/stream.m3u8',
@@ -1037,6 +1038,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
},
// other
useRoundedCorners: false,
previewSprite: {
url: 'https://deic.mediacms.io/media/original/thumbnails/user/thorkild/2ca18fadeef8475eae513c12cc0830d3.19990812hd_1920_1080_30fps.mp4sprites.jpg',
frame: { width: 160, height: 90, seconds: 10 },
@@ -1290,6 +1292,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
url: mediaData.data?.url || '',
poster: mediaData.data?.poster_url ? mediaData.siteUrl + mediaData.data.poster_url : '',
previewSprite: mediaData?.previewSprite || {},
useRoundedCorners: mediaData?.useRoundedCorners,
related_media: mediaData.data?.related_media || [],
nextLink: mediaData?.nextLink || null,
urlAutoplay: mediaData?.urlAutoplay || true,
@@ -2754,7 +2757,14 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
};
}, []);
return <video ref={videoRef} id={videoId} className="video-js vjs-default-skin" tabIndex="0" />;
return (
<video
ref={videoRef}
id={videoId}
className={`video-js vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
tabIndex="0"
/>
);
}
export default VideoJSPlayer;