ambient-display 1.1.0

package/server/types/data.js

@@ -0,0 +1,94 @@
+/**
+ * @typedef {object} SpotifyImageItem
+ * @property {string} url
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {object} ApiImageDict
+ * @property {SpotifyImageItem} full
+ * @property {SpotifyImageItem} low
+ */
+
+/**
+ * @typedef {object} ApiNormalisedItem
+ * @property {string} id
+ * @property {string} title
+ * @property {string} subtitle
+ * @property {string} uri
+ * @property {ApiImageDict} image
+ */
+
+/**
+ * @typedef {object} ApiTrackItem
+ * @property {string} title
+ * @property {string} album
+ * @property {string} artist
+ * @property {string[]} artists
+ * @property {number} number
+ */
+
+/**
+ * @typedef {object} ApiPlaylistItem
+ * @property {string} title
+ * @property {string} owner
+ * @property {number} total
+ */
+
+/**
+ * @typedef {object} ApiArtistItem
+ * @property {string} title
+ */
+
+/**
+ * @typedef {object} ApiAlbumItem
+ * @property {string} title
+ * @property {string} release
+ * @property {number} total
+ */
+
+/**
+ * @typedef {object} ApiEpisodeItem
+ * @property {string} title
+ * @property {string} show
+ * @property {string} release
+ */
+
+/**
+ * @typedef {object} ApiShowItem
+ * @property {string} title
+ */
+
+/**
+ * @typedef {object} ApiStandardItem
+ * @property {string} id
+ * @property {string} uri
+ * @property {ApiImageDict} image
+ * @property {ApiNormalisedItem} normalised
+ */
+
+/**
+ * @typedef {(ApiTrackItem | ApiEpisodeItem) & ApiStandardItem} ApiTrack
+ */
+
+/**
+ * @typedef {{ type: "playlist"} & ApiPlaylistItem & ApiStandardItem | { type: "album"} & ApiAlbumItem & ApiStandardItem | { type: "artist"} & ApiArtistItem & ApiStandardItem | { type: "show"} & ApiShowItem & ApiStandardItem} ApiContext
+ */
+
+/**
+ * @typedef {object} ApiInfoResponse
+ * @property {boolean} isPlaying
+ * @property {ApiTrack} track
+ * @property {ApiContext} context
+ * @property {{ current: number, duration: number }} playing
+ *
+ */
+
+/**
+ * @typedef {object} ApiSearchResponse
+ * @property {ApiTrack[]} tracks
+ * @property {ApiTrack[]} artists
+ * @property {ApiTrack[]} albums
+ */
+
+export const Types = {};

package/server/types/index.js

@@ -0,0 +1,16 @@
+/**
+ * @typedef {object} SpotifyAccessToken
+ * @property {string} refresh_token
+ * @property {string} access_token
+ * @property {string} token_type
+ * @property {number} expires_in
+ * @property {string} scope
+ */
+
+/**
+ * @typedef {object} CommsItem
+ * @property {string} message
+ * @property {'info' | 'track' | 'error'} type
+ */
+
+export const Types = {};

package/server/types/options.js

