Revert "perf: code refactoring and optimization"

src/App.svelte

@@ -16,7 +16,7 @@
     favoritesActive,
     settingsActive,
     hash,
-  } from '$store';
+  } from '$lib/player';
 
   import MainLayout from '$components/MainLayout.svelte';
   import FocusOutline from '$lib/focuser/FocusOutline.svelte';

src/components/AlbumView.svelte

@@ -6,13 +6,12 @@
   import {
     playNextList,
     albumsAddedToPlayNext,
-  } from '$store';
+    shuffle,
+  } from '$lib/player';
   import ActionButton from '$lib/ActionButton.svelte';
   import type { Result } from '$types/Results';
   import urlToId from '$lib/urlToId';
   import focusable from '../lib/focuser/focusable';
-  import { lazyLoad } from '$lib/lazyLoad';
-  import { shuffle } from '$lib/shuffle';
 
   export let id: string;
 
@@ -66,6 +65,12 @@
       [id]: 1,
     };
   }
+
+  const lazyLoad = (el: HTMLDivElement) => {
+    el.onload = () => {
+      el.style.opacity = '1';
+    };
+  };
 </script>
 
 <div class="container">
@@ -95,7 +100,7 @@
             src={album.thumbnailUrl}
             alt={album.name}
             class="result__img"
-            use:lazyLoad={true}
+            use:lazyLoad
           />
         </div>
         <div class="info-container">

src/components/ContextMenu.svelte

@@ -53,10 +53,10 @@
 <svelte:window on:scroll={() => closeMenu(callDiscardActions)} />
 <svelte:body on:contextmenu|preventDefault={contextMenuAction} />
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if showMenu}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="transparent-back" on:contextmenu|stopPropagation={() => {}} />
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="menu translucent"
     bind:this={menuEl}
@@ -66,6 +66,7 @@
     style="--x: {position.x}; --y: {position.y}"
   >
     {#each entries as entry}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="menu-item"
         class:disabled={entry.disabled}

src/components/FavoritesView/FavoritesItem.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { FavoriteStore } from '$types/FavoritesStore';
   import IntersectionObserver from '$lib/IntersectionObserver.svelte';
-  import { currentID, favorites, menuEntries, playNextList } from '$store';
+  import { currentID, favorites, menuEntries, playNextList } from '$lib/player';
   import { wantPlay } from '$lib/wantPlay';
-  import { lazyLoad } from '$lib/lazyLoad';
 
   import { fade } from 'svelte/transition';
 
@@ -18,6 +17,12 @@
   let removing = false;
   let removingCancelTimeout: NodeJS.Timeout;
 
+  const lazyLoad = (el: HTMLDivElement) => {
+    el.onload = () => {
+      el.classList.add('loaded');
+    };
+  };
+
   let currentItem: HTMLDivElement;
 </script>
 

src/components/FavoritesView/FavoritesList.svelte

@@ -6,7 +6,8 @@
     playNextList,
     currentID,
     favoritesPlayStatus,
-  } from '$store';
+    shuffle,
+  } from '$lib/player';
   import { fade } from 'svelte/transition';
 
   import type { FavoriteStore } from '$types/FavoritesStore';
@@ -15,7 +16,6 @@
   import FavoritesItem from './FavoritesItem.svelte';
   import Modal from '$lib/Modal.svelte';
   import Orderable from '$lib/Orderable.svelte';
-  import { shuffle } from '$lib/shuffle';
 
   let playWarning = false;
   let warningAction = () => {};

src/components/MainLayout.svelte

@@ -6,7 +6,7 @@
     settingsActive,
     menuEntries,
     hash,
-  } from '$store';
+  } from '$lib/player';
   import { fade } from 'svelte/transition';
   import PlayingPreview from './PlayingView/PlayingPoster.svelte';
   import FrequencyBars from './PlayingView/FrequencyBars.svelte';

src/components/PlayNextView/PlayNextController.ts

@@ -5,7 +5,7 @@ import {
     albumsAddedToPlayNext,
     favoritesPlayStatus,
     playNextIndex,
-} from '$store';
+} from '$lib/player';
 
 import { wantPlay } from '$lib/wantPlay';
 

