Fixes AzuraCast#3195 -- Hide volume slider on devices where audio lev…

…el is immutable (like iOS).
igecloudsdev · Nov 27, 2024 · 9c49bfc · 9c49bfc
1 parent ad567be
commit 9c49bfc
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ release channel, you can take advantage of these new features and fixes.
 - All web hooks can now have rate limits set for them, so they only dispatch once in the time specified, in case
   third-party services need to receive updates less frequently.
 
+- Volume controls are hidden on iOS, as volume is immutable on that platform.
+
 ## Bug Fixes
 
 - Fixed a bug where extra metadata (fade-in/out, cue-in/out, etc.) would not save on the Bulk Media Editor import.

diff --git a/frontend/components/Common/Waveform.vue b/frontend/components/Common/Waveform.vue
@@ -3,8 +3,8 @@
         <div class="row">
             <div class="col-md-12">
                 <div id="waveform_container">
-                    <div id="waveform-timeline" />
-                    <div id="waveform" />
+                    <div id="waveform-timeline"/>
+                    <div id="waveform"/>
                 </div>
             </div>
         </div>
@@ -28,17 +28,15 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-5">
+            <div v-if="showVolume" class="col-md-5">
                 <div class="inline-volume-controls d-flex align-items-center">
-                    <div class="flex-shrink-0">
-                        <button
-                            type="button"
-                            class="btn btn-sm btn-outline-inverse"
-                            :title="$gettext('Mute')"
-                            @click="volume = 0"
-                        >
-                            <icon :icon="IconVolumeOff" />
-                        </button>
+                    <div class="flex-shrink-0 mx-2">
+                        <mute-button
+                            class="p-0"
+                            :volume="volume"
+                            :is-muted="isMuted"
+                            @toggle-mute="toggleMute"
+                        />
                     </div>
                     <div class="flex-fill mx-1">
                         <input
@@ -51,16 +49,6 @@
                             step="1"
                         >
                     </div>
-                    <div class="flex-shrink-0">
-                        <button
-                            type="button"
-                            class="btn btn-sm btn-outline-inverse"
-                            :title="$gettext('Full Volume')"
-                            @click="volume = 100"
-                        >
-                            <icon :icon="IconVolumeUp" />
-                        </button>
-                    </div>
                 </div>
             </div>
         </div>
@@ -72,11 +60,11 @@ import WS from 'wavesurfer.js';
 import timeline from 'wavesurfer.js/dist/plugins/timeline.js';
 import regions from 'wavesurfer.js/dist/plugins/regions.js';
 import getLogarithmicVolume from '~/functions/getLogarithmicVolume';
-import Icon from './Icon.vue';
 import {onMounted, onUnmounted, ref, watch} from "vue";
 import {useAxios} from "~/vendor/axios";
 import usePlayerVolume from "~/functions/usePlayerVolume";
-import {IconVolumeOff, IconVolumeUp} from "~/components/Common/icons";
+import useShowVolume from "~/functions/useShowVolume.ts";
+import MuteButton from "~/components/Common/MuteButton.vue";
 
 const props = defineProps({
     audioUrl: {
@@ -99,6 +87,14 @@ let wavesurfer = null;
 let wsRegions = null;
 
 const volume = usePlayerVolume();
+const showVolume = useShowVolume();
+
+const isMuted = ref(false);
+
+const toggleMute = () => {
+    isMuted.value = !isMuted.value;
+}
+
 const zoom = ref(0);
 
 watch(zoom, (val) => {
@@ -109,6 +105,10 @@ watch(volume, (val) => {
     wavesurfer?.setVolume(getLogarithmicVolume(val));
 });
 
+watch(isMuted, (val) => {
+    wavesurfer?.setMuted(val);
+});
+
 const isExternalJson = ref(false);
 
 const {axiosSilent} = useAxios();

diff --git a/frontend/components/InlinePlayer.vue b/frontend/components/InlinePlayer.vue
@@ -42,9 +42,9 @@
             :aria-label="$gettext('Stop')"
             @click="stop()"
         >
-            <icon :icon="IconStop" />
+            <icon :icon="IconStop"/>
         </button>
-        <div class="inline-volume-controls d-inline-flex align-items-center ms-2">
+        <div v-if="showVolume" class="inline-volume-controls d-inline-flex align-items-center ms-2">
             <div class="flex-shrink-0">
                 <mute-button
                     class="btn p-2 text-reset"
@@ -77,6 +77,7 @@ import MuteButton from "~/components/Common/MuteButton.vue";
 import usePlayerVolume from "~/functions/usePlayerVolume";
 import {IconStop} from "~/components/Common/icons";
 import {usePlayerStore} from "~/functions/usePlayerStore.ts";
+import useShowVolume from "~/functions/useShowVolume.ts";
 
 defineOptions({
     inheritAttrs: false
@@ -87,6 +88,8 @@ const {isPlaying, current, stop} = usePlayerStore();
 const volume = usePlayerVolume();
 const isMuted = ref(false);
 
+const showVolume = useShowVolume();
+
 const duration: Ref<number> = ref(0);
 const currentTime: Ref<number> = ref(0);
 const rawProgress: Ref<number> = ref(0);

diff --git a/frontend/components/Public/Player.vue b/frontend/components/Public/Player.vue
@@ -11,7 +11,7 @@
                 v-if="showAlbumArt && np.now_playing.song.art"
                 class="now-playing-art"
             >
-                <album-art :src="np.now_playing.song.art" />
+                <album-art :src="np.now_playing.song.art"/>
             </div>
             <div class="now-playing-main">
                 <h6
@@ -90,7 +90,7 @@
                         aria-expanded="false"
                     >
                         {{ currentStream.name }}
-                        <span class="caret" />
+                        <span class="caret"/>
                     </button>
                     <ul
                         class="dropdown-menu"
@@ -112,7 +112,7 @@
                 </div>
             </div>
 
-            <div class="radio-control-volume d-flex align-items-center">
+            <div v-if="showVolume" class="radio-control-volume d-flex align-items-center">
                 <div class="flex-shrink-0 mx-2">
                     <mute-button
                         class="p-0 text-secondary"
@@ -150,6 +150,7 @@ import {useAzuraCastStation} from "~/vendor/azuracast";
 import usePlayerVolume from "~/functions/usePlayerVolume";
 import {usePlayerStore} from "~/functions/usePlayerStore.ts";
 import {useEventListener} from "@vueuse/core";
+import useShowVolume from "~/functions/useShowVolume.ts";
 
 const props = defineProps({
     ...playerProps
@@ -219,6 +220,7 @@ const streams = computed<CurrentStreamDescriptor[]>(() => {
 });
 
 const volume = usePlayerVolume();
+const showVolume = useShowVolume();
 
 const urlParamVolume = (new URL(document.location.href)).searchParams.get('volume');
 if (null !== urlParamVolume) {

diff --git a/frontend/functions/useShowVolume.ts b/frontend/functions/useShowVolume.ts
@@ -0,0 +1,10 @@
+import {useSupported} from "@vueuse/core";
+import {ComputedRef} from "vue";
+
+export default function useShowVolume(): ComputedRef<boolean> {
+    return useSupported(() => {
+        const audio = new Audio();
+        audio.volume = 0.5;
+        return audio.volume !== 1;
+    });
+}