@axium/client 0.36.5 → 0.36.7

package/lib/Audio.svelte

@@ -10,7 +10,7 @@
 		extraControls?: Snippet;
 	}
 
-	const { cover: showCover, extraControls, ...rest }: Props = $props();
+	const { cover: showCover, autoplay, extraControls, ...rest }: Props = $props();
 
 	const id = $props.id();
 
@@ -68,6 +68,7 @@
 		bind:buffered={media.buffered}
 		bind:playbackRate={media.playbackRate}
 		bind:ended={media.ended}
+		{autoplay}
 	></audio>
 	<MediaControls {media}>
 		{#if extraControls}{@render extraControls()}{/if}

package/lib/MediaControls.svelte

@@ -6,17 +6,19 @@
 
 	interface Props {
 		media: MediaState;
+		/** Whether these are layered over the media rather than placed below it */
+		overlay?: boolean;
 		children?: Snippet;
 	}
 
-	const { media, children }: Props = $props();
+	const { media, overlay, children }: Props = $props();
 
 	const duration = $derived(media.knownDuration);
 </script>
 
-<div class="MediaControls">
+<div class={['MediaControls', overlay && 'overlay']}>
 	<button class="reset icon-text" onclick={media.click}>
-		<Icon i={media.ended ? 'arrow-rotate-right' : media.paused ? 'play' : 'pause'} />
+		<Icon i={media.playIcon} />
 	</button>
 	<div class={['timeline', !duration && 'unknown-duration']}>
 		<div class="timeline-track">
@@ -70,6 +72,11 @@
 		border-radius: 0.75em;
 		background-color: var(--bg-menu);
 
+		&.overlay {
+			background-color: hsl(from var(--bg-menu) h s l / 80%);
+			box-shadow: 0 4px 12px #0004;
+		}
+
 		> :not(.timeline) {
 			flex: 0 0 auto;
 		}

package/lib/Video.svelte

@@ -9,10 +9,40 @@
 		media?: MediaState;
 	}
 
-	const { extraControls, media = new MediaState(), ...rest }: Props = $props();
+	const { extraControls, autoplay, media = new MediaState(), ...rest }: Props = $props();
+
+	const overlay = $derived(media.fullscreen || media.touch);
+
+	$effect(media.showControls);
+
+	const onSurface = (e: MouseEvent) => e.target === e.currentTarget || e.target === media.element;
+
+	function surface(e: MouseEvent) {
+		if (e.detail > 1 || !onSurface(e)) return;
+		if (media.touch) media.toggleControls();
+		else media.click();
+	}
+
+	/** Double tapping either side of the centered play button skips */
+	function skip(e: MouseEvent & { currentTarget: HTMLElement }) {
+		if (!media.touch || !onSurface(e)) return;
+		e.preventDefault();
+		const { left, width } = e.currentTarget.getBoundingClientRect();
+		media.skip(e.clientX < left + width / 2 ? -media.skipSeconds : media.skipSeconds);
+		media.showControls();
+	}
 </script>
 
-<div class="Video" onkeydown={media.keydown}>
+<svelte:document onfullscreenchange={media.updateFullscreen} />
+
+<div
+	class={['Video', overlay && 'overlay', !media.controlsVisible && 'hide-controls']}
+	onkeydown={media.keydown}
+	onclick={surface}
+	ondblclick={skip}
+	onpointermove={e => e.pointerType == 'mouse' && media.showControls()}
+	bind:this={media.container}
+>
 	<video
 		src={rest.src}
 		preload="metadata"
@@ -25,13 +55,18 @@
 		bind:buffered={media.buffered}
 		bind:playbackRate={media.playbackRate}
 		bind:ended={media.ended}
-		onclick={media.click}
+		{autoplay}
 	>
 		<track kind="captions" />
 	</video>
