extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2024-11-21 15:53:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: rounded corners

Browse Source
This commit is contained in:
Markos Gogoulos 2024-10-02 11:33:17 +03:00 committed by GitHub
parent 94c646fdb8
commit 5fe4d3a9fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 182 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/admins_docs.md
View File

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

124
frontend/packages/player/dist/mediacms-player.css vendored
View File

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

124
frontend/packages/vjs-plugin/dist/mediacms-vjs-plugin.css vendored
View File

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

15
frontend/src/static/css/_extra.css
View File

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

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

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

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

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

2
static/css/_commons.css
View File

File diff suppressed because one or more lines are too long

15
static/css/_extra.css
View File

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

2
static/css/media.css
View File

File diff suppressed because one or more lines are too long

2
static/js/media.js
View File

File diff suppressed because one or more lines are too long