From 07ce3e5aebd5e5b5bf91e3aae996441ae9268402 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Tue, 14 Aug 2018 16:05:20 +0200
Subject: [PATCH] add volume icon

---
 CHANGELOG.md       |  2 ++
 css/main.css       | 33 ++++++++++++++++++++++++++-------
 js/main.js         | 12 ++++++++++++
 templates/main.php |  2 +-
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 153b3f3..173f715 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/css/main.css b/css/main.css
index 5e276e6..c06a00e 100644
--- a/css/main.css
+++ b/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;
+}
diff --git a/js/main.js b/js/main.js
index 36c52f1..8ac4d73 100644
--- a/js/main.js
+++ b/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");
+      }
     }
   });
 
diff --git a/templates/main.php b/templates/main.php
index ff20395..a42edba 100755
--- a/templates/main.php
+++ b/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>