smooth scrolls

package.json

@@ -2,7 +2,7 @@
   "name": "amethyst",
   "author": "amethyst <geoxor123@outlook.com>",
   "productName": "Amethyst",
-  "version": "1.3.17",
+  "version": "1.4.0",
   "main": "./release/dist/main/main.js",
   "licenses": [
     {

src/main/main.ts

@@ -21,10 +21,12 @@ export const APP_VERSION = app.isPackaged ? app.getVersion() : process.env.npm_p
 if (process.env.NODE_ENV === "production")
 	import("source-map-support").then(smc => smc.install());
 
-// if (isDebug)
+// if (isDebug) 
 // import("electron-debug").then(electronDebug => electronDebug ());
 
 app.setAppUserModelId("Amethyst")
+app.commandLine.appendSwitch('high-dpi-support', "1");
+app.commandLine.appendSwitch('force-device-scale-factor', "1");
 
 if (!app.requestSingleInstanceLock()) {
 	app.quit();

src/renderer/App.vue

@@ -2,10 +2,13 @@
 import MenuBar from "./components/MenuBar.vue";
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+
+// Disable stupid scroll when hitting space
+window.addEventListener('keydown',  (e) => e.key === " " && e.target == document.body && e.preventDefault());
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex fixed flex-col">
     <menu-bar />
     <router-view /> 
   </div>
@@ -21,6 +24,10 @@ html, body, #app, #app > div {
   @apply h-full w-full ;
 }
 
+body::-webkit-scrollbar {
+  display: none;
+}
+
 *::-webkit-scrollbar {
   width: 4px;
   height:4px;

src/renderer/components/MenuBar.vue

@@ -19,7 +19,7 @@ const openPreferences = () => {
 </script>
 
 <template>
-  <div class="bg-menu-bar font-cozette drag text-xs select-none flex justify-between items-center">
+  <div class="bg-menu-bar z-100 font-cozette drag text-xs select-none flex justify-between items-center">
     <div class="flex no-drag h-full items-center">
       <img v-if="state.isDev.value" src="../icon-dev.png" class="transform active:rotate-360  active:scale-50 transition duration-200 cursor-heart-pointer ml-1 h-4" alt="" @click="playPop">
       <img v-else src="../icon.png" class="transform  active:rotate-360 active:scale-50 transition duration-200 cursor-heart-pointer ml-1 h-4" alt="" @click="playPop">

src/renderer/components/PlayerControls.vue

@@ -30,11 +30,11 @@ onMounted(() => {
     currentTime.value = `${player.currentTimeFormatted()} / ${player.currentDurationFormatted()}`;
   }, 500);
 
-  waveformRenderer = new WaveformRenderer(player, '#waveformCanvas');
+  // waveformRenderer = new WaveformRenderer(player, '#waveformCanvas');
 });
 
 onUnmounted(() => {
-  waveformRenderer.clean();
+  // waveformRenderer.clean();
 });
 
 </script>

src/renderer/components/Queue.vue

@@ -2,14 +2,15 @@
 import { useKeyModifier } from "@vueuse/core";
 import { ref } from "vue";
 import { usePlayer, useState } from "../amethyst";
-import { BPM_COMPUTATION_CONCURRENCY, COVERART_RENDERING_CONCURRENCY } from "../state";
+import SmoothScrollableContainer from "./SmoothScrollableContainer.vue";
+
 const state = useState();
 const player = usePlayer();
 const isHoldingControl = useKeyModifier("Control");
 const isHoldingAlt = useKeyModifier("Alt");
 const filterText = ref("");
 const invoke = window.electron.ipcRenderer.invoke;
-const MAX_CHARS = 36;
+const MAX_CHARS = 37;
 
 const trimString = (string: string, trim: number) => {
   const NUMBER_OF_DOTS = 2;
@@ -26,48 +27,44 @@ const trimString = (string: string, trim: number) => {
   return string;
 };
 
+
 const parseTitle = (path: string) => {
   return path.substring(Math.max(path.lastIndexOf("\\"), path.lastIndexOf("/")) + 1);
 };
+
+
+
+
 </script>
 
 <template>
-    <ul class="w-full">
-      <Transition name="slide-fade">
-        <div v-if="state.state.coverProcessQueue > 0" class="flex w-full flex-col">
-          <p class="text-xs text-blue-400">
-            Processing Covers {{ state.state.coverProcessQueue }} / {{ COVERART_RENDERING_CONCURRENCY }}
-          </p>
-
-          <div class="mb-2 mt-0.5 w-full h-1px bg-gray-200" />
-        </div>
-      </Transition>
-      <Transition name="slide-fade">
-        <div v-if="state.state.bpmProcessQueue > 0" class="flex w-full flex-col">
-          <p class="text-xs text-yellow-400">
-            Analyzing BPM {{ state.state.bpmProcessQueue }} / {{ BPM_COMPUTATION_CONCURRENCY }}
-          </p>
-
-          <div class="mb-2 mt-0.5 w-full h-1px bg-gray-200" />
-        </div>
-      </Transition>
-
-      <input v-model="filterText" type="text" class="border-2 border-gray-400 indent-xs text-xs w-full mb-2" placeholder="artists, title & format...">
+  <div class="flex-col p-2 items-center flex w-64">
+    <input v-model="filterText" type="text" class="border-2 z-30 w-full border-gray-400 indent-xs text-xs mb-2" placeholder="artists, title & format...">
 
+    <smooth-scrollable-container class="fixed top-14">
       <!-- TODO: refactor this mess into a component -->
       <li
         v-for="([song, i]) of player.getQueue().map((song, i) => song.toLowerCase().includes(filterText.toLowerCase()) ? [song, i] : undefined).filter(song => !!song) as [string, number][]"
-        :key="song" :class="[isHoldingControl && 'control-hover', isHoldingControl ? 'cursor-external-pointer' : 'cursor-default', i === player.getCurrentlyPlayingIndex() && 'text-queue-text-active']" class=" h-3 mb-0.5 hover:text-queue-text-hover relative select-none" @keypress.prevent
-        @click="isHoldingControl ? invoke('show-item', [player.getQueue()[i]]) : player.setCurrentlyPlayingIndex(i)"
-      >
+        :key="song"
+        :class="[isHoldingControl && 'control-hover', isHoldingControl ? 'cursor-external-pointer' : 'cursor-default', i === player.getCurrentlyPlayingIndex() && 'text-queue-text-active']"
+        class="h-3 -ml-3 mb-0.5 max-w-56 hover:text-queue-text-hover list-none relative select-none" 
+        @keypress.prevent
+        @mousedown="isHoldingControl ? invoke('show-item', [player.getQueue()[i]]) : player.setCurrentlyPlayingIndex(i)">
         <!-- <cover class="inline align-top w-3 h-3" :song-path="song" /> -->
-        <img v-if="state.state.processQueue.has(song)" src="../spinners/spinner.gif" alt="" class="w-3 h-3 absolute top-0.25 -left-0.25">
+        <img v-if="state.state.processQueue.has(song)" src="../spinners/spinner.gif" alt=""
+          class="w-3 h-3 absolute top-0.25 -left-0.25">
 
-        <p :class="[state.state.processQueue.has(song) && 'ml-4']" class=" inline align-top text-xs max-w-40 overflow-hidden overflow-ellipsis ">
-          {{ i === player.getCurrentlyPlayingIndex() ? "⏵ " : "" }}{{ trimString(isHoldingAlt ? `${song.substring(0, (MAX_CHARS - 3) / 2)}...${song.substring(song.length - (MAX_CHARS - 3) / 2)}` : parseTitle(song), i === player.getCurrentlyPlayingIndex() ? MAX_CHARS - 2 : MAX_CHARS) }}
+        <p :class="[state.state.processQueue.has(song) && 'ml-4']"
+          class=" inline align-top text-xs max-w-40 overflow-hidden overflow-ellipsis ">
+          {{ i === player.getCurrentlyPlayingIndex() ? "⏵ " : "" }}{{ trimString(isHoldingAlt ? `${song.substring(0,
+              (MAX_CHARS - 3) / 2)}...${song.substring(song.length - (MAX_CHARS - 3) / 2)}` : parseTitle(song), i ===
+                player.getCurrentlyPlayingIndex() || state.state.processQueue.has(song) ? MAX_CHARS - 4 : MAX_CHARS)
+          }}
         </p>
       </li>
-    </ul>
+    </smooth-scrollable-container>
+  </div>
+
 </template>
 
 <style lang="postcss" scoped>
@@ -85,5 +82,6 @@ const parseTitle = (path: string) => {
   transform: translateY(-20px);
   opacity: 0;
 }
+
 </style>
 

src/renderer/components/SmoothScrollableContainer.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="smoothScrollableContainer" ref="smoothScrollableContainer">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, Ref, ref } from 'vue';
+const body = document.body;
+const smoothScrollableContainer = ref() as Ref<HTMLDivElement>;
+
+let sy = 0;
+let dy = sy;
+
+const DAMPING = 0.1;
+
+function render() {
+  //We calculate our container position by linear interpolation method
+  dy = li(dy, sy, DAMPING);
+
+  dy = ~~(dy * 100) / 100;
+
+  smoothScrollableContainer.value.style.transform = `translate3d(${0}px, -${dy}px, 0px)`;
+
+  window.requestAnimationFrame(render);
+}
+
+function li(a: number, b: number, n: number) {
+  return (1 - n) * a + n * b;
+}
+
+function easeScroll() {
+  sy = window.pageYOffset;
+}
+
+onMounted(() => {
+
+  // TODO: this is stupid, it makes the body of the entire page be the total length of the list
+  // TODO: so it lets you transform all the way down, replace this with something smarter
+  // TODO: so we dont have to hide the scrollbar from the body
+  body.style.height = smoothScrollableContainer.value.clientHeight + 'px';
+
+  // Bind a scroll function
+  window.addEventListener('scroll', easeScroll);
+  window.requestAnimationFrame(render);
+})
+
+
+
+</script>
+
+<style scoped lang="postcss">
+
+
+::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+#smoothScrollableContainer {
+  @apply fixed z-20;
+}
+</style>

src/renderer/components/Spectrum.vue

@@ -12,7 +12,7 @@ const VERTICAL_ZOOM_FACTOR = 1.5;
 // const DOWNSCALED_HEIGHT = SPECTRUM_HEIGHT / DOWNSCALE_FACTOR;
 const defaultSpectrumColor = "#868aff";
 
-let shouldFuckOff = false;
+let shouldStopRendering = false;
 
 const getLogIndex = (value: number, min: number, max: number) => {
 	const exp = value / min / (max - min);
@@ -97,13 +97,13 @@ onMounted(() => {
 		// canvasCtx.value.clearRect(0, 0, DOWNSCALED_WIDTH, DOWNSCALED_HEIGHT); 
 
 
-		!shouldFuckOff && requestAnimationFrame(draw);
+		!shouldStopRendering && requestAnimationFrame(draw);
 	}
 
 	draw();
 });
 
-onUnmounted(() => shouldFuckOff = true);
+onUnmounted(() => shouldStopRendering = true);
 </script>
 
 <template>

src/renderer/views/Home.vue

@@ -6,6 +6,7 @@ import Queue from "../components/Queue.vue";
 import Tag from "../components/Tag.vue";
 import Spectrum from "../components/Spectrum.vue";
 import PlayerControls from "../components/PlayerControls.vue";
+// import SmoothScrollableContainer from "../components/SmoothScrollableContainer.vue";
 // import SocialBar from "../components/SocialBar.vue";
 
 const invoke = window.electron.ipcRenderer.invoke;
@@ -48,11 +49,8 @@ function calculateStars(metadata: IAudioMetadata) {
 </script>
 
 <template>
-  <div class="flex h-[calc(100%-24px)] text-queue-text bg-queue-background font-cozette main">
-    <div
-      class="min-w-64 max-w-64 p-2 pb-4 flex flex-col h-full text-queue-text bg-queue-background font-cozette overflow-hidden overflow-y-auto">
-      <queue />
-    </div>
+  <div class="flex  h-[calc(100%-24px)] text-queue-text bg-queue-background font-cozette main">
+    <queue />
     <div class="h-full flex w-full bg-white flex-col overflow-x-auto flex-1">
       <player-controls />