feat: gesture lock on android

README.md

@@ -40,6 +40,7 @@ Includes all original Miru features, plus:
 - Double-click back button to exit
 - Moved toast close button to the bottom for better reachability on Android
 - Disabled smooth scrolling by default due to poor performance on my device
+- Gesture lock on Android to prevent misclick
 
 ## **Building and Development**
 

common/components/GestureLock.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { click } from "@/modules/click.js";
+
+  export let isLocked = false;
+  let lockImmersed = false;
+  let lockImmerseTimeout = null;
+
+  function immerse() {
+    lockImmersed = true;
+    lockImmerseTimeout = undefined;
+  }
+
+  function resetImmerse() {
+    clearTimeout(lockImmerseTimeout);
+    lockImmersed = false;
+    lockImmerseTimeout = setTimeout(immerse, 1000);
+  }
+
+  function toggleImmerse() {
+    clearTimeout(lockImmerseTimeout)
+    lockImmersed = !lockImmersed
+  }
+</script>
+
+{#if isLocked}
+  <div
+    on:click={toggleImmerse}
+    on:mouseleave={immerse}
+    on:pointermove={resetImmerse}
+    on:keypress={resetImmerse}
+    on:keydown={resetImmerse}
+    role="none"
+    class="position-absolute bg-transparent w-full h-full z-50 d-flex align-items-start justify-content-end"
+    style="padding: 28px"
+  >
+    <span
+      class="material-symbols-outlined pointer lock-button"
+      class:opacity-0={lockImmersed}
+      use:click={() => (isLocked = false)}>lock</span
+    >
+  </div>
+{/if}
+
+<style>
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .lock-button {
+    transition: opacity 0.3s;
+    background-color: rgba(20, 20, 20, 0.6);
+    padding: 8px;
+    border-radius: 4px;
+    color: white;
+  }
+
+  .material-symbols-outlined {
+    font-size: 2.8rem;
+    padding: 1.5rem;
+    display: flex;
+    font-variation-settings:
+      "FILL" 1,
+      "wght" 300,
+      "GRAD" 100,
+      "opsz" 64;
+  }
+</style>

common/views/Player/Player.svelte

@@ -20,6 +20,7 @@
   import IPC from '@/modules/ipc.js'
   import { swipeControls } from '@/modules/swipecontrol.js';
   import { volumeScroll } from '@/modules/volumescroll.js';
+  import GestureLock from '@/components/GestureLock.svelte';
 
   const emit = createEventDispatcher()
 
@@ -1026,8 +1027,14 @@
       document.querySelector('[data-name=\'toggleFullscreen\']')?.focus()
     }
   }
+
+  let isLocked = false;
 </script>
 
+{#if SUPPORTS.isAndroid}
+  <GestureLock bind:isLocked/>
+{/if}
+
 <!-- <svelte:window bind:innerWidth bind:innerHeight /> -->
 <div
   class='player w-full h-full d-flex flex-column overflow-hidden position-relative'
@@ -1173,7 +1180,10 @@
       {#if playbackRate !== 1}
         <div class='ts mr-auto'>x{playbackRate.toFixed(1)}</div>
       {/if}
-      <span class='material-symbols-outlined ctrl keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}> keyboard </span>
+      <span class='material-symbols-outlined ctrl keybinds' title='Keybinds [`]' use:click={() => {showKeybinds = true; immersePlayer()}}> keyboard </span>
+      {#if SUPPORTS.isAndroid}
+        <span class='material-symbols-outlined ctrl' use:click={() => (isLocked = true)}> lock </span>
+      {/if}
       {#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
         <div class='dropdown dropup with-arrow' use:click={toggleDropdown}>
           <span class='material-symbols-outlined ctrl' title='Audio Tracks'>