@axium/client 0.23.7 → 0.24.0

package/lib/Audio.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { text } from '@axium/client/locales';
+	import type { Snippet } from 'svelte';
+	import Icon from './Icon.svelte';
+	import MediaControls from './MediaControls.svelte';
+	import { getMetadata, MediaState, type MediaProps } from './media.svelte.js';
+
+	interface Props extends MediaProps {
+		cover?: boolean;
+		extraControls?: Snippet;
+	}
+
+	const { cover: showCover, extraControls, ...rest }: Props = $props();
+	const { src } = rest;
+
+	const id = $props.id();
+
+	const { metadata, picture, pictureURL } = await getMetadata(rest);
+
+	const audioInfo = [
+		['music', metadata.common.title],
+		['album', metadata.common.album],
+		['user-music', metadata.common.artist],
+		['hashtag', metadata.common.track.no],
+		['compact-disc', metadata.common.disk.no],
+	] as const;
+
+	const media = new MediaState();
+</script>
+
+<div onkeydown={media.keydown}>
+	{#if showCover}
+		<div class="audio-cover" onclick={media.click}>
+			{#if picture}
+				<img src={pictureURL} alt={picture.description} />
+			{:else}
+				<Icon i="music-note" --size="50px" />
+			{/if}
+		</div>
+	{/if}
+
+	<audio
+		{src}
+		bind:currentTime={media.currentTime}
+		bind:duration={media.duration}
+		bind:volume={media.volume}
+		bind:paused={media.paused}
+		bind:muted={media.muted}
+		bind:buffered={media.buffered}
+		bind:playbackRate={media.playbackRate}
+		bind:ended={media.ended}
+	></audio>
+	<MediaControls {media}>
+		{#if extraControls}{@render extraControls()}{/if}
+		<button class="reset icon-text" command="show-modal" commandfor="{id}:audio-info">
+			<Icon i="regular/circle-info" />
+		</button>
+	</MediaControls>
+</div>
+
+<dialog id="{id}:audio-info">
+	<div class="audio-info">
+		{#each audioInfo as [icon, value]}
+			{#if value}
+				<div class="icon-text">
+					<Icon i={icon} />
+					<span>{value}</span>
+				</div>
+			{/if}
+		{/each}
+	</div>
+	<button command="close" commandfor="{id}:audio-info">{text('generic.done')}</button>
+</dialog>
+
+<style>
+	.audio-cover {
+		width: 512px;
+		height: 512px;
+		background-color: var(--bg-alt);
+		border-radius: 1em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		align-items: center;
+		justify-content: center;
+
+		img {
+			border-radius: 1em;
+		}
+
+		:global(.MediaControls) {
+			width: 512px;
+		}
+	}
+
+	.audio-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		margin-bottom: 1em;
+	}
+</style>

package/lib/MediaControls.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { formatDuration } from '@axium/core';
+	import Icon from './Icon.svelte';
+	import type { MediaState } from './media.svelte.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		media: MediaState;
+		children?: Snippet;
+	}
+
+	const { media, children }: Props = $props();
+</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-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}%"
+				></div>
+			{/each}
+			<div class="played-range" style:width="{(media.currentTime / (media.duration || 1)) * 100}%"></div>
+		</div>
+		<div class="timeline-thumb" style:left="{(media.currentTime / (media.duration || 1)) * 100}%">
+			<Icon i="pipe" />
+		</div>
+		<input class="seek-input" type="range" min="0" max={media.duration || 1} step="0.01" bind:value={media.currentTime} />
+	</div>
+	<div class="times">
+		<span>{formatDuration(media.currentTime)}</span>
+		<span>/</span>
+		<span>{formatDuration(media.duration)}</span>
+	</div>
+	<button class="reset icon-text volume" onclick={() => (media.muted = !media.muted)}>
+		<Icon i={media.muted || !media.volume ? 'volume-slash' : 'volume'} />
+	</button>
+	<div class="volume-popup">
+		<div class="volume-track">
+			<div class="volume-fill" style:height="{media.volume * 100}%"></div>
+			<div class="volume-thumb" style:bottom="{media.volume * 100}%"></div>
+		</div>
+		<input class="volume-input" type="range" min="0" max="1" step="0.01" bind:value={media.volume} />
+	</div>
+	{#if children}{@render children()}{/if}
+</div>
+
+<style>
+	.MediaControls {
+		display: flex;
+		gap: 1em;
+		align-items: center;
+		padding: 1em;
+		border-radius: 0.75em;
+		background-color: var(--bg-menu);
+
+		> :not(.timeline) {
+			flex: 0 0 auto;
+		}
+
+		.timeline {
+			position: relative;
+			flex: 1 1 auto;
+			height: 8px;
+			display: flex;
+			align-items: center;
+		}
+
+		.timeline-track {
+			position: absolute;
+			inset: 0;
+			background-color: var(--bg-normal);
+			border-radius: 4px;
+			overflow: hidden;
+			pointer-events: none;
+		}
+
+		.buffered-range {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			background-color: var(--bg-alt);
+		}
+
+		.played-range {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			background-color: var(--bg-strong);
+		}
+
+		.timeline-thumb {
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			pointer-events: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.seek-input {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		button.volume {
+			anchor-name: --volume-btn;
+		}
+
+		.volume-popup {
+			position: absolute;
+			position-anchor: --volume-btn;
+			bottom: anchor(top);
+			left: anchor(center);
+			transform: translateX(-50%);
+			margin-bottom: 0.5em;
+			background-color: var(--bg-menu);
+			border-radius: 0.75em;
+			padding: 1em 0;
+			height: 100px;
+			width: 40px;
+			display: none;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4px 12px #0001;
+			z-index: 10;
+		}
+
+		.volume-popup::after {
+			content: '';
+			position: absolute;
+			top: 100%;
+			left: 0;
+			right: 0;
+			height: 0.5em;
+		}
+
+		button.volume:hover ~ .volume-popup,
+		.volume-popup:hover,
+		.volume-popup:focus-within {
+			display: flex;
+		}
+
+		.volume-track {
+			position: relative;
+			width: 6px;
+			height: 100%;
+			background-color: var(--bg-alt);
+			border-radius: 3px;
+			pointer-events: none;
+		}
+
+		.volume-fill {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			background-color: var(--bg-strong);
+			border-radius: 3px;
+			pointer-events: none;
+		}
+
+		.volume-thumb {
+			position: absolute;
+			left: 50%;
+			transform: translate(-50%, 50%);
+			width: 0.75em;
+			height: 0.75em;
+			border-radius: 50%;
+			background-color: var(--fg-normal);
+			pointer-events: none;
+			box-shadow: 0 0 5px #0001;
+		}
+
+		.volume-input {
+			appearance: slider-vertical;
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			cursor: pointer;
+			writing-mode: vertical-lr;
+			direction: rtl;
+			opacity: 0;
+		}
+	}
+</style>

package/lib/Video.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from './Icon.svelte';
+	import MediaControls from './MediaControls.svelte';
+	import { getMetadata, MediaState, type MediaProps } from './media.svelte.js';
+
+	interface Props extends MediaProps {
+		extraControls?: Snippet;
+	}
+
+	const { extraControls, ...rest }: Props = $props();
+	const { src } = rest;
+
+	const { metadata, pictureURL } = await getMetadata(rest);
+
+	const media = new MediaState();
+</script>
+
+<div class="Video" onkeydown={media.keydown}>
+	<video
+		{src}
+		bind:this={media.element}
+		bind:currentTime={media.currentTime}
+		bind:duration={media.duration}
+		bind:volume={media.volume}
+		bind:paused={media.paused}
+		bind:muted={media.muted}
+		bind:buffered={media.buffered}
+		bind:playbackRate={media.playbackRate}
+		bind:ended={media.ended}
+		onclick={media.click}
+		poster={pictureURL}
+	>
+		<track kind="captions" />
+	</video>
+	<MediaControls {media}>
+		<button class="reset icon-text" onclick={() => media.element?.requestFullscreen()}>
+			<Icon i="expand-wide" />
+		</button>
+		{#if extraControls}{@render extraControls()}{/if}
+	</MediaControls>
+</div>
+
+<style>
+	.Video {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		gap: 1em;
+
+		:global(.MediaControls) {
+			width: 100%;
+		}
+	}
+
+	video {
+		max-width: 100%;
+		max-height: 100%;
+		min-height: 0;
+		object-fit: contain;
+	}
+</style>

package/lib/index.ts

@@ -1,5 +1,6 @@
 export { default as AccessControlDialog } from './AccessControlDialog.svelte';
 export { default as AppMenu } from './AppMenu.svelte';
+export { default as Audio } from './Audio.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';
 export { default as Discovery } from './Discovery.svelte';
@@ -9,6 +10,7 @@ export { default as Icon } from './Icon.svelte';
 export { default as LocationSelect } from './LocationSelect.svelte';
 export { default as Login } from './Login.svelte';
 export { default as Logout } from './Logout.svelte';
+export { default as MediaControls } from './MediaControls.svelte';
 export { default as NumberBar } from './NumberBar.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Register } from './Register.svelte';
@@ -19,6 +21,7 @@ export { default as URLText } from './URLText.svelte';
 export { default as UserCard } from './UserCard.svelte';
 export { default as UserPFP } from './UserPFP.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
+export { default as Video } from './Video.svelte';
 export { default as Version } from './Version.svelte';
 export { default as ZodForm } from './ZodForm.svelte';
 export { default as ZodInput } from './ZodInput.svelte';

package/lib/media.svelte.ts

@@ -0,0 +1,95 @@
+import { parseBuffer, parseWebStream, selectCover } from 'music-metadata';
+import type { IAudioMetadata, IPicture } from 'music-metadata';
+import type { SvelteMediaTimeRange } from 'svelte/elements';
+
+export interface MediaProps {
+	src: string;
+	metadataSource?: ReadableStream<Uint8Array> | Uint8Array;
+	size: number | bigint;
+	type: string;
+	name?: string;
+}
+
+export interface MediaMetadataResult {
+	metadata: IAudioMetadata;
+	picture: (IPicture & { data: Uint8Array<ArrayBuffer> }) | null;
+	pictureURL?: string;
+}
+
+export async function getMetadata(props: MediaProps): Promise<MediaMetadataResult> {
+	const metadataFileInfo = { size: Number(props.size), mimeType: props.type, url: props.src, path: props.name };
+
+	const metadata = await (ArrayBuffer.isView(props.metadataSource)
+		? parseBuffer(props.metadataSource, metadataFileInfo)
+		: parseWebStream(props.metadataSource, metadataFileInfo));
+
+	// `picture.data`'s `source` is actually an `ArrayBufferLike`, we need it to be the more specific `ArrayBuffer`
+	const picture = selectCover(metadata.common.picture) satisfies IPicture | null as MediaMetadataResult['picture'];
+
+	if (props.metadataSource && !ArrayBuffer.isView(props.metadataSource)) await props.metadataSource.cancel();
+
+	return {
+		metadata,
+		picture,
+		pictureURL: picture ? URL.createObjectURL(new Blob([picture.data], { type: picture.format })) : undefined,
+	};
+}
+
+export class MediaState {
+	currentTime = $state<number>(0);
+	playbackRate = $state<number>();
+	paused = $state<boolean>();
+	volume = $state<number>(1);
+	muted = $state<boolean>();
+	duration = $state<number>(0);
+	buffered = $state<SvelteMediaTimeRange[]>([]);
+	seekable = $state<boolean>();
+	seeking = $state<boolean>();
+	ended = $state<boolean>();
+	element = $state<HTMLMediaElement>();
+
+	click = () => {
+		if (this.ended) {
+			this.currentTime = 0;
+			this.paused = false;
+		} else {
+			this.paused = !this.paused;
+		}
+	};
+
+	keydown = (e: KeyboardEvent) => {
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				this.currentTime = Math.max(0, this.currentTime - 10);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				this.currentTime = Math.min(this.duration, this.currentTime + 10);
+				break;
+			case 'ArrowUp':
+				this.volume = Math.min(1, this.volume + 0.1);
+				break;
+			case 'ArrowDown':
+				this.volume = Math.max(0, this.volume - 0.1);
+				break;
+			case 'F11':
+				e.preventDefault();
+				this.element?.requestFullscreen();
+				break;
+			case ' ':
+				this.click();
+				break;
+			case 'm':
+				this.muted = !this.muted;
+				break;
+			case 'p':
+				if (this.element && this.element instanceof HTMLVideoElement) {
+					this.element.requestPictureInPicture?.();
+				} else {
+					console.warn('Not a video element, can not use Picture-in-Picture');
+				}
+				break;
+		}
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.23.7",
+	"version": "0.24.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -45,7 +45,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.27.1",
+		"@axium/core": ">=0.28.3",
 		"ioium": "^1.0.2",
 		"semver": "^7.7.4",
 		"svelte": "^5.36.0",
@@ -54,6 +54,7 @@
 	},
 	"dependencies": {
 		"@simplewebauthn/browser": "^13.1.0",
-		"commander": "^14.0.0"
+		"commander": "^14.0.0",
+		"music-metadata": "^11.12.3"
 	}
 }