feat: auto-skip intro/outro toggle

README.md

@@ -42,6 +42,7 @@ Includes all original Miru features, plus:
 - Disabled smooth scrolling by default due to poor performance on my device
 - Gesture lock on Android to prevent misclick
 - Right click or long press on RSS Section will open the anime episode list
+- Toggleable auto skip intro/outro
 
 ## **Building and Development**
 

common/modules/util.js

@@ -125,6 +125,7 @@ export const defaults = {
   playerAutoplay: true,
   playerPause: true,
   playerAutocomplete: true,
+  playerAutoSkip: false,
   playerDeband: false,
   playerSeek: 5,
   rssQuality: '1080',

common/views/Player/Player.svelte

@@ -804,6 +804,7 @@
   }
 
   let currentSkippable = null
+  $: currentSkippable && $settings.playerAutoSkip && skip()
   function checkSkippableChapters () {
     const current = findChapter(currentTime)
     if (current) {
@@ -1555,14 +1556,16 @@
   .seekbar {
     font-size: 2rem !important;
   }
-  .miniplayer .mobile-focus-target {
-    display: block !important;
-  }
-  .miniplayer .mobile-focus-target:focus-visible {
-    background: hsla(209, 100%, 55%, 0.3);
-  }
 
   @media (pointer: none), (pointer: coarse) {
+
+    .miniplayer .mobile-focus-target {
+      display: block !important;
+    }
+    .miniplayer .mobile-focus-target:focus-visible {
+      background: hsla(209, 100%, 55%, 0.3);
+    }
+
     .bottom .ctrl[data-name='playPause'],
     .bottom .volume,
     .bottom .keybinds {

common/views/Settings/PlayerSettings.svelte

@@ -142,6 +142,12 @@
     <label for='player-autocomplete'>{settings.playerAutocomplete ? 'On' : 'Off'}</label>
   </div>
 </SettingCard>
+<SettingCard title='Auto-Skip Intro/Outro' description='Automatically skip intro and outro. Warning, sometimes it can skip wrong part of the episode and you can&apos;t view Intro/Outro at all.'>
+  <div class='custom-switch'>
+    <input type='checkbox' id='player-auto-skip' bind:checked={settings.playerAutoSkip} />
+    <label for='player-auto-skip'>{settings.playerAutoSkip ? 'On' : 'Off'}</label>
+  </div>
+</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' />