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/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 +++ 7 files changed, 862 insertions(+) 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 (limited to 'client/src/sass/player') 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 -- cgit v1.2.3