isort

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.
@@ -778,4 +779,15 @@ When videos are uploaded, they are getting encoded to multiple resolutions, a pr
 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.
+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)

files/views.py

@@ -598,14 +598,15 @@ class MediaDetail(APIView):
         media = self.get_object(friendly_token)
         if isinstance(media, Response):
             return media
-
         serializer = MediaSerializer(media, data=request.data, context={"request": request})
         if serializer.is_valid():
-            if request.data.get('media_file'):
-                media_file = request.data["media_file"]
-                serializer.save(user=request.user, media_file=media_file)
-            else:
-                serializer.save(user=request.user)
+            serializer.save(user=request.user)
+            # no need to update the media file itself, only the metadata
+            # if request.data.get('media_file'):
+            #    media_file = request.data["media_file"]
+            #    serializer.save(user=request.user, media_file=media_file)
+            # else:
+            #    serializer.save(user=request.user)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 

frontend/packages/player/dist/mediacms-player.css

@@ -61,8 +61,8 @@
 /* SPACES */
 /* ANIMATIONS */
 /* FUNCTIONS */
-/*@function calc_($expression) {
-    @return $expression;
+/*@function calc_($expression) {
+    @return $expression;
 }*/
 /*  ANIMATION KEYFRAMES */
 @keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
   outline-color: rgba(0, 0, 0, 0);
   outline-color: transparent;
   /* Doesn't work properly in Safari browser.*/
-  /*&.vjs-loading-video {
-        video {
-            opacity: 0;
-            visibility: hidden;
-        }
+  /*&.vjs-loading-video {
+        video {
+            opacity: 0;
+            visibility: hidden;
+        }
     }*/ }
   .video-js.vjs-mediacms video {
     width: 100%;
@@ -321,11 +321,11 @@
     display: none;
     font-size: 0.8125em;
     z-index: +1;
-    /*display:block;
-        opacity: 0;
-        height:0;
-        visibility: hidden;
-        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
+    /*display:block;
+        opacity: 0;
+        height:0;
+        visibility: hidden;
+        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
         will-change:height;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
       position: relative; }
@@ -337,8 +337,8 @@
       outline: 0; }
     .video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
       display: block;
-      /*opacity: 1;
-            visibility: visible;
+      /*opacity: 1;
+            visibility: visible;
             height:auto;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
       display: block;
@@ -679,7 +679,7 @@
   .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
     transition: width 0.2s linear;
     transition-delay: 0.15s;
-    /* transition: width 0s linear;
+    /* transition: width 0s linear;
             transition-delay: 0s; */ }
   .video-js.vjs-mediacms .vjs-actions-anim {
     -webkit-user-select: none;
@@ -986,31 +986,31 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     white-space: normal;
-    /*@-moz-document url-prefix() {
-
-        position: relative;
-        padding-right: $font-size * 1.1;
-        overflow: hidden;
-
-        &:before {
-            background-color: $bg-color;
-            bottom: 0;
-            position: absolute;
-            right: 0;
-            float: right;
-            text-align:right;
-            content: '\2026';
-            width: $font-size * 1.1;
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            z-index: +1;
-            background: $bg-color;
-        }
+    /*@-moz-document url-prefix() {
+
+        position: relative;
+        padding-right: $font-size * 1.1;
+        overflow: hidden;
+
+        &:before {
+            background-color: $bg-color;
+            bottom: 0;
+            position: absolute;
+            right: 0;
+            float: right;
+            text-align:right;
+            content: '\2026';
+            width: $font-size * 1.1;
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            z-index: +1;
+            background: $bg-color;
+        }
     }*/
     color: #eee; }
     .video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
   .video-js.vjs-mediacms:hover .vjs-big-play-button {
     background-color: #009933; }
 
-/* @-webkit-keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
+/* @-webkit-keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+@keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 } */
 .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
 .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

frontend/packages/vjs-plugin/dist/mediacms-vjs-plugin.css

@@ -61,8 +61,8 @@
 /* SPACES */
 /* ANIMATIONS */
 /* FUNCTIONS */
-/*@function calc_($expression) {
-    @return $expression;
+/*@function calc_($expression) {
+    @return $expression;
 }*/
 /*  ANIMATION KEYFRAMES */
 @keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
   outline-color: rgba(0, 0, 0, 0);
   outline-color: transparent;
   /* Doesn't work properly in Safari browser.*/
-  /*&.vjs-loading-video {
-        video {
-            opacity: 0;
-            visibility: hidden;
-        }
+  /*&.vjs-loading-video {
+        video {
+            opacity: 0;
+            visibility: hidden;
+        }
     }*/ }
   .video-js.vjs-mediacms video {
     width: 100%;
@@ -321,11 +321,11 @@
     display: none;
     font-size: 0.8125em;
     z-index: +1;
-    /*display:block;
-        opacity: 0;
-        height:0;
-        visibility: hidden;
-        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
+    /*display:block;
+        opacity: 0;
+        height:0;
+        visibility: hidden;
+        @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
         will-change:height;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
       position: relative; }
@@ -337,8 +337,8 @@
       outline: 0; }
     .video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
       display: block;
-      /*opacity: 1;
-            visibility: visible;
+      /*opacity: 1;
+            visibility: visible;
             height:auto;*/ }
     .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
       display: block;
@@ -679,7 +679,7 @@
   .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
     transition: width 0.2s linear;
     transition-delay: 0.15s;
-    /* transition: width 0s linear;
+    /* transition: width 0s linear;
             transition-delay: 0s; */ }
   .video-js.vjs-mediacms .vjs-actions-anim {
     -webkit-user-select: none;
@@ -986,31 +986,31 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     white-space: normal;
-    /*@-moz-document url-prefix() {
-
-        position: relative;
-        padding-right: $font-size * 1.1;
-        overflow: hidden;
-
-        &:before {
-            background-color: $bg-color;
-            bottom: 0;
-            position: absolute;
-            right: 0;
-            float: right;
-            text-align:right;
-            content: '\2026';
-            width: $font-size * 1.1;
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            z-index: +1;
-            background: $bg-color;
-        }
+    /*@-moz-document url-prefix() {
+
+        position: relative;
+        padding-right: $font-size * 1.1;
+        overflow: hidden;
+
+        &:before {
+            background-color: $bg-color;
+            bottom: 0;
+            position: absolute;
+            right: 0;
+            float: right;
+            text-align:right;
+            content: '\2026';
+            width: $font-size * 1.1;
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            z-index: +1;
+            background: $bg-color;
+        }
     }*/
     color: #eee; }
     .video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
   .video-js.vjs-mediacms:hover .vjs-big-play-button {
     background-color: #009933; }
 
-/* @-webkit-keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-
-@keyframes vjs-poster-reveal {
-    0%{
-        opacity:0;
-    }
-    40%{
-        opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
+/* @-webkit-keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+@keyframes vjs-poster-reveal {
+    0%{
+        opacity:0;
+    }
+    40%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
 } */
 .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
 .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

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

uploader/fineuploader.py

@@ -1,6 +1,6 @@
+import os
 import re
 import shutil
-import os
 import uuid
 from io import StringIO
 from os.path import join
@@ -34,7 +34,6 @@ class BaseFineUploader(object):
         self.storage_class = settings.FILE_STORAGE
         self.real_path = None
 
-
     @property
     def finished(self):
         return self.real_path is not None