Skip to content

Instantly share code, notes, and snippets.

@Aran-Fey
Last active May 12, 2022 22:32
Show Gist options
  • Save Aran-Fey/c4b9165f5868a4663f7d3b6097ed3b08 to your computer and use it in GitHub Desktop.
Save Aran-Fey/c4b9165f5868a4663f7d3b6097ed3b08 to your computer and use it in GitHub Desktop.
Click the speaker icon (next to the "all rooms" button) to bring up the volume slider.
// ==UserScript==
// @name SOchat ping volume slider
// @description Adds a slider that lets you adjust the volume of the ping notification sound
// @version 1.0
// @author Paul Pinterits
// @match *://chat.stackoverflow.com/rooms/*
// @grant GM.getValue
// @grant GM.setValue
// @namespace Aran-Fey
// @require https://github.com/Aran-Fey/userscript-lib/raw/60f9b285091e93d3879c7e94233192b7ab370821/userscript_lib.js
// ==/UserScript==
(function(){
'use strict';
const audioPlayer = document.getElementById('jp_audio_0');
async function loadVolume(){
const volumeString = await UserScript.getValue('volume', null);
if (volumeString === null){
return;
}
const volume = JSON.parse(volumeString);
audioPlayer.volume = volume;
}
function saveVolume(volume){
const volumeString = JSON.stringify(volume);
UserScript.setValue('volume', volumeString);
}
function createVolumeSlider(){
const audioIcon = document.getElementById('sound');
audioIcon.addEventListener('click', _waitForNotificationDialog);
}
function _waitForNotificationDialog(){
setTimeout(_createVolumeSlider, 100);
}
function _createVolumeSlider(){
const dialog = document.querySelector('div.popup');
const slider = document.createElement('input');
slider.type = 'range';
slider.id = 'ping-volume-slider';
slider.name = 'ping-volume-slider';
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.value = audioPlayer.volume;
slider.addEventListener('change', function(){
const volume = slider.value;
audioPlayer.volume = volume;
saveVolume(volume);
});
const label = document.createElement('label');
label.id = 'ping-volume-label';
label.for = 'ping-volume-slider';
label.textContent = 'Volume';
label.appendChild(slider);
dialog.appendChild(label);
}
loadVolume();
createVolumeSlider();
add_style(`
#ping-volume-label {
margin-top: 1em;
display: flex;
align-items: center;
}
#ping-volume-slider {
min-width: 0;
margin-left: 0.5em;
}
`);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment