Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile volume slider for peer containers #76

Merged
merged 8 commits into from
Sep 29, 2024
4 changes: 3 additions & 1 deletion public/js/Room.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
52 changes: 37 additions & 15 deletions public/js/RoomClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
// ###################################################

Expand Down