mirror of
https://github.com/jech/galene.git
synced 2024-11-10 02:35:58 +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:
Alain Takoudjou
Juliusz Chroboczek
parent
b2f050e552
commit
3faf46a1d7
3 changed files with 85 additions and 27 deletions
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue