mobile design & fixes

app/src/App.svelte

@@ -6,7 +6,8 @@
   import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
   import { queue } from './lib/stores';
   import { get } from 'svelte/store';
-import ProgressBar from './lib/ProgressBar.svelte';
+  import { dev } from './lib/dev';
+  import ProgressBar from './lib/ProgressBar.svelte';
 
   let loading = false;
 
@@ -17,7 +18,7 @@ import ProgressBar from './lib/ProgressBar.svelte';
     loading = true;
 
     try {
-      let url = new URL('/api/search', window.location.origin);
+      let url = dev ? (new URL('http://localhost:4500/api/search')) : (new URL('/api/search', window.location.origin));
       url.searchParams.set('search', query);
       const response = await fetch(url);
       const data = await response.json();
@@ -37,7 +38,6 @@ import ProgressBar from './lib/ProgressBar.svelte';
     <span class="main">
       <Header/>
       <Search onChange={search}/>
-      <i class="small">ps. sorry for shitty mobile support on rewrite i'll fix it soon i promiseeeee -oat</i>
       {#if loading}
         <Loading/>
       {/if}
@@ -79,21 +79,45 @@ import ProgressBar from './lib/ProgressBar.svelte';
   }
 
   sidebar {
-    width: 0px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding: 0em;
-    height: calc(100vh - 2em);
-    overflow: auto;
-    overflow-x: hidden;
-    position: sticky;
-    top: 0px;
-    right: 0px;
-    transition: width 0.2s ease-in-out, padding 0.2s ease-in-out, right 0.2s ease-in-out;
-  }
-  sidebar.open {
-    width: 450px;
     padding: 1em;
-    right: 8px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    transition: width 0.2s ease-in-out, padding 0.2s ease-in-out, right 0.2s ease-in-out, height 0.2s ease-in-out;
+  }
+
+  @media (min-width: 1100px) {
+    sidebar {
+      height: calc(100vh - 2em);
+      overflow: auto;
+      overflow-x: hidden;
+      position: sticky;
+      top: 0px;
+      width: 0px;
+      right: 0px;
+    }
+    sidebar.open {
+      width: 450px;
+      right: 8px;
+    }
+    sidebar.open {
+      padding: 1em;
+    }
+  }
+
+  @media (max-width: 1099px) {
+    app {
+      flex-direction: column;
+    }
+    sidebar {
+      order: -1;
+      align-items: center;
+    }
+    sidebar:not(.open) {
+      height: 0px;
+      padding: 0em;
+      overflow: hidden;
+    }
   }
 
   .queue {

app/src/lib/Album.svelte

@@ -18,6 +18,7 @@
   import Track from './Track.svelte';
 
   import { startDownload } from './download';
+  import { dev } from './dev';
 
   const options = {};
 
@@ -27,7 +28,7 @@
     if (loadingTracks || album || short) return;
     loadingTracks = true;
     try {
-      let url = new URL(`/api/album`, window.location.origin);
+      let url = dev ? (new URL('http://localhost:4500/api/album')) : (new URL('/api/album', window.location.origin));
       url.searchParams.set('id', id);
       const response = await fetch(url);
       album = await response.json();
@@ -43,15 +44,35 @@
   use:inview={options}
   on:enter={loadTracks}
 >
-  <div class="album-metadata">
+  <div class="album-inner-top">
-    <span class="metadata">
+    <div class="album-metadata">
-      <span class="big">{title}</span>
+      <span class="metadata">
-      {#if subtitle}
+        <span class="big">{title}</span>
-        <span class="small">{subtitle}</span>
+        {#if subtitle}
+          <span class="small">{subtitle}</span>
+        {/if}
+        <br>
+        <span class="small">{artist.name}</span>
+      </span>
+      {#if !hideDownload || $butShowThisDownloadLinkInstead}
+        {#if $butShowThisDownloadLinkInstead}
+          <a href={$butShowThisDownloadLinkInstead} target="_blank" rel="noopener" download="{$butShowThisDownloadLinkInstead.split('/').slice(-1)}">
+            <div class="album-download" title="Download">
+              <Icon icon={faDownload}/>
+            </div>
+          </a>
+        {:else}
+          <div class="album-download" title="Download" on:click={() => startDownload(id, {title, artist, cover}, true)}>
+            <Icon icon={faDownload}/>
+          </div>
+        {/if}
       {/if}
-      <br>
+    </div>
-      <span class="small">{artist.name}</span>
+    <div class="album-image-wrapper">
-    </span>
+      <img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/{cover}/128x128-000000-80-0-0.jpg" alt="Cover for '{title}'">
+    </div>
+  </div>
+  <div class="album-inner-bottom">
     {#if log}
       <div class="progress-state">
         {#each $log as line, i}
@@ -59,22 +80,6 @@
         {/each}
       </div>
     {/if}
-    {#if !hideDownload || $butShowThisDownloadLinkInstead}
-      {#if $butShowThisDownloadLinkInstead}
-        <a href={$butShowThisDownloadLinkInstead} target="_blank" rel="noopener" download="{$butShowThisDownloadLinkInstead.split('/').slice(-1)}">
-          <div class="album-download" title="Download">
-            <Icon icon={faDownload}/>
-          </div>
-        </a>
-      {:else}
-        <div class="album-download" title="Download" on:click={() => startDownload(id, {title, artist, cover}, true)}>
-          <Icon icon={faDownload}/>
-        </div>
-      {/if}
-    {/if}
-  </div>
-  <div class="album-image-wrapper">
-    <img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/{cover}/128x128-000000-80-0-0.jpg" alt="Cover for '{title}'">
   </div>
 </div>
 
@@ -84,7 +89,7 @@
   {/if}
   {#if album && !short}
     {#each album.tracks as track}
-      <Track id={track.id} title={track.title} duration={track.duration} artist={track.artist} cover={cover} album={title}/>
+      <Track id={track.id} title={track.title} duration={track.duration} artist={track.artist} cover={cover} album={title} albumArtist={artist.name}/>
     {/each}
   {/if}
 </div>
@@ -97,9 +102,22 @@
     border-radius: 10px 10px 0px 0px;
     transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
     min-height: 96px;
+    margin-top: 0.5em;
+    min-width: 330px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5em;
+  }
+  .album-inner-top {
     display: flex;
     justify-content: space-between;
-    margin-top: 0.5em;
+    gap: 0.5em;
+  }
+  .album-inner-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
   .album.short {
     border-radius: 10px 10px 10px 10px;
@@ -147,7 +165,6 @@
     font-family: monospace;
     font-size: 12px;
     border-radius: 10px;
-    width: 80%;
     padding: 6px;
     height: 5.5em;
     overflow: hidden;

app/src/lib/Search.svelte

@@ -50,7 +50,7 @@
   input {
     margin: 5px;
     width: 550px;
-    max-width: 98%;
+    max-width: 94%;
     padding: 15px;
     font-size: x-large;
     border: none;

app/src/lib/Track.svelte

@@ -5,6 +5,7 @@
   export let cover;
   export let duration;
   export let album;
+  export let albumArtist;
 
   import { formatTime } from './format';
 
@@ -15,7 +16,13 @@
 </script>
 
 <div class="track" id="track-{id}">
-  <span class="track-left">{artist} - {title}</span>
+  <span class="track-left">
+    {#if artist !== albumArtist}
+      {artist} - {title}
+    {:else}
+      {title}
+    {/if}
+  </span>
   <span class="track-right">
     <span class="small">{formatTime(duration)}</span>
     <span class="track-download" title="Download" on:click={() => startDownload(id, {title, artist: {name: artist}, cover, album}, false)}>
@@ -44,6 +51,10 @@
 
   .track-left {
     flex: 1 1 0px;
+    white-space: normal;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
   .track-right {
     flex: 0 0 auto;

app/src/lib/dev.js

@@ -0,0 +1 @@
+export const dev = true;

app/src/lib/download.js

@@ -1,7 +1,9 @@
-import { get, writable } from "svelte/store";
+import { get, writable } from 'svelte/store';
-import { queue } from "./stores";
+import { queue } from './stores';
+import { dev } from './dev';
 
 function getWebsocketLocation() {
+  if (dev) return 'ws://localhost:4500/';
   return window.window.location.toString().replace('https://', 'wss://').replace('http://', 'ws://');
 }
 
@@ -12,10 +14,6 @@ export function startDownload(id, metadata, isAlbum) {
   let success = writable(null);
   let downloadLink = writable(null);
 
-  let coverArt;
-  let title;
-  let artist;
-
   let queueItem = {
     id: id,
     ...metadata,
@@ -38,14 +36,22 @@ export function startDownload(id, metadata, isAlbum) {
       log.set(logLocal);
     } else if (d.key === 'updateQueue') {
       if (d.data.progress) {
-        progress.set(d.data.progress);
+        progress.set(Math.max(d.data.progress, get(progress)));
       }
     } else if (d.key === 'download') {
+      success.set(true);
+      progress.set(100);
       downloadLink.set(d.data);
     } else if (d.key === 'finishDownload') {
-      logLocal.push('Download finished');
+      setTimeout(() => {
-      log.set(logLocal);
+        if (!get(success)) {
-      success.set(true);
+          success.set(false);
+          logLocal.push('Server didn\'t send a download link back!');
+          logLocal.push('This may be due to errors during the download or temporary connection issues');
+          logLocal.push('Try again, and if it still doesn\'t work, annoy oat until it does again');
+          log.set(logLocal);
+        }
+      }, 1000);
     } else if (d.key === 'zipping') {
       logLocal.push('Creating zip archive');
       log.set(logLocal);
@@ -53,7 +59,7 @@ export function startDownload(id, metadata, isAlbum) {
   }
   ws.onopen = () => {
     logLocal.push('WebSocket connected!');
-    logLocal.push('Server shooould start downloading the files now');
+    logLocal.push('Initializing download');
     log.set(logLocal);
   }
   ws.onerror = (e) => {