@@ -0,0 +1,72 @@
+/**
+ * @typedef {object} ApiOptions
+ * @property {import('@spotify/web-api-ts-sdk').Market} market If you want to change the market in which many operations happen in
+ * @property {number} searchQueryLimit The max amount of tracks to return in any search request
+ * @property {boolean} centralisedPolling The server will poll for the spotify info, instead of all of the clients doing it, to reduce chance of rate limit
+ * @property {number} centralisedPollingTimer The interval for polling
+ * @property {boolean} canAdd Can add to the queue
+ * @property {boolean} canControl Can control the playback
+ */
+
+/**
+ * @typedef {object} SpotifyOptions
+ * @property {string} client_id
+ * @property {string} client_secret
+ * @property {string} routePrefix The prefixed sub route that the spotify mounting sits on
+ * @property {string} routeToken The route in which spotify redirects to do the exchange of code for access token
+ * @property {string} authenticatedRedirect The route to redirect to after the app is authenticated
+ * @property {string} accessTokenJsonLocation The path to save the access token file, for caching
+ * @property {string[]} scope The scope
+ *
+ */
+
+/**
+ * @typedef {object} PluginItemInject
+ * @property {import('socket.io').Server} io
+ * @property {import('./comms.js').Comms} comms
+ * @property {import('express').Express} app
+ * @property {import('../events').AppEventEmitter} events
+ * @property {{current: null | import('@spotify/web-api-ts-sdk').SpotifyApi}} sdk
+ * @property {import('../api/interact.js').SpotifyInteract} spotify
+ * @property {SpotifyAmbientDisplayOptions} config
+ * @property {import('../history.js').CommandHistory} history
+ * @property {{ url: string, player: string }} info
+ *
+ */
+
+/**
+ * @typedef {object} PluginItem
+ * @property {boolean} [skip] Whether or not to skip mounting this plugin. Useful for dev/prod switch
+ * @property {string} [name] Plugin name, useful for internals
+ * @property {(inject: PluginItemInject) => void} handler
+ */
+
+/**
+ * @typedef {object} SpotifyAmbientDisplayOptions
+ * @property {number} port The root url of the app, used for the redirect_uri passed to spotify
+ * @property {string} origin
+ * @property {string} protocol
+ * @property {string} playerRoute
+ * @property {boolean} verbose
+ * @property {ApiOptions} api
+ * @property {SpotifyOptions} spotify
+ * @property {Record<string, any>} pluginOptions
+ * @property {string[]} suppressErrors Any error events to catch and not send to the frontend, because perhaps a plugin will handle them
+ */
+
+/**
+ * @typedef {object} Config
+ * @property {number} [port]
+ * @property {string} [origin]
+ * @property {string} [protocol]
+ * @property {string} [playerRoute]
+ * @property {boolean} [verbose]
+ * @property {Partial<ApiOptions>} [api]
+ * @property {Partial<SpotifyOptions>} [spotify]
+ * @property {PluginItem[]} [plugins]
+ * @property {Record<string, any>} [pluginOptions]
+ * @property {string[]} [suppressErrors] Any error events to catch and not send to the frontend, because perhaps a plugin will handle them
+ *
+ */
+
+export const Types = {};

package/server/utils.js

@@ -0,0 +1,101 @@
+import os from 'node:os';
+import { fileURLToPath } from 'node:url';
+
+/**
+ *
+ * @param {string} url
+ * @returns
+ */
+export const __dirname = (url) => {
+	return fileURLToPath(new URL('.', url));
+};
+
+const timer = (time) => {
+	return new Promise((resolve) => setTimeout(resolve, time));
+};
+
+/**
+ *
+ * @param {() => Promise<any>} asyncInteralFunc
+ * @param {number} rate
+ * @returns
+ */
+export const asyncInterval = (asyncInteralFunc, rate) => {
+	/** @type {undefined | ReturnType<typeof setTimeout>} */
+	let timerId;
+
+	const run = async () => {
+		await asyncInteralFunc();
+
+		timerId = setTimeout(run, rate);
+	};
+
+	run();
+
+	return () => {
+		clearTimeout(timerId);
+	};
+};
+
+export const getIp = () => {
+	const [item] = Object.values(os.networkInterfaces())
+		.flat()
+		.filter((item) => item && item.family === 'IPv4' && !item.internal);
+	return item?.address;
+};
+
+/**
+ *
+ * @param {string} url
+ */
+export const isMain = (url) => {
+	const runner = !process.argv[1].endsWith('.js')
+		? [process.argv[1], 'index.js'].join('/')
+		: process.argv[1];
+
+	return runner === fileURLToPath(url);
+};
+
+/**
+ *
+ * @param {() => void} catchAndRetryFunc
+ * @param {{ times?: number, validateError?: () => boolean, backoff?: number}} opts
+ */
+export const catchAndRetry = async (
+	catchAndRetryFunc,
+	{ times = 10, validateError = () => true, backoff = 1000 } = {}
+) => {
+	return new Promise((resolve, reject) => {
+		const run = async (retry = 0) => {
+			try {
+				const resp = await catchAndRetryFunc();
+				resolve(resp);
+			} catch (e) {
+				if (validateError(e) && retry < times) {
+					await timer(backoff);
+					run(retry + 1);
+				} else {
+					reject(e);
+				}
+			}
+		};
+
+		run();
+	});
+};
+
+/**
+ *
+ * @param {string} filePath
+ */
+export const expandAliases = (filePath) => {
+	if (filePath.startsWith('~')) {
+		return os.homedir() + filePath.slice(0);
+	}
+
+	if (filePath.startsWith('$HOME')) {
+		return os.homedir() + filePath.slice('$HOME'.length);
+	}
+
+	return filePath;
+};

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/actions/qr.svelte.js