src/components/PlayNextView/PlayNextItem.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { FavoriteStore } from '$types/FavoritesStore';
   import IntersectionObserver from '$lib/IntersectionObserver.svelte';
-  import { currentID, menuEntries, playNextList } from '$store';
+  import { currentID, menuEntries, playNextList } from '$lib/player';
   import { wantPlay } from '$lib/wantPlay';
-  import { lazyLoad } from '$lib/lazyLoad';
 
   import { fade } from 'svelte/transition';
 
@@ -18,6 +17,12 @@
   let removing = false;
   let removingCancelTimeout: NodeJS.Timeout;
 
+  const lazyLoad = (el: HTMLDivElement) => {
+    el.onload = () => {
+      el.classList.add('loaded');
+    };
+  };
+
   let currentItem: HTMLDivElement;
 </script>
 

src/components/PlayNextView/PlayNextList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { playNextList } from '$store';
+  import { playNextList } from '$lib/player';
 
   import PlayNextItem from './PlayNextItem.svelte';
   import Orderable from '$lib/Orderable.svelte';

src/components/PlayNextView/PlayNextView.svelte

@@ -2,17 +2,17 @@
   import {
     playNextList,
     menuEntries,
+    shuffle,
     currentID,
     playNextIndex,
-  } from '$store';
+  } from '$lib/player';
   import Modal from '$lib/Modal.svelte';
   import './PlayNextController';
   import PlayNextList from './PlayNextList.svelte';
   import ActionButton from '$lib/ActionButton.svelte';
   import { wantPlay } from '$lib/wantPlay';
   import { tick } from 'svelte';
   import { playNextSong, playPreviousSong } from './PlayNextController';
-  import { shuffle } from '$lib/shuffle';
 
   let modalClosed = true;
   let canOpenModal = true;

src/components/PlayerControls/PlayerControls.svelte

@@ -6,6 +6,7 @@
   import {
     currentTime,
     duration,
+    secondsToTime,
     paused,
     musicTitle,
     artist,
@@ -14,7 +15,7 @@
     playNextList,
     playNextIndex,
     previousNextButtonsPreference,
-  } from '$store';
+  } from '$lib/player';
   import { play, pause } from '$lib/AudioPlayer.svelte';
 
   import { fade } from 'svelte/transition';
@@ -26,9 +27,12 @@
     playNextSong,
     playPreviousSong,
   } from '$components/PlayNextView/PlayNextController';
-  import { secondsToTime } from '$lib/secondsToTime';
 
-  let smallScreen = window.innerWidth < 900;
+  let smallScreen = false;
+
+  window.addEventListener('resize', () => {
+    smallScreen = window.innerWidth < 900;
+  });
 
   let progressChanging = false;
   let changingPreview = 0;
@@ -94,7 +98,8 @@
     $paused ? play() : pause();
   }
 
-  function handleKeyDownActions(e: KeyboardEvent) {
+  // listen for spacebar
+  window.addEventListener('keydown', (e) => {
     // if focusing elements (ex. input) don't do anything (except buttons)
     if (
       document.activeElement !== document.body &&
@@ -110,6 +115,7 @@
     }
 
     if (e.key === 'ArrowRight' && !e.metaKey) {
+      // e.preventDefault();
       let newTime = $currentTime + 5;
 
       // prevent going over duration
@@ -121,6 +127,7 @@
     }
 
     if (e.key === 'ArrowLeft' && !e.metaKey) {
+      // e.preventDefault();
       let newTime = $currentTime - 5;
 
       // prevent going under 0
@@ -160,7 +167,7 @@
 
       return;
     }
-  };
+  });
 
   function handleResetBegin(e: KeyboardEvent) {
     // if focusing elements (ex. input) don't do anything
@@ -195,12 +202,8 @@
   }
 </script>
 
