feat: gestures toggles

common/modules/swipecontrol.js

@@ -1,9 +1,12 @@
 import { Capacitor } from '@capacitor/core';
 import { ScreenBrightness } from '@capacitor-community/screen-brightness';
 import { VolumeControl } from 'capacitor-volume-control';
+import { get } from 'svelte/store';
+import { settings } from './settings';
 
 export function swipeControls(node, props = { enabled: true, immersePlayer: () => {} }) {
   if (!props.enabled) return;
+  if (!get(settings).swipeGestures) return;
 
   const isNative = Capacitor.isNativePlatform();
   let brightness = 50;
@@ -66,12 +69,11 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
 
   const brightnessValue = indicators.querySelector('.brightness-value');
   const volumeValue = indicators.querySelector('.volume-value');
-
   function handleTouchStart(event) {
     if (!props.enabled) return;
+    if (!get(settings).swipeGestures) return;
     if (!isNative) return;
     isDragging = true;
-    startX = event.touches[0].clientX;
     startY = event.touches[0].clientY;
     const rect = node.getBoundingClientRect();
     activeControl = (event.touches[0].clientX - rect.left) < rect.width / 2 ? 'brightness' : 'volume';
@@ -79,6 +81,7 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
 
   function handleTouchMove(event) {
     if (!props.enabled) return;
+    if (!get(settings).swipeGestures) return;
     if (!isNative || !isDragging) return;
 
     const currentY = event.touches[0].clientY;
@@ -102,6 +105,7 @@ export function swipeControls(node, props = { enabled: true, immersePlayer: () =
 
   function handleTouchEnd() {
     if (!props.enabled) return;
+    if (!get(settings).swipeGestures) return;
     isDragging = false;
     activeControl = null;
   }

common/modules/util.js

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

common/modules/volumescroll.js

@@ -1,3 +1,6 @@
+import { get } from 'svelte/store';
+import { settings } from './settings';
+
 export function volumeScroll(node, options = {}) {
     const {
       minVolume = 0,
@@ -30,6 +33,7 @@ export function volumeScroll(node, options = {}) {
         border-radius: 4px;
         font-family: Arial, sans-serif;
         font-size: 14px;
+        z-index: 39;
       `;
       
       indicator.innerHTML = `
@@ -44,8 +48,9 @@ export function volumeScroll(node, options = {}) {
       node.style.position = 'relative';
       node.appendChild(indicator);
     }
-  
+
     function updateIndicator(volume) {
+      if (!get(settings).volumeScroll) return;
       if (!indicator) createIndicator();
       const percentage = Math.round(volume * 100);
       const volumeValue = indicator.querySelector('.volume-value');
@@ -60,6 +65,7 @@ export function volumeScroll(node, options = {}) {
     }
   
     function handleWheel(e) {
+      if (!get(settings).volumeScroll) return;
       if (!video) return;
   
       const volumeChange = e.deltaY * sensitivity;

common/views/Settings/PlayerSettings.svelte

@@ -167,6 +167,21 @@
     <label for='player-deband'>{settings.playerDeband ? 'On' : 'Off'}</label>
   </div>
 </SettingCard>
+{#if SUPPORTS.isAndroid}
+  <SettingCard title='Swipe Gestures' description='Swiping the video vertically will change the brightness and volume.'>
+    <div class='custom-switch'>
+      <input type='checkbox' id='swipe-gestures' bind:checked={settings.swipeGestures} />
+      <label for='swipe-gestures'>{settings.swipeGestures ? 'On' : 'Off'}</label>
+    </div>
+  </SettingCard>
+{:else}
+  <SettingCard title='Volume Scroll' description='Scrolling the mouse wheel will change the volume.'>
+    <div class='custom-switch'>
+      <input type='checkbox' id='volume-scroll' bind:checked={settings.volumeScroll} />
+      <label for='volume-scroll'>{settings.volumeScroll ? 'On' : 'Off'}</label>
+    </div>
+  </SettingCard>
+{/if}
 
 <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.'>