@@ -0,0 +1,23 @@
+import QRCode from 'qrcode-svg';
+
+export const qr = (node, { url, ...rest }) => {
+	// the node has been mounted in the DOM
+
+	$effect(() => {
+		var svg = new QRCode({
+			color: 'currentColor',
+			background: 'transparent',
+			padding: 0,
+			join: true,
+			container: 'svg-viewbox',
+			...rest,
+			content: url
+		}).svg();
+
+		node.innerHTML = svg;
+
+		return () => {
+			node.innerHTML = '';
+		};
+	});
+};

package/src/lib/comms.js

@@ -0,0 +1,25 @@
+import { io, Socket } from 'socket.io-client';
+import { derived } from 'svelte/store';
+import { address, settled } from './store';
+
+/** */
+const previous = {
+	/** @type {Socket | null} */
+	current: null
+};
+
+export const socket = derived([address, settled], ([$address, $settled]) => {
+	if (!$settled) {
+		return null;
+	}
+
+	const i = io($address.endpoint);
+
+	if (previous.current) {
+		previous.current.disconnect();
+	}
+
+	previous.current = i;
+
+	return i;
+});

package/src/lib/components/AuthenticateTrigger.svelte

@@ -0,0 +1,74 @@
+<script>
+	import { qr } from '$lib/actions/qr.svelte';
+	import { address } from '$lib/store';
+</script>
+
+<div class="content">
+	<div class="options">
+		<div class="options-left">
+			<h1>This instance is not authenticated</h1>
+			<p>
+				{$address.server('/spotify/start')}
+				<a href={$address.server('/spotify/start')}>Authenticate</a> or scan qr to authenticate via device
+			</p>
+		</div>
+		<div class="options-right">
+			<span class="qr" use:qr={{ url: $address.server('/spotify/start') }}></span>
+		</div>
+		<div class="options-bottom">
+			<p class="size-small-1 color-2">
+				Make sure that <em>{$address.server('/spotify/token')}</em> is added as a Redirect URI in your
+				spotify app dashboard
+			</p>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.content {
+		position: absolute;
+
+		top: 50%;
+		left: 50%;
+
+		width: calc(100% - (var(--spacing-large) * 2));
+		max-width: 500px;
+		padding: var(--spacing-large);
+
+		transform: translate3d(-50%, -50%, 0);
+
+		background-color: var(--color-3);
+		color: var(--color-1);
+
+		border-radius: var(--border-radius-large);
+
+		p {
+			margin: 0.5em 0;
+			max-width: 65%;
+		}
+
+		.qr {
+			display: block;
+		}
+	}
+
+	.options {
+		display: grid;
+
+		grid-template-columns: 1fr 100px;
+		gap: var(--spacing-normal);
+
+		&-bottom {
+			grid-column: 1 / -1;
+
+			p {
+				margin: 0;
+
+				em {
+					color: vaR(--color-1);
+					font-style: normal;
+				}
+			}
+		}
+	}
+</style>

package/src/lib/components/Controls.svelte

