add toggle mute clicking on volume icon

CHANGELOG.md

@@ -10,6 +10,12 @@
   [#](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/07ce3e5aebd5e5b5bf91e3aae996441ae9268402) @onny
 - Remember volume state
   [#66](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/66) @onny
+- German translation
+  [#38](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/38) @onny
+- Add donation info to README
+  [#70](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/70) @onny
+- Toggle audio mute click on volume icon
+  [#69](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/69) @onny
 
 ### Fixed
 - Fix styling issue (overflow hidden) player area

README.md

@@ -30,9 +30,18 @@ docker run -v /tmp/dockerdata:/data/data -v /tmp/nextcloud-app-radio:/opt/nextcl
 ## Reporting bugs
 You can report bugs in the public gitlab repository [here](https://git.project-insanity.org/onny/nextcloud-app-radio/issues) and for discussion you can find a section for the app in the offical Nextcloud forums [here](https://help.nextcloud.com/c/apps/radio).
 
+## Adding translations
+For now only German translations are provided, so please submit your translations if possible :) It's really easy, just `git clone` this repo and copy the translation files in `l10n` according to your locale. Merge requests go to [this radio repository](https://git.project-insanity.org/onny/nextcloud-app-radio).
+
 ## Adding radio stations
 This app uses a public and open database of radio stations as its backend, so any station you add in [radio-browser.info](http://www.radio-browser.info/) (no account required), will be also available in this app. Feel free to contribute :)
 
 ## Credits
 * [radio-browser.info](http://www.radio-browser.info/) database api as backend for this app
 * Python example code to query stream metadata, took from [here](https://anton.logvinenko.name/en/blog/how-to-get-title-from-audio-stream-with-python.html).
+
+## Donation
+If you like this app and want to support my work, you can donate to this Bitcoin address:
+```
+19mpmuNczGDgdxaBLBn3REEpQLPPcJHZB6
+```

css/main.css

@@ -477,10 +477,10 @@ table td {
 	width: 20px;
 	height: 20px;
 	background-size: contain;
-	position: relative;
-	left: -30px;
-	top: -3px;
 	background-repeat: no-repeat;
+	position: relative;
+	left: 75px;
+	top: 14px;
 }
 #volumeicon.full {
 	background-image: url('../img/sound_full.png');
@@ -495,8 +495,13 @@ table td {
 #volumeslider{
 	width: 170px;
 	display: inline-block;
-	margin-top: 15px;
-	margin-left: 35px;
+	position: relative;
+	left: 40px;
+	top: -7px;
+}
+
+#station_metadata {
+	margin-top: -3px;
 }
 
 #preload-01 { background: url('../img/sound_mid.png') no-repeat -9999px -9999px; }

js/main.js

@@ -1,5 +1,7 @@
 $(function(){
 
+  var last_volume = 0;
+
   $(document).ready(function () {
 
       // Player icon pause/stop
@@ -425,6 +427,37 @@ $(function(){
     }, 700)
   );
 
+$("#volumeicon").on("click", function(e) {
+  if (player.volume > 0) {
+    last_volume = player.volume;
+    player.volume = 0;
+    $('#volumeslider').slider('value',0);
+    save_volume_state(0);
+  } else {
+    if (!last_volume == 0) {
+      player.volume = last_volume;
+      $('#volumeslider').slider('value',last_volume);
+      save_volume_state(last_volume);
+    } else {
+      player.volume = 1;
+      $('#volumeslider').slider('value',1);
+      save_volume_state(1);
+    }
+  }
+  if (player.volume < 0.2) {
+    $("#volumeicon").removeClass();
+    $("#volumeicon").attr("class","silent");
+  }
+  if (player.volume > 0.5) {
+    $("#volumeicon").removeClass();
+    $("#volumeicon").attr("class","full");
+  }
+  if (player.volume < 0.5 && player.volume > 0.2) {
+    $("#volumeicon").removeClass();
+    $("#volumeicon").attr("class","mid");
+  }
+});
+
   function load_volume_state() {
     var volume_state = 0;
     var baseUrl = OC.generateUrl('/apps/radio/getVolumeState');
@@ -433,8 +466,10 @@ $(function(){
         volume_state = data["volume_state"];
         if (volume_state == "") {
           player.volume = 1;
+          last_volume = 1;
           $('#volumeslider').slider('value',1);
         } else {
+          last_volume = volume_state;
           player.volume = Number(volume_state);
           $('#volumeslider').slider('value',Number(volume_state));
           if (volume_state < 0.2) {

templates/main.php

@@ -30,9 +30,8 @@
             <div id="app-settings">
                 <audio id="player" src=""></audio>
                 <button id="playbutton" class="play"></button>
-                <div id="volumeslider">
-                  <div id="volumeicon" class="full"></div>
-                </div>
+                <div id="volumeicon" class="full"></div>
+                <div id="volumeslider"></div>
                 <p id="station_metadata"></p>
             </div>
         </div>