diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css
index f14a7a39..2efed2cf 100644
--- a/frontend-tools/video-js/src/VideoJS.css
+++ b/frontend-tools/video-js/src/VideoJS.css
@@ -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;
diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index 64f1c7a4..dc7753cf 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -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 ;
+ return (
+
+ );
}
export default VideoJSPlayer;
diff --git a/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx b/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
index 7021fcf4..6274e1e0 100644
--- a/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
+++ b/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
@@ -15,6 +15,7 @@ import React, { useEffect, useRef } from 'react';
const VideoJSEmbed = ({
data,
+ useRoundedCorners,
playerVolume,
playerSoundMuted,
videoQuality,
@@ -63,7 +64,8 @@ const VideoJSEmbed = ({
const urlMuted = getUrlParameter('muted');
window.MEDIA_DATA = {
- data: data || {}, // TODO: Check if this is needed
+ data: data || {},
+ useRoundedCorners: useRoundedCorners,
playerVolume: playerVolume || 0.5,
playerSoundMuted: playerSoundMuted || (urlMuted === '1'),
videoQuality: videoQuality || 'auto',
diff --git a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
index 8a7bfb08..256f67bd 100644
--- a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
+++ b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
@@ -393,6 +393,7 @@ export default class VideoViewer extends React.PureComponent {
{(site) => {
return React.createElement(VideoJSEmbed, {
data: this.props.data,
+ useRoundedCorners: site.useRoundedCorners,
playerVolume: this.browserCache.get('player-volume'),
playerSoundMuted: this.browserCache.get('player-sound-muted'),
videoQuality: this.browserCache.get('video-quality'),
diff --git a/frontend/src/static/js/utils/settings/site.js b/frontend/src/static/js/utils/settings/site.js
index 169c57cd..aa2924ce 100755
--- a/frontend/src/static/js/utils/settings/site.js
+++ b/frontend/src/static/js/utils/settings/site.js
@@ -6,6 +6,7 @@ export function init(settings) {
url: '',
api: '',
title: '',
+ useRoundedCorners: true,
};
if (void 0 !== settings) {
@@ -24,6 +25,10 @@ export function init(settings) {
if ('string' === typeof settings.title) {
SITE.title = settings.title.trim();
}
+
+ if ('boolean' === typeof settings.useRoundedCorners) {
+ SITE.useRoundedCorners = settings.useRoundedCorners;
+ }
}
}
diff --git a/frontend/src/templates/config/installation/site.config.js b/frontend/src/templates/config/installation/site.config.js
index 4827616c..de0bab31 100755
--- a/frontend/src/templates/config/installation/site.config.js
+++ b/frontend/src/templates/config/installation/site.config.js
@@ -4,6 +4,7 @@ module.exports = {
title: process.env.MEDIACMS_TITLE || 'MediaCMS Demo',
url: process.env.MEDIACMS_URL || 'UNDEFINED_URL',
api: process.env.MEDIACMS_API || 'UNDEFINED_API',
+ useRoundedCorners: true,
theme: {
mode: 'light', // Valid values: 'light', 'dark'.
switch: {
diff --git a/templates/config/installation/site.html b/templates/config/installation/site.html
index c3aa7777..e5253ea5 100644
--- a/templates/config/installation/site.html
+++ b/templates/config/installation/site.html
@@ -3,6 +3,7 @@ MediaCMS.site = {
title: "{{PORTAL_NAME}}",
url: '{{FRONTEND_HOST}}',
api: '{{FRONTEND_HOST}}/api/v1',
+ useRoundedCorners: {% if USE_ROUNDED_CORNERS %}true{% else %}false{% endif %},
theme: {
mode: '{{DEFAULT_THEME}}',
switch: {
diff --git a/templates/root.html b/templates/root.html
index 6445b8b6..ccd19d44 100644
--- a/templates/root.html
+++ b/templates/root.html
@@ -23,16 +23,6 @@
{% include "config/index.html" %}
-
- {% if not USE_ROUNDED_CORNERS %}
-
- {% endif %}
-
-
{% endblock head %}