feat: volume slider step and playback rate step #36

This commit is contained in:
NoCrypt 2024-10-02 22:24:28 +07:00
parent 37689a9023
commit 1b480fc939
4 changed files with 26 additions and 9 deletions

View file

@ -197,7 +197,9 @@ export const defaults = {
playerPath: '',
playerSeek: 5,
swipeGestures: SUPPORTS.isAndroid,
volumeScroll: !SUPPORTS.isAndroid
volumeScroll: !SUPPORTS.isAndroid,
volumeScrollStep: 5,
playbackRateStep: 0.1
}
export const subtitleExtensions = ['srt', 'vtt', 'ass', 'ssa', 'sub', 'txt']

View file

@ -5,7 +5,6 @@ export function volumeScroll(node, options = {}) {
const {
minVolume = 0,
maxVolume = 1,
sensitivity = 0.001,
videoSelector = 'video',
indicatorFadeDelay = 500,
} = options;
@ -67,8 +66,9 @@ export function volumeScroll(node, options = {}) {
function handleWheel(e) {
if (!get(settings).volumeScroll) return;
if (!video) return;
const volumeChange = e.deltaY * sensitivity;
const step = get(settings).volumeScrollStep;
const volumeChange = e.deltaY > 0 ? 0.01 * step : -0.01 * step;
let newVolume = video.volume - volumeChange;
newVolume = Math.max(minVolume, Math.min(maxVolume, newVolume));
video.volume = newVolume;

View file

@ -636,14 +636,14 @@
desc: 'Volume Down'
},
BracketLeft: {
fn: () => {if(playbackRate >= 0.1) playbackRate = video.defaultPlaybackRate -= 0.1},
fn: () => {if(playbackRate.toFixed(1) > $settings.playbackRateStep.toFixed(1)) playbackRate = video.defaultPlaybackRate -= $settings.playbackRateStep},
id: 'history',
icon: RotateCcw,
type: 'icon',
desc: 'Decrease Playback Rate'
},
BracketRight: {
fn: () => {if(playbackRate <= 10) playbackRate = video.defaultPlaybackRate += 0.1},
fn: () => {if(playbackRate <= 10) playbackRate = video.defaultPlaybackRate += $settings.playbackRateStep},
id: 'update',
icon: RotateCw,
type: 'icon',
@ -1334,11 +1334,11 @@
<CircleGauge size='2.5rem'strokeWidth={2.5} />
</span>
<div class='dropdown-menu dropdown-menu-right d-flex align-items-center justify-content-center ctrl pb-5 text-capitalize'>
<span role='button' tabindex="0" class='icon ctrl d-flex align-items-center h-full' title='Slower' use:click={() => {if(playbackRate >= 0.1) playbackRate = video.defaultPlaybackRate -= 0.1}}>
<span role='button' tabindex="0" class='icon ctrl d-flex align-items-center h-full' title='Slower' use:click={() => {if(playbackRate.toFixed(1) > $settings.playbackRateStep.toFixed(1)) playbackRate = video.defaultPlaybackRate -= $settings.playbackRateStep}}>
<Minus size='2.5rem'strokeWidth={2.5} />
</span>
<span role='button' tabindex="0" title='Click to Reset' use:click={() => playbackRate = video.defaultPlaybackRate = 1}>x{playbackRate.toFixed(1)}</span>
<span role='button' tabindex="0" class='icon ctrl d-flex align-items-center h-full' title='Faster' use:click={() => {if(playbackRate <= 10) playbackRate = video.defaultPlaybackRate += 0.1}}>
<span role='button' tabindex="0" class='icon ctrl d-flex align-items-center h-full' title='Faster' use:click={() => {if(playbackRate <= 10) playbackRate = video.defaultPlaybackRate += $settings.playbackRateStep}}>
<Plus size='2.5rem'strokeWidth={2.5} />
</span>
</div>

View file

@ -155,7 +155,7 @@
</SettingCard>
<SettingCard title='Seek Duration' description='Seconds to seek an episode with arrow keys'>
<div class='input-group w-100 mw-full'>
<input type='number' bind:value={settings.playerSeek} min='1' max='50' class='form-control text-right bg-dark' />
<input type='number' bind:value={settings.playerSeek} min='1' max='120' class='form-control text-right bg-dark' />
<div class='input-group-append'>
<span class='input-group-text bg-dark'>s</span>
</div>
@ -181,7 +181,22 @@
<label for='volume-scroll'>{settings.volumeScroll ? 'On' : 'Off'}</label>
</div>
</SettingCard>
{#if settings.volumeScroll}
<SettingCard title='Volume Scroll Step' description='How big is the volume scroll change the volume.'>
<div class='input-group w-100 mw-full'>
<input type='number' bind:value={settings.volumeScrollStep} min='1' max='50' class='form-control text-right bg-dark' />
<div class='input-group-append'>
<span class='input-group-text bg-dark'>%</span>
</div>
</div>
</SettingCard>
{/if}
{/if}
<SettingCard title='Playback Rate Step' description='How fast does the playback rate changes.'>
<div class='input-group w-100 mw-full'>
<input type='number' step='0.1' bind:value={settings.playbackRateStep} min='0.1' max='3' class='form-control text-right bg-dark' />
</div>
</SettingCard>
<h4 class='mb-10 font-weight-bold'>External Player Settings</h4>
<SettingCard title='Enable External Player' description='Tells Migu to open a custom user-picked external video player to play video, instead of using the built-in one.'>