From 2a19a1e4de848c8c60ef4b4e606770220b3a28df Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Jun 2018 15:25:46 +0200 Subject: 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 + client/src/sass/player/peertube-skin.scss | 561 +++++++++++++++++ client/src/sass/player/player.scss | 5 + client/src/sass/player/settings-menu.scss | 180 ++++++ client/src/sass/player/spinner.scss | 54 ++ client/src/sass/video-js-custom.scss | 846 -------------------------- client/src/standalone/videos/embed.scss | 4 +- 10 files changed, 867 insertions(+), 848 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 create mode 100644 client/src/sass/player/peertube-skin.scss 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 delete mode 100644 client/src/sass/video-js-custom.scss (limited to 'client/src') 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/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss new file mode 100644 index 000000000..de6501962 --- /dev/null +++ b/client/src/sass/player/peertube-skin.scss @@ -0,0 +1,561 @@ +@import '_variables'; +@import '_mixins'; +@import './_player-variables'; + +@mixin big-play-button-triangle-size($triangle-size) { + width: $triangle-size; + height: $triangle-size; + top: calc(50% - #{$triangle-size / 2}); + left: calc(53% - #{($triangle-size / 2)}); +} + +.video-js.vjs-peertube-skin { + font-size: $font-size; + color: $primary-foreground-color; + + .vjs-dock-text { + padding-right: 10px; + } + + .vjs-dock-description { + font-size: 11px; + + &::before, &::after { + display: inline-block; + content: '\1F308'; + } + + &::before { + margin-right: 4px; + } + + &::after { + margin-left: 4px; + transform: scale(-1, 1); + } + } + + .vjs-button > .vjs-icon-placeholder::before { + line-height: $control-bar-height; + } + + .vjs-volume-level::before { + content: ''; /* Remove Circle From Progress Bar */ + } + + .vjs-audio-button { + display: none; + } + + .vjs-big-play-button { + outline: 0; + font-size: 6em; + + $big-play-width: 1.2em; + $big-play-height: 1.2em; + + border: 6px solid #fff; + border-radius: 100%; + + left: 50%; + top: 50%; + width: $big-play-width; + height: $big-play-height; + line-height: $big-play-height; + margin-left: -($big-play-width / 2); + margin-top: -($big-play-height / 2); + transition: 0.4s opacity; + + &::-moz-focus-inner { + border: 0; + padding: 0 + } + + .vjs-icon-placeholder::before { + @include big-play-button-triangle-size(45px); + + content: ''; + background-image: url('#{$assets-path}/player/images/big-play-button.svg'); + } + + &:hover { + opacity: 0.8; + } + } + + // Small effect when we click on the play button + &.vjs-has-big-play-button-clicked { + + .vjs-big-play-button, .vjs-poster { + display: block; + visibility: hidden; + + &.vjs-big-play-button, &.vjs-big-play-button::before { + opacity: 0; + transition: visibility 0.2s, opacity 0.2s; + } + + &.vjs-poster, &.vjs-poster::before { + opacity: 0; + transition: visibility 0.3s, opacity 0.3s; + transition-delay: 0.05s; + } + } + } + + // Hide the big play button on autoplay + &.vjs-has-autoplay { + .vjs-big-play-button { + display: none !important; + } + } + + .vjs-control-bar, + .vjs-big-play-button, + .vjs-settings-dialog { + background-color: rgba($primary-background-color, 0.5); + } + + .vjs-poster { + outline: none; /* Remove Blue Outline on Click*/ + outline: 0; + } + + .vjs-control-bar { + height: $control-bar-height; + background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); + box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2); + text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + + .vjs-progress-control, + .vjs-play-control, + .vjs-playback-rate, + .vjs-mute-control, + .vjs-volume-control, + .vjs-resolution-control, + .vjs-fullscreen-control, + .vjs-peertube-link, + .vjs-settings + { + color: $primary-foreground-color !important; + opacity: $primary-foreground-opacity; + transition: opacity .1s; + + &:hover { + opacity: $primary-foreground-opacity-hover; + } + } + + .vjs-current-time, + .vjs-duration, + .vjs-peertube { + color: $primary-foreground-color; + opacity: $primary-foreground-opacity; + } + + .vjs-progress-control { + position: absolute; + z-index: 100; // On top of the progress bar + bottom: 29px; + width: calc(100% - (2 * #{$progress-margin})); + margin-left: $progress-margin; + height: 14px; + + .vjs-slider { + margin: 0; + border-radius: 0; + background-color: rgba(255, 255, 255, .2); + height: 3px; + transition: none; + + .vjs-play-progress { + background: $primary-foreground-color; + + // Not display the circle if the progress is not hovered + &::before { + opacity: 0; + transition: opacity 0.1s ease; + font-size: 14px; + + top: -0.3em; + } + + .vjs-time-tooltip { + display: none; + } + } + + .vjs-load-progress { + &, & div { + background: rgba(255, 255, 255, .2); + } + } + } + } + + .vjs-progress-control:hover .vjs-slider, + .vjs-slider.vjs-sliding { + height: 5px; + + .vjs-play-progress::before { + opacity: 1; + } + } + + + .vjs-play-control { + @include disable-outline; + + cursor: pointer; + font-size: $font-size; + margin-right: 5px; + } + + .vjs-time-control { + line-height: inherit; + + &.vjs-current-time { + font-size: $font-size; + display: inline-block; + padding: 0; + + .vjs-current-time-display { + line-height: calc(#{$control-bar-height} + 1px); + + &::after { + content: "/"; + margin: 0 1px 0 2px; + } + } + } + + &.vjs-duration { + font-size: $font-size; + display: inline-block; + padding: 0; + .vjs-duration-display { + line-height: calc(#{$control-bar-height} + 1px); + } + } + + &.vjs-remaining-time { + display: none; + } + } + + .vjs-peertube { + width: 100%; + line-height: $control-bar-height; + text-align: right; + + .vjs-peertube-displayed { + display: block; + } + + .vjs-peertube-hidden { + display: none; + } + + .download-speed-number, .upload-speed-number, .peers-number { + font-weight: $font-semibold; + } + + .download-speed-text, .upload-speed-text, .peers-text { + margin-right: 15px; + } + + .icon { + display: inline-block; + width: 15px; + height: 15px; + background-size: contain; + vertical-align: middle; + background-repeat: no-repeat; + margin-right: 6px; + position: relative; + top: -1px; + + &.icon-download { + background-image: url('#{$assets-path}/player/images/arrow-down.svg'); + } + + &.icon-upload { + background-image: url('#{$assets-path}/player/images/arrow-up.svg'); + } + } + } + + .vjs-playback-rate { + font-size: 10px; + width: 37px !important; + + .vjs-playback-rate-value { + font-size: 13px; + line-height: $control-bar-height; + } + + .vjs-menu .vjs-menu-content { + width: 37px !important; + } + } + + .vjs-mute-control { + @include disable-outline; + + line-height: $control-bar-height; + padding: 0; + width: 30px; + + .vjs-icon-placeholder { + display: inline-block; + width: 22px; + height: 22px; + vertical-align: middle; + background: url('#{$assets-path}/player/images/volume.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + + &.vjs-vol-0 .vjs-icon-placeholder { + background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat; + background-size: contain; + } + } + + .vjs-volume-control { + width: 30px; + margin: 0 5px 0 0; + } + + .vjs-volume-bar { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; + background-size: 22px 14px; + height: 100%; + width: 100%; + max-width: 22px; + max-height: 14px; + margin: 7px 4px; + border-radius: 0; + top: 3px; + + .vjs-volume-level { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; + background-size: 22px 14px; + max-width: 22px; + max-height: 14px; + height: 100%; + } + } + + .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, + .vjs-volume-panel.vjs-volume-panel-horizontal:active, + .vjs-volume-panel.vjs-volume-panel-horizontal:focus, + .vjs-volume-panel.vjs-volume-panel-horizontal:hover { + width: 6em; + transition-property: none; + } + + .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { + width: 3em; + height: auto; + } + + .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { + transition-property: none; + } + + .vjs-volume-panel { + .vjs-mute-control { + width: 2em; + z-index: 1; + padding: 0; + } + + .vjs-volume-control { + display: inline-block; + position: relative; + left: 5px; + opacity: 1; + width: 3em; + height: auto; + } + } + + .vjs-peertube-link { + @include disable-outline; + @include disable-default-a-behaviour; + + text-decoration: none; + line-height: $control-bar-height; + font-weight: $font-semibold; + padding: 0 5px; + } + + .vjs-fullscreen-control { + @include disable-outline; + + width: 37px; + margin-right: 11px; + + .vjs-icon-placeholder { + display: inline-block; + width: 22px; + height: 22px; + vertical-align: middle; + background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + } + + .vjs-menu-button-popup { + font-weight: $font-semibold; + width: 50px; + + .vjs-resolution-button { + @include disable-outline; + } + + .vjs-menu { + top: 20px; + left: 0; + + .vjs-menu-content { + width: 50px; + bottom: 20px; + } + + li { + text-transform: none; + font-size: 13px; + } + } + } + } + + @media screen and (max-width: 750px) { + .vjs-dock-text { + font-size: 16px; + } + + .vjs-dock-description { + font-size: 9px; + } + + .vjs-big-play-button { + font-size: 5em; + border-width: 5px; + + .vjs-icon-placeholder::before { + @include big-play-button-triangle-size(32px); + } + } + } + + @media screen and (max-width: 570px) { + .vjs-dock-text { + font-size: 14px; + } + + .vjs-big-play-button { + font-size: 4.5em; + border-width: 4.5px; + + .vjs-icon-placeholder::before { + @include big-play-button-triangle-size(27px); + } + } + + .vjs-playback-rate { + display: none; + } + + .vjs-peertube { + padding: 0 !important; + + .vjs-peertube-displayed { + display: none !important; + } + } + } + + @media screen and (max-width: 300px) { + .vjs-dock-text { + font-size: 13px; + } + + .vjs-big-play-button { + font-size: 3em; + border-width: 3px; + + .vjs-icon-placeholder::before { + @include big-play-button-triangle-size(20px); + } + } + + .vjs-volume-control { + display: none !important; + } + + .vjs-peertube-link { + padding: 0 !important; + } + + .vjs-settings { + width: 33px; + } + } +} + +// Play/pause animations +.vjs-has-started .vjs-play-control { + &.vjs-playing { + animation: remove-pause-button 0.25s ease; + } + + &.vjs-paused { + animation: add-play-button 0.25s ease; + } + + @keyframes remove-pause-button { + 0% { + transform: rotate(90deg); + } + 100% { + transform: rotate(0deg); + } + } + + @keyframes add-play-button { + 0% { + transform: rotate(-90deg); + } + 100% { + transform: rotate(0deg); + } + } +} + +// Error display disabled +.vjs-error:not(.vjs-error-display-enabled) { + .vjs-error-display { + display: none; + } + + .vjs-loading-spinner { + display: block; + } +} + +// Error display enabled +.vjs-error.vjs-error-display-enabled { + .vjs-error-display { + display: block; + } +} \ 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/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss deleted file mode 100644 index c69423fe2..000000000 --- a/client/src/sass/video-js-custom.scss +++ /dev/null @@ -1,846 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -@mixin big-play-button-triangle-size($triangle-size) { - width: $triangle-size; - height: $triangle-size; - top: calc(50% - #{$triangle-size / 2}); - 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; - - .vjs-dock-text { - padding-right: 10px; - } - - .vjs-dock-description { - font-size: 11px; - - &::before, &::after { - display: inline-block; - content: '\1F308'; - } - - &::before { - margin-right: 4px; - } - - &::after { - margin-left: 4px; - transform: scale(-1, 1); - } - } - - .vjs-button > .vjs-icon-placeholder::before { - line-height: $control-bar-height; - } - - .vjs-volume-level::before { - content: ''; /* Remove Circle From Progress Bar */ - } - - .vjs-audio-button { - display: none; - } - - .vjs-big-play-button { - outline: 0; - font-size: 6em; - - $big-play-width: 1.2em; - $big-play-height: 1.2em; - - border: 6px solid #fff; - border-radius: 100%; - - left: 50%; - top: 50%; - width: $big-play-width; - height: $big-play-height; - line-height: $big-play-height; - margin-left: -($big-play-width / 2); - margin-top: -($big-play-height / 2); - transition: 0.4s opacity; - - &::-moz-focus-inner { - border: 0; - padding: 0 - } - - .vjs-icon-placeholder::before { - @include big-play-button-triangle-size(45px); - - content: ''; - background-image: url('../assets/player/images/big-play-button.svg'); - } - - &:hover { - opacity: 0.8; - } - } - - // Small effect when we click on the play button - &.vjs-has-big-play-button-clicked { - - .vjs-big-play-button, .vjs-poster { - display: block; - visibility: hidden; - - &.vjs-big-play-button, &.vjs-big-play-button::before { - opacity: 0; - transition: visibility 0.2s, opacity 0.2s; - } - - &.vjs-poster, &.vjs-poster::before { - opacity: 0; - transition: visibility 0.3s, opacity 0.3s; - transition-delay: 0.05s; - } - } - } - - // Hide the big play button on autoplay - &.vjs-has-autoplay { - .vjs-big-play-button { - display: none !important; - } - } - - .vjs-control-bar, - .vjs-big-play-button, - .vjs-settings-dialog { - background-color: rgba($primary-background-color, 0.5); - } - - .vjs-poster { - outline: none; /* Remove Blue Outline on Click*/ - outline: 0; - } - - .vjs-control-bar { - height: $control-bar-height; - background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); - box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2); - text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - - .vjs-progress-control, - .vjs-play-control, - .vjs-playback-rate, - .vjs-mute-control, - .vjs-volume-control, - .vjs-resolution-control, - .vjs-fullscreen-control, - .vjs-peertube-link, - .vjs-settings - { - color: $primary-foreground-color !important; - opacity: $primary-foreground-opacity; - transition: opacity .1s; - - &:hover { - opacity: $primary-foreground-opacity-hover; - } - } - - .vjs-current-time, - .vjs-duration, - .vjs-peertube { - color: $primary-foreground-color; - opacity: $primary-foreground-opacity; - } - - .vjs-progress-control { - position: absolute; - z-index: 100; // On top of the progress bar - bottom: 29px; - width: calc(100% - (2 * #{$progress-margin})); - margin-left: $progress-margin; - height: 14px; - - .vjs-slider { - margin: 0; - border-radius: 0; - background-color: rgba(255, 255, 255, .2); - height: 3px; - transition: none; - - .vjs-play-progress { - background: $primary-foreground-color; - - // Not display the circle if the progress is not hovered - &::before { - opacity: 0; - transition: opacity 0.1s ease; - font-size: 14px; - - top: -0.3em; - } - - .vjs-time-tooltip { - display: none; - } - } - - .vjs-load-progress { - &, & div { - background: rgba(255, 255, 255, .2); - } - } - } - } - - .vjs-progress-control:hover .vjs-slider, - .vjs-slider.vjs-sliding { - height: 5px; - - .vjs-play-progress::before { - opacity: 1; - } - } - - - .vjs-play-control { - @include disable-outline; - - cursor: pointer; - font-size: $font-size; - margin-right: 5px; - } - - .vjs-time-control { - line-height: inherit; - - &.vjs-current-time { - font-size: $font-size; - display: inline-block; - padding: 0; - - .vjs-current-time-display { - line-height: calc(#{$control-bar-height} + 1px); - - &::after { - content: "/"; - margin: 0 1px 0 2px; - } - } - } - - &.vjs-duration { - font-size: $font-size; - display: inline-block; - padding: 0; - .vjs-duration-display { - line-height: calc(#{$control-bar-height} + 1px); - } - } - - &.vjs-remaining-time { - display: none; - } - } - - .vjs-peertube { - width: 100%; - line-height: $control-bar-height; - text-align: right; - - .vjs-peertube-displayed { - display: block; - } - - .vjs-peertube-hidden { - display: none; - } - - .download-speed-number, .upload-speed-number, .peers-number { - font-weight: $font-semibold; - } - - .download-speed-text, .upload-speed-text, .peers-text { - margin-right: 15px; - } - - .icon { - display: inline-block; - width: 15px; - height: 15px; - background-size: contain; - vertical-align: middle; - background-repeat: no-repeat; - margin-right: 6px; - position: relative; - top: -1px; - - &.icon-download { - background-image: url('../assets/player/images/arrow-down.svg'); - } - - &.icon-upload { - background-image: url('../assets/player/images/arrow-up.svg'); - } - } - } - - .vjs-playback-rate { - font-size: 10px; - width: 37px !important; - - .vjs-playback-rate-value { - font-size: 13px; - line-height: $control-bar-height; - } - - .vjs-menu .vjs-menu-content { - width: 37px !important; - } - } - - .vjs-mute-control { - @include disable-outline; - - line-height: $control-bar-height; - padding: 0; - width: 30px; - - .vjs-icon-placeholder { - display: inline-block; - width: 22px; - height: 22px; - vertical-align: middle; - background: url('../assets/player/images/volume.svg') no-repeat; - background-size: contain; - - &::before { - content: ''; - } - } - - &.vjs-vol-0 .vjs-icon-placeholder { - background: url('../assets/player/images/volume-mute.svg') no-repeat; - background-size: contain; - } - } - - .vjs-volume-control { - width: 30px; - margin: 0 5px 0 0; - } - - .vjs-volume-bar { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; - background-size: 22px 14px; - height: 100%; - width: 100%; - max-width: 22px; - max-height: 14px; - margin: 7px 4px; - border-radius: 0; - top: 3px; - - .vjs-volume-level { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; - background-size: 22px 14px; - max-width: 22px; - max-height: 14px; - height: 100%; - } - } - - .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, - .vjs-volume-panel.vjs-volume-panel-horizontal:active, - .vjs-volume-panel.vjs-volume-panel-horizontal:focus, - .vjs-volume-panel.vjs-volume-panel-horizontal:hover { - width: 6em; - transition-property: none; - } - - .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { - width: 3em; - height: auto; - } - - .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { - transition-property: none; - } - - .vjs-volume-panel { - .vjs-mute-control { - width: 2em; - z-index: 1; - padding: 0; - } - - .vjs-volume-control { - display: inline-block; - position: relative; - left: 5px; - opacity: 1; - width: 3em; - height: auto; - } - } - - .vjs-peertube-link { - @include disable-outline; - @include disable-default-a-behaviour; - - text-decoration: none; - line-height: $control-bar-height; - font-weight: $font-semibold; - padding: 0 5px; - } - - .vjs-fullscreen-control { - @include disable-outline; - - width: 37px; - margin-right: 11px; - - .vjs-icon-placeholder { - display: inline-block; - width: 22px; - height: 22px; - vertical-align: middle; - background: url('../assets/player/images/fullscreen.svg') no-repeat; - background-size: contain; - - &::before { - content: ''; - } - } - } - - .vjs-menu-button-popup { - font-weight: $font-semibold; - width: 50px; - - .vjs-resolution-button { - @include disable-outline; - } - - .vjs-menu { - top: 20px; - left: 0; - - .vjs-menu-content { - width: 50px; - bottom: 20px; - } - - li { - text-transform: none; - font-size: 13px; - } - } - } - } - - @media screen and (max-width: 750px) { - .vjs-dock-text { - font-size: 16px; - } - - .vjs-dock-description { - font-size: 9px; - } - - .vjs-big-play-button { - font-size: 5em; - border-width: 5px; - - .vjs-icon-placeholder::before { - @include big-play-button-triangle-size(32px); - } - } - } - - @media screen and (max-width: 570px) { - .vjs-dock-text { - font-size: 14px; - } - - .vjs-big-play-button { - font-size: 4.5em; - border-width: 4.5px; - - .vjs-icon-placeholder::before { - @include big-play-button-triangle-size(27px); - } - } - - .vjs-playback-rate { - display: none; - } - - .vjs-peertube { - padding: 0 !important; - - .vjs-peertube-displayed { - display: none !important; - } - } - } - - @media screen and (max-width: 300px) { - .vjs-dock-text { - font-size: 13px; - } - - .vjs-big-play-button { - font-size: 3em; - border-width: 3px; - - .vjs-icon-placeholder::before { - @include big-play-button-triangle-size(20px); - } - } - - .vjs-volume-control { - display: none !important; - } - - .vjs-peertube-link { - padding: 0 !important; - } - - .vjs-settings { - width: 33px; - } - } -} - -// Play/pause animations -.vjs-has-started .vjs-play-control { - &.vjs-playing { - animation: remove-pause-button 0.25s ease; - } - - &.vjs-paused { - animation: add-play-button 0.25s ease; - } - - @keyframes remove-pause-button { - 0% { - transform: rotate(90deg); - } - 100% { - transform: rotate(0deg); - } - } - - @keyframes add-play-button { - 0% { - transform: rotate(-90deg); - } - 100% { - transform: rotate(0deg); - } - } -} - -// 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 { - display: none; - } - - .vjs-loading-spinner { - display: block; - } -} - -// Error display enabled -.vjs-error.vjs-error-display-enabled { - .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/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; -- cgit v1.2.3