feat: volume slider step and playback rate step #36

common/modules/util.js

@@ -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']

common/modules/volumescroll.js

@@ -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;

common/views/Player/Player.svelte

@@ -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>

common/views/Settings/PlayerSettings.svelte

@@ -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.'>