@axium/client 0.33.4 → 0.34.0

package/assets/styles.css

@@ -441,6 +441,42 @@ div.toast {
 		border: var(--border-accent);
 		background-color: var(--bg-accent);
 	}
+
+	&.progress {
+		border: var(--border-accent);
+		background-color: var(--bg-accent);
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+		text-align: left;
+		min-width: 16em;
+
+		.toast-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1em;
+
+			button {
+				display: inline-flex;
+				cursor: pointer;
+			}
+		}
+
+		.subtle {
+			opacity: 69%;
+			font-size: 0.85em;
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		progress {
+			width: 100%;
+			height: 4px;
+		}
+	}
 }
 
 @media (width >= 700px) {

package/dist/locales.d.ts

@@ -129,6 +129,7 @@ declare let currentLoaded: {
             readonly preferences: "Preferences";
             readonly sessions: "Sessions";
             readonly title: "Your Account";
+            readonly toast_username_updated: "Username updated";
             readonly user_id: "User ID";
             readonly user_id_hint: "This is your UUID. It can't be changed.";
             readonly verification_sent: "Verification email sent";

package/lib/AccessControlDialog.svelte

@@ -39,7 +39,7 @@
 	</div>
 
 	{#each acl as control, i (control.userId || control.role || control.tag)}
-		{@const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
+		{const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
 			try {
 				const updated = await updateACL(itemType, item.id, getTarget(control), { [key]: e.currentTarget.checked });
 				Object.assign(control, updated);
@@ -80,7 +80,7 @@
 			</div>
 			<div class="permissions">
 				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
-					{@const id = `${item.id}.${getTarget(control)}.${key}`}
+					{const id = $derived(`${item.id}.${getTarget(control)}.${key}`)}
 					<span class="icon-text">
 						{#if editable}
 							<input {id} type="checkbox" onchange={update(key)} />

package/lib/FormDialog.svelte

@@ -24,7 +24,7 @@
 		/** Change the text displayed for the submit button */
 		submitText?: string;
 		/** Called on submission, this should do the actual submission */
-		submit?(data: Record<string, FormDataEntryValue>): Promise<any>;
+		submit?(data: Record<string, FormDataEntryValue>): any;
 		/** Whether to display the dialog as a full-page form */
 		pageMode?: boolean;
 		submitDanger?: boolean;
@@ -47,7 +47,7 @@
 	function onsubmit(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
 		const data = Object.fromEntries(new FormData(e.currentTarget));
-		submit(data)
+		Promise.resolve(submit(data))
 			.then(result => {
 				if (!pageMode) dialog!.close();
 			})

package/lib/InlineEdit.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { prettifyError, type ZodType } from 'zod';
+	import Icon from './Icon.svelte';
+
+	let {
+		value,
+		commit,
+		close,
+		schema,
+		optional = false,
+		selectionRange,
+		placeholder,
+		confirmLabel = text('generic.change'),
+	}: {
+		/** The committed value being edited. */
+		value?: string | null;
+		/** Called with the new value when a change is confirmed. `null` means the value was cleared (only possible when `optional`). */
+		commit(value: string | null): unknown;
+		/** Called when editing ends, whether or not a change was committed. */
+		close(): void;
+		/** Validates the draft as the user types and before committing. Errors float above the input. */
+		schema?: ZodType;
+		/** Whether clearing the input commits `null` instead of closing without changes. */
+		optional?: boolean;
+		/** The range of the value to select when editing starts. Defaults to the entire value. */
+		selectionRange?: [number, number];
+		placeholder?: string;
+		confirmLabel?: string;
+	} = $props();
+
+	let draft = $state(value ?? ''),
+		error = $state<string>();
+
+	function validate(val: string | null): boolean {
+		const result = val === null && optional ? undefined : schema?.safeParse(val);
+		error = result?.error ? prettifyError(result.error) : undefined;
+		return !result || result.success;
+	}
+
+	function confirm() {
+		const newValue = draft.trim() || null;
+		if (newValue === (value ?? null) || (newValue === null && !optional)) return close();
+		if (!validate(newValue)) return;
+		commit(newValue);
+		close();
+	}
+</script>
+
+<span
+	class="InlineEdit"
+	data-no-select
+	onclick={e => e.stopPropagation()}
+	{@attach span => {
+		const input = span.querySelector('input')!;
+		requestAnimationFrame(() => {
+			input.focus();
+			input.setSelectionRange(...(selectionRange ?? [0, draft.length]));
+		});
+		const onOutside = (e: PointerEvent) => !span.contains(e.target as Node) && close();
+		requestAnimationFrame(() => document.addEventListener('pointerdown', onOutside, true));
+		return () => document.removeEventListener('pointerdown', onOutside, true);
+	}}
+>
+	{#if error}<span class="InlineEdit-error">{error}</span>{/if}
+	<input
+		bind:value={draft}
+		{placeholder}
+		class={[error && 'error']}
+		oninput={() => validate(draft.trim() || null)}
+		onkeydown={e => {
+			if (e.key == 'Enter') confirm();
+			else if (e.key == 'Escape') close();
+		}}
+	/>
+	<button class="reset InlineEdit-confirm" aria-label={confirmLabel} onclick={confirm}>
+		<Icon i="check" />
+	</button>
+</span>
+
+<style>
+	.InlineEdit {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		min-width: 0;
+		anchor-scope: --inline-edit;
+	}
+
+	input {
+		background: var(--bg-normal);
+		border: var(--border-accent);
+		border-radius: 0.25em;
+		padding: 0.1em 0.25em;
+		margin: -0.1em 0;
+		font: inherit;
+		color: inherit;
+		min-width: 0;
+		flex: 1 1 auto;
+		anchor-name: --inline-edit;
+	}
+
+	.InlineEdit-error {
+		position: fixed;
+		position-anchor: --inline-edit;
+		bottom: calc(anchor(top) - 0.3em);
+		left: anchor(left);
+		color: var(--fg-error);
+	}
+
+	.InlineEdit-confirm {
+		display: inline-flex;
+		align-items: center;
+		flex: 0 0 auto;
+		cursor: pointer;
+	}
+</style>

package/lib/MediaControls.svelte

@@ -10,27 +10,38 @@
 	}
 
 	const { media, children }: Props = $props();
+
+	const duration = $derived(media.knownDuration);
 </script>
 
 <div class="MediaControls">
 	<button class="reset icon-text" onclick={media.click}>
 		<Icon i={media.ended ? 'arrow-rotate-right' : media.paused ? 'play' : 'pause'} />
 	</button>
-	<div class="timeline">
+	<div class={['timeline', !duration && 'unknown-duration']}>
 		<div class="timeline-track">
 			{#each media.buffered || [] as { start, end }}
 				<div
 					class="buffered-range"
-					style:left="{(start / (media.duration || 1)) * 100}%"
-					style:width="{((end - start) / (media.duration || 1)) * 100}%"
+					style:left="{(start / duration) * 100}%"
+					style:width="{((end - start) / duration) * 100}%"
 				></div>
 			{/each}
-			<div class="played-range" style:width="{(media.currentTime / (media.duration || 1)) * 100}%"></div>
+			<div class="played-range" style:width="{(media.currentTime / duration) * 100}%"></div>
 		</div>
-		<div class="timeline-thumb" style:left="{(media.currentTime / (media.duration || 1)) * 100}%">
+		<div class="timeline-thumb" style:left="{(media.currentTime / duration) * 100}%">
 			<Icon i="pipe" />
 		</div>
-		<input class="seek-input" type="range" min="0" max={media.duration || 1} step="0.01" bind:value={media.currentTime} />
+
+		<input
+			class="seek-input"
+			type="range"
+			min="0"
+			max={duration || 1}
+			step="0.01"
+			disabled={!duration}
+			bind:value={media.currentTime}
+		/>
 	</div>
 	<div class="times">
 		<span>{formatDuration(media.currentTime)}</span>
@@ -69,6 +80,14 @@
 			height: 8px;
 			display: flex;
 			align-items: center;
+
+			&.unknown-duration {
+				opacity: 0.5;
+
+				.seek-input {
+					cursor: default;
+				}
+			}
 		}
 
 		.timeline-track {

package/lib/Upload.svelte

@@ -11,7 +11,8 @@
 		...rest
 	}: HTMLInputAttributes & { input?: HTMLInputElement; progress?: [current: number, max: number][] } = $props();
 
-	const id = $props.id();
+	const defaultId = $props.id();
+	const id = rest.id || defaultId;
 </script>
 
 <div>

package/lib/index.ts

@@ -9,6 +9,7 @@ export { default as Discovery } from './Discovery.svelte';
 export * as discovery from './Discovery.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as InlineEdit } from './InlineEdit.svelte';
 export { default as LocationSelect } from './LocationSelect.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';

package/lib/reactive/media.svelte.ts

@@ -65,15 +65,22 @@ export class MediaState {
 		}
 	};
 
+	/** The duration, or 0 when it isn't known yet (NaN until metadata loads, Infinity for streams) */
+	get knownDuration(): number {
+		return Number.isFinite(this.duration) && this.duration > 0 ? this.duration : 0;
+	}
+
 	keydown = (e: KeyboardEvent) => {
 		switch (e.key) {
 			case 'ArrowLeft':
 				e.preventDefault();
+				if (!this.knownDuration) break;
 				this.currentTime = Math.max(0, this.currentTime - 10);
 				break;
 			case 'ArrowRight':
 				e.preventDefault();
-				this.currentTime = Math.min(this.duration, this.currentTime + 10);
+				if (!this.knownDuration) break;
+				this.currentTime = Math.min(this.knownDuration, this.currentTime + 10);
 				break;
 			case 'ArrowUp':
 				this.volume = Math.min(1, this.volume + 0.1);

package/lib/toast.ts

@@ -1,4 +1,4 @@
-import { debug, errorText } from 'ioium';
+import { debug, errorText, useProgress } from 'ioium';
 import { text } from '@axium/client/locales';
 import { animate, onAnimationEnd } from '@axium/client/gui';
 import Icon from './Icon.svelte';
@@ -83,4 +83,74 @@ export async function toastStatus(promise: Promise<unknown>, successMessage: str
 	}
 }
 
+let progressToast: HTMLDivElement | undefined,
+	progressMain: HTMLSpanElement,
+	progressMessage: HTMLSpanElement,
+	progressBar: HTMLProgressElement,
+	progressCancelButton: HTMLButtonElement,
+	progressCancel: (() => void) | undefined;
+
+function warnBeforeUnload(e: BeforeUnloadEvent) {
+	e.preventDefault();
+}
+
+/**
+ * Register a callback used to cancel the operation shown in the progress toast.
+ * The toast's cancel button is only shown while a callback is registered.
+ */
+export function setProgressCancel(cancel?: () => void): void {
+	progressCancel = cancel;
+	if (progressToast) progressCancelButton.style.display = cancel ? '' : 'none';
+}
+
+useProgress({
+	start(message: string): void {
+		if (!progressToast) {
+			progressToast = document.createElement('div');
+			progressToast.classList.add('toast', 'progress');
+
+			const header = document.createElement('div');
+			header.classList.add('toast-header');
+			progressToast.appendChild(header);
+
+			progressMain = document.createElement('span');
+			header.appendChild(progressMain);
+
+			progressCancelButton = document.createElement('button');
+			progressCancelButton.classList.add('reset');
+			progressCancelButton.onclick = () => progressCancel?.();
+			mount(Icon, { target: progressCancelButton, props: { i: 'xmark-large' } });
+			header.appendChild(progressCancelButton);
+
+			progressMessage = document.createElement('span');
+			progressMessage.classList.add('subtle');
+			progressToast.appendChild(progressMessage);
+
+			progressBar = document.createElement('progress');
+			progressToast.appendChild(progressBar);
+
+			list.appendChild(progressToast);
+			addEventListener('beforeunload', warnBeforeUnload);
+		}
+		progressMain.textContent = message;
+		progressMessage.textContent = '';
+		progressCancelButton.style.display = progressCancel ? '' : 'none';
+		progressBar.removeAttribute('value');
+		progressBar.max = 1;
+	},
+	progress(value: number, max: number, message?: any): void {
+		if (!progressToast) return;
+		progressBar.value = value;
+		progressBar.max = max;
+		progressMessage.textContent = message == undefined ? '' : String(message);
+	},
+	done(): void {
+		if (!progressToast) return;
+		progressToast.remove();
+		progressToast = undefined;
+		progressCancel = undefined;
+		removeEventListener('beforeunload', warnBeforeUnload);
+	},
+});
+
 Object.assign(globalThis, { toast, toastStatus });

package/locales/en.json

@@ -123,6 +123,7 @@
 			"preferences": "Preferences",
 			"sessions": "Sessions",
 			"title": "Your Account",
+			"toast_username_updated": "Username updated",
 			"user_id": "User ID",
 			"user_id_hint": "This is your UUID. It can't be changed.",
 			"verification_sent": "Verification email sent",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.33.4",
+	"version": "0.34.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",

package/styles/account.css

@@ -41,7 +41,7 @@
 		margin-left: 1em;
 	}
 
-	> :nth-child(2) {
+	> :nth-child(2):not(.InlineEdit) {
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}