ambient-display 1.1.0

package/src/routes/+layout.server.js

@@ -0,0 +1,25 @@
+import { OPTIONS } from '$server/config.js';
+
+const testServer = async (fetch) => {
+	try {
+		const { success } = await fetch({ path: '/api/health', protocol: 'http' }).then((resp) =>
+			resp.json()
+		);
+
+		return success;
+	} catch {
+		return false;
+	}
+};
+
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load({ fetch }) {
+	const server = await testServer(fetch);
+
+	const { plugins, ...config } = OPTIONS;
+
+	return {
+		live: !!server,
+		config
+	};
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,72 @@
+<script>
+	import 'normalize.css';
+	import '$lib/styles.scss';
+	import { api, authenticated, config, liveData, settled } from '$lib/store';
+	import { socket } from '$lib/comms';
+
+	import AuthenticateTrigger from '$lib/components/AuthenticateTrigger.svelte';
+	import { address } from '$lib/store';
+	import ToastManager from '$lib/components/Toast/Manager.svelte';
+	import { toastItems } from '$lib/toast';
+	import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
+
+	/** @type {{ data: import('./$types').LayoutData, children: import('svelte').Snippet }} */
+	let { data, children } = $props();
+
+	let loading = $state(true);
+
+	async function determineAppState() {
+		const { authenticated: serverAuthenticated = false } = await $api.health();
+
+		authenticated.set(serverAuthenticated);
+	}
+
+	$effect(() => {
+		$socket?.on('message', (item) => {
+			toastItems.addItem(item);
+		});
+		$socket?.on('reload', (item) => {
+			window.location.reload();
+		});
+	});
+
+	$effect(() => {
+		config.set(data.config);
+		liveData.set(data.live);
+		settled.set(true);
+
+		determineAppState();
+
+		loading = false;
+	});
+</script>
+
+<svelte:head>
+	<title>Spotify Party</title>
+	<meta name="description" content="A frontend for social spotify-ing" />
+
+	<meta property="og:title" content="Spotify Party" />
+	<meta property="og:description" content="A frontend for social spotify-ing" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={$address.get('/')} />
+	<meta property="og:image" content={$address.get('/social.jpg')} />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="Spotify Party" />
+	<meta property="twitter:url" content={$address.get('/')} />
+	<meta name="twitter:description" content="A frontend for social spotify-ing" />
+	<meta name="twitter:image" content={$address.get('/social.jpg')} />
+
+	<meta name="theme-color" content="#0000000" />
+
+	<link rel="icon" href="/favicon.ico" />
+	<link rel="manifest" href="/manifest.json" />
+</svelte:head>
+
+{#if loading}
+	<LoadingIndicator floating />
+{:else if !$authenticated}
+	<AuthenticateTrigger />
+{:else}
+	<ToastManager />
+	{@render children()}
+{/if}

package/src/routes/+page.svelte

@@ -0,0 +1,381 @@
+<script>
+	import Controls from '$lib/components/Controls.svelte';
+	import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
+	import MediaItem from '$lib/components/MediaItem.svelte';
+	import PlayingTracker from '$lib/components/PlayingTracker.svelte';
+	import ResultsList from '$lib/components/ResultsList.svelte';
+	import { api, config } from '$lib/store';
+	import { toastItems } from '$lib/toast';
+	import * as DataTypes from '$server/types/data.js';
+	import { CaretBack, Sparkles } from 'svelte-ionicons';
+
+	/** @type {DataTypes.ApiSearchResponse | null}*/
+	let items = $state(null);
+	let loading = $state(false);
+
+	/** @type {'tracks' | 'artists' | 'albums'}*/
+	let expanded = $state('tracks');
+
+	/** @type {DataTypes.ApiNormalisedItem | null} */
+	let contextHeader = $state(null);
+
+	/** @type {DataTypes.ApiInfoResponse | null} */
+	let playing = $state(null);
+
+	/**
+	 *
+	 * @param {() => Promise<DataTypes.ApiSearchResponse>} requestPromise
+	 */
+	async function onRequest(requestPromise) {
+		try {
+			loading = true;
+			items = null;
+
+			const { tracks, artists, albums } = await requestPromise();
+
+			items = {
+				tracks,
+				artists,
+				albums
+			};
+		} catch (e) {
+			console.error(e);
+			toastItems.addItem({
+				message: 'There was an error - Try refreshing',
+				type: 'error'
+			});
+		} finally {
+			loading = false;
+		}
+	}
+
+	/** @type {HTMLFormElement | null} */
+	let searchForm = $state(null);
+	async function onSearch(e) {
+		e.preventDefault();
+
+		if (!searchForm) {
+			return;
+		}
+
+		const fd = new FormData(searchForm);
+
+		const q = fd.get('q')?.toString();
+
+		if (q) {
+			contextHeader = null;
+			onRequest(() => $api.search(q));
+		}
+	}
+
+	/**
+	 *
+	 * @param {string} uri
+	 * @param {string} name
+	 */
+	async function addTrack(uri, name) {
+		try {
+			loading = true;
+			await $api.addTrack(uri, name);
+		} catch (e) {
+			console.error(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	/**
+	 *
+	 * @param {DataTypes.ApiNormalisedItem} item
+	 */
+	async function searchAlbum(item) {
+		contextHeader = item;
+		onRequest(() => $api.album(item.id));
+		expanded = 'tracks';
+	}
+
+	/**
+	 *
+	 * @param {DataTypes.ApiNormalisedItem} item
+	 */
+	async function searchArtist(item) {
+		contextHeader = item;
+		onRequest(() => $api.artist(item.id));
+		expanded = 'tracks';
+	}
+</script>
+
+<PlayingTracker bind:playing />
+
+<div class="page bg-color-bg" class:loading>
+	{#if playing && !('noTrack' in playing)}
+		<Controls
+			playing={playing.isPlaying}
+			title={[playing.track.normalised.title, playing.track.normalised.subtitle].join(' - ')}
+			canControl={$config.api?.canControl}
+		/>
+	{/if}
+
+	{#if $config?.api?.canAdd}
+		<div class="page-content bg-color-3">
+			<form bind:this={searchForm} class="page-content-top" onsubmit={onSearch}>
+				<label>
+					<input
+						class="color-bg"
+						type="search"
+						placeholder="URL, Track, Album, Artist..."
+						name="q"
+						disabled={loading}
+					/>
+				</label>
+				<button class="btn-reset" disabled={loading}>Search</button>
+			</form>
+
+			<div class="page-content-results">
+				{#if loading}
+					<LoadingIndicator floating />
+				{/if}
+
+				{#if contextHeader}
+					<div class="context-header">
+						<button onclick={onSearch} class="context-header-action btn-reset">
+							<CaretBack size="28" />
+						</button>
+
+						<div class="context-header-item">
+							<MediaItem {...contextHeader} />
+						</div>
+					</div>
+				{/if}
+
+				{#if items?.tracks}
+					<ResultsList
+						title="Tracks"
+						onActivate={() => (expanded = 'tracks')}
+						expanded={expanded === 'tracks'}
+						items={items.tracks}
+					>
+						{#snippet action(item)}
+							<button
+								disabled={loading}
+								onclick={() => addTrack(item.uri, item.title)}
+								class="btn-reset select-track size-small-1">Add Track</button
+							>
+						{/snippet}
+					</ResultsList>
+				{/if}
+
+				{#if items?.albums}
+					<ResultsList
+						title="Albums"
+						onActivate={() => (expanded = 'albums')}
+						expanded={expanded === 'albums'}
+						items={items.albums}
+					>
+						{#snippet action(item)}
+							<button
+								onclick={() => searchAlbum(item)}
+								disabled={loading}
+								class="btn-reset select-track size-small-1">View Album</button
+							>
+						{/snippet}
+					</ResultsList>
+				{/if}
+
+				{#if items?.artists}
+					<ResultsList
+						title="Artists"
+						onActivate={() => (expanded = 'artists')}
+						expanded={expanded === 'artists'}
+						items={items.artists}
+					>
+						{#snippet action(item)}
+							<button
+								onclick={() => searchArtist(item)}
+								disabled={loading}
+								class="btn-reset select-track size-small-1">View Artist</button
+							>
+						{/snippet}
+					</ResultsList>
+				{/if}
+
+				{#if !items}
+					<div class="initial color-1">Search for a track to add</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="warning">
+			<Sparkles />
+			<p>Host has disabled adding for this party</p>
+		</div>
+	{/if}
+
+	<div class="outlink size-small-2 color-2">
+		<a href="/player">View player</a>
+	</div>
+</div>
+
+<style lang="scss">
+	.page {
+		padding: var(--spacing-large);
+
+		width: 100vw;
+		height: 100dvh;
+
+		display: flex;
+
+		flex-direction: column;
+
+		justify-content: stretch;
+		align-items: center;
+		gap: var(--spacing-large);
+
+		transition: {
+			duration: 0.5s;
+			property: background-color;
+		}
+
+		&-content {
+			flex: 1;
+
+			border-radius: var(--border-radius-large);
+			overflow: hidden;
+			isolation: isolate;
+
+			max-width: 400px;
+
+			display: grid;
+
+			grid-template-rows: auto 1fr;
+		}
+	}
+
+	.page-content-top {
+		display: flex;
+
+		label {
+			flex: 1;
+
+			input {
+				width: 100%;
+
+				padding: var(--spacing-normal);
+				margin: 0;
+				border: none;
+				font-weight: inherit;
+				outline: 0;
+				background-color: var(--color-3);
+				color: var(--color-1);
+				border-radius: 0;
+				font-size: var(--font-size-level-headline-3);
+
+				@media screen and (min-width: 768px) {
+					font-size: var(--font-size-level-headline-2);
+				}
+
+				&::placeholder {
+					color: var(--color-1);
+				}
+
+				&:focus {
+					background-color: var(--color-2);
+				}
+			}
+		}
+
+		button {
+			font-weight: inherit;
+
+			padding: var(--spacing-normal) var(--spacing-large);
+
+			background-color: var(--color-highlight);
+			color: var(--color-1);
+		}
+	}
+
+	.page-content-results {
+		min-height: 0;
+
+		display: grid;
+
+		.loading & {
+			opacity: 0.5;
+		}
+	}
+
+	.select-track {
+		background-color: var(--color-1);
+		color: var(--color-bg);
+
+		border-radius: var(--border-radius-normal);
+		padding: var(--spacing-small) var(--spacing-normal);
+
+		&:hover,
+		&:focus-visible {
+			background-color: var(--color-2);
+		}
+	}
+
+	.initial {
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+	}
+
+	.context-header {
+		--media-image: 28px;
+		--media-font-size: var(--font-size-level-small-2);
+
+		background-color: var(--color-1);
+		border-top: 1px solid var(--color-bg);
+		border-bottom: 1px solid var(--color-bg);
+		color: var(--color-bg);
+
+		display: grid;
+
+		grid-template-columns: 38px 1fr;
+		gap: var(--spacing-small);
+
+		&-action {
+			display: flex;
+
+			justify-content: center;
+			align-items: center;
+			line-height: 0;
+
+			background-color: var(--color-3);
+			color: var(--color-1);
+			aspect-ratio: 1;
+		}
+
+		&-item {
+			padding: var(--spacing-small);
+		}
+	}
+
+	.warning {
+		border-radius: var(--border-radius-large);
+		background-color: var(--color-1);
+		color: var(--color-2);
+
+		padding: var(--spacing-large);
+
+		display: flex;
+
+		flex-direction: column;
+		align-items: center;
+	}
+	.outlink {
+		a {
+			color: var(--color-2);
+			text-decoration: none;
+
+			&:hover,
+			&:focus-visible {
+				color: var(--color-highlight);
+			}
+		}
+	}
+</style>