LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Lots of player UI improvements (#134)

Browse source 
* various control bar fixes

* fixes for mobile

* hide advertisement div by default

* fix duration bar

* more frontend touchups

* more styles

* fix for advertisement bar showing

* dont use ima on each re-render
This commit is contained in:
mayeaux 2021-10-27 18:08:12 +03:00 committed by GitHub
parent 247ee757d1
commit 3849683a59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 107 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/app/view.jsx
View file

@ -353,7 +353,7 @@ function App(props: Props) {
// $FlowFixMe // $FlowFixMe
document.body.removeChild(script); document.body.removeChild(script);
}; };
}); }, []);
// @endif // @endif
// @if TARGET='app' // @if TARGET='app'

105
ui/scss/component/_videojs.scss
View file

@ -81,11 +81,17 @@
// Menu size // Menu size
.vjs-playback-rate .vjs-menu .vjs-menu-content { .vjs-playback-rate .vjs-menu .vjs-menu-content {
width: 125%; width: 125%;
font-size: 12px;
@media (max-width:652px) {
font-size: 10px; font-size: 10px;
} }
}
// Volume slider // Volume slider
.vjs-volume-panel { .vjs-volume-panel {
margin-right: -8px;
&.vjs-control { &.vjs-control {
transition: 0.2s; transition: 0.2s;
} }
@ -150,3 +156,102 @@
.bottom-gradient { .bottom-gradient {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
} }
[dir] .video-js .vjs-control {
font-size: 14px;
@media (max-width:813px) {
font-size: 12px;
}
}
.vjs-control-bar {
height: 41px !important;
color: #dbd8d8;
}
.vjs-playback-rate {
margin-top: 3px;
font-size: 12px !important;
@media (max-width:813px) {
margin-top: 3px !important;
font-size: 10px !important;
}
}
.vjs-quality-selector > .vjs-menu > .vjs-menu-content {
margin-bottom: 3px;
}
.vjs-hover {
opacity: 1;
}
[dir] .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: rgba(43, 51, 63);
}
.vjs-quality-selector > .vjs-menu > .vjs-menu-content {
font-size: 12px;
@media (max-width:652px) {
font-size: 10px;
}
}
.vjs-quality-selector > .vjs-menu {
height: 100%;
}
.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
max-height: 19em;
}
.vjs-time-divider div span {
font-size: 18px;
color: #dbd8d8;
position: absolute;
top: 4px;
@media (max-width:813px) {
top: 0px;
}
}
.vjs-play-control {
font-size: 17px !important;
margin-top: -6px !important;
margin-right: -14px !important;
}
.vjs-play-control .vjs-icon-placeholder {
margin-right: -5px;
}
.vjs-button--autoplay-next {
margin-top: 15px;
}
.vjs-fullscreen-control {
margin-top: 2px;
}
.vjs-slider-horizontal {
background-color: #474747 !important;
}
.vjs-mouse-display {
color: white !important;
background-color: lightgrey !important;
width: 8px !important;
margin-left: -5px !important;
}
.vjs_video_3_ima-ad-container {
display: none;
}
.ima-ad-container {
display: none;
}