From a5a79d15427372b581e34ac3999c73fc316699d5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Jan 2022 14:25:23 +0100 Subject: Increase player control bar size --- .../playlist/video-watch-playlist.component.ts | 8 + .../+videos/+video-watch/video-watch.component.ts | 11 + .../next-previous-video-button.ts | 1 + client/src/sass/player/_player-variables.scss | 14 +- client/src/sass/player/control-bar.scss | 447 ++++++++++++++++++ client/src/sass/player/dock.scss | 53 +++ client/src/sass/player/index.scss | 2 + client/src/sass/player/peertube-skin.scss | 521 +-------------------- client/src/sass/player/settings-menu.scss | 20 - 9 files changed, 537 insertions(+), 540 deletions(-) create mode 100644 client/src/sass/player/control-bar.scss create mode 100644 client/src/sass/player/dock.scss diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts index fbf9a3687..b44238310 100644 --- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts +++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts @@ -143,6 +143,14 @@ export class VideoWatchPlaylistComponent { this.onPlaylistVideosNearOfBottom(position) } + hasPreviousVideo () { + return !!this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous') + } + + hasNextVideo () { + return !!this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next') + } + navigateToPreviousPlaylistVideo () { const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous') if (!previous) return diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts index d542f243c..d3d04d236 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -474,6 +474,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) } + private hasNextVideo () { + if (this.playlist) { + return this.videoWatchPlaylist.hasNextVideo() + } + + return true + } + private playNextVideoInAngularZone () { if (this.playlist) { this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) @@ -559,6 +567,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { autoplay: this.isAutoplay(), p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled), + hasNextVideo: () => this.hasNextVideo(), nextVideo: () => this.playNextVideoInAngularZone(), playerElement: this.playerElement, @@ -615,6 +624,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Only set this if we're in a playlist if (this.playlist) { + options.common.hasPreviousVideo = () => this.videoWatchPlaylist.hasPreviousVideo() + options.common.previousVideo = () => { this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo()) } diff --git a/client/src/assets/player/videojs-components/next-previous-video-button.ts b/client/src/assets/player/videojs-components/next-previous-video-button.ts index fe17ce2ce..228231a22 100644 --- a/client/src/assets/player/videojs-components/next-previous-video-button.ts +++ b/client/src/assets/player/videojs-components/next-previous-video-button.ts @@ -40,6 +40,7 @@ class NextPreviousVideoButton extends Button { update () { const disabled = this.nextPreviousVideoButtonOptions.isDisabled() + console.log(disabled) if (disabled) this.addClass('vjs-disabled') else this.removeClass('vjs-disabled') diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss index 1d94b6f96..2625576d4 100644 --- a/client/src/sass/player/_player-variables.scss +++ b/client/src/sass/player/_player-variables.scss @@ -3,9 +3,15 @@ $primary-foreground-opacity: 0.9; $primary-foreground-opacity-hover: 1; $primary-background-color: rgba(0, 0, 0, 0.8); -$play-control-font-size: 16px; $font-size: 13px; -$control-bar-height: 34px; + +$control-bar-height: 38px; +$control-bar-icon-size: 26px; +$control-bar-volume-slider-height: 14px; +$control-bar-font-size: 14px; +$control-bar-play-font-size: 34px; +$control-bar-next-previous-play-font-size: 14px; +$control-bar-button-width: 38px; $slider-bg-color: lighten($primary-background-color, 33%); @@ -16,4 +22,8 @@ $dock-padding: 20px; $first-control-bar-element-margin-left: 10px; $first-control-bar-element-margin-left-small-width: 5px; +$screen-width-750: 750px; +$screen-width-570: 570px; +$screen-width-350: 350px; + $assets-path: '../../assets/' !default; diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss new file mode 100644 index 000000000..dd4e33e75 --- /dev/null +++ b/client/src/sass/player/control-bar.scss @@ -0,0 +1,447 @@ +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; + +.video-js.vjs-peertube-skin .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); + transition: visibility 0.3s, opacity 0.3s !important; + + > button:first-child { + @include margin-left($first-control-bar-element-margin-left); + } + + > button:last-child { + @include margin-right($first-control-bar-element-margin-left); + } + + .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-theater-control, + .vjs-settings { + color: pvar(--embedForegroundColor) !important; + + opacity: $primary-foreground-opacity; + transition: opacity .1s; + + &:hover { + opacity: $primary-foreground-opacity-hover; + } + } + + .vjs-current-time, + .vjs-duration, + .vjs-peertube { + color: pvar(--embedForegroundColor); + opacity: $primary-foreground-opacity; + } + + .vjs-progress-control { + @include margin-left($progress-margin); + + position: absolute; + top: -10px; + z-index: 100; // On top of the progress bar + width: calc(100% - (2 * #{$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: pvar(--embedForegroundColor); + + // 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-progress-control .vjs-slider.vjs-sliding { + height: 5px; + + .vjs-play-progress::before { + opacity: 1; + } + } + + + .vjs-play-control { + @include disable-outline; + + cursor: pointer; + width: $control-bar-button-width; + + .vjs-icon-placeholder::before { + font-size: $control-bar-play-font-size; + line-height: initial; + } + } + + .vjs-time-control { + line-height: inherit; + + &.vjs-current-time { + @include margin-left(.5em); + + font-size: $control-bar-font-size; + display: inline-block; + padding: 0; + + .vjs-current-time-display { + line-height: calc(#{$control-bar-height} - 1px); + + &::after { + @include margin(0, 1px, 0, 2px); + + content: '/'; + } + } + } + + &.vjs-duration { + font-size: $control-bar-font-size; + display: inline-block; + padding: 0; + + .vjs-duration-display { + line-height: calc(#{$control-bar-height} - 1px); + } + } + + &.vjs-remaining-time { + display: none; + } + } + + .vjs-live-control { + line-height: $control-bar-height; + min-width: 4em; + width: inherit; + } + + .vjs-peertube { + @include margin-right(6px); + + width: 100%; + line-height: $control-bar-height; + text-align: end; + overflow: hidden; + font-size: $control-bar-font-size; + + .vjs-peertube-displayed { + display: block; + } + + .vjs-peertube-hidden { + display: none; + } + + .download-speed-number, + .upload-speed-number, + .peers-number, + .http-fallback { + font-weight: $font-semibold; + } + + .download-speed-text, + .upload-speed-text, + .peers-text, + .http-fallback { + @include margin-right(15px); + } + + .icon { + @include margin-right(2px); + + display: inline-block; + width: 15px; + height: 15px; + background-size: contain; + vertical-align: middle; + background-repeat: no-repeat; + 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-next-video, + .vjs-previous-video { + width: $control-bar-button-width - 4px; + + &.vjs-disabled { + cursor: default; + } + + .icon { + &.icon-next, + &.icon-previous { + mask-image: url('#{$assets-path}/player/images/next.svg'); + -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); + mask-size: cover; + -webkit-mask-size: cover; + + background-color: #fff; + width: $control-bar-next-previous-play-font-size; + height: $control-bar-next-previous-play-font-size; + display: inline-block; + } + + &.icon-previous { + transform: rotate(180deg); + } + } + } + + .vjs-mute-control { + @include disable-outline; + + padding: 0; + width: $control-bar-icon-size; + + .vjs-icon-placeholder { + display: inline-block; + width: $control-bar-icon-size; + height: $control-bar-icon-size; + 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 { + @include margin(0, 5px, 0, 5px); + + width: $control-bar-icon-size; + display: flex; + align-items: center; + } + + .vjs-volume-bar { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat; + background-size: $control-bar-icon-size $control-bar-volume-slider-height; + height: 100%; + width: 100%; + max-width: $control-bar-icon-size; + max-height: $control-bar-volume-slider-height; + margin: 0; + border-radius: 0; + + .vjs-volume-level { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat; + background-size: $control-bar-icon-size $control-bar-volume-slider-height; + max-width: $control-bar-icon-size; + height: 100%; + max-height: $control-bar-volume-slider-height; + } + + &:focus { + text-shadow: none; + box-shadow: none; + } + } + + .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-settings { + @include disable-outline; + + cursor: pointer; + width: $control-bar-button-width; + + .vjs-icon-placeholder { + display: inline-block; + height: $control-bar-icon-size - 5px; + width: $control-bar-icon-size - 5px; + vertical-align: middle; + background: url('#{$assets-path}/player/images/settings.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + } + + .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-theater-control { + @include disable-outline; + + width: $control-bar-button-width; + cursor: pointer; + + .vjs-icon-placeholder { + transition: transform 0.2s ease; + display: inline-block; + width: $control-bar-icon-size; + height: $control-bar-icon-size; + vertical-align: middle; + background: url('#{$assets-path}/player/images/theater.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + } + + .vjs-fullscreen-control { + @include disable-outline; + + width: $control-bar-button-width; + + .vjs-icon-placeholder { + display: inline-block; + width: $control-bar-icon-size; + height: $control-bar-icon-size; + vertical-align: middle; + background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat; + background-size: contain; + + &::before { + content: ''; + } + } + } + + @media screen and (max-width: $screen-width-750) { + .vjs-theater-control { + display: none; + } + } + + @media screen and (max-width: $screen-width-570) { + .vjs-peertube { + padding: 0 !important; + + .vjs-peertube-displayed { + display: none !important; + } + } + + &.vjs-live { + .vjs-duration { + display: none !important; + } + + .vjs-peertube { + display: none !important; + } + } + } + + @media screen and (max-width: $screen-width-350) { + .vjs-volume-control, + .vjs-next-video, + .vjs-previous-video { + display: none !important; + } + + .vjs-peertube-link { + padding: 0 !important; + } + + > button:first-child { + @include margin-left($first-control-bar-element-margin-left-small-width); + } + + > button:last-child { + @include margin-right($first-control-bar-element-margin-left-small-width); + } + + &.vjs-live { + .vjs-current-time { + display: none !important; + } + } + } +} diff --git a/client/src/sass/player/dock.scss b/client/src/sass/player/dock.scss new file mode 100644 index 000000000..79600ac93 --- /dev/null +++ b/client/src/sass/player/dock.scss @@ -0,0 +1,53 @@ +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; + +.video-js.vjs-peertube-skin { + .vjs-dock-text { + @include padding-right(60px); + + padding: $dock-padding; + background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); + } + + .vjs-dock-title, + .vjs-dock-description { + text-shadow: 0 0 2px rgba(0, 0, 0, .5); + } + + .vjs-dock-description { + font-size: 11px; + + .text::before { + @include margin-right(4px); + } + + .text::after { + @include margin-left(4px); + transform: scale(-1, 1); + } + } + + @media screen and (max-width: $screen-width-750) { + .vjs-dock-text { + font-size: 16px; + } + + .vjs-dock-description { + font-size: 9px; + } + } + + @media screen and (max-width: $screen-width-570) { + .vjs-dock-text { + font-size: 14px; + } + } + + @media screen and (max-width: $screen-width-350) { + .vjs-dock-text { + font-size: 13px; + } + } +} diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss index 385365b6d..7420460e7 100644 --- a/client/src/sass/player/index.scss +++ b/client/src/sass/player/index.scss @@ -1,4 +1,6 @@ @use './peertube-skin'; +@use './dock'; +@use './control-bar'; @use './mobile'; @use './context-menu'; @use './settings-menu'; diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 332a0e17d..5f873d495 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -20,31 +20,6 @@ body { font-size: $font-size; color: pvar(--embedForegroundColor); - .vjs-dock-text { - @include padding-right(60px); - - padding: $dock-padding; - background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); - } - - .vjs-dock-title, - .vjs-dock-description { - text-shadow: 0 0 2px rgba(0, 0, 0, .5); - } - - .vjs-dock-description { - font-size: 11px; - - .text::before { - @include margin-right(4px); - } - - .text::after { - @include margin-left(4px); - transform: scale(-1, 1); - } - } - .vjs-volume-level::before { content: ''; /* Remove Circle From Progress Bar */ } @@ -129,431 +104,7 @@ body { 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); - transition: visibility 0.3s, opacity 0.3s !important; - - > button:first-child { - @include margin-left($first-control-bar-element-margin-left); - } - - .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-theater-control, - .vjs-settings { - color: pvar(--embedForegroundColor) !important; - - opacity: $primary-foreground-opacity; - transition: opacity .1s; - - &:hover { - opacity: $primary-foreground-opacity-hover; - } - } - - .vjs-current-time, - .vjs-duration, - .vjs-peertube { - color: pvar(--embedForegroundColor); - opacity: $primary-foreground-opacity; - } - - .vjs-progress-control { - @include margin-left($progress-margin); - - position: absolute; - z-index: 100; // On top of the progress bar - bottom: 29px; - width: calc(100% - (2 * #{$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: pvar(--embedForegroundColor); - - // 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-progress-control .vjs-slider.vjs-sliding { - height: 5px; - - .vjs-play-progress::before { - opacity: 1; - } - } - - - .vjs-play-control { - @include disable-outline; - - cursor: pointer; - width: 2em; - - .vjs-icon-placeholder { - line-height: $control-bar-height; - position: relative; - top: -1px; - - &::before { - font-size: 28px; - line-height: unset; - position: relative; - } - } - } - - .vjs-time-control { - line-height: inherit; - - &.vjs-current-time { - @include margin-left(.5em); - - font-size: $font-size; - display: inline-block; - padding: 0; - - .vjs-current-time-display { - line-height: calc(#{$control-bar-height} - 1px); - - &::after { - @include margin(0, 1px, 0, 2px); - - content: '/'; - } - } - } - - &.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-live-control { - line-height: $control-bar-height; - min-width: 4em; - width: inherit; - } - - .vjs-peertube { - @include margin-right(6px); - - width: 100%; - line-height: $control-bar-height; - text-align: end; - overflow: hidden; - - .vjs-peertube-displayed { - display: block; - } - - .vjs-peertube-hidden { - display: none; - } - - .download-speed-number, - .upload-speed-number, - .peers-number, - .http-fallback { - font-weight: $font-semibold; - } - - .download-speed-text, - .upload-speed-text, - .peers-text, - .http-fallback { - @include margin-right(15px); - } - - .icon { - &.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-next-video, - .vjs-previous-video { - line-height: $control-bar-height; - text-align: end; - - .icon { - &.icon-next, - &.icon-previous { - mask-image: url('#{$assets-path}/player/images/next.svg'); - -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); - mask-size: cover; - -webkit-mask-size: cover; - - background-color: #fff; - width: 11px; - height: 11px; - margin-top: -2px; - display: inline-block; - } - - &.icon-previous { - transform: rotate(180deg); - } - } - } - - .vjs-peertube { - .icon { - display: inline-block; - width: 15px; - height: 15px; - background-size: contain; - vertical-align: middle; - background-repeat: no-repeat; - position: relative; - top: -1px; - } - } - - .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; - - 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 { - @include margin(0, 5px, 0, 0); - - width: 30px; - } - - .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%; - } - - &:focus { - text-shadow: none; - box-shadow: none; - } - } - - .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-theater-control { - @include disable-outline; - @include margin-right(1px); - - width: 37px; - cursor: pointer; - - .vjs-icon-placeholder { - transition: transform 0.2s ease; - display: inline-block; - width: 22px; - height: 22px; - vertical-align: middle; - background: url('#{$assets-path}/player/images/theater.svg') no-repeat; - background-size: contain; - - &::before { - content: ''; - } - } - } - - .vjs-fullscreen-control { - @include disable-outline; - @include margin-left($first-control-bar-element-margin-left); - - width: 37px; - - .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-theater-control { - display: none; - } - - .vjs-dock-text { - font-size: 16px; - } - - .vjs-dock-description { - font-size: 9px; - } - + @media screen and (max-width: $screen-width-750) { .vjs-big-play-button { font-size: 5em; border-width: 3px; @@ -564,11 +115,7 @@ body { } } - @media screen and (max-width: 570px) { - .vjs-dock-text { - font-size: 14px; - } - + @media screen and (max-width: $screen-width-570) { .vjs-big-play-button { font-size: 4.5em; border-width: 2.5px; @@ -577,31 +124,9 @@ body { @include big-play-button-triangle-size(27px); } } - - .vjs-peertube { - padding: 0 !important; - - .vjs-peertube-displayed { - display: none !important; - } - } - - &.vjs-live { - .vjs-duration { - display: none !important; - } - - .vjs-peertube { - display: none !important; - } - } } - @media screen and (max-width: 350px) { - .vjs-dock-text { - font-size: 13px; - } - + @media screen and (max-width: $screen-width-350) { .vjs-big-play-button { font-size: 3em; border-width: 2px; @@ -610,36 +135,6 @@ body { @include big-play-button-triangle-size(20px); } } - - .vjs-volume-control, - .vjs-next-video, - .vjs-previous-video { - display: none !important; - } - - .vjs-peertube-link { - padding: 0 !important; - } - - .vjs-settings { - width: 33px; - } - - .vjs-control-bar { - > button:first-child { - @include margin-left($first-control-bar-element-margin-left-small-width); - } - } - - .vjs-fullscreen-control { - @include margin-right($first-control-bar-element-margin-left-small-width); - } - - &.vjs-live { - .vjs-current-time { - display: none !important; - } - } } // Theater mode is enabled @@ -707,13 +202,3 @@ body { display: block; } } - -.vjs-no-next-in-playlist { - .vjs-next-video { - cursor: default; - - .icon { - background-color: rgba(255, 255, 255, 0.5); - } - } -} diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 9932fc8c8..5a476259e 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -9,26 +9,6 @@ $setting-transition-easing: ease-out; .video-js { - .vjs-settings { - @include disable-outline; - - cursor: pointer; - width: 33px; - - .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; -- cgit v1.2.3