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

fix playback speed plugin

Browse Source
This commit is contained in:
Araxeus
2021-10-30 12:00:29 +03:00
parent a47c906ab2
commit 48a2a13163
3 changed files with 51 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
plugins/playback-speed/front.js
View File

@ -1,83 +1,77 @@
const { const { getSongMenu } = require("../../providers/dom-elements");
getSongMenu,
watchDOMElement,
} = require("../../providers/dom-elements");
const { ElementFromFile, templatePath } = require("../utils"); const { ElementFromFile, templatePath } = require("../utils");
function $(selector) { return document.querySelector(selector); }
const slider = ElementFromFile(templatePath(__dirname, "slider.html")); const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
const MIN_PLAYBACK_SPEED = 0.25; const MIN_PLAYBACK_SPEED = 0.25;
const MAX_PLAYBACK_SPEED = 2; const MAX_PLAYBACK_SPEED = 2;
let videoElement; let playbackSpeed = 1;
let playbackSpeedPercentage = 50; // = Playback speed of 1
const computePlayBackSpeed = () => { const computePlayBackSpeed = (playbackSpeedPercentage) => {
if (playbackSpeedPercentage <= 50) { if (playbackSpeedPercentage <= 50) { // = Playback speed <= 1
// Slow down video by setting a playback speed between MIN_PLAYBACK_SPEED and 1 // Slow down video by setting a playback speed between MIN_PLAYBACK_SPEED and 1
return ( return (
MIN_PLAYBACK_SPEED + MIN_PLAYBACK_SPEED +
((1 - MIN_PLAYBACK_SPEED) / 50) * playbackSpeedPercentage ((1 - MIN_PLAYBACK_SPEED) / 50) * playbackSpeedPercentage
); ).toFixed(2);
} }
// Accelerate video by setting a playback speed between 1 and MAX_PLAYBACK_SPEED // Accelerate video by setting a playback speed between 1 and MAX_PLAYBACK_SPEED
return 1 + ((MAX_PLAYBACK_SPEED - 1) / 50) * (playbackSpeedPercentage - 50); return (1 + ((MAX_PLAYBACK_SPEED - 1) / 50) * (playbackSpeedPercentage - 50)).toFixed(2);
}; };
const updatePlayBackSpeed = () => { const updatePlayBackSpeed = () => {
const playbackSpeed = Math.round(computePlayBackSpeed() * 100) / 100; $('video').playbackRate = playbackSpeed;
if (!videoElement || videoElement.playbackRate === playbackSpeed) { const playbackSpeedElement = $("#playback-speed-value");
return;
}
videoElement.playbackRate = playbackSpeed;
const playbackSpeedElement = document.querySelector("#playback-speed-value");
if (playbackSpeedElement) { if (playbackSpeedElement) {
playbackSpeedElement.innerHTML = playbackSpeed; playbackSpeedElement.innerHTML = playbackSpeed;
} }
}; };
module.exports = () => { let menu;
watchDOMElement(
"video",
(document) => document.querySelector("video"),
(element) => {
videoElement = element;
updatePlayBackSpeed();
}
);
watchDOMElement( const observePopupContainer = () => {
"menu", const observer = new MutationObserver(() => {
(document) => getSongMenu(document), if (!menu) {
(menuElement) => { menu = getSongMenu();
if (!menuElement.contains(slider)) {
menuElement.prepend(slider);
} }
const playbackSpeedElement = document.querySelector( if (menu && !menu.contains(slider)) {
"#playback-speed-slider #sliderKnob .slider-knob-inner" menu.prepend(slider);
); $('#playback-speed-slider').addEventListener("immediate-value-change", () => {
playbackSpeed = computePlayBackSpeed($('#playback-speed-slider #sliderBar').value);
const playbackSpeedObserver = new MutationObserver((mutations) => { if (isNaN(playbackSpeed)) {
mutations.forEach(function (mutation) { playbackSpeed = 1;
if (mutation.type == "attributes") {
const value = playbackSpeedElement.getAttribute("value");
playbackSpeedPercentage = parseInt(value, 10);
if (isNaN(playbackSpeedPercentage)) {
playbackSpeedPercentage = 50;
} }
updatePlayBackSpeed(); updatePlayBackSpeed();
return; })
} }
}); });
observer.observe($('ytmusic-popup-container'), {
childList: true,
subtree: true,
}); });
playbackSpeedObserver.observe(playbackSpeedElement, { };
attributes: true,
}); const observeVideo = () => {
} $('video').addEventListener('ratechange', forcePlaybackRate)
); $('video').addEventListener('loadeddata', forcePlaybackRate)
}
function forcePlaybackRate (e) {
if (e.target.playbackRate !== playbackSpeed) {
e.target.playbackRate = playbackSpeed
}
}
module.exports = () => {
document.addEventListener('apiLoaded', e => {
observePopupContainer();
observeVideo();
})
}; };

1
plugins/playback-speed/templates/slider.html
View File

@ -13,6 +13,7 @@
<tp-yt-paper-slider <tp-yt-paper-slider
id="playback-speed-slider" id="playback-speed-slider"
class="volume-slider style-scope ytmusic-player-bar on-hover" class="volume-slider style-scope ytmusic-player-bar on-hover"
style="display: inherit !important"
max="100" max="100"
min="0" min="0"
step="5" step="5"

21
providers/dom-elements.js
View File

@ -1,23 +1,4 @@
let domElements = {};
const watchDOMElement = (name, selectorFn, cb) => {
const observer = new MutationObserver((mutations, observer) => {
if (!domElements[name]) {
domElements[name] = selectorFn(document);
}
if (domElements[name]) {
cb(domElements[name]);
}
});
observer.observe(document, {
childList: true,
subtree: true,
});
};
const getSongMenu = () => const getSongMenu = () =>
document.querySelector("ytmusic-menu-popup-renderer tp-yt-paper-listbox"); document.querySelector("ytmusic-menu-popup-renderer tp-yt-paper-listbox");
module.exports = { getSongMenu, watchDOMElement }; module.exports = { getSongMenu };