mirror of
https://github.com/jech/galene.git
synced 2024-11-12 19:55:59 +01:00
Rework video player style
Reduce button size and reduce video control bar size. Add a volume slider to control volume level when volume control is enabled
This commit is contained in:
parent
b2f050e552
commit
3faf46a1d7
3 changed files with 85 additions and 27 deletions
|
@ -457,10 +457,16 @@ textarea.form-reply {
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 25px;
|
bottom: 25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #eaeaea;
|
||||||
font-size: 1.5em;
|
font-size: 1.1em;
|
||||||
transition: all .5s ease-out;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-controls:after, .top-video-controls:after {
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
|
content: " ";
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-video-controls {
|
.top-video-controls {
|
||||||
|
@ -469,18 +475,33 @@ textarea.form-reply {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.controls-button {
|
||||||
|
padding: 3px 10px;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-left {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-right {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.vc-overlay {
|
.vc-overlay {
|
||||||
background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 100%);
|
background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer:hover > .video-controls, .peer:hover > .top-video-controls {
|
.peer:hover > .video-controls, .peer:hover > .top-video-controls {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: all .7s ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-controls span, .top-video-controls span {
|
.video-controls span, .top-video-controls span {
|
||||||
margin-right: 10%;
|
margin-right: 20px;
|
||||||
transition: all .7s ease-out;
|
transition: opacity .7s ease-out;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -490,12 +511,11 @@ textarea.form-reply {
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-controls span:hover, .top-video-controls span:hover {
|
.video-controls span:hover, .top-video-controls span:hover {
|
||||||
opacity: .5;
|
opacity: .8;
|
||||||
transition: opacity .5s ease-out;
|
transition: opacity .5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-controls .volume {
|
.video-controls .volume {
|
||||||
width: 25px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -505,6 +525,27 @@ textarea.form-reply {
|
||||||
color: #c8c8c8
|
color: #c8c8c8
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.volume-mute {
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 25px;
|
||||||
|
display: var(--dv, inline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
height: 4px;
|
||||||
|
width: 60px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 5px 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
opacity: var(--ov, 0);
|
||||||
|
transition: opacity .5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-controls .volume:hover {
|
||||||
|
--ov: 1;
|
||||||
|
--dv: inline;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-container {
|
.mobile-container {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -218,17 +218,22 @@
|
||||||
|
|
||||||
<div id="videocontrols-template" class="invisible">
|
<div id="videocontrols-template" class="invisible">
|
||||||
<div class="video-controls vc-overlay">
|
<div class="video-controls vc-overlay">
|
||||||
|
<div class="controls-button controls-left">
|
||||||
<span class="volume" title="Volume">
|
<span class="volume" title="Volume">
|
||||||
<i class="fas fa-volume-up" aria-hidden="true"></i>
|
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
|
||||||
|
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="controls-button controls-right">
|
||||||
<span class="pip" title="Picture In Picture">
|
<span class="pip" title="Picture In Picture">
|
||||||
<i class="fas fa-clone" aria-hidden="true"></i>
|
<i class="far fa-clone" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="fullscreen" title="Fullscreen">
|
<span class="fullscreen" title="Fullscreen">
|
||||||
<i class="fas fa-expand-alt" aria-hidden="true"></i>
|
<i class="fas fa-expand" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="/protocol.js" defer></script>
|
<script src="/protocol.js" defer></script>
|
||||||
<script src="/scripts/toastify.js" defer></script>
|
<script src="/scripts/toastify.js" defer></script>
|
||||||
|
|
|
@ -1125,6 +1125,9 @@ function addCustomControls(media, container, c) {
|
||||||
if(c.kind === 'local') {
|
if(c.kind === 'local') {
|
||||||
volume.remove();
|
volume.remove();
|
||||||
} else {
|
} else {
|
||||||
|
let slider = /** @type{HTMLInputElement} */
|
||||||
|
(getVideoButton(controls, "volume-slider"));
|
||||||
|
slider.disabled = media.muted;
|
||||||
setVolumeButton(
|
setVolumeButton(
|
||||||
/** @type{HTMLElement} */(volume.firstElementChild),
|
/** @type{HTMLElement} */(volume.firstElementChild),
|
||||||
media.muted,
|
media.muted,
|
||||||
|
@ -1149,11 +1152,11 @@ function getVideoButton(container, name) {
|
||||||
*/
|
*/
|
||||||
function setVolumeButton(button, muted) {
|
function setVolumeButton(button, muted) {
|
||||||
if(!muted) {
|
if(!muted) {
|
||||||
button.classList.remove("fa-volume-off");
|
button.classList.remove("fa-volume-mute");
|
||||||
button.classList.add("fa-volume-up");
|
button.classList.add("fa-volume-up");
|
||||||
} else {
|
} else {
|
||||||
button.classList.remove("fa-volume-up");
|
button.classList.remove("fa-volume-up");
|
||||||
button.classList.add("fa-volume-off");
|
button.classList.add("fa-volume-mute");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1165,12 +1168,21 @@ function registerControlHandlers(media, container) {
|
||||||
let volume = getVideoButton(container, 'volume');
|
let volume = getVideoButton(container, 'volume');
|
||||||
if (volume) {
|
if (volume) {
|
||||||
volume.onclick = function(event) {
|
volume.onclick = function(event) {
|
||||||
|
let target = /** @type{HTMLElement} */(event.target);
|
||||||
|
if(!target.classList.contains('volume-mute'))
|
||||||
|
// if click on volume slider, do nothing
|
||||||
|
return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
media.muted = !media.muted;
|
media.muted = !media.muted;
|
||||||
setVolumeButton(
|
let slider = /** @type{HTMLInputElement} */
|
||||||
/** @type{HTMLElement} */(event.target),
|
(getVideoButton(volume, "volume-slider"));
|
||||||
media.muted,
|
slider.disabled = media.muted;
|
||||||
);
|
setVolumeButton(target, media.muted);
|
||||||
|
};
|
||||||
|
volume.oninput = function() {
|
||||||
|
let slider = /** @type{HTMLInputElement} */
|
||||||
|
(getVideoButton(volume, "volume-slider"));
|
||||||
|
media.volume = parseInt(slider.value, 10)/100;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue