ambient-display 1.1.0 → 1.1.1

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

@@ -1,294 +0,0 @@
-<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/svelte.config.js

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

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

@@ -1,46 +0,0 @@
-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'
-			}
-		})
-	]
-});