simplify playback rate steps

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

View File

@ -7,23 +7,11 @@ const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
const roundToTwo = (n) => Math.round( n * 1e2 ) / 1e2;
const MIN_PLAYBACK_SPEED = 0.25;
const MAX_PLAYBACK_SPEED = 2;
const MIN_PLAYBACK_SPEED = 0.07;
let playbackSpeed = 1;
const computePlayBackSpeed = (playbackSpeedPercentage) => {
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 computePlayBackSpeed = (playbackSpeedPercentage) => playbackSpeedPercentage || MIN_PLAYBACK_SPEED;
const updatePlayBackSpeed = () => {
$('video').playbackRate = playbackSpeed;
@ -67,15 +55,18 @@ const setupSliderListeners = () => {
updatePlayBackSpeed();
})
slider.addEventListener('wheel', e => {
if (playbackSpeed <= 0.07) return; // lowest possible speed
e.preventDefault();
if (isNaN(playbackSpeed)) {
playbackSpeed = 1;
}
// 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();
$('#playback-speed-slider').value = playbackSpeed * 50;
// update slider position
$('#playback-speed-slider').value = playbackSpeed;
})
}

View File

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