From 2a19a1e4de848c8c60ef4b4e606770220b3a28df Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Jun 2018 15:25:46 +0200 Subject: [PATCH] Split player sass file --- client/src/sass/application.scss | 3 +- client/src/sass/player/_player-variables.scss | 13 + client/src/sass/player/context-menu.scss | 33 ++ client/src/sass/player/mobile.scss | 16 + .../peertube-skin.scss} | 299 +----------------- client/src/sass/player/player.scss | 5 + client/src/sass/player/settings-menu.scss | 180 +++++++++++ client/src/sass/player/spinner.scss | 54 ++++ client/src/standalone/videos/embed.scss | 4 +- 9 files changed, 313 insertions(+), 294 deletions(-) create mode 100644 client/src/sass/player/_player-variables.scss create mode 100644 client/src/sass/player/context-menu.scss create mode 100644 client/src/sass/player/mobile.scss rename client/src/sass/{video-js-custom.scss => player/peertube-skin.scss} (64%) create mode 100644 client/src/sass/player/player.scss create mode 100644 client/src/sass/player/settings-menu.scss create mode 100644 client/src/sass/player/spinner.scss diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 850fd1d0b..4006c9128 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -10,7 +10,8 @@ $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; @import '~primeng/resources/primeng.css'; @import '~video.js/dist/video-js.css'; -@import './video-js-custom'; +$assets-path: '../assets/'; +@import './player/player'; @import './loading-bar'; [hidden] { diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss new file mode 100644 index 000000000..110129790 --- /dev/null +++ b/client/src/sass/player/_player-variables.scss @@ -0,0 +1,13 @@ +$primary-foreground-color: #fff; +$primary-foreground-opacity: 0.9; +$primary-foreground-opacity-hover: 1; +$primary-background-color: #000; + +$font-size: 13px; +$control-bar-height: 34px; + +$slider-bg-color: lighten($primary-background-color, 33%); + +$progress-margin: 10px; + +$assets-path: '../../assets/' !default; \ No newline at end of file diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss new file mode 100644 index 000000000..71d6d1b1d --- /dev/null +++ b/client/src/sass/player/context-menu.scss @@ -0,0 +1,33 @@ +@import '_variables'; +@import '_mixins'; +@import './_player-variables'; + +$context-menu-width: 350px; + +/* Sass for videojs-contextmenu-ui */ + +.video-js .vjs-contextmenu-ui-menu { + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + padding: 5px 0; + width: $context-menu-width; + + .vjs-menu-content { + opacity: $primary-foreground-opacity; + color: $primary-foreground-color; + font-size: $font-size !important; + font-weight: $font-semibold; + } + + .vjs-menu-item { + cursor: pointer; + font-size: 1em; + padding: 8px 16px; + text-align: left; + text-transform: none; + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + } +} \ No newline at end of file diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss new file mode 100644 index 000000000..c2fa855ab --- /dev/null +++ b/client/src/sass/player/mobile.scss @@ -0,0 +1,16 @@ +@import '_variables'; +@import '_mixins'; + +/* Special mobile style */ + +.video-js.vjs-peertube-skin.vjs-is-mobile { + .vjs-control-bar { + .vjs-progress-control .vjs-slider .vjs-play-progress { + // Always display the circle on mobile + &::before { + margin-top: -1px; + opacity: 1; + } + } + } +} \ No newline at end of file diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/player/peertube-skin.scss similarity index 64% rename from client/src/sass/video-js-custom.scss rename to client/src/sass/player/peertube-skin.scss index c69423fe2..de6501962 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -1,5 +1,6 @@ @import '_variables'; @import '_mixins'; +@import './_player-variables'; @mixin big-play-button-triangle-size($triangle-size) { width: $triangle-size; @@ -8,23 +9,6 @@ left: calc(53% - #{($triangle-size / 2)}); } -$primary-foreground-color: #fff; -$primary-foreground-opacity: 0.9; -$primary-foreground-opacity-hover: 1; -$primary-background-color: #000; - -$font-size: 13px; -$control-bar-height: 34px; - -$slider-bg-color: lighten($primary-background-color, 33%); - -$setting-transition-duration: 0.15s; -$setting-transition-easing: ease-out; - -$context-menu-width: 350px; - -$progress-margin: 10px; - .video-js.vjs-peertube-skin { font-size: $font-size; color: $primary-foreground-color; @@ -91,7 +75,7 @@ $progress-margin: 10px; @include big-play-button-triangle-size(45px); content: ''; - background-image: url('../assets/player/images/big-play-button.svg'); + background-image: url('#{$assets-path}/player/images/big-play-button.svg'); } &:hover { @@ -292,11 +276,11 @@ $progress-margin: 10px; top: -1px; &.icon-download { - background-image: url('../assets/player/images/arrow-down.svg'); + background-image: url('#{$assets-path}/player/images/arrow-down.svg'); } &.icon-upload { - background-image: url('../assets/player/images/arrow-up.svg'); + background-image: url('#{$assets-path}/player/images/arrow-up.svg'); } } } @@ -327,7 +311,7 @@ $progress-margin: 10px; width: 22px; height: 22px; vertical-align: middle; - background: url('../assets/player/images/volume.svg') no-repeat; + background: url('#{$assets-path}/player/images/volume.svg') no-repeat; background-size: contain; &::before { @@ -336,7 +320,7 @@ $progress-margin: 10px; } &.vjs-vol-0 .vjs-icon-placeholder { - background: url('../assets/player/images/volume-mute.svg') no-repeat; + background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat; background-size: contain; } } @@ -421,7 +405,7 @@ $progress-margin: 10px; width: 22px; height: 22px; vertical-align: middle; - background: url('../assets/player/images/fullscreen.svg') no-repeat; + background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat; background-size: contain; &::before { @@ -558,58 +542,6 @@ $progress-margin: 10px; } } -// Thanks: https://projects.lukehaas.me/css-loaders/ -.vjs-loading-spinner { - left: 50%; - font-size: 10px; - text-indent: -9999em; - border: 0.7em solid rgba(255, 255, 255, 0.2); - border-left-color: #ffffff; - transform: translateZ(0); - animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important; - overflow: hidden; - visibility: hidden; - - &::before { - animation: none !important; - } - - &::after { - border-radius: 50%; - width: 6em; - height: 6em; - animation: none !important; - } - - @keyframes spinner { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - - @keyframes vjs-spinner-show { - 0% { - display: none; - opacity: 0; - } - - 1% { - display: block; - visibility: visible; - opacity: 0; - } - - 100% { - display: block; - visibility: visible; - opacity: 1; - } - } -} - // Error display disabled .vjs-error:not(.vjs-error-display-enabled) { .vjs-error-display { @@ -626,221 +558,4 @@ $progress-margin: 10px; .vjs-error-display { display: block; } -} - - -/* Sass for videojs-settings-menu */ - -.video-js { - - .vjs-settings { - @include disable-outline; - - cursor: pointer; - width: 37px; - - .vjs-icon-placeholder { - display: inline-block; - width: 17px; - height: 17px; - vertical-align: middle; - background: url('../assets/player/images/settings.svg') no-repeat; - background-size: contain; - - &::before { - content: ''; - } - } - } - - .vjs-settings-sub-menu-title { - width: 4em; - text-transform: initial; - } - - .vjs-settings-dialog { - position: absolute; - right: .5em; - bottom: 3.5em; - color: $primary-foreground-color; - opacity: $primary-foreground-opacity; - margin: 0 auto; - font-size: $font-size !important; - - width: auto; - overflow: hidden; - - transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; - - .vjs-settings-sub-menu-value, - .vjs-settings-sub-menu-title { - display: table-cell; - padding: 0 5px; - } - - .vjs-settings-sub-menu-title { - text-align: left; - font-weight: $font-semibold; - } - - .vjs-settings-sub-menu-value { - width: 100%; - text-align: right; - - small { - font-size: 0.85em; - opacity: 0.8; - } - } - - .vjs-settings-panel { - position: absolute; - bottom: 0; - right: 0; - overflow-y: auto; - overflow-x: hidden; - border-radius: 1px; - } - - .vjs-settings-panel-child { - display: flex; - - align-items: flex-end; - white-space: nowrap; - - &:focus, - &:active { - outline: none; - } - - > .vjs-menu { - flex: 1; - min-width: 200px; - } - - > .vjs-menu, - > .vjs-settings-sub-menu { - transition: all $setting-transition-duration $setting-transition-easing; - - .vjs-menu-item { - - &:hover { - background-color: rgba(255, 255, 255, 0.2); - } - - &:first-child { - margin-top: 5px; - } - - &:last-child { - margin-bottom: 5px; - } - } - - li { - font-size: 1em; - text-transform: initial; - - &:hover { - cursor: pointer; - } - } - } - - > .vjs-menu { - .vjs-menu-item { - padding: 8px 16px; - } - - .vjs-settings-sub-menu-value::after { - @include chevron-right(9px, 2px); - - margin-left: 5px; - } - } - - > .vjs-settings-sub-menu { - width: 80px; - - .vjs-menu-item { - outline: 0; - font-weight: $font-semibold; - - padding: 5px 8px; - text-align: right; - - &.vjs-back-button { - background-color: inherit; - padding: 8px 8px 13px 8px; - margin-bottom: 5px; - border-bottom: 1px solid grey; - - &::before { - @include chevron-left(9px, 2px); - - margin-right: 5px; - } - } - - &.vjs-selected { - background-color: inherit; - color: inherit; - position: relative; - - &::before { - @include icon(15px); - - position: absolute; - left: 8px; - content: ' '; - margin-top: 1px; - background-image: url('../assets/player/images/tick.svg'); - } - } - } - } - } - } -} - -/* Sass for videojs-contextmenu-ui */ - -.video-js .vjs-contextmenu-ui-menu { - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - padding: 5px 0; - width: $context-menu-width; - - .vjs-menu-content { - opacity: $primary-foreground-opacity; - color: $primary-foreground-color; - font-size: $font-size !important; - font-weight: $font-semibold; - } - - .vjs-menu-item { - cursor: pointer; - font-size: 1em; - padding: 8px 16px; - text-align: left; - text-transform: none; - - &:hover { - background-color: rgba(255, 255, 255, 0.2); - } - } -} - -/* Special mobile style */ - -.video-js.vjs-peertube-skin.vjs-is-mobile { - .vjs-control-bar { - .vjs-progress-control .vjs-slider .vjs-play-progress { - // Always display the circle on mobile - &::before { - margin-top: -1px; - opacity: 1; - } - } - } } \ No newline at end of file diff --git a/client/src/sass/player/player.scss b/client/src/sass/player/player.scss new file mode 100644 index 000000000..e4a315d1f --- /dev/null +++ b/client/src/sass/player/player.scss @@ -0,0 +1,5 @@ +@import './peertube-skin'; +@import './mobile'; +@import './context-menu'; +@import './settings-menu'; +@import './spinner'; \ No newline at end of file diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss new file mode 100644 index 000000000..6c213c5d1 --- /dev/null +++ b/client/src/sass/player/settings-menu.scss @@ -0,0 +1,180 @@ +@import '_variables'; +@import '_mixins'; +@import './_player-variables'; + +$setting-transition-duration: 0.15s; +$setting-transition-easing: ease-out; + +/* Sass for videojs-settings-menu */ + +.video-js { + + .vjs-settings { + @include disable-outline; + + cursor: pointer; + width: 37px; + + .vjs-icon-placeholder { + display: inline-block; + width: 17px; + height: 17px; + vertical-align: middle; + background: url('#{$assets-path}/player/images/settings.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + } + + .vjs-settings-sub-menu-title { + width: 4em; + text-transform: initial; + } + + .vjs-settings-dialog { + position: absolute; + right: .5em; + bottom: 3.5em; + color: $primary-foreground-color; + opacity: $primary-foreground-opacity; + margin: 0 auto; + font-size: $font-size !important; + + width: auto; + overflow: hidden; + + transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; + + .vjs-settings-sub-menu-value, + .vjs-settings-sub-menu-title { + display: table-cell; + padding: 0 5px; + } + + .vjs-settings-sub-menu-title { + text-align: left; + font-weight: $font-semibold; + } + + .vjs-settings-sub-menu-value { + width: 100%; + text-align: right; + + small { + font-size: 0.85em; + opacity: 0.8; + } + } + + .vjs-settings-panel { + position: absolute; + bottom: 0; + right: 0; + overflow-y: auto; + overflow-x: hidden; + border-radius: 1px; + } + + .vjs-settings-panel-child { + display: flex; + + align-items: flex-end; + white-space: nowrap; + + &:focus, + &:active { + outline: none; + } + + > .vjs-menu { + flex: 1; + min-width: 200px; + } + + > .vjs-menu, + > .vjs-settings-sub-menu { + transition: all $setting-transition-duration $setting-transition-easing; + + .vjs-menu-item { + + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + + &:first-child { + margin-top: 5px; + } + + &:last-child { + margin-bottom: 5px; + } + } + + li { + font-size: 1em; + text-transform: initial; + + &:hover { + cursor: pointer; + } + } + } + + > .vjs-menu { + .vjs-menu-item { + padding: 8px 16px; + } + + .vjs-settings-sub-menu-value::after { + @include chevron-right(9px, 2px); + + margin-left: 5px; + } + } + + > .vjs-settings-sub-menu { + width: 80px; + + .vjs-menu-item { + outline: 0; + font-weight: $font-semibold; + + padding: 5px 8px; + text-align: right; + + &.vjs-back-button { + background-color: inherit; + padding: 8px 8px 13px 8px; + margin-bottom: 5px; + border-bottom: 1px solid grey; + + &::before { + @include chevron-left(9px, 2px); + + margin-right: 5px; + } + } + + &.vjs-selected { + background-color: inherit; + color: inherit; + position: relative; + + &::before { + @include icon(15px); + + position: absolute; + left: 8px; + content: ' '; + margin-top: 1px; + background-image: url('#{$assets-path}/player/images/tick.svg'); + } + } + } + } + } + } +} \ No newline at end of file diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss new file mode 100644 index 000000000..a6af8da33 --- /dev/null +++ b/client/src/sass/player/spinner.scss @@ -0,0 +1,54 @@ +@import '_variables'; +@import '_mixins'; + +// Thanks: https://projects.lukehaas.me/css-loaders/ +.vjs-loading-spinner { + left: 50%; + font-size: 10px; + text-indent: -9999em; + border: 0.7em solid rgba(255, 255, 255, 0.2); + border-left-color: #ffffff; + transform: translateZ(0); + animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important; + overflow: hidden; + visibility: hidden; + + &::before { + animation: none !important; + } + + &::after { + border-radius: 50%; + width: 6em; + height: 6em; + animation: none !important; + } + + @keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @keyframes vjs-spinner-show { + 0% { + display: none; + opacity: 0; + } + + 1% { + display: block; + visibility: visible; + opacity: 0; + } + + 100% { + display: block; + visibility: visible; + opacity: 1; + } + } +} \ No newline at end of file diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index 37c1df6c4..f92a1f54a 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -2,7 +2,9 @@ @import '_mixins'; @import '~video.js/dist/video-js.css'; @import '~videojs-dock/dist/videojs-dock.css'; -@import '../../sass/video-js-custom.scss'; + +$assets-path: '../../assets/'; +@import '../../sass/player/player'; [hidden] { display: none !important; -- 2.25.1