Skip to content
Snippets Groups Projects
Commit 07ce3e5a authored by onny's avatar onny
Browse files

add volume icon

parent b7e71195
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,8 @@
[#26](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/26) @onny
- Navigation by hash location
[#63](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/63) @onny
- Add icon categories
[#](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/b7e711955b90f388a5e340ab582461fd39df8969) @onny
### Fixed
- Fix styling issue (overflow hidden) player area
......
......@@ -24,13 +24,6 @@
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#volumeslider{
width: 200px;
display: inline-block;
margin-top: 15px;
margin-left: 5px;
}
#station_metadata{
margin: 5px 20px;
padding-left: 5px;
......@@ -475,3 +468,29 @@ table td {
overflow: hidden;
margin-bottom: 10px;
}
#volumeicon {
width: 20px;
height: 20px;
background-size: contain;
position: relative;
left: -30px;
top: -3px;
background-repeat: no-repeat;
}
#volumeicon.full {
background-image: url('../img/sound_full.png');
}
#volumeicon.mid {
background-image: url('../img/sound_mid.png');
}
#volumeicon.silent {
background-image: url('../img/sound_silent.png');
}
#volumeslider{
width: 170px;
display: inline-block;
margin-top: 15px;
margin-left: 35px;
}
......@@ -388,6 +388,18 @@ $(function(){
step: .1,
slide: function(e, ui) {
player.volume = ui.value;
if (ui.value < 0.2) {
$("#volumeicon").removeClass();
$("#volumeicon").attr("class","silent");
}
if (ui.value > 0.5) {
$("#volumeicon").removeClass();
$("#volumeicon").attr("class","full");
}
if (ui.value < 0.5 && ui.value > 0.2) {
$("#volumeicon").removeClass();
$("#volumeicon").attr("class","mid");
}
}
});
......
......@@ -27,7 +27,7 @@
<audio id="player" src=""></audio>
<button id="playbutton" class="play"></button>
<div id="volumeslider">
<!-- <img src="img/sound_full.png"> -->
<div id="volumeicon" class="full"></div>
</div>
<p id="station_metadata"></p>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment