feat: rounded corners

docs/admins_docs.md

@@ -19,6 +19,7 @@
 - [16. Frequently Asked Questions](#16-frequently-asked-questions)
 - [17. Cookie consent code](#17-cookie-consent-code)
 - [18. Disable encoding and show only original file](#18-disable-encoding-and-show-only-original-file)
+- [19. Rounded corners on videos](#19-rounded-corners)
 
 ## 1. Welcome
 This page is created for MediaCMS administrators that are responsible for setting up the software, maintaining it and making modifications.
@@ -779,3 +780,14 @@ DO_NOT_TRANSCODE_VIDEO = True
 ```
 
 This will disable the transcoding process and only the original file will be shown. Note that this will also disable the sprites file creation, so you will not have the preview thumbnails on the video player.
+
+## 19. Rounded corners on videos
+
+By default the video player and media items are now having rounded corners, on larger screens (not in mobile). If you don't like this change, remove the `border-radius` added on the following files:
+
+```
+frontend/src/static/css/_extra.css
+frontend/src/static/js/components/list-item/Item.scss
+frontend/src/static/js/components/media-page/MediaPage.scss
+```
+you now have to re-run the frontend build in order to see the changes (check docs/dev_exp.md)

frontend/src/static/css/_extra.css

@@ -0,0 +1,15 @@
+body {
+  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
+    This allows bigger images of media on listings for large screens
+    It would be great to adapt to other sizes, but this requires a good refaftoring
+     */
+
+  @media screen and (min-width: 2200px) {
+      --default-item-width: 342px !important;
+      --default-max-item-width: 342px !important;
+      --default-item-margin-right-width: 17px !important;
+      --default-item-margin-bottom-width: 27px !important;
+  }
+}
+
+

frontend/src/static/js/components/list-item/Item.scss

@@ -13,6 +13,11 @@
 
 .item-thumb,
 a.item-thumb {
+
+  @media screen and (min-width: 480px) {
+    border-radius: 10px;
+  }
+
   position: relative;
   display: block;
   height: auto;

frontend/src/static/js/components/media-page/MediaPage.scss

@@ -530,7 +530,14 @@
   }
 }
 
+.viewer-container .player-container {
+  @media screen and (min-width: 480px) {
+    border-radius: 10px;
+  }
+}
+
 .viewer-container .player-container.audio-player-container {
+
   @media screen and (min-width: 480px) {
     padding-top: 0.75 * 56.25%;
   }

static/css/_extra.css

@@ -0,0 +1,15 @@
+body {
+  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
+    This allows bigger images of media on listings for large screens
+    It would be great to adapt to other sizes, but this requires a good refaftoring
+     */
+
+  @media screen and (min-width: 2200px) {
+      --default-item-width: 342px !important;
+      --default-max-item-width: 342px !important;
+      --default-item-margin-right-width: 17px !important;
+      --default-item-margin-bottom-width: 27px !important;
+  }
+}
+
+