#5983 -- Make mute on players far more intuitive.

frontend/vue/components/Common/MuteButton.vue

@@ -0,0 +1,60 @@
+<template>
+    <a
+        href="#"
+        :aria-label="muteLang"
+        @click.prevent="toggleMute"
+    >
+        <icon :icon="muteIcon" />
+    </a>
+</template>
+
+<script setup>
+import Icon from "~/components/Common/Icon.vue";
+import {computed, toRef, watch} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+
+const props = defineProps({
+    volume: {
+        type: Number,
+        required: true
+    },
+    isMuted: {
+        type: Boolean,
+        required: true
+    }
+});
+
+const emit = defineEmits(['toggleMute']);
+
+watch(toRef(props, 'volume'), (newVol) => {
+    const newMuted = (newVol === 0);
+
+    if (props.isMuted !== newMuted) {
+        emit('toggleMute');
+    }
+});
+
+const {$gettext} = useTranslate();
+
+const toggleMute = () => {
+    emit('toggleMute');
+};
+
+const muteLang = computed(() => {
+    return (props.isMuted)
+        ? $gettext('Unmute')
+        : $gettext('Mute')
+});
+
+const muteIcon = computed(() => {
+    if (props.isMuted) {
+        return 'volume_off';
+    }
+
+    if (props.volume < 60) {
+        return 'volume_down';
+    }
+
+    return 'volume_up';
+});
+</script>

frontend/vue/components/InlinePlayer.vue

@@ -42,14 +42,12 @@
         </a>
         <div class="inline-volume-controls d-inline-flex align-items-center ml-1">
             <div class="flex-shrink-0">
-                <a
+                <mute-button
                     class="btn btn-sm btn-outline-light px-2"
-                    href="#"
-                    :aria-label="$gettext('Mute')"
-                    @click.prevent="mute"
-                >
-                    <icon icon="volume_mute" />
-                </a>
+                    :volume="volume"
+                    :is-muted="isMuted"
+                    @toggle-mute="toggleMute"
+                />
             </div>
             <div class="flex-fill mx-1">
                 <input
@@ -62,16 +60,6 @@
                     step="1"
                 >
             </div>
-            <div class="flex-shrink-0">
-                <a
-                    class="btn btn-sm btn-outline-light px-2"
-                    href="#"
-                    :aria-label="$gettext('Full Volume')"
-                    @click.prevent="fullVolume"
-                >
-                    <icon icon="volume_up" />
-                </a>
-            </div>
         </div>
     </div>
 </template>
@@ -83,6 +71,7 @@ import Icon from '~/components/Common/Icon.vue';
 import {usePlayerStore} from "~/store.js";
 import {useStorage} from "@vueuse/core";
 import {computed, ref, toRef} from "vue";
+import MuteButton from "~/components/Common/MuteButton.vue";
 
 const store = usePlayerStore();
 const isPlaying = toRef(store, 'isPlaying');
@@ -125,13 +114,9 @@ const stop = () => {
     });
 };
 
-const mute = () => {
+const toggleMute = () => {
     isMuted.value = !isMuted.value;
 };
-
-const fullVolume = () => {
-    volume.value = 100;
-};
 </script>
 
 <style lang="scss">

frontend/vue/components/Public/Player.vue

@@ -118,14 +118,12 @@
             </div>
 
             <div class="radio-control-mute-button">
-                <a
-                    href="#"
+                <mute-button
                     class="text-secondary"
-                    :title="$gettext('Mute')"
-                    @click.prevent="toggleMute"
-                >
-                    <icon icon="volume_mute" />
-                </a>
+                    :volume="volume"
+                    :is-muted="isMuted"
+                    @toggle-mute="toggleMute"
+                />
             </div>
             <div class="radio-control-volume-slider">
                 <input
@@ -136,26 +134,14 @@
                     min="0"
                     max="100"
                     step="1"
-                    :disabled="isMuted"
                 >
             </div>
-            <div class="radio-control-max-volume-button">
-                <a
-                    href="#"
-                    class="text-secondary"
-                    :title="$gettext('Full Volume')"
-                    @click.prevent="fullVolume"
-                >
-                    <icon icon="volume_up" />
-                </a>
-            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 import AudioPlayer from '~/components/Common/AudioPlayer';
-import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useStorage} from "@vueuse/core";
@@ -163,6 +149,7 @@ import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
 import useNowPlaying from "~/functions/useNowPlaying";
 import playerProps from "~/components/Public/playerProps";
+import MuteButton from "~/components/Common/MuteButton.vue";
 
 const props = defineProps({
     ...playerProps
@@ -258,10 +245,6 @@ const toggleMute = () => {
     isMuted.value = !isMuted.value;
 }
 
-const fullVolume = () => {
-    volume.value = 100;
-};
-
 const switchStream = (new_stream) => {
     currentStream.value = new_stream;
     $player.value.toggle(new_stream.url, true, new_stream.hls);