From 37dc206ccffcbbbd581ff83fa122cb3518174df5 Mon Sep 17 00:00:00 2001 From: "Jill \"oatmealine\" Monoids" Date: Fri, 19 Aug 2022 00:01:08 +0300 Subject: [PATCH] mobile design & fixes --- app/src/App.svelte | 58 ++++++++++++++++++++++--------- app/src/lib/Album.svelte | 73 ++++++++++++++++++++++++--------------- app/src/lib/Search.svelte | 2 +- app/src/lib/Track.svelte | 13 ++++++- app/src/lib/dev.js | 1 + app/src/lib/download.js | 28 +++++++++------ 6 files changed, 117 insertions(+), 58 deletions(-) create mode 100644 app/src/lib/dev.js diff --git a/app/src/App.svelte b/app/src/App.svelte index f594c18..3cc9a64 100644 --- a/app/src/App.svelte +++ b/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';
- ps. sorry for shitty mobile support on rewrite i'll fix it soon i promiseeeee -oat {#if 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 { diff --git a/app/src/lib/Album.svelte b/app/src/lib/Album.svelte index 047d29f..1d930fa 100644 --- a/app/src/lib/Album.svelte +++ b/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} > -
- - {title} - {#if subtitle} - {subtitle} +
+
+ + {title} + {#if subtitle} + {subtitle} + {/if} +
+ {artist.name} + + {#if !hideDownload || $butShowThisDownloadLinkInstead} + {#if $butShowThisDownloadLinkInstead} + +
+ +
+ + {:else} +
startDownload(id, {title, artist, cover}, true)}> + +
+ {/if} {/if} -
- {artist.name} - +
+
+ Cover for '{title}' +
+
+
{#if log}
{#each $log as line, i} @@ -59,22 +80,6 @@ {/each}
{/if} - {#if !hideDownload || $butShowThisDownloadLinkInstead} - {#if $butShowThisDownloadLinkInstead} - -
- -
- - {:else} -
startDownload(id, {title, artist, cover}, true)}> - -
- {/if} - {/if} -
-
- Cover for '{title}'
@@ -84,7 +89,7 @@ {/if} {#if album && !short} {#each album.tracks as track} - + {/each} {/if} @@ -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; diff --git a/app/src/lib/Search.svelte b/app/src/lib/Search.svelte index 4204aec..e88d59f 100644 --- a/app/src/lib/Search.svelte +++ b/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; diff --git a/app/src/lib/Track.svelte b/app/src/lib/Track.svelte index 59a942b..41a8eea 100644 --- a/app/src/lib/Track.svelte +++ b/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 @@
- {artist} - {title} + + {#if artist !== albumArtist} + {artist} - {title} + {:else} + {title} + {/if} + {formatTime(duration)} 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; diff --git a/app/src/lib/dev.js b/app/src/lib/dev.js new file mode 100644 index 0000000..e2adfac --- /dev/null +++ b/app/src/lib/dev.js @@ -0,0 +1 @@ +export const dev = true; \ No newline at end of file diff --git a/app/src/lib/download.js b/app/src/lib/download.js index 329ff73..d1b5195 100644 --- a/app/src/lib/download.js +++ b/app/src/lib/download.js @@ -1,7 +1,9 @@ -import { get, writable } from "svelte/store"; -import { queue } from "./stores"; +import { get, writable } from 'svelte/store'; +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'); - log.set(logLocal); - success.set(true); + setTimeout(() => { + if (!get(success)) { + 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) => {