mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-11 18:41:47 +00:00
use youtube native api to change volume
This commit is contained in:
@ -3,8 +3,36 @@ const { ipcRenderer, remote } = require("electron");
|
|||||||
const { setOptions } = require("../../config/plugins");
|
const { setOptions } = require("../../config/plugins");
|
||||||
|
|
||||||
function $(selector) { return document.querySelector(selector); }
|
function $(selector) { return document.querySelector(selector); }
|
||||||
|
let api = $('#movie_player');
|
||||||
|
|
||||||
module.exports = (options) => {
|
module.exports = (options) => {
|
||||||
|
if (api) {
|
||||||
|
firstRun(options);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new MutationObserver(() => {
|
||||||
|
api = $('#movie_player');
|
||||||
|
if (api) {
|
||||||
|
observer.disconnect();
|
||||||
|
firstRun(options);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
observer.observe(document.documentElement, { childList: true, subtree: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/** Restore saved volume and setup tooltip */
|
||||||
|
function firstRun(options) {
|
||||||
|
if (typeof options.savedVolume === "number") {
|
||||||
|
// Set saved volume as tooltip
|
||||||
|
setTooltip(options.savedVolume);
|
||||||
|
|
||||||
|
if (api.getVolume() !== options.savedVolume) {
|
||||||
|
api.setVolume(options.savedVolume);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setupPlaybar(options);
|
setupPlaybar(options);
|
||||||
|
|
||||||
@ -14,16 +42,12 @@ module.exports = (options) => {
|
|||||||
setupGlobalShortcuts(options);
|
setupGlobalShortcuts(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none";
|
||||||
const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none";
|
injectVolumeHud(noVid);
|
||||||
injectVolumeHud(noVid);
|
if (!noVid) {
|
||||||
if (!noVid) {
|
setupVideoPlayerOnwheel(options);
|
||||||
setupVideoPlayerOnwheel(options);
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
firstRun(options);
|
|
||||||
};
|
|
||||||
|
|
||||||
function injectVolumeHud(noVid) {
|
function injectVolumeHud(noVid) {
|
||||||
if (noVid) {
|
if (noVid) {
|
||||||
@ -89,28 +113,9 @@ function writeOptions(options) {
|
|||||||
}, 1500)
|
}, 1500)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Restore saved volume and setup tooltip */
|
|
||||||
function firstRun(options) {
|
|
||||||
const video = $("video");
|
|
||||||
// Those elements load abit after DOMContentLoaded
|
|
||||||
if (video) {
|
|
||||||
setupVolumeOverride(video, options);
|
|
||||||
if (typeof options.savedVolume === "number") {
|
|
||||||
// Set saved volume as tooltip
|
|
||||||
setTooltip(options.savedVolume);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setTimeout(firstRun, 500, options); // Try again in 500 milliseconds
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Add onwheel event to play bar and also track if play bar is hovered*/
|
/** Add onwheel event to play bar and also track if play bar is hovered*/
|
||||||
function setupPlaybar(options) {
|
function setupPlaybar(options) {
|
||||||
const playerbar = $("ytmusic-player-bar");
|
const playerbar = $("ytmusic-player-bar");
|
||||||
if (!playerbar) {
|
|
||||||
setTimeout(setupPlaybar(options), 200);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
playerbar.addEventListener("wheel", event => {
|
playerbar.addEventListener("wheel", event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -153,16 +158,14 @@ function setupSliderObserver(options) {
|
|||||||
|
|
||||||
/** if (toIncrease = false) then volume decrease */
|
/** if (toIncrease = false) then volume decrease */
|
||||||
function changeVolume(toIncrease, options) {
|
function changeVolume(toIncrease, options) {
|
||||||
// Need to change both the actual volume and the slider
|
|
||||||
const videoStream = $(".video-stream");
|
|
||||||
// Apply volume change if valid
|
// Apply volume change if valid
|
||||||
const steps = (options.steps || 1) / 100;
|
const steps = (options.steps || 1);
|
||||||
videoStream.volume = (toIncrease ?
|
api.setVolume(toIncrease ?
|
||||||
Math.min(videoStream.volume + steps, 1) :
|
Math.min(api.getVolume() + steps, 100) :
|
||||||
Math.max(videoStream.volume - steps, 0)).toFixed(2);
|
Math.max(api.getVolume() - steps, 0));
|
||||||
|
|
||||||
// Save the new volume
|
// Save the new volume
|
||||||
saveVolume(toPercent(videoStream.volume), options);
|
saveVolume(api.getVolume(), options);
|
||||||
|
|
||||||
// change slider position (important)
|
// change slider position (important)
|
||||||
updateVolumeSlider(options);
|
updateVolumeSlider(options);
|
||||||
@ -175,25 +178,6 @@ function changeVolume(toIncrease, options) {
|
|||||||
showVolumeHud(options.savedVolume);
|
showVolumeHud(options.savedVolume);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupVolumeOverride(video, options) {
|
|
||||||
video.addEventListener("canplay", () => {
|
|
||||||
if (typeof options.savedVolume === "number") {
|
|
||||||
const newVolume = (options.savedVolume / 100).toFixed(2);
|
|
||||||
|
|
||||||
video.volume = newVolume;
|
|
||||||
updateVolumeSlider(options);
|
|
||||||
|
|
||||||
const volumeOverrideInterval = setInterval(() => {
|
|
||||||
video.volume = newVolume;
|
|
||||||
}, 4);
|
|
||||||
setTimeout((interval) => {
|
|
||||||
updateVolumeSlider(options);
|
|
||||||
clearInterval(interval);
|
|
||||||
}, 500, volumeOverrideInterval);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateVolumeSlider(options) {
|
function updateVolumeSlider(options) {
|
||||||
// Slider value automatically rounds to multiples of 5
|
// Slider value automatically rounds to multiples of 5
|
||||||
$("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ?
|
$("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ?
|
||||||
|
|||||||
Reference in New Issue
Block a user