Merge pull request #76 from Yeghro/main

Mobile volume slider for peer containers
HiveTalk · Sep 29, 2024 · c24230c · c24230c
2 parents 6d35342 + 4bbd1b1
commit c24230c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/public/js/Room.js b/public/js/Room.js
@@ -3167,9 +3167,11 @@ function handleSelects() {
         isButtonsBarOver = e.currentTarget.checked;
         localStorageSettings.keep_buttons_visible = isButtonsBarOver;
         lS.setSettings(localStorageSettings);
+        checkButtonsBar();
+        const status = isButtonsBarOver ? 'enabled' : 'disabled';
+        userLog('info', `Buttons always visible ${status}`, 'top-end');
         e.target.blur();
     };
-
     // audio options
     switchAutoGainControl.onchange = (e) => {
         localStorageSettings.mic_auto_gain_control = e.currentTarget.checked;

diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
@@ -7286,23 +7286,45 @@ class RoomClient {
     // HANDLE PEER VOLUME
     // ###################################################
 
-    handlePV(uid) {
-        const words = uid.split('___');
-        let peer_id = words[1] + '___pVolume';
-        let audioConsumerId = this.audioConsumers.get(peer_id);
-        let audioConsumerPlayer = this.getId(audioConsumerId);
-        let inputPv = this.getId(peer_id);
-        if (inputPv && audioConsumerPlayer) {
-            inputPv.style.display = 'inline';
-            inputPv.value = 100;
-            // Not work on Mobile?
-            inputPv.addEventListener('input', () => {
-                audioConsumerPlayer.volume = inputPv.value / 100;
-            });
-        }
+updateVolume(audioConsumerPlayer, volume) {
+    console.log('Attempting to set volume:', volume);
+
+    if (audioConsumerPlayer.setVolume) {
+        audioConsumerPlayer.setVolume(volume);
+    } else if (audioConsumerPlayer.volume !== undefined) {
+        audioConsumerPlayer.volume = volume;
+    } else if (audioConsumerPlayer.mediaElement) {
+        audioConsumerPlayer.mediaElement.volume = volume;
     }
+
+    // console.log('Current volume:', audioConsumerPlayer.volume);
+}
 
-    // ####################################################
+handlePV(uid) {
+    const words = uid.split('___');
+    let peer_id = words[1] + '___pVolume';
+    let audioConsumerId = this.audioConsumers.get(peer_id);
+    let audioConsumerPlayer = this.getId(audioConsumerId);
+    let inputPv = this.getId(peer_id);
+    if (inputPv && audioConsumerPlayer) {
+        inputPv.style.display = 'inline';
+        inputPv.value = 100;
+
+        const handleVolumeChange = () => {
+            const volume = inputPv.value / 100;
+            this.updateVolume(audioConsumerPlayer, volume);
+        };
+
+        // Use both input and change events
+        inputPv.addEventListener('input', handleVolumeChange);
+        inputPv.addEventListener('change', handleVolumeChange);
+
+        // Initial volume set
+        handleVolumeChange();
+    }
+}   
+
+// ####################################################
     // HANDLE DOMINANT SPEAKER
     // ###################################################