From 60701fe182e94f9d66fd112211c5849e0a2d98d5 Mon Sep 17 00:00:00 2001 From: emeric Date: Sun, 19 Jan 2020 16:02:31 +0100 Subject: [PATCH] Added volume support in the audio player. Fixes #14 --- approot/mediaplayer.xml | 27 ++++++++------- docroot/css/lms.css | 72 +++++++++++++++++++++++++++++++++------ docroot/js/mediaplayer.js | 61 ++++++++++++++++++++++++++------- 3 files changed, 125 insertions(+), 35 deletions(-) diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml index bcd52a9c..e8212a76 100644 --- a/approot/mediaplayer.xml +++ b/approot/mediaplayer.xml @@ -14,20 +14,20 @@
-
-
-
- - - - -
- +
+ + + +
+ -
+
${title class="Lms-player-text"}
@@ -35,6 +35,9 @@ ${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}
+
diff --git a/docroot/css/lms.css b/docroot/css/lms.css index e441bcb8..5a756d69 100644 --- a/docroot/css/lms.css +++ b/docroot/css/lms.css @@ -402,7 +402,6 @@ a:hover { } .Lms-player-btn { - font-size: 40px !important; cursor: pointer; } @@ -410,15 +409,20 @@ a:hover { color: #337ab7; } -.Lms-player-btn-playpause { - width: 40px; - margin-left: 8px; - margin-right: 8px; +.Lms-player-btn-volume { + font-size: 18px !important; + margin: auto; +} + +.Lms-player-btn-controls { + font-size: 40px !important; + text-align: center; + width: 0.9em; } .Lms-player-duration { line-height: 40px; - text-align: center; + text-align: right; color: darkgrey; white-space: nowrap; } @@ -448,14 +452,14 @@ a:hover { background: transparent; } -input[type="range"]::-webkit-slider-thumb { +.Lms-player-seek::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; height: 0px; width: 0px; } -input[type="range"]::-moz-range-thumb { +.Lms-player-seek::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; height: 0px; @@ -479,6 +483,54 @@ input[type="range"]::-moz-range-thumb { } .Lms-player-text { - margin-left:8px; - margin-right:8px; + margin-left: 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; +} + diff --git a/docroot/js/mediaplayer.js b/docroot/js/mediaplayer.js index df20f3cd..3987eeab 100644 --- a/docroot/js/mediaplayer.js +++ b/docroot/js/mediaplayer.js @@ -11,14 +11,14 @@ LMS.mediaplayer = function () { var _audioSrc; var _updateControls = function() { - _elems.progress.classList.toggle("active"); if (_elems.audio.paused) { - _elems.play.style.display = "inline"; - _elems.pause.style.display = "none"; + _elems.playpause.classList.remove("fa-pause"); + _elems.playpause.classList.add("fa-play"); + _elems.progress.classList.remove("active"); } else { - _elems.pause.style.display = "inline"; - _elems.play.style.display = "none"; + _elems.playpause.classList.remove("fa-play"); + _elems.playpause.classList.add("fa-pause"); _elems.progress.classList.add("active"); } } @@ -52,21 +52,23 @@ LMS.mediaplayer = function () { _root = root; _elems.audio = document.getElementById("lms-mp-audio"); - _elems.play = document.getElementById("lms-mp-play"); - _elems.pause = document.getElementById("lms-mp-pause"); + _elems.playpause = document.getElementById("lms-mp-playpause"); _elems.previous = document.getElementById("lms-mp-previous"); _elems.next = document.getElementById("lms-mp-next"); _elems.progress = document.getElementById("lms-mp-progress"); _elems.seek = document.getElementById("lms-mp-seek"); _elems.curtime = document.getElementById("lms-mp-curtime"); _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() { - if (_elems.audio.hasAttribute("src")) - _elems.audio.play(); - }); - _elems.pause.addEventListener("click", function() { - _elems.audio.pause(); + _elems.playpause.addEventListener("click", function() { + if (_elems.audio.paused) { + if (_elems.audio.hasAttribute("src")) + _elems.audio.play(); + } + else + _elems.audio.pause(); }); _elems.previous.addEventListener("click", function() { @@ -98,6 +100,39 @@ LMS.mediaplayer = function () { _elems.audio.addEventListener("ended", function() { 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) {