toasts, autodownload
This commit is contained in:
parent
37dc206ccf
commit
ae4f4c6498
|
@ -4,10 +4,11 @@
|
||||||
import Loading from './lib/Loading.svelte';
|
import Loading from './lib/Loading.svelte';
|
||||||
import Search from './lib/Search.svelte';
|
import Search from './lib/Search.svelte';
|
||||||
import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
|
import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
|
||||||
import { queue } from './lib/stores';
|
import { queue, saveOnDownload } from './lib/stores';
|
||||||
import { get } from 'svelte/store';
|
import { get } from 'svelte/store';
|
||||||
import { dev } from './lib/dev';
|
import { dev } from './lib/dev';
|
||||||
import ProgressBar from './lib/ProgressBar.svelte';
|
import ProgressBar from './lib/ProgressBar.svelte';
|
||||||
|
import { SvelteToast } from '@zerodevx/svelte-toast'
|
||||||
|
|
||||||
let loading = false;
|
let loading = false;
|
||||||
|
|
||||||
|
@ -33,6 +34,12 @@
|
||||||
let searchAlbums = [];
|
let searchAlbums = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<SvelteToast options={{
|
||||||
|
theme: {
|
||||||
|
'--toastBorderRadius': '0.75em',
|
||||||
|
'--toastBackground': 'rgba(19, 19, 19, 0.7)'
|
||||||
|
}
|
||||||
|
}}/>
|
||||||
<app>
|
<app>
|
||||||
<main>
|
<main>
|
||||||
<span class="main">
|
<span class="main">
|
||||||
|
@ -60,6 +67,9 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
<form class="options">
|
||||||
|
<input type="checkbox" id="auto-save" bind:checked={$saveOnDownload}/><label for="auto-save">Save songs on download <span class="small">(Doesn't work on all browsers)</span></label>
|
||||||
|
</form>
|
||||||
</sidebar>
|
</sidebar>
|
||||||
</app>
|
</app>
|
||||||
|
|
||||||
|
@ -76,6 +86,7 @@
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
sidebar {
|
sidebar {
|
||||||
|
@ -124,6 +135,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
.options {
|
||||||
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
|
@ -48,6 +48,7 @@ body {
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.big {
|
.big {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -47,12 +47,13 @@
|
||||||
<div class="album-inner-top">
|
<div class="album-inner-top">
|
||||||
<div class="album-metadata">
|
<div class="album-metadata">
|
||||||
<span class="metadata">
|
<span class="metadata">
|
||||||
<span class="big">{title}</span>
|
<div class="big">
|
||||||
{#if subtitle}
|
{title}
|
||||||
<span class="small">{subtitle}</span>
|
{#if subtitle}
|
||||||
{/if}
|
<span class="small">{subtitle}</span>
|
||||||
<br>
|
{/if}
|
||||||
<span class="small">{artist.name}</span>
|
</div>
|
||||||
|
<div class="small">{artist.name}</div>
|
||||||
</span>
|
</span>
|
||||||
{#if !hideDownload || $butShowThisDownloadLinkInstead}
|
{#if !hideDownload || $butShowThisDownloadLinkInstead}
|
||||||
{#if $butShowThisDownloadLinkInstead}
|
{#if $butShowThisDownloadLinkInstead}
|
||||||
|
@ -131,6 +132,7 @@
|
||||||
height: 96px;
|
height: 96px;
|
||||||
}
|
}
|
||||||
.album-image-wrapper {
|
.album-image-wrapper {
|
||||||
|
flex: 0 0 auto;
|
||||||
transition: 0.1s border ease-out;
|
transition: 0.1s border ease-out;
|
||||||
}
|
}
|
||||||
.album-metadata {
|
.album-metadata {
|
||||||
|
@ -139,6 +141,9 @@
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.album-download {
|
.album-download {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -159,6 +164,9 @@
|
||||||
|
|
||||||
.metadata {
|
.metadata {
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-state {
|
.progress-state {
|
||||||
|
|
|
@ -51,7 +51,6 @@
|
||||||
|
|
||||||
.track-left {
|
.track-left {
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
white-space: normal;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export const dev = true;
|
export const dev = false;
|
|
@ -1,6 +1,11 @@
|
||||||
import { get, writable } from 'svelte/store';
|
import { get, writable } from 'svelte/store';
|
||||||
import { queue } from './stores';
|
import { queue, saveOnDownload } from './stores';
|
||||||
import { dev } from './dev';
|
import { dev } from './dev';
|
||||||
|
import { toast } from '@zerodevx/svelte-toast'
|
||||||
|
import { saveAs } from 'file-saver';
|
||||||
|
|
||||||
|
const successTheme = {'--toastBarBackground': 'rgb(131, 243, 131)'};
|
||||||
|
const failureTheme = {'--toastBarBackground': 'rgb(243, 131, 131)'};
|
||||||
|
|
||||||
function getWebsocketLocation() {
|
function getWebsocketLocation() {
|
||||||
if (dev) return 'ws://localhost:4500/';
|
if (dev) return 'ws://localhost:4500/';
|
||||||
|
@ -24,13 +29,15 @@ export function startDownload(id, metadata, isAlbum) {
|
||||||
downloadLink
|
downloadLink
|
||||||
};
|
};
|
||||||
|
|
||||||
|
toast.push(`Started download for <b>${metadata.artist.name} - ${metadata.title}</b>`);
|
||||||
|
|
||||||
queue.set([...get(queue), queueItem]);
|
queue.set([...get(queue), queueItem]);
|
||||||
|
|
||||||
let type = isAlbum ? 'album' : 'track'
|
let type = isAlbum ? 'album' : 'track'
|
||||||
const ws = new WebSocket(`${getWebsocketLocation()}api/${type}?id=${id}`);
|
const ws = new WebSocket(`${getWebsocketLocation()}api/${type}?id=${id}`);
|
||||||
ws.onmessage = (m) => {
|
ws.onmessage = (m) => {
|
||||||
const d = JSON.parse(m.data);
|
const d = JSON.parse(m.data);
|
||||||
console.log(d);
|
//console.log(d);
|
||||||
if (d.key === 'downloadInfo') {
|
if (d.key === 'downloadInfo') {
|
||||||
logLocal.push(`[${d.data.data.title}] ${d.data.state}`);
|
logLocal.push(`[${d.data.data.title}] ${d.data.state}`);
|
||||||
log.set(logLocal);
|
log.set(logLocal);
|
||||||
|
@ -42,10 +49,15 @@ export function startDownload(id, metadata, isAlbum) {
|
||||||
success.set(true);
|
success.set(true);
|
||||||
progress.set(100);
|
progress.set(100);
|
||||||
downloadLink.set(d.data);
|
downloadLink.set(d.data);
|
||||||
|
toast.push(`Downloaded <b>${metadata.artist.name} - ${metadata.title}</b>!`, {theme: successTheme});
|
||||||
|
if (get(saveOnDownload)) {
|
||||||
|
saveAs(d.data, d.data.split('/').pop());
|
||||||
|
}
|
||||||
} else if (d.key === 'finishDownload') {
|
} else if (d.key === 'finishDownload') {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!get(success)) {
|
if (!get(success)) {
|
||||||
success.set(false);
|
success.set(false);
|
||||||
|
toast.push(`Downloading <b>${metadata.artist.name} - ${metadata.title}</b> failed!`, {theme: failureTheme});
|
||||||
logLocal.push('Server didn\'t send a download link back!');
|
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('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');
|
logLocal.push('Try again, and if it still doesn\'t work, annoy oat until it does again');
|
||||||
|
@ -67,6 +79,7 @@ export function startDownload(id, metadata, isAlbum) {
|
||||||
logLocal.push(`${e}`);
|
logLocal.push(`${e}`);
|
||||||
log.set(logLocal);
|
log.set(logLocal);
|
||||||
success.set(false);
|
success.set(false);
|
||||||
|
toast.push(`Downloading <b>${metadata.artist.name} - ${metadata.title}</b> failed!`, {theme: failureTheme});
|
||||||
}
|
}
|
||||||
ws.onclose = (e) => {
|
ws.onclose = (e) => {
|
||||||
if (e.code !== 1000) {
|
if (e.code !== 1000) {
|
||||||
|
@ -74,6 +87,7 @@ export function startDownload(id, metadata, isAlbum) {
|
||||||
logLocal.push(`websocket closed unexpectedly with code ${e.code}`, `${e.reason}`);
|
logLocal.push(`websocket closed unexpectedly with code ${e.code}`, `${e.reason}`);
|
||||||
log.set(logLocal);
|
log.set(logLocal);
|
||||||
success.set(false);
|
success.set(false);
|
||||||
|
toast.push(`Downloading <b>${metadata.artist.name} - ${metadata.title}</b> failed!`, {theme: failureTheme});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,3 +1,4 @@
|
||||||
import { writable } from "svelte/store";
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
export let queue = writable([]);
|
export let queue = writable([]);
|
||||||
|
export let saveOnDownload = writable(false);
|
|
@ -24,11 +24,13 @@
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.1.2",
|
"@fortawesome/free-solid-svg-icons": "^6.1.2",
|
||||||
|
"@zerodevx/svelte-toast": "^0.7.2",
|
||||||
"deemix": "git+https://gitlab.com/RemixDev/deemix-js",
|
"deemix": "git+https://gitlab.com/RemixDev/deemix-js",
|
||||||
"deezer-js": "^1.3.5",
|
"deezer-js": "^1.3.5",
|
||||||
"dotenv": "^10.0.0",
|
"dotenv": "^10.0.0",
|
||||||
"express": "^4.17.3",
|
"express": "^4.17.3",
|
||||||
"express-ws": "^5.0.2",
|
"express-ws": "^5.0.2",
|
||||||
|
"file-saver": "^2.0.5",
|
||||||
"sirv-cli": "^2.0.2",
|
"sirv-cli": "^2.0.2",
|
||||||
"svelte-fontawesome": "^0.0.3",
|
"svelte-fontawesome": "^0.0.3",
|
||||||
"svelte-inview": "^3.0.1",
|
"svelte-inview": "^3.0.1",
|
||||||
|
|
|
@ -7,12 +7,14 @@ specifiers:
|
||||||
'@types/express': ^4.17.13
|
'@types/express': ^4.17.13
|
||||||
'@types/express-ws': ^3.0.1
|
'@types/express-ws': ^3.0.1
|
||||||
'@types/ws': ^8.2.3
|
'@types/ws': ^8.2.3
|
||||||
|
'@zerodevx/svelte-toast': ^0.7.2
|
||||||
bufferutil: ^4.0.6
|
bufferutil: ^4.0.6
|
||||||
deemix: git+https://gitlab.com/RemixDev/deemix-js
|
deemix: git+https://gitlab.com/RemixDev/deemix-js
|
||||||
deezer-js: ^1.3.5
|
deezer-js: ^1.3.5
|
||||||
dotenv: ^10.0.0
|
dotenv: ^10.0.0
|
||||||
express: ^4.17.3
|
express: ^4.17.3
|
||||||
express-ws: ^5.0.2
|
express-ws: ^5.0.2
|
||||||
|
file-saver: ^2.0.5
|
||||||
rollup: ^2.68.0
|
rollup: ^2.68.0
|
||||||
rollup-plugin-css-only: ^3.1.0
|
rollup-plugin-css-only: ^3.1.0
|
||||||
rollup-plugin-livereload: ^2.0.5
|
rollup-plugin-livereload: ^2.0.5
|
||||||
|
@ -31,11 +33,13 @@ specifiers:
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@fortawesome/free-solid-svg-icons': 6.1.2
|
'@fortawesome/free-solid-svg-icons': 6.1.2
|
||||||
|
'@zerodevx/svelte-toast': 0.7.2
|
||||||
deemix: gitlab.com/RemixDev/deemix-js/a105b03beb93cc2efa5d723d7f2e3cb2237d4f08
|
deemix: gitlab.com/RemixDev/deemix-js/a105b03beb93cc2efa5d723d7f2e3cb2237d4f08
|
||||||
deezer-js: 1.3.5
|
deezer-js: 1.3.5
|
||||||
dotenv: 10.0.0
|
dotenv: 10.0.0
|
||||||
express: 4.17.3
|
express: 4.17.3
|
||||||
express-ws: 5.0.2_te4mbskzuxzlkfrbqjipouglzi
|
express-ws: 5.0.2_te4mbskzuxzlkfrbqjipouglzi
|
||||||
|
file-saver: 2.0.5
|
||||||
sirv-cli: 2.0.2
|
sirv-cli: 2.0.2
|
||||||
svelte-fontawesome: 0.0.3
|
svelte-fontawesome: 0.0.3
|
||||||
svelte-inview: 3.0.1_svelte@3.46.4
|
svelte-inview: 3.0.1_svelte@3.46.4
|
||||||
|
@ -284,6 +288,10 @@ packages:
|
||||||
'@types/node': 17.0.21
|
'@types/node': 17.0.21
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@zerodevx/svelte-toast/0.7.2:
|
||||||
|
resolution: {integrity: sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/accepts/1.3.8:
|
/accepts/1.3.8:
|
||||||
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
|
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
|
||||||
engines: {node: '>= 0.6'}
|
engines: {node: '>= 0.6'}
|
||||||
|
@ -714,6 +722,10 @@ packages:
|
||||||
resolution: {integrity: sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==}
|
resolution: {integrity: sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/file-saver/2.0.5:
|
||||||
|
resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/fill-range/7.0.1:
|
/fill-range/7.0.1:
|
||||||
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
|
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
@ -1060,7 +1072,7 @@ packages:
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/methods/1.1.2:
|
/methods/1.1.2:
|
||||||
resolution: {integrity: sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=}
|
resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
|
||||||
engines: {node: '>= 0.6'}
|
engines: {node: '>= 0.6'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
@ -1695,7 +1707,7 @@ packages:
|
||||||
node-gyp-build: 4.3.0
|
node-gyp-build: 4.3.0
|
||||||
|
|
||||||
/util-deprecate/1.0.2:
|
/util-deprecate/1.0.2:
|
||||||
resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
|
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/utils-merge/1.0.1:
|
/utils-merge/1.0.1:
|
||||||
|
|
Loading…
Reference in New Issue