@axium/client 0.33.3 → 0.33.5

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/Video.svelte

@@ -16,6 +16,7 @@
 <div class="Video" onkeydown={media.keydown}>
 	<video
 		src={rest.src}
+		preload="metadata"
 		bind:this={media.element}
 		bind:currentTime={media.currentTime}
 		bind:duration={media.duration}

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/package.json

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