ambient-display 1.1.0

package/src/lib/components/MediaItem.svelte

@@ -0,0 +1,75 @@
+<script>
+	import ImageLoad from './ImageLoad.svelte';
+
+	const { id, image, title, subtitle, uri, action = null } = $props();
+</script>
+
+<div class="item" data-id={id} class:withAction={!!action}>
+	<div class="item-image">
+		<ImageLoad full={image.full.url} low={image.low.url} />
+	</div>
+
+	<div class="item-content">
+		<span class="item-content-title ellipsis">{title}</span>
+		<span class="item-content-subtitle ellipsis color-2">{subtitle}</span>
+	</div>
+
+	{#if action}
+		<div class="item-action">
+			{@render action()}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.item {
+		display: grid;
+
+		align-items: center;
+		grid-template-areas: 'image content';
+		grid-template-columns: var(--media-image, 64px) 1fr;
+		grid-template-rows: auto;
+		column-gap: var(--spacing-normal);
+		row-gap: var(--spacing-small);
+
+		&.withAction {
+			grid-template-areas:
+				'image content'
+				'image action';
+			grid-template-rows: 1fr auto;
+			align-items: flex-start;
+		}
+
+		&-image {
+			grid-area: image;
+
+			isolation: isolate;
+
+			overflow: hidden;
+			border-radius: var(--border-radius-normal);
+
+			line-height: 0;
+
+			align-self: flex-start;
+		}
+
+		&-content {
+			grid-area: content;
+
+			display: flex;
+
+			flex-direction: column;
+
+			min-width: 0;
+		}
+
+		&-content-title,
+		&-content-subtitle {
+			font-size: var(--media-font-size, var(--font-size-body-1));
+		}
+
+		&-action {
+			grid-area: action;
+		}
+	}
+</style>

package/src/lib/components/PlayingTracker.svelte

@@ -0,0 +1,94 @@
+<script>
+	import { socket } from '$lib/comms';
+	import { api } from '$lib/store';
+	import Vibrant from 'node-vibrant';
+	import * as DataTypes from '$server/types/data.js';
+
+	let {
+		playing = $bindable(null),
+		polling = false,
+		pollingTime = 5000,
+		activate = $bindable()
+	} = $props();
+
+	/** @type {{'--color-1'?: string,'--color-2'?: string,'--color-3'?: string,'--color-bg'?: string}} */
+	let palette = $state({});
+
+	$effect(() => {
+		Object.entries(palette).forEach(([prop, value]) => {
+			document.documentElement.style.setProperty(prop, value);
+		});
+	});
+
+	/**
+	 *
+	 * @param {string} image
+	 */
+	async function getPalette(image) {
+		const img = new Image();
+		img.crossOrigin = 'Anonymous';
+		img.src = image; // + '?not-from-cache-please';
+
+		const palette = await Vibrant.from(img).getPalette();
+
+		if (!palette) {
+			return {};
+		}
+
+		return {
+			'--color-1': palette.LightVibrant?.hex,
+			'--color-2': palette.DarkVibrant?.hex,
+			'--color-3': palette.Muted?.hex,
+			'--color-bg': palette.DarkMuted?.hex,
+			'--color-highlight': palette.Vibrant?.hex
+		};
+	}
+
+	/**
+	 *
+	 * @param {DataTypes.ApiInfoResponse} newData
+	 */
+	async function update(newData) {
+		if (newData?.track?.uri !== playing?.track?.uri) {
+			// is different
+
+			if (newData?.track?.normalised) {
+				palette = await getPalette(newData.track.normalised.image.low.url);
+			}
+		}
+
+		playing = newData;
+	}
+
+	async function getPlaying() {
+		const data = await $api.info();
+
+		update(data);
+	}
+
+	function automateLoop() {
+		const run = async () => {
+			await getPlaying();
+			int.current = window.setTimeout(run, pollingTime);
+		};
+		const int = { current: 0 };
+
+		run();
+
+		return () => {
+			clearTimeout(int.current);
+		};
+	}
+
+	$effect(() => {
+		if (polling) {
+			return automateLoop();
+		} else {
+			$socket?.on('info', (track) => {
+				update(track);
+			});
+		}
+
+		activate = getPlaying;
+	});
+</script>

package/src/lib/components/ResultsList.svelte

@@ -0,0 +1,80 @@
+<script>
+	import MediaItem from './MediaItem.svelte';
+	import * as DataTypes from '$server/types/data.js';
+
+	/**
+	 * @typedef {object} ResultsListProps
+	 * @property {boolean} [expanded]
+	 * @property {() => void} onActivate
+	 * @property {DataTypes.ApiTrack[]} items
+	 * @property {string} title
+	 * @property {import('svelte').Snippet<[DataTypes.ApiNormalisedItem]>} action
+	 */
+
+	/** @type {ResultsListProps} */
+	const { expanded = false, onActivate, items, title, action: ListItemAction } = $props();
+</script>
+
+<div class="results-list">
+	<button onclick={onActivate} class:active={expanded} class="btn-reset results-list-top"
+		>{title}</button
+	>
+	{#if expanded}
+		<div class="results-list-items">
+			{#each items as item}
+				<MediaItem {...item.normalised}>
+					{#snippet action()}
+						{@render ListItemAction(item.normalised)}
+					{/snippet}
+				</MediaItem>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.results-list {
+		display: grid;
+
+		grid-template-rows: auto 1fr;
+
+		flex: 1;
+		min-height: 0;
+
+		&:not(:last-child) .results-list-items {
+			border-bottom: 1px solid var(--color-1);
+		}
+
+		&-top {
+			padding: var(--spacing-normal);
+
+			border-bottom: 1px solid var(--color-1);
+
+			text-align: left;
+
+			&:not(.active):hover,
+			&:not(.active):focus-visible {
+				background-color: var(--color-2);
+			}
+
+			&.active {
+				background-color: var(--color-1);
+				color: var(--color-bg);
+			}
+		}
+
+		&-items {
+			padding: var(--spacing-normal);
+
+			overflow: auto;
+
+			min-height: 0;
+
+			display: flex;
+
+			flex-direction: column;
+
+			gap: var(--spacing-normal);
+		}
+	}
+</style>

package/src/lib/components/Toast/Item.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+
+	import { Disc, InformationCircle, Warning } from 'svelte-ionicons';
+
+	const { id, message, type = 'info', time = 2500, onEnd } = $props();
+
+	let timerId = $state(0);
+
+	$effect(() => {
+		return () => clearTimeout(timerId);
+	});
+
+	function startTimer() {
+		timerId = window.setTimeout(() => {
+			onEnd(id);
+		}, time);
+	}
+</script>
+
+<div in:fly={{ y: -50 }} out:fade onintroend={startTimer} class="item bg-color-3 color-bg">
+	<div class="item-icon">
+		{#if type === 'track'}
+			<Disc />
+		{/if}
+		{#if type === 'info'}
+			<InformationCircle />
+		{/if}
+		{#if type === 'error'}
+			<Warning />
+		{/if}
+	</div>
+
+	<div class="item-message size-small-2">
+		{@html message}
+	</div>
+</div>
+
+<style lang="scss">
+	.item {
+		display: grid;
+
+		grid-template-columns: 32px 1fr;
+
+		align-items: center;
+
+		gap: var(--spacing-small);
+
+		max-width: 250px;
+
+		padding: var(--spacing-small);
+		border-radius: var(--border-radius-normal);
+
+		&-icon {
+			line-height: 0;
+
+			:global(svg) {
+				fill: currentColor;
+			}
+		}
+
+		&-message {
+			padding-right: var(--spacing-normal);
+
+			:global(em) {
+				font-style: normal;
+				color: var(--color-bg);
+			}
+		}
+	}
+</style>

package/src/lib/components/Toast/Manager.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { toastItems } from '$lib/toast';
+	import { flip } from 'svelte/animate';
+	import Item from './Item.svelte';
+</script>
+
+<div class="manager">
+	{#each $toastItems as item (item.id)}
+		<div animate:flip>
+			<Item onEnd={toastItems.removeItem} {...item} />
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.manager {
+		position: fixed;
+
+		top: 0;
+		left: 50%;
+
+		transform: translateX(-50%);
+
+		z-index: 10;
+
+		display: flex;
+
+		align-items: center;
+		flex-direction: column;
+		gap: var(--spacing-normal);
+
+		padding: var(--spacing-normal);
+	}
+</style>

package/src/lib/icons/disc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M256 176a80 80 0 1080 80 80.09 80.09 0 00-80-80zm0 112a32 32 0 1132-32 32 32 0 01-32 32z"/><path d="M414.39 97.61A224 224 0 1097.61 414.39 224 224 0 10414.39 97.61zM256 368a112 112 0 11112-112 112.12 112.12 0 01-112 112z"/></svg>

package/src/lib/index.js

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/store.js

@@ -0,0 +1,146 @@
+import { derived, writable } from 'svelte/store';
+import { toastItems } from './toast';
+import * as OptionsTypes from '$server/types/options';
+
+export const liveData = writable(false);
+export const authenticated = writable(false);
+export const settled = writable(false);
+
+/** @type {import("svelte/store").Writable<OptionsTypes.Config>}} */
+export const config = writable({});
+export const siteUrl = derived([config], ([$config]) =>
+	[$config?.protocol, $config?.origin].join('')
+);
+export const sitePort = derived([config], ([$config]) => $config.protocol);
+
+const objectHasValues = (obj) => Object.values(obj).length > 0;
+
+export const address = derived(
+	[liveData, siteUrl, sitePort],
+	([$liveData, $siteUrl, $sitePort]) => {
+		const full = `${typeof window !== 'undefined' ? window.location.protocol : 'http:'}//${$siteUrl}:${$sitePort}`;
+
+		return {
+			full,
+			naked: [$siteUrl, $sitePort].join(':'),
+
+			/**
+			 *
+			 * @param {string} route
+			 * @returns {string}
+			 */
+			get(route) {
+				return `${full}${route}`;
+			},
+
+			endpoint: $liveData || !$siteUrl ? '' : `${$siteUrl}:3000`,
+
+			/**
+			 *
+			 * @param {string} route
+			 * @returns {string}
+			 */
+			server(route) {
+				return `${this.endpoint}${route}`;
+			}
+		};
+	}
+);
+
+export const api = derived([address], ([$address]) => {
+	/**
+	 *
+	 * @param {string} route
+	 * @param {Record<string, any>} [data]
+	 * @param {RequestInit} opts
+	 */
+	const f = async (route, data = {}, opts = {}) => {
+		try {
+			const url = new URL(
+				[
+					$address.endpoint.startsWith('http') ? '' : window.location.origin,
+					$address.endpoint,
+					'/api',
+					route
+				].join('')
+			);
+
+			if (opts.method === 'POST' && objectHasValues(data)) {
+				opts.body = JSON.stringify(data);
+			} else if (objectHasValues(data)) {
+				url.search = new URLSearchParams(data).toString();
+			}
+
+			const resp = await fetch(url, opts);
+			const result = await resp.json();
+
+			if (resp.status !== 200) {
+				throw new Error(result);
+			}
+
+			return result;
+		} catch (e) {
+			toastItems.addItem({
+				message: 'Api Error',
+				type: 'error'
+			});
+
+			throw e;
+		}
+	};
+
+	return {
+		health() {
+			return f('/health');
+		},
+		info() {
+			return f('/info');
+		},
+		/**
+		 *
+		 * @param {string} q
+		 */
+		search(q) {
+			return f('/search', { q });
+		},
+		/**
+		 *
+		 * @param {string} id
+		 */
+		artist(id) {
+			return f(`/artist/${id}`);
+		},
+		/**
+		 *
+		 * @param {string} id
+		 */
+		album(id) {
+			return f(`/album/${id}`);
+		},
+
+		/**
+		 *
+		 * @param {string} uri
+		 * @param {string} [name]
+		 */
+		addTrack(uri, name) {
+			return f(`/add`, { uri, name });
+		},
+
+		play() {
+			return f('/play');
+		},
+
+		pause() {
+			return f('/pause');
+		},
+
+		skipForward() {
+			return f('/skipForward');
+		},
+
+		skipBackward() {
+			return f('/skipBackward');
+		}
+	};
+});

package/src/lib/styles.scss

@@ -0,0 +1,166 @@
+
+:root {
+	--font-family: system-ui;
+
+	--font-weight-headline-bold: 900;
+	--font-weight-headline: 700;
+	--font-weight-body: 600;
+
+	--font-size-level-headline-1: 36px;
+	--font-size-level-headline-2: 28px;
+	--font-size-level-headline-3: 21px;
+	--font-size-level-body: 16px;
+	--font-size-level-small-1: 10px;
+	--font-size-level-small-2: 12px;
+
+	--easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+	--color-bg: white;
+	--color-1: black;
+	--color-2: grey;
+	--color-3: lightgrey;
+	--color-highlight: blue; 
+
+	--border-radius-large: 10px;
+	--border-radius-normal: 5px;
+
+	--spacing-x-large: 50px;
+	--spacing-large: 20px;
+	--spacing-normal: 10px;
+	--spacing-small: 5px;
+
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	font-size: var(--font-size-normal);
+	font-family: var(--font-family);
+	font-weight: var(--font-weight-body);
+	line-height: 1.2;
+}
+
+h1,
+.headline-1 {
+	font-size: var(--font-size-level-headline-1);
+	font-weight: var(--font-weight-headline-bold);
+	margin: 0;
+	line-height: 1;
+}
+
+h2,
+.headline-2 {
+	font-size: var(--font-size-level-headline-2);
+	font-weight: var(--font-weight-headline);
+	margin: 0;
+	line-height: 1;
+}
+
+h3,
+.headline-3 {
+	font-size: var(--font-size-level-headline-3);
+	font-weight: var(--font-weight-headline);
+	margin: 0;
+	line-height: 1;
+}
+
+p a {
+	text-decoration: none;
+	color: var(--color-highlight);
+
+	&:hover,
+	&:focus-visible {
+		opacity: 0.75;
+	}
+}
+
+img {
+	max-width: 100%;
+}
+
+.btn-reset {
+	outline: none;
+	border: none;
+
+	padding: 0;
+	margin: 0;
+
+	text-transform: inherit;
+
+	cursor: pointer;
+
+	background-color: transparent;
+	font-weight: inherit;
+	color: inherit;
+}
+
+.color-bg {
+	color: var(--color-bg);
+}
+.color-1 {
+	color: var(--color-1);
+}
+.color-2 {
+	color: var(--color-2);
+}
+.color-3 {
+	color: var(--color-3);
+}
+
+.bg-color-bg {
+	background-color: var(--color-bg);
+}
+.bg-color-1 {
+	background-color: var(--color-1);
+}
+.bg-color-2 {
+	background-color: var(--color-2);
+}
+.bg-color-3 {
+	background-color: var(--color-3);
+}
+
+
+.size-headline-1 {
+	font-size: var(--font-size-level-headline-1);
+}
+
+.size-headline-2 {
+	font-size: var(--font-size-level-headline-2);
+}
+
+.size-headline-3 {
+	font-size: var(--font-size-level-headline-3);
+}
+
+.size-body {
+	font-size: var(--font-size-level-body);
+}
+
+.size-small-1 {
+	font-size: var(--font-size-level-small-1);
+}
+
+.size-small-2 {
+	font-size: var(--font-size-level-small-2);
+}
+
+.ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+
+.idle {
+	cursor: none;
+}