ambient-display 1.1.0

package/src/routes/player/+page.svelte

@@ -0,0 +1,294 @@
+<script>
+	import { qr } from '$lib/actions/qr.svelte';
+	import { address, api, config } from '$lib/store';
+	import { fade } from 'svelte/transition';
+	import ImageLoad from '$lib/components/ImageLoad.svelte';
+	import PlayingTracker from '$lib/components/PlayingTracker.svelte';
+	import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
+	import * as DataTypes from '$server/types/data.js';
+	import { listenCb } from '$lib/utils';
+
+	/**
+	 * @type {DataTypes.ApiInfoResponse | null | {noTrack: boolean}}
+	 */
+	let playing = $state(null);
+
+	let title = $derived.by(() => {
+		if (!playing || 'noTrack' in playing) {
+			return '';
+		}
+
+		if ('normalised' in playing.context) {
+			return playing.context.normalised.title;
+		}
+
+		if ('album' in playing.track) {
+			return playing.track.album;
+		}
+
+		if ('show' in playing.track) {
+			return playing.track.show;
+		}
+
+		return '';
+	});
+
+	let subtitle = $derived.by(() => {
+		if (!playing || 'noTrack' in playing) {
+			return '';
+		}
+
+		if (!playing.isPlaying) {
+			return 'Paused';
+		}
+
+		switch (playing.context?.type) {
+			case 'album':
+				return [playing.track.number, playing.context.total].join(' – ');
+			default:
+				return playing?.context?.normalised?.subtitle ?? '';
+		}
+	});
+
+	/** @type {null | (() => void)} */
+	let focusEvt = null;
+	async function keepScreenAwake() {
+		let wakeLock = null;
+
+		try {
+			focusEvt?.();
+			focusEvt = null;
+			wakeLock = await navigator.wakeLock.request('screen');
+			console.log('Screen locked');
+			return () => {};
+		} catch (err) {
+			if (err.code === 0 && !focusEvt) {
+				focusEvt = listenCb(window, 'focus', keepScreenAwake);
+				return focusEvt;
+			} else {
+				console.log(err);
+			}
+		}
+	}
+
+	let idle = $state(true);
+	function mouseIdle() {
+		let timerId = 0;
+		const unlisten = listenCb(document, 'mousemove', () => {
+			clearTimeout(timerId);
+			idle = false;
+
+			timerId = window.setTimeout(() => {
+				idle = true;
+			}, 2000);
+		});
+
+		return () => {
+			unlisten();
+			clearTimeout(timerId);
+		};
+	}
+
+	$effect(() => {
+		document.documentElement.classList.toggle('idle', idle);
+	});
+
+	$effect(() => {
+		keepScreenAwake();
+		mouseIdle();
+	});
+</script>
+
+<PlayingTracker bind:playing />
+
+{#if !playing}
+	<LoadingIndicator floating />
+{:else if 'noTrack' in playing}
+	<div class="empty bg-color-3 color-1">No Track playing currently</div>
+{:else}
+	<div class="page bg-color-bg" class:idle>
+		<div class="top">
+			<div class="context color-1">
+				<span>{title}</span>
+				<span class="size-small-2">{subtitle}</span>
+			</div>
+		</div>
+
+		<div class="middle">
+			<div class="middle-image">
+				{#key playing.track.normalised.image.full.url}
+					<span transition:fade>
+						<ImageLoad
+							full={playing.track.normalised.image.full.url}
+							low={playing.track.normalised.image.low.url}
+						/>
+					</span>
+				{/key}
+			</div>
+		</div>
+
+		<div class="bottom">
+			<div class="left color-1">
+				<h1 class="title ellipsis">{playing.track.normalised.title}</h1>
+				<span class="headline-3">{playing.track.normalised.subtitle}</span>
+			</div>
+
+			<div class="right">
+				{#if $config.api?.canAdd}
+					<div class="badge bg-color-3 color-bg">
+						<span class="headline-3">Add</span>
+
+						<span class="badge-qr" use:qr={{ url: $address.get('/') }}></span>
+					</div>
+				{/if}
+
+				<span class="size-small-1 color-3">{$address.naked}</span>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.page {
+		display: grid;
+
+		grid-template-rows: auto 1fr auto;
+		gap: var(--spacing-large);
+
+		width: 100vw;
+		height: 100dvh;
+
+		transition: {
+			duration: 0.5s;
+			property: background-color;
+		}
+	}
+
+	.top {
+		display: flex;
+
+		justify-content: center;
+		align-items: center;
+
+		padding: var(--spacing-large);
+	}
+
+	.middle {
+		min-height: 0;
+
+		display: grid;
+
+		grid-template-columns: 1fr;
+
+		&-image {
+			display: grid;
+
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+
+			min-height: 0;
+			padding: var(--spacing-x-large);
+
+			@media (orientation: landscape) {
+				padding: var(--spacing-large);
+			}
+
+			span {
+				grid-column: 1;
+				grid-row: 1;
+
+				min-height: 0;
+			}
+
+			:global(img) {
+				width: 100%;
+				height: 100%;
+				min-height: 0;
+				min-width: 0;
+
+				object-fit: contain;
+			}
+		}
+	}
+
+	.context {
+		display: flex;
+
+		flex-direction: column;
+
+		align-items: center;
+	}
+
+	.bottom {
+		display: grid;
+
+		grid-template-columns: 1fr auto;
+		gap: var(--spacing-large);
+
+		justify-content: space-between;
+		align-items: flex-start;
+
+		padding: var(--spacing-large);
+
+		.badge {
+			display: grid;
+
+			grid-template-columns: 1fr 50px;
+			gap: var(--spacing-small);
+
+			align-items: center;
+
+			padding: var(--spacing-small);
+
+			border-radius: var(--border-radius-normal);
+
+			min-width: 150px;
+
+			&-qr {
+				line-height: 0;
+			}
+		}
+
+		.left {
+			display: flex;
+
+			flex-direction: column;
+			align-items: flex-start;
+
+			gap: var(--spacing-small);
+
+			flex: 1;
+			min-width: 0;
+
+			.title {
+				width: 100%;
+				line-height: 1.2;
+				margin-bottom: -0.1em;
+			}
+		}
+
+		.right {
+			display: flex;
+
+			flex-direction: column;
+			align-items: flex-end;
+			align-self: flex-end;
+
+			gap: var(--spacing-small);
+		}
+	}
+
+	.empty {
+		position: absolute;
+
+		top: 50%;
+		left: 50%;
+
+		transform: translate3d(-50%, -50%, 0);
+
+		padding: var(--spacing-normal);
+		border-radius: var(--border-radius-normal);
+
+		white-space: nowrap;
+	}
+</style>

package/static/manifest.json

@@ -0,0 +1,40 @@
+{
+  "name": "Spotify Party",
+  "short_name": "Spotify Party",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#000",
+  "description": "A frontend for social spotify-ing",
+  "icons": [
+    {
+      "sizes": "48x48",
+      "type": "image/png",
+      "src": "/icons/48.favicon.png"
+    },
+    {
+      "sizes": "72x72",
+      "type": "image/png",
+      "src": "/icons/72.favicon.png"
+    },
+    {
+      "sizes": "96x96",
+      "type": "image/png",
+      "src": "/icons/96.favicon.png"
+    },
+    {
+      "sizes": "144x144",
+      "type": "image/png",
+      "src": "/icons/144.favicon.png"
+    },
+    {
+      "sizes": "168x168",
+      "type": "image/png",
+      "src": "/icons/168.favicon.png"
+    },
+    {
+      "sizes": "192x192",
+      "type": "image/png",
+      "src": "/icons/192.favicon.png"
+    }
+  ]
+}

package/svelte.config.js

@@ -0,0 +1,19 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter(),
+		alias: {
+			$server: './server',
+			$config: './ambient.config.js'
+		}
+	},
+	preprocess: [vitePreprocess()]
+};
+
+export default config;

package/tools/BuildManifest.js

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import sharp from 'sharp';
+import fs from 'fs-extra';
+import path from 'path';
+import ico from 'sharp-ico';
+
+const DEFAULT_MANIFEST = async () => {
+	const pkg = await import('../package.json');
+
+	return {
+		name: pkg.name,
+		short_name: pkg.name,
+		start_url: '.',
+		display: 'standalone',
+		background_color: '#fff',
+		description: pkg.default?.description ?? ''
+	};
+};
+
+const ICON_SIZES = [48, 72, 96, 144, 168, 192];
+
+function generateIco(sharpNode, iconName = 'favicon.ico', sizes = [128, 64, 32, 24]) {
+	return ico.sharpsToIco([sharpNode], iconName, {
+		sizes
+	});
+}
+
+export default function manifestPlugin({
+	icon = 'favicon.png',
+	outputDir = 'icons',
+	outputIco = 'favicon.ico',
+	faviconSizes = [128, 64, 32, 24],
+	manifestIconSizes = ICON_SIZES,
+	manifest = {}
+} = {}) {
+	let viteConfig;
+
+	return {
+		name: 'build-manifest', // required, will show up in warnings and errors
+
+		configResolved(config) {
+			viteConfig = config;
+		},
+
+		async buildStart() {
+			const defaultManifest = await DEFAULT_MANIFEST();
+
+			if (fs.existsSync(path.join(viteConfig.publicDir, icon))) {
+				fs.ensureDirSync(path.join(viteConfig.publicDir, outputDir));
+
+				const iconNode = sharp(path.join(viteConfig.publicDir, icon));
+
+				console.log(`Generating .ico file`);
+				await generateIco(iconNode, path.join(viteConfig.publicDir, outputIco), faviconSizes);
+
+				console.log(`Generating icons`);
+				await Promise.all(
+					manifestIconSizes.map((size) =>
+						iconNode
+							.toFormat('png')
+							.resize(size, size)
+							.toFile(
+								path.join(viteConfig.publicDir, outputDir, [size, path.basename(icon)].join('.'))
+							)
+					)
+				);
+
+				const finalManifest = {
+					...defaultManifest,
+					...manifest,
+					icons: manifestIconSizes.map((size) => ({
+						sizes: `${size}x${size}`,
+						type: `image/png`,
+						src: `/${path.join(outputDir, [size, path.basename(icon)].join('.'))}`
+					}))
+				};
+
+				console.log(`Writing manifest file`);
+				fs.writeFileSync(
+					path.join(viteConfig.publicDir, 'manifest.json'),
+					JSON.stringify(finalManifest, null, 2),
+					'utf-8'
+				);
+			}
+		}
+	};
+}

package/vite.config.js

@@ -0,0 +1,46 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
+import svg from '@poppanator/sveltekit-svg';
+import BuildManifest from './tools/BuildManifest.js';
+
+export default defineConfig({
+	server: {
+		host: true,
+		fs: {
+			allow: [searchForWorkspaceRoot(process.cwd()), './server', './ambient.config.js']
+		}
+	},
+	plugins: [
+		sveltekit(),
+		svg({
+			includePaths: ['./src/lib/icons/'],
+			svgoOptions: {
+				multipass: true,
+				plugins: [
+					{
+						name: 'preset-default',
+						// by default svgo removes the viewBox which prevents svg icons from scaling
+						// not a good idea! https://github.com/svg/svgo/pull/1461
+						params: { overrides: { removeViewBox: false } }
+					},
+					{
+						name: 'convertColors',
+						params: {
+							currentColor: true
+						}
+					},
+					{ name: 'removeAttrs', params: { attrs: '(width|height)' } }
+				]
+			}
+		}),
+
+		BuildManifest({
+			manifest: {
+				name: 'Spotify Party',
+				short_name: 'Spotify Party',
+				description: 'A frontend for social spotify-ing',
+				background_color: '#000'
+			}
+		})
+	]
+});