@axium/client 0.24.2 → 0.25.0

package/dist/requests.d.ts

@@ -3,7 +3,7 @@ import { $API } from '@axium/core/api';
 import type { RequestMethod } from '@axium/core/requests';
 export declare let token: string | null;
 export declare function setToken(value: string | null): void;
-export declare let prefix: string;
+export declare let prefix: string, origin: string;
 export declare function setPrefix(value: string): void;
 /**
  * Only for use on non-browser clients, e.g. Node.js

package/dist/requests.js

@@ -9,9 +9,10 @@ export let token = null;
 export function setToken(value) {
     token = value;
 }
-export let prefix = '/api/';
+export let prefix = '/api/', origin = globalThis.location?.origin || 'https://localhost/';
 export function setPrefix(value) {
     prefix = value;
+    origin = new URL(prefix, origin).origin;
 }
 let userAgent = null;
 /**

package/dist/user.js

@@ -3,7 +3,7 @@ import * as z from 'zod';
 import { fetchAPI } from './requests.js';
 import { useCache } from './cache.js';
 export async function login(userId) {
-    const options = await fetchAPI('OPTIONS', 'users/:id/auth', { type: 'login' }, userId);
+    const options = await fetchAPI('PUT', 'users/:id/auth', { type: 'login' }, userId);
     const response = await startAuthentication({ optionsJSON: options });
     return await fetchAPI('POST', 'users/:id/auth', response, userId);
 }
@@ -11,7 +11,7 @@ export async function login(userId) {
  * Create an elevated session for the user to perform sensitive actions.
  */
 export async function elevate(userId) {
-    const options = await fetchAPI('OPTIONS', 'users/:id/auth', { type: 'action' }, userId);
+    const options = await fetchAPI('PUT', 'users/:id/auth', { type: 'action' }, userId);
     const response = await startAuthentication({ optionsJSON: options });
     await fetchAPI('POST', 'users/:id/auth', response, userId);
 }
@@ -43,7 +43,7 @@ export async function logoutCurrentSession() {
 }
 export async function register(_data) {
     const data = z.object({ name: z.string(), email: z.email() }).parse(_data);
-    const { options, userId } = await fetchAPI('OPTIONS', 'register', data);
+    const { options, userId } = await fetchAPI('PUT', 'register', data);
     const response = await startRegistration({ optionsJSON: options });
     await fetchAPI('POST', 'register', {
         userId,
@@ -78,7 +78,7 @@ export async function fullUserInfo(userId) {
  */
 export async function deleteUser(userId, deletingId = userId) {
     _checkId(userId);
-    const options = await fetchAPI('OPTIONS', 'users/:id/auth', { type: 'action' }, deletingId);
+    const options = await fetchAPI('PUT', 'users/:id/auth', { type: 'action' }, deletingId);
     const response = await startAuthentication({ optionsJSON: options });
     await fetchAPI('POST', 'users/:id/auth', response, deletingId);
     return await fetchAPI('DELETE', 'users/:id', response, userId);

package/lib/Audio.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from './Icon.svelte';
 	import MediaControls from './MediaControls.svelte';
-	import { getMetadata, MediaState, type MediaProps } from './media.svelte.js';
+	import { getMetadata, MediaState, type MediaPicture, type MediaProps } from './media.svelte.js';
 
 	interface Props extends MediaProps {
 		cover?: boolean;
@@ -15,15 +15,23 @@
 
 	const id = $props.id();
 
-	const { metadata, picture, pictureURL } = await getMetadata(rest);
+	let picture = $state<MediaPicture>(),
+		pictureURL = $state<string>(),
+		audioInfo = $state<[string, (string | number | null)?][]>([]);
 
-	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;
+	getMetadata(rest).then(result => {
+		if (!result) return;
+		picture = result.picture;
+		pictureURL = result.pictureURL;
+		const { common } = result.metadata;
+		audioInfo = [
+			['music', common.title],
+			['album', common.album],
+			['user-music', common.artist],
+			['hashtag', common.track.no],
+			['compact-disc', common.disk.no],
+		] as const;
+	});
 
 	const media = new MediaState();
 </script>

package/lib/UserPFP.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { UserPublic } from '@axium/core';
 	import { colorHashRGB } from '@axium/core/color';
+	import { origin } from '@axium/client';
 
 	let { user, isDefault = $bindable() }: { user: UserPublic; isDefault?: boolean } = $props();
 
@@ -10,11 +11,11 @@
 	</svg>`.replaceAll(/[\t\n]/g, '')
 	);
 
-	let src = $state(`/raw/pfp/${user.id}`);
+	let src = $state(`${origin}/raw/pfp/${user.id}`);
 
 	$effect(() => {
 		// Reset the attempted source when the user changes
-		src = `/raw/pfp/${user.id}`;
+		src = `${origin}/raw/pfp/${user.id}`;
 	});
 </script>
 

package/lib/Video.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from './Icon.svelte';
 	import MediaControls from './MediaControls.svelte';
-	import { getMetadata, MediaState, type MediaProps } from './media.svelte.js';
+	import { MediaState, type MediaProps } from './media.svelte.js';
 
 	interface Props extends MediaProps {
 		extraControls?: Snippet;
@@ -11,8 +11,6 @@
 	const { extraControls, ...rest }: Props = $props();
 	const { src } = rest;
 
-	const { metadata, pictureURL } = await getMetadata(rest);
-
 	const media = new MediaState();
 </script>
 
@@ -29,7 +27,6 @@
 		bind:playbackRate={media.playbackRate}
 		bind:ended={media.ended}
 		onclick={media.click}
-		poster={pictureURL}
 	>
 		<track kind="captions" />
 	</video>

package/lib/media.svelte.ts

@@ -2,31 +2,37 @@ import { parseBuffer, parseWebStream, selectCover } from 'music-metadata';
 import type { IAudioMetadata, IPicture } from 'music-metadata';
 import type { SvelteMediaTimeRange } from 'svelte/elements';
 
+type MetadataSource = ReadableStream<Uint8Array> | Uint8Array;
+
 export interface MediaProps {
 	src: string;
-	metadataSource?: ReadableStream<Uint8Array> | Uint8Array;
+	metadataSource?: MetadataSource | Promise<MetadataSource>;
 	size: number | bigint;
 	type: string;
 	name?: string;
 }
 
+export type MediaPicture = (IPicture & { data: Uint8Array<ArrayBuffer> }) | null;
+
 export interface MediaMetadataResult {
 	metadata: IAudioMetadata;
-	picture: (IPicture & { data: Uint8Array<ArrayBuffer> }) | null;
+	picture: MediaPicture;
 	pictureURL?: string;
 }
 
-export async function getMetadata(props: MediaProps): Promise<MediaMetadataResult> {
+export async function getMetadata(props: MediaProps): Promise<MediaMetadataResult | null> {
+	const source = await props.metadataSource;
+
+	if (!source) return null;
+
 	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));
+	const metadata = await (ArrayBuffer.isView(source) ? parseBuffer(source, metadataFileInfo) : parseWebStream(source, 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();
+	if (source && !ArrayBuffer.isView(source)) await source.cancel();
 
 	return {
 		metadata,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.24.2",
+	"version": "0.25.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -45,7 +45,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.28.3",
+		"@axium/core": ">=0.29.0",
 		"ioium": "^1.0.2",
 		"semver": "^7.7.4",
 		"svelte": "^5.36.0",