diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..3ccf435 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], + plugins: ['svelte3', '@typescript-eslint'], + ignorePatterns: ['*.cjs'], + overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], + settings: { + 'svelte3/typescript': () => require('typescript') + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020 + }, + env: { + browser: true, + es2017: true, + node: true + } +}; diff --git a/.gitignore b/.gitignore index 6c7f6d0..a983f59 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,11 @@ -/.direnv -/.helix \ No newline at end of file +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* +/.direnv \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a77fdde --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c36ff6a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "svelte.enable-ts-plugin": true, + "editor.tabSize": 2 +} \ No newline at end of file diff --git a/README.md b/README.md index f605bd9..5c91169 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,38 @@ -# fresh project +# create-svelte -### Usage +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). -Start the project: +## Creating a project -``` -deno task start +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app ``` -This will watch the project directory and restart as necessary. +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/components/Button.tsx b/components/Button.tsx deleted file mode 100644 index 5791edf..0000000 --- a/components/Button.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { JSX } from "preact"; - -export default function Button(props: JSX.HTMLAttributes) { - return ( - - - - - - ); -} diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..e447f71 --- /dev/null +++ b/src/app.css @@ -0,0 +1,2 @@ +html, body { @apply h-full overflow-hidden; } +.card { @apply shadow shadow-black; } \ No newline at end of file diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..f59b884 --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..db6afd2 --- /dev/null +++ b/src/app.html @@ -0,0 +1,15 @@ + + + + + + + + %sveltekit.head% + + + +
%sveltekit.body%
+ + + \ No newline at end of file diff --git a/src/comms.ts b/src/comms.ts new file mode 100644 index 0000000..9fa34bd --- /dev/null +++ b/src/comms.ts @@ -0,0 +1,169 @@ +import type { TrackWithId } from "./types"; + +const API_VERSION: number = 20; +const HTTP_DISABLED_ERROR: string = + "server does not have HTTP resources enabled, you will not be able to stream music"; +const SERVER_API_INCOMPATIBLE_ERROR: (serverApi: number) => string = + (serverApi) => `server API version (${serverApi}) is different from our supported version (${API_VERSION})`; + +interface Message { + name: string; + id: string; + device_id: string; + type: MessageType; + options: any; +}; +type MessageType = 'request' | 'response' | 'broadcast'; +type RequestCallback = (arg0: Message | null) => void; + +interface Callbacks { + onDisconnect: (authenticated: boolean, reason: string) => void; + onConnect: (initial: Message) => void; + onIncompatible: (reason: string) => void; +} + +export class MetadataCommunicator { + ws: WebSocket | null; + deviceId: string; + callbacks: Map; + authenticated: boolean; + eventCallbacks: Callbacks; + onConnectCallbacks: (() => void)[]; + + constructor() { + this.callbacks = new Map(); + this.deviceId = crypto.randomUUID(); + this.authenticated = false; + this.eventCallbacks = { + onDisconnect: () => { }, + onConnect: () => { }, + onIncompatible: () => { }, + }; + this.onConnectCallbacks = []; + this.ws = null; + } + + setCallbacks(callbacks: Callbacks) { + this.eventCallbacks = callbacks; + } + + connect(address: string, password: string) { + this.close(); + + this.ws = new WebSocket(`ws://${address}`); + + this.ws.addEventListener('open', (event) => { + this.makeRequest("authenticate", 'request', { password }, (msg) => { + if (msg!.options.authenticated) { + this.authenticated = true; + this.eventCallbacks.onConnect(msg!); + this.onConnectCallbacks.forEach((f) => f()); + this.onConnectCallbacks = []; + if (!msg!.options.environment.http_server_enabled) { + this.eventCallbacks.onIncompatible(HTTP_DISABLED_ERROR); + } + const serverApiVersion = msg!.options.environment.api_version; + if (serverApiVersion != API_VERSION) { + this.eventCallbacks.onIncompatible(SERVER_API_INCOMPATIBLE_ERROR(serverApiVersion)); + } + } + }); + }); + this.ws.addEventListener('close', (event) => { + this.eventCallbacks.onDisconnect(this.authenticated, `${event.reason} (code ${event.code})`); + this.authenticated = false; + }); + + this.ws.addEventListener('message', (event) => { + const parsed: Message = JSON.parse(event.data); + const maybeCallback = this.callbacks.get(parsed.id); + if (maybeCallback) { + maybeCallback(parsed); + this.callbacks.delete(parsed.id); + } + }); + } + + fetchTracksCount(): Promise { + const options = { count_only: true }; + const th = this; + return new Promise(function (resolve, reject) { + th.makeRequest("query_tracks", "request", options, (resp) => { + if (resp) { + resolve(resp.options.count); + } else { + reject(null); + } + }); + }); + } + + fetchTracks(limit: number, offset: number, filter: string | null = null): Promise { + const options: any = { limit, offset }; + if (filter !== null) options.filter = filter; + + const th = this; + return new Promise(function (resolve, reject) { + th.makeRequest("query_tracks", "request", options, (resp) => { + if (resp) { + const data: any[] = resp.options.data; + resolve(data.map((t) => ({ + id: t.id, + track: { + title: t.title, + album_id: t.album_id, + artist_id: t.artist_id, + track_num: t.track, + thumbnail_id: t.thumbnail_id, + } + }))); + } else { + reject(null); + } + }); + }); + } + + private makeRequest(name: string, type: MessageType, options: object, callback: RequestCallback) { + // return if not authenticated, allow authentication messages + if (this.isClosed() || !this.authenticated && name != "authenticate") { + callback(null); + return; + } + // Unique enough for our purposes (as request ID) + const id = Math.random().toString(36).substring(2) + Date.now().toString(36); + this.callbacks.set(id, callback); + const payload = JSON.stringify({ + name, + type, + options, + device_id: this.deviceId, + id, + }); + console.trace("sending metadata message: " + payload); + this.ws!.send(payload); + } + + close() { + if (this.isClosed()) return; + this.ws!.close(); + this.authenticated = false; + this.callbacks.clear(); + } + + isClosed() { + return ( + this.ws === null + || this.ws.readyState === WebSocket.CLOSED + || this.ws.readyState === WebSocket.CLOSING + ); + } + + onConnect(cb: () => void) { + if (!this.isClosed() && this.authenticated) { + cb(); + } else { + this.onConnectCallbacks = [...this.onConnectCallbacks, cb]; + } + } +} \ No newline at end of file diff --git a/src/components/a.svelte b/src/components/a.svelte new file mode 100644 index 0000000..6fb429b --- /dev/null +++ b/src/components/a.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte new file mode 100644 index 0000000..cced898 --- /dev/null +++ b/src/components/navbar.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/components/track.svelte b/src/components/track.svelte new file mode 100644 index 0000000..81dd3d7 --- /dev/null +++ b/src/components/track.svelte @@ -0,0 +1,20 @@ + + +
+ +
+ (ev.target.style.display = 'none')} + /> +
+ {track.track_num} - {track.title} +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..f2f867d --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,81 @@ + + + + musikspider + + + + +
+
+
+
+
+ now playing +
+
volume
+
+
+ + + + diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts new file mode 100644 index 0000000..1f52450 --- /dev/null +++ b/src/routes/+layout.ts @@ -0,0 +1,6 @@ +import { MetadataCommunicator } from "../comms"; + +export const ssr = false; +export const prerender = false; + +export const _metadataComm = new MetadataCommunicator(); \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..b4a1725 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,14 @@ + + + +
+ +
+ diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte new file mode 100644 index 0000000..b81c0b1 --- /dev/null +++ b/src/routes/settings/+page.svelte @@ -0,0 +1,18 @@ + + +
+
+

server settings

+ + + +
+
diff --git a/src/routes/settings/input.svelte b/src/routes/settings/input.svelte new file mode 100644 index 0000000..f937fcf --- /dev/null +++ b/src/routes/settings/input.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/stores.ts b/src/stores.ts new file mode 100644 index 0000000..95e1e24 --- /dev/null +++ b/src/stores.ts @@ -0,0 +1,14 @@ +import { writable } from 'svelte/store'; +import type { ResourceId, Track } from './types'; + +function writableStorage(key: string, defaultValue: string) { + const store = writable(localStorage.getItem(key) ?? defaultValue); + store.subscribe(value => localStorage.setItem(key, value)); + return store; +} + +export const address = writableStorage("address", "127.0.0.1:5505"); +export const token = writableStorage("token", ""); + +export const tracks = writable>(new Map()); +export const tracksSorted = writable>(new Map()); \ No newline at end of file diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..3d3f88e --- /dev/null +++ b/src/types.ts @@ -0,0 +1,24 @@ +export type ResourceId = bigint; + +export interface Track { + title: string, + track_num: number, + album_id: ResourceId, + artist_id: ResourceId, + thumbnail_id: ResourceId, +} + +export interface TrackWithId { + id: ResourceId, + track: Track, +} + +export interface Artist { + name: string, +} + +export interface Album { + title: string, + artist_id: ResourceId, + thumbnail_id: ResourceId, +} \ No newline at end of file diff --git a/static/favicon.ico b/static/favicon.ico deleted file mode 100644 index 1cfaaa2..0000000 Binary files a/static/favicon.ico and /dev/null differ diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..825b9e6 Binary files /dev/null and b/static/favicon.png differ diff --git a/static/logo.svg b/static/logo.svg deleted file mode 100644 index ef2fbe4..0000000 --- a/static/logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..00fd635 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,13 @@ +import adapter from '@sveltejs/adapter-static'; +import { vitePreprocess } from '@sveltejs/kit/vite'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: vitePreprocess(), + + kit: { + adapter: adapter() + } +}; + +export default config; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..0380caa --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,17 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + './src/**/*.{html,js,svelte,ts}', + require('path').join(require.resolve( + '@skeletonlabs/skeleton'), + '../**/*.{html,js,svelte,ts}' + ), + ], + theme: { + extend: {}, + }, + plugins: [ + ...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() + ], + darkMode: 'class', +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6ae0c8c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/twind.config.ts b/twind.config.ts deleted file mode 100644 index 2a7ac27..0000000 --- a/twind.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Options } from "$fresh/plugins/twind.ts"; - -export default { - selfURL: import.meta.url, -} as Options; diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..bbf8c7d --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,6 @@ +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [sveltekit()] +});