Added volume support in the audio player. Fixes #14
This commit is contained in:
emeric
+62
-10
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+48
-13
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user