Commit 3faf46a1 authored by Alain Takoudjou's avatar Alain Takoudjou Committed by Juliusz Chroboczek

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
parent b2f050e5
......@@ -457,30 +457,51 @@ textarea.form-reply {
left: 0;
bottom: 25px;
text-align: center;
color: #fff;
font-size: 1.5em;
transition: all .5s ease-out;
color: #eaeaea;
font-size: 1.1em;
opacity: 0;
height: 32px;
}
.video-controls:after, .top-video-controls:after {
clear: both;
display: table;
content: " ";
}
.top-video-controls {
text-align: right;
bottom: inherit;
top: 5px;
text-align: right;
bottom: inherit;
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 {
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 {
opacity: 1;
transition: all .7s ease-out;
}
.video-controls span, .top-video-controls span {
margin-right: 10%;
transition: all .7s ease-out;
margin-right: 20px;
transition: opacity .7s ease-out;
opacity: 1;
cursor: pointer;
}
......@@ -490,12 +511,11 @@ textarea.form-reply {
}
.video-controls span:hover, .top-video-controls span:hover {
opacity: .5;
opacity: .8;
transition: opacity .5s ease-out;
}
.video-controls .volume {
width: 25px;
display: inline-block;
text-align: center;
}
......@@ -505,6 +525,27 @@ textarea.form-reply {
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 {
display: block !important;
}
......
......@@ -218,15 +218,20 @@
<div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay">
<span class="volume" title="Volume">
<i class="fas fa-volume-up" aria-hidden="true"></i>
</span>
<span class="pip" title="Picture In Picture">
<i class="fas fa-clone" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fas fa-expand-alt" aria-hidden="true"></i>
</span>
<div class="controls-button controls-left">
<span class="volume" title="Volume">
<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>
</div>
<div class="controls-button controls-right">
<span class="pip" title="Picture In Picture">
<i class="far fa-clone" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
......
......@@ -1125,6 +1125,9 @@ function addCustomControls(media, container, c) {
if(c.kind === 'local') {
volume.remove();
} else {
let slider = /** @type{HTMLInputElement} */
(getVideoButton(controls, "volume-slider"));
slider.disabled = media.muted;
setVolumeButton(
/** @type{HTMLElement} */(volume.firstElementChild),
media.muted,
......@@ -1149,11 +1152,11 @@ function getVideoButton(container, name) {
*/
function setVolumeButton(button, muted) {
if(!muted) {
button.classList.remove("fa-volume-off");
button.classList.remove("fa-volume-mute");
button.classList.add("fa-volume-up");
} else {
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');
if (volume) {
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();
media.muted = !media.muted;
setVolumeButton(
/** @type{HTMLElement} */(event.target),
media.muted,
);
let slider = /** @type{HTMLInputElement} */
(getVideoButton(volume, "volume-slider"));
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;
};
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment