forks/peertube
1
0
Fork 0
Code Releases Activity

Improve player on small screen

Browse source
This commit is contained in:
Chocobozzz 2017-12-20 09:43:51 +01:00
parent e203f2e0e1
commit 86f278cb4c
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 64 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/src/sass/video-js-custom.scss
View file

@ -102,7 +102,7 @@ $control-bar-height: 34px;
padding: 0;
.vjs-current-time-display {
line-height: $control-bar-height;
line-height: calc(#{$control-bar-height} + 1px);
&::after {
content: "/";
@ -117,7 +117,7 @@ $control-bar-height: 34px;
padding: 0;
.vjs-duration-display {
line-height: $control-bar-height;
line-height: calc(#{$control-bar-height} + 1px);
}
}
@ -271,18 +271,19 @@ $control-bar-height: 34px;
.vjs-menu-button-popup {
font-size: 13px;
font-weight: $font-semibold;
width: 42px;
width: 50px;
// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
.vjs-resolution-button-label {
line-height: $control-bar-height;
position: absolute;
top: 0;
left: -1px;
left: 4px;
width: 100%;
height: 100%;
text-align: center;
box-sizing: inherit;
text-align: center;
}
.vjs-resolution-button {
@ -293,9 +294,9 @@ $control-bar-height: 34px;
top: 20px;
.vjs-menu-content {
width: 4em;
width: 50px;
left: 50%; /* Center the menu, in it's parent */
margin-left: -2em; /* half of width, to center */
margin-left: -21px;
}
li {
@ -306,11 +307,26 @@ $control-bar-height: 34px;
}
}
@media screen and (max-width: 450px) {
@media screen and (max-width: 550px) {
.vjs-webtorrent {
padding: 0 !important;
.vjs-webtorrent-displayed {
display: none !important;
}
}
}
@media screen and (max-width: 300px) {
.vjs-volume-control {
display: none !important;
}
.vjs-volume-panel {
width: 26px !important;
margin-right: 83px !important;
}
}
}
// Thanks: https://projects.lukehaas.me/css-loaders/

33
client/src/standalone/videos/embed.scss
View file

@ -14,17 +14,18 @@ html, body {
margin: 0;
}
.video-js {
.video-js.vjs-peertube-skin {
width: 100%;
height: 100%;
overflow: hidden;
}
.vjs-poster {
.vjs-poster {
background-size: 100% auto;
}
}
.vjs-peertube-link {
.vjs-peertube-link {
color: #fff;
text-decoration: none;
font-size: $font-size;
@ -32,18 +33,19 @@ html, body {
transition: all .4s;
font-weight: $font-semibold;
margin-right: 3px;
}
padding: 0 5px;
}
.vjs-peertube-link:hover {
.vjs-peertube-link:hover {
text-shadow: 0 0 1em #fff;
}
}
// Fix volume panel because we added a new component (PeerTube link)
.vjs-volume-panel {
margin-right: 121px !important;
}
// Fix volume panel because we added a new component (PeerTube link)
.vjs-volume-panel {
margin-right: 137px !important;
}
@media screen and (max-width: 350px) {
@media screen and (max-width: 350px) {
.vjs-play-control {
padding: 0 5px !important;
width: 25px !important;
@ -57,4 +59,9 @@ html, body {
width: 26px !important;
margin-right: 140px !important;
}
.vjs-peertube-link {
padding: 0;
}
}
}