owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added volume support in the audio player. Fixes #14

Browse Source
This commit is contained in:
emeric
2020-01-19 16:02:31 +01:00
parent e4e294aa92
commit 60701fe182
3 changed files with 125 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/mediaplayer.xml
+15 -12
View File
@@ -14,20 +14,20 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-4"> <div class="col-xs-4 col-sm-2 Lms-player-controls">
<div class="row"> <i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-player-btn-controls"></i>
<div class="col-sm-6 col-xs-12 Lms-player-controls"> <i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i> <i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i> </div>
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i> <div class="hidden-xs col-sm-2">
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i> <div class="Lms-player-volume">
</div> <i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-player-btn-volume"></i>
<div class="hidden-xs col-sm-6 Lms-player-duration"> <span class="hidden-xs Lms-player-volume-slider-container">
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span> <input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
</div> </span>
</div> </div>
</div> </div>
<div class="col-xs-8"> <div class="col-xs-8 col-sm-6">
<div class="Lms-player-text-center"> <div class="Lms-player-text-center">
${title class="Lms-player-text"} ${title class="Lms-player-text"}
</div> </div>
@@ -35,6 +35,9 @@
<small><span class="hidden-xs">${release class="Lms-player-text Lms-explore-releasename"}</span>${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}</small> <small><span class="hidden-xs">${release class="Lms-player-text Lms-explore-releasename"}</span>${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}</small>
</div> </div>
</div> </div>
<div class="hidden-xs col-sm-2 Lms-player-duration">
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
</div>
</div> </div>
</div> </div>
docroot/css/lms.css
+62 -10
View File
@@ -402,7 +402,6 @@ a:hover {
} }
.Lms-player-btn { .Lms-player-btn {
font-size: 40px !important;
cursor: pointer; cursor: pointer;
} }
@@ -410,15 +409,20 @@ a:hover {
color: #337ab7; color: #337ab7;
} }
.Lms-player-btn-playpause { .Lms-player-btn-volume {
width: 40px; font-size: 18px !important;
margin-left: 8px; margin: auto;
margin-right: 8px; }
.Lms-player-btn-controls {
font-size: 40px !important;
text-align: center;
width: 0.9em;
} }
.Lms-player-duration { .Lms-player-duration {
line-height: 40px; line-height: 40px;
text-align: center; text-align: right;
color: darkgrey; color: darkgrey;
white-space: nowrap; white-space: nowrap;
} }
@@ -448,14 +452,14 @@ a:hover {
background: transparent; background: transparent;
} }
input[type="range"]::-webkit-slider-thumb { .Lms-player-seek::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
height: 0px; height: 0px;
width: 0px; width: 0px;
} }
input[type="range"]::-moz-range-thumb { .Lms-player-seek::-moz-range-thumb {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
height: 0px; height: 0px;
@@ -479,6 +483,54 @@ input[type="range"]::-moz-range-thumb {
} }
.Lms-player-text { .Lms-player-text {
margin-left:8px; margin-left: 8px;
margin-right:8px; margin-right: 8px;
} }
.Lms-player-volume {
width: 125px;
height: 40px;
display: flex;
}
.Lms-player-volume-slider-container {
display: inline-block;
width: 85px;
margin: auto;
}
.Lms-player-volume-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: lightgrey;
outline: none;
cursor: pointer;
border-radius: 4px;
}
.Lms-player-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 14px;
height: 14px;
border-radius: 7px;
background: darkgrey;
}
.Lms-player-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 7px;
background: darkgrey;
}
.Lms-player-volume-slider::-webkit-slider-thumb:hover {
background: #337ab7;
}
.Lms-player-volume-slider::-moz-range-thumb:hover {
background: #337ab7;
}
docroot/js/mediaplayer.js
+48 -13
View File
@@ -11,14 +11,14 @@ LMS.mediaplayer = function () {
var _audioSrc; var _audioSrc;
var _updateControls = function() { var _updateControls = function() {
_elems.progress.classList.toggle("active");
if (_elems.audio.paused) { if (_elems.audio.paused) {
_elems.play.style.display = "inline"; _elems.playpause.classList.remove("fa-pause");
_elems.pause.style.display = "none"; _elems.playpause.classList.add("fa-play");
_elems.progress.classList.remove("active");
} }
else { else {
_elems.pause.style.display = "inline"; _elems.playpause.classList.remove("fa-play");
_elems.play.style.display = "none"; _elems.playpause.classList.add("fa-pause");
_elems.progress.classList.add("active"); _elems.progress.classList.add("active");
} }
} }
@@ -52,21 +52,23 @@ LMS.mediaplayer = function () {
_root = root; _root = root;
_elems.audio = document.getElementById("lms-mp-audio"); _elems.audio = document.getElementById("lms-mp-audio");
_elems.play = document.getElementById("lms-mp-play"); _elems.playpause = document.getElementById("lms-mp-playpause");
_elems.pause = document.getElementById("lms-mp-pause");
_elems.previous = document.getElementById("lms-mp-previous"); _elems.previous = document.getElementById("lms-mp-previous");
_elems.next = document.getElementById("lms-mp-next"); _elems.next = document.getElementById("lms-mp-next");
_elems.progress = document.getElementById("lms-mp-progress"); _elems.progress = document.getElementById("lms-mp-progress");
_elems.seek = document.getElementById("lms-mp-seek"); _elems.seek = document.getElementById("lms-mp-seek");
_elems.curtime = document.getElementById("lms-mp-curtime"); _elems.curtime = document.getElementById("lms-mp-curtime");
_elems.duration = document.getElementById("lms-mp-duration"); _elems.duration = document.getElementById("lms-mp-duration");
_elems.volume = document.getElementById("lms-mp-volume");
_elems.volumeslider = document.getElementById("lms-mp-volume-slider");
_elems.play.addEventListener("click", function() { _elems.playpause.addEventListener("click", function() {
if (_elems.audio.hasAttribute("src")) if (_elems.audio.paused) {
_elems.audio.play(); if (_elems.audio.hasAttribute("src"))
}); _elems.audio.play();
_elems.pause.addEventListener("click", function() { }
_elems.audio.pause(); else
_elems.audio.pause();
}); });
_elems.previous.addEventListener("click", function() { _elems.previous.addEventListener("click", function() {
@@ -98,6 +100,39 @@ LMS.mediaplayer = function () {
_elems.audio.addEventListener("ended", function() { _elems.audio.addEventListener("ended", function() {
Wt.emit(_root, "playbackEnded"); Wt.emit(_root, "playbackEnded");
}); });
_elems.audio.volume = _elems.volumeslider.value;
_elems.lastvolume = _elems.volumeslider.value;
_elems.volumeslider.addEventListener("input", function() {
_elems.audio.volume = _elems.volumeslider.value;
_elems.lastvolume = _elems.volumeslider.value;
});
_elems.volume.addEventListener("click", function () {
if (_elems.audio.volume != 0)
{
_elems.audio.volume = 0;
_elems.volumeslider.value = 0;
}
else
{
_elems.audio.volume = _elems.lastvolume;
_elems.volumeslider.value = _elems.lastvolume;
}
});
_elems.audio.addEventListener("volumechange", function() {
if (_elems.audio.volume != 0)
{
_elems.volume.classList.remove("fa-volume-off");
_elems.volume.classList.add("fa-volume-up");
}
else
{
_elems.volume.classList.remove("fa-volume-up");
_elems.volume.classList.add("fa-volume-off");
}
});
} }
var loadTrack = function(params, autoplay) { var loadTrack = function(params, autoplay) {