@@ -0,0 +1,91 @@
+<script>
+	import { Pause, Play, PlaySkipBack, PlaySkipForward } from 'svelte-ionicons';
+	import { api } from '$lib/store';
+
+	const { playing = false, title, onTrigger = () => {}, canControl = true } = $props();
+
+	/**
+	 * A variable to create the illusion of immediate feedback
+	 *
+	 * @type {boolean | null}
+	 */
+	let eagerToggle = $state(null);
+
+	let playDisplay = $derived(eagerToggle ?? playing);
+
+	async function onSkipBackward() {
+		await $api.skipBackward();
+		onTrigger();
+	}
+
+	async function onPlay() {
+		eagerToggle = true;
+		await $api.play();
+		onTrigger();
+	}
+
+	async function onPause() {
+		eagerToggle = false;
+		await $api.pause();
+		onTrigger();
+	}
+
+	async function onSkipForward() {
+		await $api.skipForward();
+		onTrigger();
+	}
+
+	$effect(() => {
+		if (typeof playing === 'boolean') {
+			eagerToggle = null;
+		}
+	});
+</script>
+
+<div class="controls color-1">
+	<div class="controls-top ellipsis">{title}</div>
+
+	{#if canControl}
+		<div class="controls-actions">
+			<button onclick={onSkipBackward} class="btn-reset">
+				<PlaySkipBack />
+			</button>
+			{#if playDisplay === true}
+				<button onclick={onPause} class="btn-reset">
+					<Pause />
+				</button>
+			{:else if playDisplay === false}
+				<button onclick={onPlay} class="btn-reset">
+					<Play />
+				</button>
+			{/if}
+			<button onclick={onSkipForward} class="btn-reset">
+				<PlaySkipForward />
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.controls {
+		display: flex;
+
+		flex-direction: column;
+		align-items: center;
+
+		gap: var(--spacing-normal);
+
+		width: 100%;
+		max-width: 400px;
+
+		&-top {
+			width: 100%;
+
+			text-align: center;
+		}
+
+		:global(svg) {
+			fill: currentColor;
+		}
+	}
+</style>

package/src/lib/components/ImageLoad.svelte

@@ -0,0 +1,79 @@
+<script>
+	const { full, low } = $props();
+
+	const LOAD_STATE = {
+		INITIAL: 0,
+		LOAD: 1,
+		FULL: 2,
+		COMPLETE: 3
+	};
+
+	let loadState = $state();
+
+	function onLowLoad() {
+		if (loadState === LOAD_STATE.INITIAL) {
+			loadState = LOAD_STATE.LOAD;
+		}
+	}
+
+	function onFullLoad() {
+		loadState = LOAD_STATE.FULL;
+	}
+
+	let mounted = $state(false);
+
+	$effect(() => {
+		mounted = true;
+	});
+</script>
+
+<span
+	class="image"
+	class:display={loadState === LOAD_STATE.FULL || loadState === LOAD_STATE.COMPLETE}
+>
+	{#if loadState !== LOAD_STATE.INITIAL && mounted}
+		<img
+			class="full"
+			src={full}
+			onload={onFullLoad}
+			alt=""
+			ontransitionend={() => (loadState = LOAD_STATE.COMPLETE)}
+		/>
+	{/if}
+
+	{#if loadState !== LOAD_STATE.COMPLETE}
+		<img class="low" src={low} onload={onLowLoad} alt="" />
+	{/if}
+</span>
+
+<style lang="scss">
+	.image {
+		display: inline-grid;
+
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+
+		line-height: 0;
+
+		width: 100%;
+		height: 100%;
+
+		img {
+			grid-column: 1;
+			grid-row: 1;
+		}
+	}
+
+	.full {
+		opacity: 0;
+
+		transition: {
+			duration: 0.5s;
+			property: opacity;
+		}
+
+		.display & {
+			opacity: 1;
+		}
+	}
+</style>

package/src/lib/components/LoadingIndicator.svelte

@@ -0,0 +1,75 @@
+<script>
+	const { floating = false } = $props();
+</script>
+
+<div class="loading" class:floating>
+	<div class="loading-icon"></div>
+	<div class="loading-icon"></div>
+	<div class="loading-icon"></div>
+</div>
+
+<style lang="scss">
+	@property --loading-size {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 16px;
+	}
+
+	.loading {
+		display: inline-grid;
+
+		aspect-ratio: 1;
+		align-items: center;
+		grid-template-columns: repeat(3, var(--loading-size));
+
+		padding: var(--loading-padding, var(--spacing-small));
+		gap: var(--loading-gap, var(--spacing-small));
+
+		background-color: var(--color-1);
+		border-radius: var(--border-radius-normal);
+
+		&.floating {
+			position: absolute;
+
+			top: 50%;
+			left: 50%;
+
+			transform: translate3d(-50%, -50%, 0);
+
+			z-index: 20;
+		}
+	}
+
+	.loading-icon {
+		background-color: var(--color-bg);
+
+		aspect-ratio: 1;
+
+		border-radius: 100%;
+
+		animation: {
+			name: BLOAT;
+			duration: 1.2s;
+			iteration-count: infinite;
+			timing-function: var(--easing);
+		}
+
+		@for $i from 1 through 3 {
+			&:nth-child(#{$i}) {
+				animation-delay: 0.15s * ($i - 1);
+			}
+		}
+	}
+
+	@keyframes BLOAT {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.2);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>