dusk/musikspider
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dont copy scheme in share

Browse Source
This commit is contained in:
dusk 2023-05-09 17:32:21 +03:00
parent 9a0d05df94
commit 54ddf32e21
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA
16 changed files with 397 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
postcss.config.js
View File

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };

2
src/app.d.ts vendored
View File

@ -11,4 +11,4 @@ declare global {
} }
} }
export { }; export {};

10
src/app.html
View File

@ -1,15 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="dark" lang="en"> <html class="dark" lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="crimson"> <body data-sveltekit-preload-data="hover" data-theme="crimson">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body> </body>
</html> </html>

9
src/app.postcss
View File

@ -1,2 +1,7 @@
html, body { @apply h-full overflow-hidden; } html,
.card { @apply shadow shadow-black; } body {
@apply h-full overflow-hidden;
}
.card {
@apply shadow shadow-black;
}

44
src/comms.ts
View File

@ -1,11 +1,11 @@
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import type { TrackWithId } from "./types"; import type { TrackWithId } from './types';
const API_VERSION: number = 20; const API_VERSION: number = 20;
const HTTP_DISABLED_ERROR: string = const HTTP_DISABLED_ERROR: string =
"server does not have HTTP resources enabled, you will not be able to stream music"; 'server does not have HTTP resources enabled, you will not be able to stream music';
const SERVER_API_INCOMPATIBLE_ERROR: (serverApi: number) => string = const SERVER_API_INCOMPATIBLE_ERROR: (serverApi: number) => string = (serverApi) =>
(serverApi) => `server API version (${serverApi}) is different from our supported version (${API_VERSION})`; `server API version (${serverApi}) is different from our supported version (${API_VERSION})`;
interface Message { interface Message {
name: string; name: string;
@ -13,7 +13,7 @@ interface Message {
device_id: string; device_id: string;
type: MessageType; type: MessageType;
options: any; options: any;
}; }
type MessageType = 'request' | 'response' | 'broadcast'; type MessageType = 'request' | 'response' | 'broadcast';
type RequestCallback = (arg0: Message | null) => void; type RequestCallback = (arg0: Message | null) => void;
@ -36,9 +36,9 @@ export class MetadataCommunicator {
this.deviceId = crypto.randomUUID(); this.deviceId = crypto.randomUUID();
this.authenticated = false; this.authenticated = false;
this.eventCallbacks = { this.eventCallbacks = {
onDisconnect: () => { }, onDisconnect: () => {},
onConnect: () => { }, onConnect: () => {},
onIncompatible: () => { }, onIncompatible: () => {}
}; };
this.onConnectCallbacks = []; this.onConnectCallbacks = [];
this.ws = null; this.ws = null;
@ -51,11 +51,11 @@ export class MetadataCommunicator {
connect(address: string, password: string) { connect(address: string, password: string) {
this.close(); this.close();
const scheme = dev ? "ws" : "wss"; const scheme = dev ? 'ws' : 'wss';
this.ws = new WebSocket(`${scheme}://${address}`); this.ws = new WebSocket(`${scheme}://${address}`);
this.ws.addEventListener('open', (event) => { this.ws.addEventListener('open', (event) => {
this.makeRequest("authenticate", 'request', { password }, (msg) => { this.makeRequest('authenticate', 'request', { password }, (msg) => {
if (msg!.options.authenticated) { if (msg!.options.authenticated) {
this.authenticated = true; this.authenticated = true;
this.eventCallbacks.onConnect(msg!); this.eventCallbacks.onConnect(msg!);
@ -90,7 +90,7 @@ export class MetadataCommunicator {
const options = { count_only: true }; const options = { count_only: true };
const th = this; const th = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
th.makeRequest("query_tracks", "request", options, (resp) => { th.makeRequest('query_tracks', 'request', options, (resp) => {
if (resp) { if (resp) {
resolve(resp.options.count); resolve(resp.options.count);
} else { } else {
@ -106,10 +106,11 @@ export class MetadataCommunicator {
const th = this; const th = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
th.makeRequest("query_tracks", "request", options, (resp) => { th.makeRequest('query_tracks', 'request', options, (resp) => {
if (resp) { if (resp) {
const data: any[] = resp.options.data; const data: any[] = resp.options.data;
resolve(data.map((t) => ({ resolve(
data.map((t) => ({
id: t.external_id, id: t.external_id,
track: { track: {
id: t.id, id: t.id,
@ -119,9 +120,10 @@ export class MetadataCommunicator {
album_id: t.album_id, album_id: t.album_id,
artist_name: t.artist, artist_name: t.artist,
artist_id: t.artist_id, artist_id: t.artist_id,
thumbnail_id: t.thumbnail_id, thumbnail_id: t.thumbnail_id
} }
}))); }))
);
} else { } else {
reject(null); reject(null);
} }
@ -131,7 +133,7 @@ export class MetadataCommunicator {
private makeRequest(name: string, type: MessageType, options: object, callback: RequestCallback) { private makeRequest(name: string, type: MessageType, options: object, callback: RequestCallback) {
// return if not authenticated, allow authentication messages // return if not authenticated, allow authentication messages
if (this.isClosed() || !this.authenticated && name != "authenticate") { if (this.isClosed() || (!this.authenticated && name != 'authenticate')) {
callback(null); callback(null);
return; return;
} }
@ -143,9 +145,9 @@ export class MetadataCommunicator {
type, type,
options, options,
device_id: this.deviceId, device_id: this.deviceId,
id, id
}); });
console.trace("sending metadata message: " + payload); console.trace('sending metadata message: ' + payload);
this.ws!.send(payload); this.ws!.send(payload);
} }
@ -158,9 +160,9 @@ export class MetadataCommunicator {
isClosed() { isClosed() {
return ( return (
this.ws === null this.ws === null ||
|| this.ws.readyState === WebSocket.CLOSED this.ws.readyState === WebSocket.CLOSED ||
|| this.ws.readyState === WebSocket.CLOSING this.ws.readyState === WebSocket.CLOSING
); );
} }

5
src/components/track.svelte
View File

@ -4,14 +4,13 @@
makeThumbnailUrl, makeThumbnailUrl,
currentTrack, currentTrack,
setQueuePositionTo, setQueuePositionTo,
makeGenScopedTokenUrl, makeGenScopedTokenUrl
makeShareUrl
} from '../stores'; } from '../stores';
import Spinnny from '~icons/line-md/loading-loop'; import Spinnny from '~icons/line-md/loading-loop';
import IconPlay from '~icons/mdi/play'; import IconPlay from '~icons/mdi/play';
import IconMusic from '~icons/mdi/music'; import IconMusic from '~icons/mdi/music';
import { toastStore } from '@skeletonlabs/skeleton'; import { toastStore } from '@skeletonlabs/skeleton';
import { getAudioElement } from '../utils'; import { getAudioElement, makeShareUrl } from '../utils';
export let track_with_id: TrackWithId; export let track_with_id: TrackWithId;
let track = track_with_id.track; let track = track_with_id.track;

2
src/routes/(app)/+layout.ts
View File

@ -1,4 +1,4 @@
import { MetadataCommunicator } from "../../comms"; import { MetadataCommunicator } from '../../comms';
export const _metadataComm = new MetadataCommunicator(); export const _metadataComm = new MetadataCommunicator();
export const ssr = false; export const ssr = false;

8
src/routes/share/[token]/+page.server.ts
View File

@ -3,9 +3,9 @@ import { LOCAL_MUSIKQUAD_SERVER } from '$env/static/private';
import { scheme } from '../../../utils'; import { scheme } from '../../../utils';
interface MusicInfo { interface MusicInfo {
title: string, title: string;
album: string, album: string;
artist: string, artist: string;
} }
export async function load({ params }) { export async function load({ params }) {
@ -14,6 +14,6 @@ export async function load({ params }) {
return { return {
info, info,
thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${params.token}`, thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${params.token}`,
audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${params.token}`, audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${params.token}`
}; };
} }

31
src/stores.ts
View File

@ -1,17 +1,17 @@
import { get, writable } from 'svelte/store'; import { get, writable } from 'svelte/store';
import { type Track, type TrackId, type TrackWithId, LoopKind } from './types'; import { type Track, type TrackId, type TrackWithId, LoopKind } from './types';
import { PUBLIC_BASEURL, PUBLIC_MUSIKQUAD_SERVER } from '$env/static/public'; import { PUBLIC_MUSIKQUAD_SERVER } from '$env/static/public';
import { scheme } from './utils'; import { scheme } from './utils';
function writableStorage(key: string, defaultValue: string) { function writableStorage(key: string, defaultValue: string) {
const store = writable(localStorage.getItem(key) ?? defaultValue); const store = writable(localStorage.getItem(key) ?? defaultValue);
store.subscribe(value => localStorage.setItem(key, value)); store.subscribe((value) => localStorage.setItem(key, value));
return store; return store;
} }
export const address = writableStorage("address", PUBLIC_MUSIKQUAD_SERVER); export const address = writableStorage('address', PUBLIC_MUSIKQUAD_SERVER);
export const token = writableStorage("token", ""); export const token = writableStorage('token', '');
export function makeThumbnailUrl(id: number) { export function makeThumbnailUrl(id: number) {
if (id === 0) { if (id === 0) {
@ -28,13 +28,13 @@ export function makeGenScopedTokenUrl(id: TrackId) {
return `${scheme}://${get(address)}/share/generate/${id}?token=${get(token)}`; return `${scheme}://${get(address)}/share/generate/${id}?token=${get(token)}`;
} }
export function makeShareUrl(token: string) {
return `${scheme}://${PUBLIC_BASEURL}/share/${token}`;
}
export const currentTrack = writable<TrackWithId | null>(null); export const currentTrack = writable<TrackWithId | null>(null);
export function getCurrentTrack(tracks: Map<TrackId, Track>, queue: TrackId[], position: number | null): TrackWithId | null { export function getCurrentTrack(
tracks: Map<TrackId, Track>,
queue: TrackId[],
position: number | null
): TrackWithId | null {
if (position === null) { if (position === null) {
return null; return null;
} }
@ -48,7 +48,7 @@ export function getCurrentTrack(tracks: Map<TrackId, Track>, queue: TrackId[], p
} }
return { return {
track, track,
id, id
}; };
} }
@ -58,7 +58,9 @@ export const tracks = writable<Map<TrackId, Track>>(new Map());
export const tracksSorted = writable<TrackId[]>([]); export const tracksSorted = writable<TrackId[]>([]);
queuePosition.subscribe((pos) => currentTrack.set(getCurrentTrack(get(tracks), get(queue), pos))); queuePosition.subscribe((pos) => currentTrack.set(getCurrentTrack(get(tracks), get(queue), pos)));
tracks.subscribe((newTracks) => currentTrack.set(getCurrentTrack(newTracks, get(queue), get(queuePosition)))); tracks.subscribe((newTracks) =>
currentTrack.set(getCurrentTrack(newTracks, get(queue), get(queuePosition)))
);
export function setQueuePositionTo(track_id: TrackId) { export function setQueuePositionTo(track_id: TrackId) {
let q = get(queue); let q = get(queue);
@ -78,7 +80,8 @@ export function getPrevQueuePosition(respectLoop: boolean) {
const q = get(queue); const q = get(queue);
const l = get(loop); const l = get(loop);
const _newPos = pos - 1; const _newPos = pos - 1;
const newPos = _newPos > -1 ? _newPos : l === LoopKind.Once || !respectLoop ? q.length - 1 : null; const newPos =
_newPos > -1 ? _newPos : l === LoopKind.Once || !respectLoop ? q.length - 1 : null;
return newPos; return newPos;
} }
return null; return null;
@ -123,7 +126,7 @@ export function changeLoop() {
} }
} }
export const searchText = writable<string>(""); export const searchText = writable<string>('');
export function search(q: string) { export function search(q: string) {
const query = q.trim(); const query = q.trim();
@ -131,7 +134,7 @@ export function search(q: string) {
if (query.length === 0) { if (query.length === 0) {
let result: TrackId[] = []; let result: TrackId[] = [];
t.forEach((_, id) => (result.push(id))); t.forEach((_, id) => result.push(id));
tracksSorted.set(result); tracksSorted.set(result);
return; return;
} }

28
src/types.ts
View File

@ -2,32 +2,32 @@ export type ResourceId = bigint;
export type TrackId = string; export type TrackId = string;
export interface Track { export interface Track {
id: number, id: number;
title: string, title: string;
track_num: number, track_num: number;
album_title: string, album_title: string;
album_id: ResourceId, album_id: ResourceId;
artist_name: string, artist_name: string;
artist_id: ResourceId, artist_id: ResourceId;
thumbnail_id: number, thumbnail_id: number;
} }
export interface TrackWithId { export interface TrackWithId {
id: TrackId, id: TrackId;
track: Track, track: Track;
} }
export interface Artist { export interface Artist {
name: string, name: string;
} }
export interface Album { export interface Album {
title: string, title: string;
artist_id: ResourceId, artist_id: ResourceId;
} }
export enum LoopKind { export enum LoopKind {
Off, Off,
Once, Once,
Always, Always
} }

27
src/utils.ts
View File

@ -1,6 +1,11 @@
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { PUBLIC_BASEURL } from '$env/static/public';
export const scheme = dev ? "http" : "https"; export const scheme = dev ? 'http' : 'https';
export function makeShareUrl(token: string) {
return `${PUBLIC_BASEURL}/share/${token}`;
}
export function getAudioElement() { export function getAudioElement() {
const elem = document.getElementById('audio-source'); const elem = document.getElementById('audio-source');
@ -21,22 +26,30 @@ export function calculateMinuteSecond(seconds: number) {
return `${minutesFormatted}:${secondsFormatted}`; return `${minutesFormatted}:${secondsFormatted}`;
} }
export function interceptKeys(extraActions: [string, () => void][] = []): (event: KeyboardEvent) => void { export function interceptKeys(
extraActions: [string, () => void][] = []
): (event: KeyboardEvent) => void {
return (event) => { return (event) => {
const tagName = document.activeElement?.tagName ?? ''; const tagName = document.activeElement?.tagName ?? '';
const audio = getAudioElement(); const audio = getAudioElement();
const actions = new Map([ const actions = new Map([
...extraActions, ...extraActions,
['Space', () => { [
'Space',
() => {
if (audio !== null) { if (audio !== null) {
audio.paused ? audio.play() : audio.pause(); audio.paused ? audio.play() : audio.pause();
} }
}], }
['KeyM', () => { ],
[
'KeyM',
() => {
if (audio !== null) { if (audio !== null) {
audio.muted = !audio.muted; audio.muted = !audio.muted;
} }
}], }
],
[ [
'ArrowLeft', 'ArrowLeft',
() => { () => {
@ -63,5 +76,5 @@ export function interceptKeys(extraActions: [string, () => void][] = []): (event
action(); action();
} }
} }
} };
} }

15
tailwind.config.js
View File

@ -2,16 +2,11 @@
export default { export default {
content: [ content: [
'./src/**/*.{html,js,svelte,ts}', './src/**/*.{html,js,svelte,ts}',
require('path').join(require.resolve( require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
),
], ],
theme: { theme: {
extend: {}, extend: {}
}, },
plugins: [ plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() darkMode: 'class'
], };
darkMode: 'class',
}

4
vite.config.ts
View File

@ -1,12 +1,12 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite' import Icons from 'unplugin-icons/vite';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
sveltekit(), sveltekit(),
Icons({ Icons({
compiler: 'svelte', compiler: 'svelte'
}) })
] ]
}); });