ambient-display 1.1.0 → 1.1.2

package/src/lib/components/MediaItem.svelte

@@ -1,75 +0,0 @@
-<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

@@ -1,94 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

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

package/src/lib/store.js

@@ -1,146 +0,0 @@
-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

@@ -1,166 +0,0 @@
-
-: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;
-}