@axium/storage 0.22.0 → 0.22.2

package/dist/client/api.js

@@ -64,7 +64,6 @@ export async function uploadItem(file, opt = {}) {
     if (!opt.name)
         throw 'item name is required';
     const content = await file.bytes();
-    opt.onProgress?.(0, content.length);
     /** For big files, it takes a *really* long time to compute the hash, so we just don't do it ahead of time and leave it up to the server. */
     const hash = content.length < uploadConfig.hashThreshold * 1_000_000 ? blake2b(content).toHex() : null;
     const upload = await fetchAPI('PUT', 'storage', {
@@ -77,17 +76,21 @@ export async function uploadItem(file, opt = {}) {
     if (upload.status == 'created')
         return upload.item;
     const chunkSize = Math.min(upload.max_transfer_size, globalThis.navigator?.connection ? conTypeToSpeed[globalThis.navigator.connection.effectiveType] : uploadConfig.uxChunkSize) * 1_000_000;
+    opt.onProgress?.(0, content.length);
     let response;
     for (let offset = 0; offset < content.length; offset += chunkSize) {
         const size = Math.min(chunkSize, content.length - offset);
+        const headers = {
+            'x-upload': upload.token,
+            'x-offset': offset.toString(),
+            'content-length': size.toString(),
+            'content-type': 'application/octet-stream',
+        };
+        if (token)
+            headers.authorization = 'Bearer ' + token;
         response = await fetch(rawStorage('chunk'), {
             method: 'POST',
-            headers: {
-                'x-upload': upload.token,
-                'x-offset': offset.toString(),
-                'content-length': size.toString(),
-                'content-type': 'application/octet-stream',
-            },
+            headers,
             body: content.slice(offset, offset + size),
         }).catch(handleFetchFailed);
         if (!response.ok)
@@ -110,14 +113,17 @@ export async function uploadItemStream(stream, opt) {
     for (let offset = 0; offset < opt.size; offset += chunkSize) {
         const size = Math.min(chunkSize, opt.size - offset);
         let bytesReadForChunk = 0;
+        const headers = {
+            'x-upload': upload.token,
+            'x-offset': offset.toString(),
+            'content-length': size.toString(),
+            'content-type': 'application/octet-stream',
+        };
+        if (token)
+            headers.authorization = 'Bearer ' + token;
         response = await fetch(rawStorage('chunk'), {
             method: 'POST',
-            headers: {
-                'x-upload': upload.token,
-                'x-offset': offset.toString(),
-                'content-length': size.toString(),
-                'content-type': 'application/octet-stream',
-            },
+            headers,
             body: new ReadableStream({
                 type: 'bytes',
                 async pull(controller) {

package/dist/client/cli/commands.js

@@ -59,6 +59,7 @@ import { Readable } from 'node:stream';
 import { colorItem, formatItems } from '../../node.js';
 import * as api from '../api.js';
 import { getDirectory, resolveItem, resolvePathWithParent, syncCache, writeCache } from '../local.js';
+import { formatBytes } from '@axium/core';
 export const ls = new Command('ls')
     .alias('list')
     .description('List the contents of a folder')
@@ -140,10 +141,9 @@ export const upload = new Command('upload')
             size: stats.size,
             type,
             onProgress(uploaded, total) {
-                io.progress(uploaded, total, Math.round((uploaded / total) * 100) + '%');
+                io.progress(uploaded, total, Math.round((uploaded / total) * 100) + '%', `${formatBytes(BigInt(uploaded))}/${formatBytes(BigInt(total))}`);
             },
         });
-        io.done();
         const { items } = await syncCache();
         items.push(item);
         writeCache();
@@ -169,18 +169,18 @@ export const download = new Command('download')
         if (item.type == 'inode/directory')
             throw "Can't download directories yet.";
         localPath ||= item.name;
-        const _ = __addDisposableResource(env_2, io.start('Downloading to' + localPath), false);
+        const _ = __addDisposableResource(env_2, io.start('Downloading to ' + localPath), false);
         const stream = await api.downloadItemStream(item.id);
-        io.progress(0, Number(item.size));
+        const size = Number(item.size);
+        io.progress(0, size);
         let downloaded = 0;
         const fileStream = fs.createWriteStream(localPath);
         for await (const chunk of stream) {
             fileStream.write(chunk);
             downloaded += chunk.length;
-            io.progress(downloaded, Number(item.size));
+            io.progress(downloaded, size, Math.round((downloaded / size) * 100) + '%', `${formatBytes(BigInt(downloaded))}/${formatBytes(item.size)}`);
         }
         fileStream.end();
-        io.done();
     }
     catch (e_2) {
         env_2.error = e_2;

package/dist/client/local.js

@@ -4,13 +4,13 @@ import { UserPublic } from '@axium/core';
 import * as io from 'ioium/node';
 import { ENOENT, ENOTDIR } from 'node:constants';
 import { stat } from 'node:fs/promises';
-import { join, parse } from 'node:path';
+import { join, parse, resolve } from 'node:path';
 import * as z from 'zod';
 import { StorageItemMetadata } from '../common.js';
 import { getUserStats, getUserStorage } from './api.js';
 export let remotePWD = '/';
 export function resolvePath(path) {
-    path = join(remotePWD, path);
+    path = resolve(remotePWD, path);
     if (path != '/' && path.endsWith('/'))
         path = path.slice(0, -1);
     return path;

package/lib/Preview.css

@@ -58,7 +58,8 @@
 		top: 1em;
 	}
 
-	.full-fill {
+	.full-fill,
+	.preview-center {
 		position: absolute;
 		inset: 0;
 		width: 100%;
@@ -80,7 +81,8 @@
 	}
 }
 
-.no-preview {
+.preview-center,
+.preview-audio-cover {
 	display: flex;
 	flex-direction: column;
 	gap: 1em;
@@ -88,6 +90,14 @@
 	justify-content: center;
 }
 
+/* Default cover */
+.preview-audio-cover {
+	width: 512px;
+	height: 512px;
+	background-color: var(--bg-alt);
+	border-radius: 1em;
+}
+
 @media (width < 700px) {
 	.preview-top-bar {
 		flex-direction: column;

package/lib/Preview.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { text } from '@axium/client';
-	import { FormDialog, Icon, Popover } from '@axium/client/components';
+	import { Audio, FormDialog, Icon, Popover, Video } from '@axium/client/components';
 	import { toast } from '@axium/client/toast';
 	import type { AccessControllable } from '@axium/core';
-	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { downloadItem, downloadItemStream, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import { openers, previews } from '@axium/storage/client/3rd-party';
 	import { copyShortURL } from '@axium/storage/client/frontend';
 	import type { StorageItemMetadata } from '@axium/storage/common';
@@ -90,15 +90,29 @@
 		</div>
 	</div>
 {/if}
+
+{#snippet loading()}
+	<div class="preview-center">
+		<Icon i="cloud-arrow-down" --size="50px" />
+		<span>{text('storage.Preview.loading')}</span>
+	</div>
+{/snippet}
+
 <div class={['preview-content', noTopBar && 'no-top-bar']}>
 	{#if item.type.startsWith('image/')}
 		<img src={item.dataURL} alt={item.name} />
 	{:else if item.type.startsWith('audio/')}
-		<audio src={item.dataURL} controls></audio>
+		{#await downloadItemStream(item.id)}
+			{@render loading()}
+		{:then stream}
+			<Audio src={item.dataURL} {...item} metadataSource={stream} cover />
+		{/await}
 	{:else if item.type.startsWith('video/')}
-		<video src={item.dataURL} controls>
-			<track kind="captions" />
-		</video>
+		{#await downloadItemStream(item.id)}
+			{@render loading()}
+		{:then stream}
+			<Video src={item.dataURL} {...item} metadataSource={stream} />
+		{/await}
 	{:else if item.type == 'application/pdf'}
 		<object data={item.dataURL} type="application/pdf" width="100%" height="100%">
 			<embed src={item.dataURL} type="application/pdf" width="100%" height="100%" />
@@ -106,14 +120,11 @@
 		</object>
 	{:else if item.type.startsWith('text/')}
 		{#await downloadItem(item.id).then(b => b.text())}
-			<div class="full-fill no-preview">
-				<Icon i="cloud-arrow-down" --size="50px" />
-				<span>{text('storage.Preview.loading')}</span>
-			</div>
+			{@render loading()}
 		{:then content}
 			<pre class="full-fill preview-text">{content}</pre>
 		{:catch}
-			<div class="full-fill no-preview">
+			<div class="preview-center">
 				<Icon i="cloud-exclamation" --size="50px" />
 				<span>{text('storage.Preview.error_loading')}</span>
 			</div>
@@ -121,7 +132,7 @@
 	{:else if previews.has(item.type)}
 		{@render previews.get(item.type)!(item)}
 	{:else}
-		<div class="full-fill no-preview">
+		<div class="preview-center">
 			<Icon i="eye-slash" --size="50px" />
 			<span>{text('storage.Preview.preview_unavailable')}</span>
 		</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.22.0",
+	"version": "0.22.2",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -40,12 +40,12 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.20.0",
+		"@axium/client": ">=0.24.0",
 		"@axium/core": ">=0.26.0",
 		"@axium/server": ">=0.39.0",
 		"@sveltejs/kit": "^2.27.3",
 		"commander": "^14.0.0",
-		"ioium": "^1.1.0",
+		"ioium": "^1.2.0",
 		"kysely": "^0.28.15",
 		"mime": "^4.1.0",
 		"utilium": "^3.1.0"