add volume icon

CHANGELOG.md

@@ -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

css/main.css

@@ -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;
+}

js/main.js

@@ -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");
+      }
     }
   });
 

templates/main.php

@@ -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>