feat: deband keybind

feat: keybind descriptions

common/views/Player/Player.svelte

@@ -460,66 +460,87 @@
     KeyX: {
       fn: () => screenshot(),
       id: 'screenshot_monitor',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Save Screenshot to Clipboard'
     },
     KeyI: {
       fn: () => toggleStats(),
       id: 'list',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Stats'
     },
     Backquote: {
       fn: () => (showKeybinds = !showKeybinds),
       id: 'help_outline',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Keybinds'
     },
     Space: {
       fn: () => playPause(),
       id: 'play_arrow',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Play/Pause'
     },
     KeyN: {
       fn: () => playNext(),
       id: 'skip_next',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Next Episode'
     },
     KeyB: {
       fn: () => playLast(),
       id: 'skip_previous',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Previous Episode'
+    },
+    KeyA: {
+      fn: () => {
+        $settings.playerDeband = !$settings.playerDeband
+      },
+      id: 'deblur',
+      type: 'icon',
+      desc: 'Toggle Video Debanding'
     },
     KeyM: {
       fn: () => (muted = !muted),
       id: 'volume_off',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Mute'
     },
     KeyP: {
       fn: () => togglePopout(),
       id: 'picture_in_picture',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Picture in Picture'
     },
     KeyF: {
       fn: () => toggleFullscreen(),
       id: 'fullscreen',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Fullscreen'
     },
     KeyS: {
       fn: () => skip(),
-      id: '+90'
+      id: '+90',
+      desc: 'Skip Intro/90s'
     },
     KeyW: {
       fn: () => { fitWidth = !fitWidth },
       id: 'fit_width',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Video Cover'
     },
     KeyD: {
       fn: () => toggleCast(),
       id: 'cast',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Toggle Cast [broken]'
     },
     KeyC: {
       fn: () => cycleSubtitles(),
       id: 'subtitles',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Cycle Subtitles'
     },
     ArrowLeft: {
       fn: e => {
@@ -527,7 +548,8 @@
         e.preventDefault()
         rewind()
       },
-      id: '-2'
+      id: '-2',
+      desc: 'Rewind 2s'
     },
     ArrowRight: {
       fn: e => {
@@ -535,7 +557,8 @@
         e.preventDefault()
         forward()
       },
-      id: '+2'
+      id: '+2',
+      desc: 'Seek 2s'
     },
     ArrowUp: {
       fn: e => {
@@ -544,7 +567,8 @@
         volume = Math.min(1, volume + 0.05)
       },
       id: 'volume_up',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Volume Up'
     },
     ArrowDown: {
       fn: e => {
@@ -553,22 +577,26 @@
         volume = Math.max(0, volume - 0.05)
       },
       id: 'volume_down',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Volume Down'
     },
     BracketLeft: {
       fn: () => { playbackRate = video.defaultPlaybackRate -= 0.1 },
       id: 'history',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Decrease Playback Rate'
     },
     BracketRight: {
       fn: () => { playbackRate = video.defaultPlaybackRate += 0.1 },
       id: 'update',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Increase Playback Rate'
     },
     Backslash: {
       fn: () => { playbackRate = video.defaultPlaybackRate = 1 },
       id: 'schedule',
-      type: 'icon'
+      type: 'icon',
+      desc: 'Reset Playback Rate'
     }
   })
 
@@ -974,7 +1002,7 @@
   {#if showKeybinds && !miniplayer}
     <div class='position-absolute bg-tp w-full h-full z-50 font-size-12 p-20 d-flex align-items-center justify-content-center pointer' on:pointerup|self={() => (showKeybinds = false)} tabindex='-1' role='button'>
       <Keybinds let:prop={item} autosave={true} clickable={true}>
-        <div class:material-symbols-outlined={item?.type} class='bind'>{item?.id || ''}</div>
+        <div class:material-symbols-outlined={item?.type} class='bind' title={item?.desc} style='pointer-events: all !important;'>{item?.id || ''}</div>
       </Keybinds>
     </div>
   {/if}