-<svelte:window on:keydown={handleKeyDownActions} on:resize={() => (smallScreen = window.innerWidth < 900)} />
 <svelte:body on:keydown={handleResetBegin} on:keyup={handleResetEnd} />
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div class="player translucent">
   {#if resetStatus !== 'none'}
     <div class="reset-message" transition:fade|global>
@@ -210,6 +213,8 @@
     </div>
   {/if}
   <div class="player__buttons" style="--buttons-width:{$playerButtonsWidth}rem">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="player-button player__previous-button"
       class:disabled={$playNextIndex === 0}
@@ -219,9 +224,13 @@
         <use xlink:href="#double-arrow" />
       </svg>
     </div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="player__play-pause" on:click={toggle}>
       <div class="play-pause__icon" class:pause={!$paused} />
     </div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="player-button player__next-button"
       class:disabled={$playNextList.length - 1 === $playNextIndex}
@@ -233,6 +242,8 @@
     </div>
   </div>
   <Range />
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="player__volume"
     class:hiding={smallScreen}

src/components/PlayerControls/Range.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   // cspell:word xlink spacebar keydown mousedown mousemove mouseup mouseleave
-  import { currentTime, duration } from '$store';
+  import { currentTime, duration } from '$lib/player';
+  import { onMount } from 'svelte';
 
   let progress = 0;
   let range: HTMLDivElement;
@@ -9,55 +10,56 @@
 
   $: progress = (progressChanging ? changingPreview : $currentTime) / $duration;
 
-  function handleMouseDown(e: MouseEvent) {
-    if (e.button === 1 || e.button === 2) {
-      return;
-    }
-    progressChanging = true;
-    let x = e.offsetX;
-    let width = range.offsetWidth;
-    let percent = x / width;
-    let seconds = percent * $duration;
-    changingPreview = seconds;
-  }
-  function handleMouseMove(e: MouseEvent) {
-    if (!progressChanging) return;
-
-    let x = e.offsetX;
-    let width = range.offsetWidth;
-    let percent = x / width;
-    let seconds = percent * $duration;
-    changingPreview = seconds;
-  }
-  function handleMouseUp(e: MouseEvent) {
-    if (e.button === 1 || e.button === 2) {
-      return;
-    }
-    progressChanging = false;
-    $currentTime = changingPreview;
-  }
-  function handleMouseLeave(_: MouseEvent) {
-    if (!progressChanging) return;
+  onMount(() => {
+    // listen for click start
+    range.addEventListener('mousedown', (e) => {
+      if (e.button === 1 || e.button === 2) {
+        return;
+      }
+      progressChanging = true;
+      let x = e.offsetX;
+      let width = range.offsetWidth;
+      let percent = x / width;
+      let seconds = percent * $duration;
+      changingPreview = seconds;
+    });
+    // listen for mouse move
+    range.addEventListener('mousemove', (e) => {
+      if (!progressChanging) return;
 
-    if (progress <= 0.05 || progress >= 0.95) {
-      if (progress <= 0.1) {
-        $currentTime = 0;
-      } else if (progress >= 0.9) {
-        $currentTime = $duration;
+      let x = e.offsetX;
+      let width = range.offsetWidth;
+      let percent = x / width;
+      let seconds = percent * $duration;
+      changingPreview = seconds;
+    });
+    // listen for click end
+    range.addEventListener('mouseup', (e) => {
+      if (e.button === 1 || e.button === 2) {
+        return;
       }
       progressChanging = false;
-    }
-  }
+      $currentTime = changingPreview;
+    });
+
+    range.addEventListener('mouseleave', (_) => {
+      if (!progressChanging) return;
+
+      if (progress <= 0.05 || progress >= 0.95) {
+        if (progress <= 0.1) {
+          $currentTime = 0;
+        } else if (progress >= 0.9) {
+          $currentTime = $duration;
+        }
+        progressChanging = false;
+      }
+    });
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="player__range"
   style="--progress: {progress || 0}"
-  on:mousedown={handleMouseDown}
-  on:mousemove={handleMouseMove}
-  on:mouseup={handleMouseUp}
-  on:mouseleave={handleMouseLeave}
   bind:this={range}
 >
   <div class="player__volume-range">