[Android] Implement mute in the remote access mini player

[Nicolas Pomepuy]

vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Tue Feb 27 10:06:18 2024 +0100| [f72a1f0dd9769536c54879a694555d597f5168d3] | committer: Nicolas Pomepuy

Implement mute in the remote access mini player

> https://code.videolan.org/videolan/vlc-android/commit/f72a1f0dd9769536c54879a694555d597f5168d3
---

 .../public/icons/volume_off.svg                    |  1 +
 .../src/components/MiniPlayer.vue                  | 26 ++++++++++++++++++++--
 .../src/stores/PlayerStore.js                      |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/buildsystem/network-sharing-server/public/icons/volume_off.svg b/buildsystem/network-sharing-server/public/icons/volume_off.svg
new file mode 100644
index 0000000000..85e11a552a
--- /dev/null
+++ b/buildsystem/network-sharing-server/public/icons/volume_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4.34 2.93L2.93 4.34 7.29 8.7 7 9H3v6h4l5 5v-6.59l4.18 4.18c-.65.49-1.38.88-2.18 1.11v2.06c1.34-.3 2.57-.92 3.61-1.75l2.05 2.05 1.41-1.41L4.34 2.93zM10 15.17L7.83 13H5v-2h2.83l.88-.88L10 11.41v3.76zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zm-7-8l-1.88 1.88L12 7.76zm4.5 8c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24z"/></svg>
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/src/components/MiniPlayer.vue b/buildsystem/network-sharing-server/src/components/MiniPlayer.vue
index cd1327fd0c..d7dcd44ea4 100644
--- a/buildsystem/network-sharing-server/src/components/MiniPlayer.vue
+++ b/buildsystem/network-sharing-server/src/components/MiniPlayer.vue
@@ -43,7 +43,8 @@
             @click="togglePlayQueue($event)" v-bind:class="(this.playerStore.playqueueShowing) ? 'active' : ''" />
         </div>
         <div class="player-right-container volume-container">
-          <ImageButton type="volume" class="medium" id="volume_icon" />
+          <ImageButton type="volume" class="medium" id="volume_icon" v-show="(this.playerStore.volume != 0)" v-on:click="mute()"/>
+          <ImageButton type="volume_off" class="medium" id="volume_icon" v-show="(this.playerStore.volume == 0)" v-on:click="mute()"/>
           <input type="range" ref="volume" min="0" max="100" step="1" @change="this.volumeChange($event)"
             @input="this.volumeChange($event)" @touchstart="this.volumeTouched = true"
             @touchend="this.volumeTouched = false" @touchcancel="this.volumeTouched = false">
@@ -79,7 +80,8 @@ export default {
       loadedArtworkUrl: "",
       volumeTouched: false,
       progressTouched: false,
-      volumeTimeoutId: 0
+      volumeTimeoutId: 0,
+      oldVolume: -1,
     }
   },
   computed: {
@@ -93,6 +95,23 @@ export default {
       if (this.$refs.volume.value != this.nowPlaying.volume) this.$refs.volume.value = this.nowPlaying.volume
       this.updateVolumeBackground()
     },
+    //Mute or unmute depending on the current volume
+    mute() {
+      if (this.$refs.volume.value == 0) {
+        if (this.oldVolume == -1) {
+          this.$root.sendMessage("set-volume", this.$refs.volume.max / 2);
+          this.$refs.volume.value = this.$refs.volume.max / 2
+        } else {
+          this.$root.sendMessage("set-volume", this.oldVolume);
+          this.$refs.volume.value = this.oldVolume
+        }
+      } else {
+        this.oldVolume = this.$refs.volume.value
+          this.$root.sendMessage("set-volume", 0);
+        this.$refs.volume.value = 0
+      }
+      this.updateVolumeBackground() 
+    },
     changeProgressIfNeeded() {
       this.updateProgressBackground()
       if (this.$refs.progress.matches(':hover') || this.volumeTouched) return
@@ -105,6 +124,7 @@ export default {
       const max = target.max
       const val = target.value
 
+      this.playerStore.volume = this.$refs.volume.value
       target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
     },
     updateProgressBackground() {
@@ -160,6 +180,8 @@ export default {
         this.changeVolumeIfNeeded()
       }, "50");
 
+      this.playerStore.volume = event.target.value
+
     },
     progressChange(event) {
       this.updateProgressBackground()
diff --git a/buildsystem/network-sharing-server/src/stores/PlayerStore.js b/buildsystem/network-sharing-server/src/stores/PlayerStore.js
index 03c1cfb76e..0f665a278c 100644
--- a/buildsystem/network-sharing-server/src/stores/PlayerStore.js
+++ b/buildsystem/network-sharing-server/src/stores/PlayerStore.js
@@ -12,6 +12,7 @@ export const usePlayerStore = defineStore('player', {
     playqueueShowing: false,
     playQueueEdit: false,
     responsivePlayerShowing: false,
+    volume:0
   }),
   getters: {
   },