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

simplify playback rate steps

Browse Source
This commit is contained in:
Araxeus
2021-10-30 15:38:40 +03:00
parent 9bd089adb0
commit 1434849142
2 changed files with 17 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,23 +7,11 @@ const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
const roundToTwo = (n) => Math.round( n * 1e2 ) / 1e2; const roundToTwo = (n) => Math.round( n * 1e2 ) / 1e2;
const MIN_PLAYBACK_SPEED = 0.25; const MIN_PLAYBACK_SPEED = 0.07;
const MAX_PLAYBACK_SPEED = 2;
let playbackSpeed = 1; let playbackSpeed = 1;
const computePlayBackSpeed = (playbackSpeedPercentage) => { const computePlayBackSpeed = (playbackSpeedPercentage) => playbackSpeedPercentage || MIN_PLAYBACK_SPEED;
if (playbackSpeedPercentage <= 50) { // = Playback speed <= 1
// Slow down video by setting a playback speed between MIN_PLAYBACK_SPEED and 1
return (
MIN_PLAYBACK_SPEED +
((1 - MIN_PLAYBACK_SPEED) / 50) * playbackSpeedPercentage
).toFixed(2);
}
// Accelerate video by setting a playback speed between 1 and MAX_PLAYBACK_SPEED
return roundToTwo(1 + ((MAX_PLAYBACK_SPEED - 1) / 50) * (playbackSpeedPercentage - 50));
};
const updatePlayBackSpeed = () => { const updatePlayBackSpeed = () => {
$('video').playbackRate = playbackSpeed; $('video').playbackRate = playbackSpeed;
@ -67,15 +55,18 @@ const setupSliderListeners = () => {
updatePlayBackSpeed(); updatePlayBackSpeed();
}) })
slider.addEventListener('wheel', e => { slider.addEventListener('wheel', e => {
if (playbackSpeed <= 0.07) return; // lowest possible speed
e.preventDefault(); e.preventDefault();
if (isNaN(playbackSpeed)) { if (isNaN(playbackSpeed)) {
playbackSpeed = 1; playbackSpeed = 1;
} }
// e.deltaY < 0 means wheel-up // e.deltaY < 0 means wheel-up
playbackSpeed = roundToTwo(e.deltaY < 0 ? playbackSpeed + 0.01 : playbackSpeed - 0.01); playbackSpeed = roundToTwo(e.deltaY < 0 ?
playbackSpeed + 0.01 :
Math.max(playbackSpeed - 0.01, MIN_PLAYBACK_SPEED));
updatePlayBackSpeed(); updatePlayBackSpeed();
$('#playback-speed-slider').value = playbackSpeed * 50; // update slider position
$('#playback-speed-slider').value = playbackSpeed;
}) })
} }

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

@ -14,19 +14,19 @@
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" style="display: inherit !important"
max="100" max="2"
min="0" min="0"
step="5" step="0.125"
dir="ltr" dir="ltr"
title="Playback speed" title="Playback speed"
aria-label="Playback speed" aria-label="Playback speed"
role="slider" role="slider"
tabindex="0" tabindex="0"
aria-valuemin="0" aria-valuemin="0"
aria-valuemax="100" aria-valuemax="2"
aria-valuenow="50" aria-valuenow="1"
aria-disabled="false" aria-disabled="false"
value="50" value="1"
><!--css-build:shady--> ><!--css-build:shady-->
<div id="sliderContainer" class="style-scope tp-yt-paper-slider"> <div id="sliderContainer" class="style-scope tp-yt-paper-slider">
<div class="bar-container style-scope tp-yt-paper-slider"> <div class="bar-container style-scope tp-yt-paper-slider">
@ -35,10 +35,10 @@
aria-hidden="true" aria-hidden="true"
class="style-scope tp-yt-paper-slider" class="style-scope tp-yt-paper-slider"
role="progressbar" role="progressbar"
value="50" value="1"
aria-valuenow="50" aria-valuenow="1"
aria-valuemin="0" aria-valuemin="0"
aria-valuemax="100" aria-valuemax="2"
aria-disabled="false" aria-disabled="false"
style="touch-action: none" style="touch-action: none"
><!--css-build:shady--> ><!--css-build:shady-->
@ -71,7 +71,7 @@
> >
<div <div
class="slider-knob-inner style-scope tp-yt-paper-slider" class="slider-knob-inner style-scope tp-yt-paper-slider"
value="50" value="1"
></div> ></div>
</div> </div>
</div> </div>