From 80b586b45325b38e2409ecef06636d6b0cc14872 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Tue, 3 Jan 2023 08:39:19 -0600
Subject: [PATCH] #5983 -- Make mute on players far more intuitive.

---
 frontend/vue/components/Common/MuteButton.vue | 60 +++++++++++++++++++
 frontend/vue/components/InlinePlayer.vue      | 29 +++------
 frontend/vue/components/Public/Player.vue     | 29 ++-------
 frontend/vue/components/Stations/Branding.vue |  0
 4 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 frontend/vue/components/Common/MuteButton.vue
 create mode 100644 frontend/vue/components/Stations/Branding.vue

diff --git a/frontend/vue/components/Common/MuteButton.vue b/frontend/vue/components/Common/MuteButton.vue
new file mode 100644
index 000000000..a3715ba4d
--- /dev/null
+++ b/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>
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index 85fafc2c1..0c2973a48 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/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">
diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue
index fba4cbd94..670b7ed26 100644
--- a/frontend/vue/components/Public/Player.vue
+++ b/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);
diff --git a/frontend/vue/components/Stations/Branding.vue b/frontend/vue/components/Stations/Branding.vue
new file mode 100644
index 000000000..e69de29bb