feat: User rounded corners based on py value USE_ROUNDED_CORNERS

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 {
+.video-js.video-js-rounded-corners .vjs-poster {
-    border-radius: 0 !important;
+    border-radius: 12px !important;
 }
-.video-js video {
+.video-js.video-js-rounded-corners video {
-    border-radius: 0 !important;
+    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.video-js-rounded-corners.vjs-user-active::after,
-.video-js.vjs-paused::after,
+.video-js.video-js-rounded-corners.vjs-paused::after,
-.video-js.vjs-ended::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

@@ -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;

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',

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'),

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;
+    }
   }
 }
 

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: {

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: {

templates/root.html

@@ -23,16 +23,6 @@
 
         {% include "config/index.html" %}
 
-
-        {% if not USE_ROUNDED_CORNERS %}
-        <style>
-            .viewer-container .player-container, .item-thumb, a.item-thumb {
-                border-radius: revert !important;
-            }
-        </style>
-        {% endif %}
-
-        
     {% endblock head %}
 
 </head>