smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Araxeus
2021-04-16 23:30:43 +03:00
parent 02896cac03
commit 06958c424c
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,19 @@ module.exports = () => {
function setFirstTooltip() {
const videoStream = document.querySelector(".video-stream");
if (videoStream?.volume) {
setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
setTooltip(toPercent(videoStream.volume));
} else {
setTimeout(setFirstTooltip, 500); // Try again in 500 milliseconds
}
}
function setPlaybarOnwheel() {
// Add onwheel event to play bar
document.querySelector("ytmusic-player-bar").onwheel = event => {
event.preventDefault();
// Event.deltaY < 0 => wheel up
changeVolume(event.deltaY < 0);
};
// Add onwheel event to play bar
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
@ -29,13 +29,14 @@ function changeVolume(increase) {
// Need to change both the slider and the actual volume
const videoStream = document.querySelector(".video-stream");
const slider = document.querySelector("#volume-slider");
// Get the volume diff to apply
const diff = increase ?
(videoStream.volume < 1 ? 0.01 : 0) :
(videoStream.volume > 0 ? -0.01 : 0);
// Apply on both elements and save the new volume
videoStream.volume += diff;
newVolume = Math.round(Number.parseFloat(videoStream.volume) * 100);
// Apply volume change if valid
videoStream.volume = increase ?
Math.min(videoStream.volume + 0.01, 1) :
Math.max(videoStream.volume - 0.01, 0);
// Save the new volume
newVolume = toPercent(videoStream.volume);
// Slider value automatically rounds to multiples of 5
slider.value = newVolume;
// Finally change tooltip to new value
@ -62,14 +63,22 @@ function setObserver() {
});
}
// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
const tooltipTargets = [
"#volume-slider",
"tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar",
"#expand-volume-slider",
"#expand-volume"
];
function setTooltip(newValue) {
newValue += "%";
// Set new volume as tooltip for volume slider and icon
document.querySelector("#volume-slider").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)
const expandingSlider = document.querySelector("#expanding-menu");
expandingSlider.querySelector("#expand-volume-slider").title = newValue;
expandingSlider.querySelector("#expand-volume").title = newValue;
for (target of tooltipTargets) {
document.querySelector(target).title = newValue;
}
}
function toPercent(volume) {
return Math.round(Number.parseFloat(volume) * 100);
}