-	<MediaControls {media}>
-		<button class="reset icon-text" onclick={() => media.element?.requestFullscreen()}>
-			<Icon i="expand-wide" />
+	{#if media.touch}
+		<button class="reset play-toggle" onclick={media.click}>
+			<Icon i={media.playIcon} />
+		</button>
+	{/if}
+	<MediaControls {media} {overlay}>
+		<button class="reset icon-text" onclick={media.toggleFullscreen}>
+			<Icon i={media.fullscreen ? 'compress-wide' : 'expand-wide'} />
 		</button>
 		{#if extraControls}{@render extraControls()}{/if}
 	</MediaControls>
@@ -39,6 +74,7 @@
 
 <style>
 	.Video {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -46,16 +82,68 @@
 		width: 100%;
 		height: 100%;
 		gap: 1em;
+		touch-action: manipulation;
 
 		:global(.MediaControls) {
 			width: 100%;
 		}
+
+		> video {
+			max-width: 100%;
+			max-height: 100%;
+			min-height: 0;
+			object-fit: contain;
+		}
+
+		&:fullscreen {
+			background-color: #000;
+
+			> video {
+				width: 100%;
+				height: 100%;
+			}
+
+			&.hide-controls {
+				cursor: none;
+			}
+		}
+
+		&.overlay {
+			gap: 0;
+
+			:global(.MediaControls) {
+				position: absolute;
+				right: 1em;
+				bottom: 1em;
+				left: 1em;
+				width: auto;
+			}
+
+			:global(.MediaControls),
+			.play-toggle {
+				transition: opacity 150ms ease;
+			}
+
+			/* Keep them reachable by keyboard even once the countdown has run out */
+			&.hide-controls :global(.MediaControls:not(:focus-within)),
+			&.hide-controls .play-toggle {
+				opacity: 0;
+				pointer-events: none;
+			}
+		}
 	}
 
-	video {
-		max-width: 100%;
-		max-height: 100%;
-		min-height: 0;
-		object-fit: contain;
+	.play-toggle {
+		--size: 2em;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		padding: 0.75em;
+		border-radius: 50%;
+		background-color: hsl(from var(--bg-menu) h s l / 80%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 </style>

package/lib/reactive/media.svelte.ts

@@ -1,6 +1,10 @@
-import { parseBuffer, parseWebStream, selectCover } from 'music-metadata';
 import type { IAudioMetadata, IPicture } from 'music-metadata';
+import { parseBuffer, parseWebStream, selectCover } from 'music-metadata';
 import type { SvelteMediaTimeRange } from 'svelte/elements';
+import { MediaQuery } from 'svelte/reactivity';
+
+// Touch-primary devices have no hover, so the controls have to be tapped in and out of view
+const coarsePointer = new MediaQuery('pointer: coarse', false);
 
 type MetadataSource = ReadableStream<Uint8Array> | Uint8Array;
 
@@ -10,6 +14,7 @@ export interface MediaProps {
 	size: number | bigint;
 	type: string;
 	name?: string;
+	autoplay?: boolean;
 }
 
 export type MediaPicture = (IPicture & { data: Uint8Array<ArrayBuffer> }) | null;
@@ -55,6 +60,18 @@ export class MediaState {
 	seeking = $state<boolean>();
 	ended = $state<boolean>();
 	element = $state<HTMLMediaElement>();
+	container = $state<HTMLElement>();
+	fullscreen = $state<boolean>(false);
+	/** Whether the controls are shown. Only has an effect while they overlay the media. */
+	controlsVisible = $state<boolean>(true);
+
+	#hideTimer?: ReturnType<typeof setTimeout>;
+
+	constructor(
+		public hideDelay: number = 5000,
+		/** How far the arrow keys and double taps skip */
+		public skipSeconds: number = 10
+	) {}
 
 	click = () => {
 		if (this.ended) {
@@ -70,19 +87,61 @@ export class MediaState {
 		return Number.isFinite(this.duration) && this.duration > 0 ? this.duration : 0;
 	}
 
+	get playIcon(): string {
+		return this.ended ? 'arrow-rotate-right' : this.paused ? 'play' : 'pause';
+	}
+
+	get fullscreenTarget(): HTMLElement | null {
+		if (this.container) return this.container;
+		return this.element instanceof HTMLVideoElement ? this.element : null;
+	}
+
+	/** Whether tapping the media toggles the controls rather than playback */
+	get touch(): boolean {
+		return coarsePointer.current;
+	}
+
+	showControls = () => {
+		this.controlsVisible = true;
+		clearTimeout(this.#hideTimer);
+		if (this.paused || !this.fullscreen) return;
+		this.#hideTimer = setTimeout(() => (this.controlsVisible = false), this.hideDelay);
+	};
+
+	hideControls = () => {
+		clearTimeout(this.#hideTimer);
+		this.controlsVisible = false;
+	};
+
+	toggleControls = () => {
+		if (this.controlsVisible) this.hideControls();
+		else this.showControls();
+	};
+
+	skip(by: number) {
+		if (!this.knownDuration) return;
+		this.seek(this.currentTime + by);
+	}
+
+	toggleFullscreen = () => {
+		if (globalThis.document?.fullscreenElement) void globalThis.document.exitFullscreen();
+		else void this.fullscreenTarget?.requestFullscreen();
+	};
+
+	/** Keeps `fullscreen` in sync, use with `<svelte:document onfullscreenchange={media.updateFullscreen} />` */
+	updateFullscreen = () => {
+		this.fullscreen = !!this.fullscreenTarget && globalThis.document?.fullscreenElement === this.fullscreenTarget;
+	};
+
 	keydown = (e: KeyboardEvent) => {
 		switch (e.key) {
 			case 'ArrowLeft':
 				e.preventDefault();
-				if (!this.knownDuration) break;
-				this.currentTime = Math.max(0, this.currentTime - 10);
-				this.updateAttached();
+				this.skip(-this.skipSeconds);
 				break;
 			case 'ArrowRight':
 				e.preventDefault();
-				if (!this.knownDuration) break;
-				this.currentTime = Math.min(this.knownDuration, this.currentTime + 10);
-				this.updateAttached();
+				this.skip(this.skipSeconds);
 				break;
 			case 'ArrowUp':
 				this.volume = Math.min(1, this.volume + 0.1);
@@ -91,8 +150,9 @@ export class MediaState {
 				this.volume = Math.max(0, this.volume - 0.1);
 				break;
 			case 'F11':
+			case 'f':
 				e.preventDefault();
-				this.element?.requestFullscreen();
+				this.toggleFullscreen();
 				break;
 			case ' ':
 				this.click();
@@ -107,6 +167,9 @@ export class MediaState {
 					console.warn('Not a video element, can not use Picture-in-Picture');
 				}
 				break;
+			case 'c':
+				if (this.fullscreen) this.toggleControls();
+				break;
 		}
 	};
 

package/package.json

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