smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-16 20:52:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

xo --fix

Browse Source
This commit is contained in:
Araxeus
2021-04-16 23:02:16 +03:00
parent c0ec1bc5cf
commit 02896cac03
1 changed files with 61 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
plugins/precise-volume/front.js
View File

@ -1,74 +1,75 @@
module.exports = () => { module.exports = () => {
setupPlaybarOnwheel(); setPlaybarOnwheel();
setupObserver(); setObserver();
firstTooltip(); setFirstTooltip();
};
function setFirstTooltip() {
const videoStream = document.querySelector(".video-stream");
if (videoStream?.volume) {
setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
} else {
setTimeout(setFirstTooltip, 500); // Try again in 500 milliseconds
}
} }
function firstTooltip() { function setPlaybarOnwheel() {
const videoStream = document.querySelector(".video-stream"); // Add onwheel event to play bar
if (videoStream) { document.querySelector("ytmusic-player-bar").onwheel = event => {
setTooltip(Math.round(parseFloat(videoStream.volume) * 100)); event.preventDefault();
} else { // Event.deltaY < 0 => wheel up
setTimeout(firstTooltip, 500); // try again in 500 milliseconds changeVolume(event.deltaY < 0);
} };
} }
function setupPlaybarOnwheel() { // The last volume set by changeVolume() is stored here
//add onwheel event to play bar let newVolume; // Used to determine if volume-slider was manually moved
document.querySelector("ytmusic-player-bar").onwheel = (event) => {
event.preventDefault();
//event.deltaY < 0 => wheel up
changeVolume(event.deltaY < 0)
}
}
//the last volume set by changeVolume() is stored here
let newVolume; //used to determine if volume-slider was manually moved
function changeVolume(increase) { function changeVolume(increase) {
//need to change both the slider and the actual volume // Need to change both the slider and the actual volume
const videoStream = document.querySelector(".video-stream"); const videoStream = document.querySelector(".video-stream");
const slider = document.querySelector("#volume-slider"); const slider = document.querySelector("#volume-slider");
//get the volume diff to apply // Get the volume diff to apply
const diff = increase const diff = increase ?
? videoStream.volume < 1 ? 0.01 : 0 (videoStream.volume < 1 ? 0.01 : 0) :
: videoStream.volume > 0 ? -0.01 : 0 (videoStream.volume > 0 ? -0.01 : 0);
//apply on both elements and save the new volume // Apply on both elements and save the new volume
videoStream.volume += diff; videoStream.volume += diff;
newVolume = Math.round(parseFloat(videoStream.volume) * 100); newVolume = Math.round(Number.parseFloat(videoStream.volume) * 100);
slider.value = newVolume; // Slider value automatically rounds to multiples of 5
//finally change tooltip to new value slider.value = newVolume;
setTooltip(newVolume) // Finally change tooltip to new value
setTooltip(newVolume);
} }
//update the volume tooltip when volume-slider is manually changed // Update the volume tooltip when volume-slider is manually changed
function setupObserver() { function setObserver() {
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver(mutations => {
for (const mutation of mutations) { for (const mutation of mutations) {
//this checks that volume-slider was manually set // This checks that volume-slider was manually set
if (mutation.oldValue !== mutation.target.value if (mutation.oldValue !== mutation.target.value &&
&& (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) { (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
//diff>4 means it was manually set, so update tooltip accordingly // Diff>4 means it was manually set, so update tooltip accordingly
setTooltip(mutation.target.value); setTooltip(mutation.target.value);
} }
} }
}); });
//observing only changes in 'value' of volume-slider // Observing only changes in 'value' of volume-slider
observer.observe(document.querySelector("#volume-slider"), { observer.observe(document.querySelector("#volume-slider"), {
attributeFilter: ["value"], attributeFilter: ["value"],
attributeOldValue: true, attributeOldValue: true
}); });
} }
function setTooltip(newValue) { function setTooltip(newValue) {
newValue += "%"; newValue += "%";
//set new volume as tooltip for volume slider and icon // Set new volume as tooltip for volume slider and icon
document.querySelector("#volume-slider").title = newValue; document.querySelector("#volume-slider").title = newValue;
document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue; document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;
//also for expanding slider (appears when window size is small) // Also for expanding slider (appears when window size is small)
let expandingSlider = document.querySelector("#expanding-menu"); const expandingSlider = document.querySelector("#expanding-menu");
expandingSlider.querySelector("#expand-volume-slider").title = newValue; expandingSlider.querySelector("#expand-volume-slider").title = newValue;
expandingSlider.querySelector("#expand-volume").title = newValue; expandingSlider.querySelector("#expand-volume").title = newValue;
} }