mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feat(web): Improved assets upload (#3850)
* Improved asset upload algorithm. - Upload Queue: New process algorithm - Upload Queue: Concurrency correctly respected when dragging / adding multiple group of files to the queue - Upload Task: Add more information about progress (upload speed and remaining time) - Upload Panel: Add more information to about the queue status (Remaining, Errors, Duplicated, Uploaded) - Error recovery: asset information are kept in the queue to give the user a chance to read the error message - Error recovery: on error allow the user to retry the upload or hide the error / all errors * Support "live" editing of the upload concurrency * Fixed some issues * Reformat * fix: merge, linting, dark mode, upload to share --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Villena Guillaume
GitHub
parent
a26ed3d1a6
commit
ca35e5557b
@ -66,7 +66,7 @@ input:focus-visible {
|
||||
|
||||
@layer utilities {
|
||||
.immich-form-input {
|
||||
@apply rounded-xl bg-slate-200 p-4 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;
|
||||
@apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;
|
||||
}
|
||||
|
||||
.immich-form-label {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
export let logo: typeof Icon;
|
||||
export let backgroundColor = 'transparent';
|
||||
export let hoverColor = '#e2e7e9';
|
||||
export let padding = '3';
|
||||
export let size = '24';
|
||||
export let title = '';
|
||||
export let isOpacity = false;
|
||||
@ -16,7 +17,7 @@
|
||||
style:background-color={backgroundColor}
|
||||
style:--immich-icon-button-hover-color={hoverColor}
|
||||
class:dark:text-immich-dark-fg={!forceDark}
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-all
|
||||
class="flex place-content-center place-items-center rounded-full p-{padding} transition-all
|
||||
{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
|
||||
{forceDark && 'hover:text-black'}
|
||||
{hideMobile && 'hidden sm:flex'}"
|
||||
|
||||
@ -1,65 +1,128 @@
|
||||
<script lang="ts">
|
||||
import type { UploadAsset } from '$lib/models/upload-asset';
|
||||
import { UploadState } from '$lib/models/upload-asset';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { asByteUnitString } from '$lib/utils/byte-units';
|
||||
import { fade } from 'svelte/transition';
|
||||
import ImmichLogo from './immich-logo.svelte';
|
||||
import { getFilenameExtension } from '../../utils/asset-utils';
|
||||
import { getFilenameExtension } from '$lib/utils/asset-utils';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import Cancel from 'svelte-material-icons/Cancel.svelte';
|
||||
import Refresh from 'svelte-material-icons/Refresh.svelte';
|
||||
import { fileUploadHandler } from '$lib/utils/file-uploader';
|
||||
|
||||
export let uploadAsset: UploadAsset;
|
||||
|
||||
let showFallbackImage = false;
|
||||
let showFallbackImage = uploadAsset.state === UploadState.PENDING;
|
||||
const previewURL = URL.createObjectURL(uploadAsset.file);
|
||||
|
||||
const handleRetry = (uploadAsset: UploadAsset) => {
|
||||
uploadAssetsStore.removeUploadAsset(uploadAsset.id);
|
||||
fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
class="mt-3 grid h-[70px] grid-cols-[70px_auto] gap-2 rounded-lg bg-immich-bg text-xs"
|
||||
class="flex flex-col rounded-lg bg-immich-bg text-xs dark:bg-immich-dark-bg"
|
||||
>
|
||||
<div class="relative">
|
||||
{#if showFallbackImage}
|
||||
<div in:fade={{ duration: 250 }}>
|
||||
<ImmichLogo class="h-[70px] w-[70px] rounded-bl-lg rounded-tl-lg object-cover" />
|
||||
<div class="grid grid-cols-[65px_auto_auto]">
|
||||
<div class="relative h-[65px]">
|
||||
{#if showFallbackImage || true}
|
||||
<div in:fade={{ duration: 250 }}>
|
||||
<ImmichLogo class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover p-2" />
|
||||
</div>
|
||||
{:else}
|
||||
<img
|
||||
in:fade={{ duration: 250 }}
|
||||
on:load={() => {
|
||||
URL.revokeObjectURL(previewURL);
|
||||
}}
|
||||
on:error={() => {
|
||||
URL.revokeObjectURL(previewURL);
|
||||
showFallbackImage = true;
|
||||
}}
|
||||
src={previewURL}
|
||||
alt="Preview of asset"
|
||||
class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover"
|
||||
draggable="false"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="absolute bottom-0 left-0 h-[25px] w-full rounded-bl-md bg-immich-primary/30">
|
||||
<p
|
||||
class="absolute bottom-1 right-1 stroke-immich-primary object-right-bottom font-semibold uppercase text-white/95 dark:text-gray-100"
|
||||
>
|
||||
.{getFilenameExtension(uploadAsset.file.name)}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<img
|
||||
in:fade={{ duration: 250 }}
|
||||
on:load={() => {
|
||||
URL.revokeObjectURL(previewURL);
|
||||
}}
|
||||
on:error={() => {
|
||||
URL.revokeObjectURL(previewURL);
|
||||
showFallbackImage = true;
|
||||
}}
|
||||
src={previewURL}
|
||||
alt="Preview of asset"
|
||||
class="h-[70px] w-[70px] rounded-bl-lg rounded-tl-lg object-cover"
|
||||
draggable="false"
|
||||
</div>
|
||||
<div class="flex flex-col justify-between p-2 pr-2">
|
||||
<input
|
||||
disabled
|
||||
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px] dark:border-immich-dark-gray dark:bg-gray-900"
|
||||
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="absolute bottom-0 left-0 h-[25px] w-full bg-immich-primary/30">
|
||||
<p
|
||||
class="absolute bottom-1 right-1 stroke-immich-primary object-right-bottom font-semibold uppercase text-gray-50/95"
|
||||
<div
|
||||
class="relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 text-white dark:bg-immich-dark-gray dark:text-black"
|
||||
>
|
||||
.{getFilenameExtension(uploadAsset.file.name)}
|
||||
</p>
|
||||
{#if uploadAsset.state === UploadState.STARTED}
|
||||
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
{#if uploadAsset.message}
|
||||
{uploadAsset.message}
|
||||
{:else}
|
||||
{uploadAsset.progress}/100 - {asByteUnitString(uploadAsset.speed || 0, $locale)}/s - {uploadAsset.eta}s
|
||||
{/if}
|
||||
</p>
|
||||
{:else if uploadAsset.state === UploadState.PENDING}
|
||||
<div class="h-[15px] rounded-md bg-immich-dark-gray transition-all dark:bg-immich-gray" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">Pending</p>
|
||||
{:else if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="h-[15px] rounded-md bg-immich-error transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">Error</p>
|
||||
{:else if uploadAsset.state === UploadState.DUPLICATED}
|
||||
<div class="h-[15px] rounded-md bg-immich-warning transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
Skipped
|
||||
{#if uploadAsset.message} ({uploadAsset.message}){/if}
|
||||
</p>
|
||||
{:else if uploadAsset.state === UploadState.DONE}
|
||||
<div class="h-[15px] rounded-md bg-immich-success transition-all" style="width: 100%" />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
Uploaded
|
||||
{#if uploadAsset.message} ({uploadAsset.message}){/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="flex h-full flex-col place-content-center place-items-center justify-items-center pr-2">
|
||||
<button
|
||||
on:click={() => handleRetry(uploadAsset)}
|
||||
title="Retry upload"
|
||||
class="flex h-full w-full place-content-center place-items-center text-sm"
|
||||
>
|
||||
<span class="text-immich-dark-gray dark:text-immich-dark-fg"><Refresh size="20" /></span>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => uploadAssetsStore.removeUploadAsset(uploadAsset.id)}
|
||||
title="Dismiss error"
|
||||
class="flex h-full w-full place-content-center place-items-center text-sm"
|
||||
>
|
||||
<span class="text-immich-error"><Cancel size="20" /></span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between p-2 pr-4">
|
||||
<input
|
||||
disabled
|
||||
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px]"
|
||||
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
|
||||
/>
|
||||
|
||||
<div class="relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 text-white">
|
||||
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
|
||||
<p class="absolute top-0 h-full w-full text-center text-[10px]">
|
||||
{uploadAsset.progress}/100
|
||||
{#if uploadAsset.state === UploadState.ERROR}
|
||||
<div class="flex flex-row justify-between">
|
||||
<p class="w-full rounded-md p-1 px-2 text-justify text-[10px] text-immich-error">
|
||||
{uploadAsset.error}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -1,84 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
import { scale, fade } from 'svelte/transition';
|
||||
import { fade, scale } from 'svelte/transition';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
|
||||
import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
|
||||
import Cancel from 'svelte-material-icons/Cancel.svelte';
|
||||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
import { notificationController, NotificationType } from './notification/notification';
|
||||
import UploadAssetPreview from './upload-asset-preview.svelte';
|
||||
import { uploadExecutionQueue } from '$lib/utils/file-uploader';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
let showDetail = true;
|
||||
let uploadLength = 0;
|
||||
let duplicateCount = 0;
|
||||
let errorCount = 0;
|
||||
let isUploading = false;
|
||||
let showDetail = false;
|
||||
let showOptions = false;
|
||||
let concurrency = uploadExecutionQueue.concurrency;
|
||||
|
||||
// Reactive action to update asset uploadLength whenever there is a new one added to the list
|
||||
$: {
|
||||
if ($uploadAssetsStore.length != uploadLength) {
|
||||
uploadLength = $uploadAssetsStore.length;
|
||||
let { isUploading, hasError, remainingUploads, errorCounter, duplicateCounter, successCounter, totalUploadCounter } =
|
||||
uploadAssetsStore;
|
||||
|
||||
const autoHide = () => {
|
||||
if (!$isUploading && showDetail) {
|
||||
showDetail = false;
|
||||
}
|
||||
}
|
||||
|
||||
uploadAssetsStore.isUploading.subscribe((value) => {
|
||||
isUploading = value;
|
||||
});
|
||||
if ($isUploading && !showDetail) {
|
||||
showDetail = true;
|
||||
}
|
||||
};
|
||||
|
||||
uploadAssetsStore.duplicateCounter.subscribe((value) => {
|
||||
duplicateCount = value;
|
||||
});
|
||||
|
||||
uploadAssetsStore.errorCounter.subscribe((value) => {
|
||||
errorCount = value;
|
||||
});
|
||||
$: $isUploading && autoHide();
|
||||
</script>
|
||||
|
||||
{#if isUploading}
|
||||
{#if $hasError || $isUploading}
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 250, delay: 1000 }}
|
||||
out:fade={{ duration: 250 }}
|
||||
on:outroend={() => {
|
||||
const errorInfo =
|
||||
errorCount > 0 ? `Upload completed with ${errorCount} error${errorCount > 1 ? 's' : ''}` : 'Upload success';
|
||||
const type = errorCount > 0 ? NotificationType.Warning : NotificationType.Info;
|
||||
$errorCounter > 0
|
||||
? `Upload completed with ${$errorCounter} error${$errorCounter > 1 ? 's' : ''}`
|
||||
: 'Upload success';
|
||||
const type = $errorCounter > 0 ? NotificationType.Warning : NotificationType.Info;
|
||||
|
||||
notificationController.show({
|
||||
message: `${errorInfo}, refresh the page to see new upload assets`,
|
||||
type,
|
||||
});
|
||||
|
||||
uploadAssetsStore.errorCounter.set(0);
|
||||
|
||||
if (duplicateCount > 0) {
|
||||
if ($duplicateCounter > 0) {
|
||||
notificationController.show({
|
||||
message: `Skipped ${duplicateCount} duplicate picture${duplicateCount > 1 ? 's' : ''}`,
|
||||
message: `Skipped ${$duplicateCounter} duplicate picture${$duplicateCounter > 1 ? 's' : ''}`,
|
||||
type: NotificationType.Warning,
|
||||
});
|
||||
uploadAssetsStore.duplicateCounter.set(0);
|
||||
}
|
||||
|
||||
uploadAssetsStore.resetStore();
|
||||
}}
|
||||
class="absolute bottom-6 right-6 z-[10000]"
|
||||
>
|
||||
{#if showDetail}
|
||||
<div
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
class="w-[300px] rounded-lg border bg-gray-200 p-4 text-sm shadow-sm"
|
||||
class="w-[300px] rounded-lg border bg-gray-100 p-4 text-sm shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-white"
|
||||
>
|
||||
<div class="place-item-center mb-4 flex justify-between">
|
||||
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
|
||||
<button
|
||||
on:click={() => (showDetail = false)}
|
||||
class="flex h-[20px] w-[20px] place-content-center place-items-center rounded-full bg-gray-50 transition-colors hover:bg-gray-100"
|
||||
>
|
||||
<WindowMinimize />
|
||||
</button>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="immich-form-label text-xm">
|
||||
Remaining {$remainingUploads} - Processed {$successCounter + $errorCounter}/{$totalUploadCounter}
|
||||
</p>
|
||||
<p class="immich-form-label text-xs">
|
||||
Uploaded <span class="text-immich-success">{$successCounter}</span> - Error
|
||||
<span class="text-immich-error">{$errorCounter}</span>
|
||||
- Duplicates <span class="text-immich-warning">{$duplicateCounter}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="flex flex-row">
|
||||
<CircleIconButton
|
||||
title="Toggle settings"
|
||||
logo={Cog}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => (showOptions = !showOptions)}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Minimize"
|
||||
logo={WindowMinimize}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => (showDetail = false)}
|
||||
/>
|
||||
</div>
|
||||
{#if $hasError}
|
||||
<CircleIconButton
|
||||
title="Dismiss all errors"
|
||||
logo={Cancel}
|
||||
size="14"
|
||||
padding="1"
|
||||
on:click={() => uploadAssetsStore.dismissErrors()}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="immich-scrollbar max-h-[400px] overflow-y-auto rounded-lg pr-2">
|
||||
{#each $uploadAssetsStore as uploadAsset}
|
||||
{#key uploadAsset.id}
|
||||
<UploadAssetPreview {uploadAsset} />
|
||||
{/key}
|
||||
{#if showOptions}
|
||||
<div class="immich-scrollbar mb-4 max-h-[400px] overflow-y-auto rounded-lg pr-2">
|
||||
<div class="flex h-[26px] place-items-center gap-1">
|
||||
<label class="immich-form-label" for="upload-concurrency">Upload concurrency</label>
|
||||
</div>
|
||||
<input
|
||||
class="immich-form-input w-full"
|
||||
aria-labelledby="Upload concurrency"
|
||||
id="upload-concurrency"
|
||||
name="Upload concurrency"
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
bind:value={concurrency}
|
||||
on:change={() => (uploadExecutionQueue.concurrency = concurrency)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="immich-scrollbar flex max-h-[400px] flex-col gap-2 overflow-y-auto rounded-lg pr-2">
|
||||
{#each $uploadAssetsStore as uploadAsset (uploadAsset.id)}
|
||||
<UploadAssetPreview {uploadAsset} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -89,15 +134,24 @@
|
||||
on:click={() => (showDetail = true)}
|
||||
class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
|
||||
>
|
||||
{$uploadAssetsStore.length}
|
||||
{$remainingUploads}
|
||||
</button>
|
||||
{#if $hasError}
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="absolute -right-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-error p-5 text-xs text-gray-200"
|
||||
>
|
||||
{$errorCounter}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-300 p-5 text-sm shadow-lg"
|
||||
class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-200 p-5 text-sm text-immich-primary shadow-lg dark:bg-gray-600 dark:text-immich-gray"
|
||||
>
|
||||
<div class="animate-pulse">
|
||||
<CloudUploadOutline size="30" color="#4250af" />
|
||||
<CloudUploadOutline size="30" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,20 @@
|
||||
export enum UploadState {
|
||||
PENDING,
|
||||
STARTED,
|
||||
DONE,
|
||||
ERROR,
|
||||
DUPLICATED,
|
||||
}
|
||||
|
||||
export type UploadAsset = {
|
||||
id: string;
|
||||
file: File;
|
||||
progress: number;
|
||||
albumId?: string;
|
||||
progress?: number;
|
||||
state?: UploadState;
|
||||
startDate?: number;
|
||||
eta?: number;
|
||||
speed?: number;
|
||||
error?: unknown;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
@ -1,47 +1,102 @@
|
||||
import { derived, writable } from 'svelte/store';
|
||||
import type { UploadAsset } from '../models/upload-asset';
|
||||
import { UploadState, type UploadAsset } from '../models/upload-asset';
|
||||
|
||||
function createUploadStore() {
|
||||
const uploadAssets = writable<Array<UploadAsset>>([]);
|
||||
|
||||
const duplicateCounter = writable(0);
|
||||
const errorCounter = writable(0);
|
||||
const successCounter = writable(0);
|
||||
const totalUploadCounter = writable(0);
|
||||
|
||||
const { subscribe } = uploadAssets;
|
||||
|
||||
const isUploading = derived(uploadAssets, ($uploadAssets) => {
|
||||
return $uploadAssets.length > 0 ? true : false;
|
||||
return $uploadAssets.length > 0;
|
||||
});
|
||||
const errorsAssets = derived(uploadAssets, (a) => a.filter((e) => e.state === UploadState.ERROR));
|
||||
const errorCounter = derived(errorsAssets, (values) => values.length);
|
||||
const hasError = derived(errorCounter, (values) => values > 0);
|
||||
const remainingUploads = derived(
|
||||
uploadAssets,
|
||||
(values) => values.filter((a) => a.state === UploadState.PENDING || a.state === UploadState.STARTED).length,
|
||||
);
|
||||
|
||||
const addNewUploadAsset = (newAsset: UploadAsset) => {
|
||||
uploadAssets.update((currentSet) => [...currentSet, newAsset]);
|
||||
totalUploadCounter.update((c) => c + 1);
|
||||
uploadAssets.update((assets) => [
|
||||
...assets,
|
||||
{
|
||||
...newAsset,
|
||||
speed: 0,
|
||||
state: UploadState.PENDING,
|
||||
progress: 0,
|
||||
eta: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const updateProgress = (id: string, progress: number) => {
|
||||
const updateProgress = (id: string, loaded: number, total: number) => {
|
||||
updateAssetMap(id, (v) => {
|
||||
const uploadSpeed = v.startDate ? loaded / ((Date.now() - v.startDate) / 1000) : 0;
|
||||
return {
|
||||
...v,
|
||||
progress: Math.floor((loaded / total) * 100),
|
||||
speed: uploadSpeed,
|
||||
eta: Math.ceil((total - loaded) / uploadSpeed),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const markStarted = (id: string) => {
|
||||
updateAsset(id, {
|
||||
state: UploadState.STARTED,
|
||||
startDate: Date.now(),
|
||||
});
|
||||
};
|
||||
|
||||
const updateAssetMap = (id: string, mapper: (assets: UploadAsset) => UploadAsset) => {
|
||||
uploadAssets.update((uploadingAssets) => {
|
||||
return uploadingAssets.map((asset) => {
|
||||
if (asset.id == id) {
|
||||
return {
|
||||
...asset,
|
||||
progress: progress,
|
||||
};
|
||||
return mapper(asset);
|
||||
}
|
||||
|
||||
return asset;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const updateAsset = (id: string, partialObj: Partial<UploadAsset>) => {
|
||||
updateAssetMap(id, (v) => ({ ...v, ...partialObj }));
|
||||
};
|
||||
|
||||
const removeUploadAsset = (id: string) => {
|
||||
uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
|
||||
};
|
||||
|
||||
const dismissErrors = () => uploadAssets.update((value) => value.filter((e) => e.state !== UploadState.ERROR));
|
||||
|
||||
const resetStore = () => {
|
||||
uploadAssets.set([]);
|
||||
duplicateCounter.set(0);
|
||||
successCounter.set(0);
|
||||
totalUploadCounter.set(0);
|
||||
};
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
errorCounter,
|
||||
duplicateCounter,
|
||||
successCounter,
|
||||
totalUploadCounter,
|
||||
remainingUploads,
|
||||
hasError,
|
||||
dismissErrors,
|
||||
isUploading,
|
||||
resetStore,
|
||||
addNewUploadAsset,
|
||||
markStarted,
|
||||
updateProgress,
|
||||
updateAsset,
|
||||
removeUploadAsset,
|
||||
};
|
||||
}
|
||||
|
||||
54
web/src/lib/utils/executor-queue.spec.ts
Normal file
54
web/src/lib/utils/executor-queue.spec.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import { ExecutorQueue } from '$lib/utils/executor-queue';
|
||||
|
||||
describe('Executor Queue test', function () {
|
||||
it('should run all promises', async function () {
|
||||
const eq = new ExecutorQueue({ concurrency: 1 });
|
||||
const n1 = await eq.addTask(() => Promise.resolve(10));
|
||||
expect(n1).toBe(10);
|
||||
const n2 = await eq.addTask(() => Promise.resolve(11));
|
||||
expect(n2).toBe(11);
|
||||
const n3 = await eq.addTask(() => Promise.resolve(12));
|
||||
expect(n3).toBe(12);
|
||||
});
|
||||
|
||||
it('should respect concurrency parameter', function () {
|
||||
jest.useFakeTimers();
|
||||
const eq = new ExecutorQueue({ concurrency: 3 });
|
||||
|
||||
const finished = jest.fn();
|
||||
const started = jest.fn();
|
||||
|
||||
const timeoutPromiseBuilder = (delay: number, id: string) =>
|
||||
new Promise((resolve) => {
|
||||
console.log('Task is running: ', id);
|
||||
started();
|
||||
setTimeout(() => {
|
||||
console.log('Finished ' + id + ' after', delay, 'ms');
|
||||
finished();
|
||||
resolve(undefined);
|
||||
}, delay);
|
||||
});
|
||||
|
||||
// The first 3 should be finished within 200ms (concurrency 3)
|
||||
eq.addTask(() => timeoutPromiseBuilder(100, 'T1'));
|
||||
eq.addTask(() => timeoutPromiseBuilder(200, 'T2'));
|
||||
eq.addTask(() => timeoutPromiseBuilder(150, 'T3'));
|
||||
// The last task will be executed after 200ms and will finish at 400ms
|
||||
eq.addTask(() => timeoutPromiseBuilder(200, 'T4'));
|
||||
|
||||
expect(finished).not.toBeCalled();
|
||||
expect(started).toHaveBeenCalledTimes(3);
|
||||
|
||||
jest.advanceTimersByTime(100);
|
||||
expect(finished).toHaveBeenCalledTimes(1);
|
||||
|
||||
jest.advanceTimersByTime(250);
|
||||
expect(finished).toHaveBeenCalledTimes(3);
|
||||
// expect(started).toHaveBeenCalledTimes(4)
|
||||
|
||||
//TODO : fix The test ...
|
||||
|
||||
jest.runAllTimers();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
});
|
||||
69
web/src/lib/utils/executor-queue.ts
Normal file
69
web/src/lib/utils/executor-queue.ts
Normal file
@ -0,0 +1,69 @@
|
||||
interface Options {
|
||||
concurrency: number;
|
||||
}
|
||||
|
||||
type Runnable = () => Promise<unknown>;
|
||||
|
||||
export class ExecutorQueue {
|
||||
private queue: Array<Runnable> = [];
|
||||
private running = 0;
|
||||
private _concurrency: number;
|
||||
|
||||
constructor(options?: Options) {
|
||||
this._concurrency = options?.concurrency || 2;
|
||||
}
|
||||
|
||||
get concurrency() {
|
||||
return this._concurrency;
|
||||
}
|
||||
|
||||
set concurrency(concurrency: number) {
|
||||
if (concurrency < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._concurrency = concurrency;
|
||||
|
||||
const v = concurrency - this.running;
|
||||
if (v > 0) {
|
||||
[...new Array(this._concurrency)].forEach(() => this.tryRun());
|
||||
}
|
||||
}
|
||||
|
||||
addTask<T>(task: () => Promise<T>): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Add a custom task that wrap the original one;
|
||||
this.queue.push(async () => {
|
||||
try {
|
||||
this.running++;
|
||||
const result = task();
|
||||
resolve(await result);
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
} finally {
|
||||
this.taskFinished();
|
||||
}
|
||||
});
|
||||
// Then run it if possible !
|
||||
this.tryRun();
|
||||
});
|
||||
}
|
||||
|
||||
private taskFinished(): void {
|
||||
this.running--;
|
||||
this.tryRun();
|
||||
}
|
||||
|
||||
private tryRun() {
|
||||
if (this.running >= this.concurrency) {
|
||||
return;
|
||||
}
|
||||
|
||||
const runnable = this.queue.shift();
|
||||
if (!runnable) {
|
||||
return;
|
||||
}
|
||||
|
||||
runnable();
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,14 @@
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
|
||||
import { api, AssetFileUploadResponseDto } from '@api';
|
||||
import axios from 'axios';
|
||||
import { notificationController, NotificationType } from './../components/shared-components/notification/notification';
|
||||
import { UploadState } from '$lib/models/upload-asset';
|
||||
import { ExecutorQueue } from '$lib/utils/executor-queue';
|
||||
|
||||
let _extensions: string[];
|
||||
|
||||
export const uploadExecutionQueue = new ExecutorQueue({ concurrency: 2 });
|
||||
|
||||
const getExtensions = async () => {
|
||||
if (!_extensions) {
|
||||
const { data } = await api.serverInfoApi.getSupportedMediaTypes();
|
||||
@ -42,93 +45,87 @@ export const openFileUploadDialog = async (albumId: string | undefined = undefin
|
||||
});
|
||||
};
|
||||
|
||||
export const fileUploadHandler = async (files: File[], albumId: string | undefined = undefined) => {
|
||||
export const fileUploadHandler = async (files: File[], albumId: string | undefined = undefined): Promise<string[]> => {
|
||||
const extensions = await getExtensions();
|
||||
const iterable = {
|
||||
files: files.filter((file) => extensions.some((ext) => file.name.toLowerCase().endsWith(ext)))[Symbol.iterator](),
|
||||
|
||||
async *[Symbol.asyncIterator]() {
|
||||
for (const file of this.files) {
|
||||
yield fileUploader(file, albumId);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const concurrency = 2;
|
||||
// TODO: use Array.fromAsync instead when it's available universally.
|
||||
return Promise.all([...Array(concurrency)].map(() => fromAsync(iterable))).then((res) => res.flat());
|
||||
};
|
||||
|
||||
// polyfill for Array.fromAsync.
|
||||
//
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync
|
||||
const fromAsync = async function <T>(iterable: AsyncIterable<T>) {
|
||||
const result = [];
|
||||
for await (const value of iterable) {
|
||||
result.push(value);
|
||||
const promises = [];
|
||||
for (const file of files) {
|
||||
const name = file.name.toLowerCase();
|
||||
if (extensions.some((ext) => name.endsWith(ext))) {
|
||||
uploadAssetsStore.addNewUploadAsset({ id: getDeviceAssetId(file), file, albumId });
|
||||
promises.push(uploadExecutionQueue.addTask(() => fileUploader(file, albumId)));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
return results.filter((result): result is string => !!result);
|
||||
};
|
||||
|
||||
function getDeviceAssetId(asset: File) {
|
||||
return 'web' + '-' + asset.name + '-' + asset.lastModified;
|
||||
}
|
||||
|
||||
// TODO: should probably use the @api SDK
|
||||
async function fileUploader(asset: File, albumId: string | undefined = undefined): Promise<string | undefined> {
|
||||
const formData = new FormData();
|
||||
const fileCreatedAt = new Date(asset.lastModified).toISOString();
|
||||
const deviceAssetId = 'web' + '-' + asset.name + '-' + asset.lastModified;
|
||||
const deviceAssetId = getDeviceAssetId(asset);
|
||||
|
||||
try {
|
||||
formData.append('deviceAssetId', deviceAssetId);
|
||||
formData.append('deviceId', 'WEB');
|
||||
formData.append('fileCreatedAt', fileCreatedAt);
|
||||
formData.append('fileModifiedAt', new Date(asset.lastModified).toISOString());
|
||||
formData.append('isFavorite', 'false');
|
||||
formData.append('duration', '0:00:00.000000');
|
||||
formData.append('assetData', new File([asset], asset.name));
|
||||
return new Promise((resolve) => resolve(uploadAssetsStore.markStarted(deviceAssetId)))
|
||||
.then(() =>
|
||||
api.assetApi.uploadFile(
|
||||
{
|
||||
deviceAssetId,
|
||||
deviceId: 'WEB',
|
||||
fileCreatedAt,
|
||||
fileModifiedAt: new Date(asset.lastModified).toISOString(),
|
||||
isFavorite: false,
|
||||
duration: '0:00:00.000000',
|
||||
assetData: new File([asset], asset.name),
|
||||
key: api.getKey(),
|
||||
},
|
||||
{
|
||||
onUploadProgress: ({ loaded, total }) => {
|
||||
uploadAssetsStore.updateProgress(deviceAssetId, loaded, total);
|
||||
},
|
||||
},
|
||||
),
|
||||
)
|
||||
.then(async (response) => {
|
||||
if (response.status == 200 || response.status == 201) {
|
||||
const res: AssetFileUploadResponseDto = response.data;
|
||||
|
||||
uploadAssetsStore.addNewUploadAsset({
|
||||
id: deviceAssetId,
|
||||
file: asset,
|
||||
progress: 0,
|
||||
});
|
||||
if (res.duplicate) {
|
||||
uploadAssetsStore.duplicateCounter.update((count) => count + 1);
|
||||
}
|
||||
|
||||
const response = await axios.post('/api/asset/upload', formData, {
|
||||
params: { key: api.getKey() },
|
||||
onUploadProgress: (event) => {
|
||||
const percentComplete = Math.floor((event.loaded / event.total) * 100);
|
||||
uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
|
||||
},
|
||||
});
|
||||
if (albumId && res.id) {
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Adding to album...' });
|
||||
await addAssetsToAlbum(albumId, [res.id]);
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, { message: 'Added to album' });
|
||||
}
|
||||
|
||||
if (response.status == 200 || response.status == 201) {
|
||||
const res: AssetFileUploadResponseDto = response.data;
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, {
|
||||
state: res.duplicate ? UploadState.DUPLICATED : UploadState.DONE,
|
||||
});
|
||||
uploadAssetsStore.successCounter.update((c) => c + 1);
|
||||
|
||||
if (res.duplicate) {
|
||||
uploadAssetsStore.duplicateCounter.update((count) => count + 1);
|
||||
setTimeout(() => {
|
||||
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||
}, 1000);
|
||||
|
||||
return res.id;
|
||||
}
|
||||
|
||||
if (albumId && res.id) {
|
||||
await addAssetsToAlbum(albumId, [res.id]);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||
}, 1000);
|
||||
|
||||
return res.id;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('error uploading file ', e);
|
||||
handleUploadError(asset, JSON.stringify(e));
|
||||
uploadAssetsStore.removeUploadAsset(deviceAssetId);
|
||||
}
|
||||
})
|
||||
.catch((reason) => {
|
||||
console.log('error uploading file ', reason);
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, { state: UploadState.ERROR, error: reason });
|
||||
handleUploadError(asset, JSON.stringify(reason));
|
||||
return undefined;
|
||||
});
|
||||
}
|
||||
|
||||
function handleUploadError(asset: File, respBody = '{}', extraMessage?: string) {
|
||||
uploadAssetsStore.errorCounter.update((count) => count + 1);
|
||||
|
||||
try {
|
||||
const res = JSON.parse(respBody);
|
||||
|
||||
const extraMsg = res ? ' ' + res?.message : '';
|
||||
|
||||
notificationController.show({
|
||||
|
||||
@ -10,12 +10,18 @@ module.exports = {
|
||||
'immich-bg': 'white',
|
||||
'immich-fg': 'black',
|
||||
'immich-gray': '#F6F6F4',
|
||||
'immich-error': '#e57373',
|
||||
'immich-success': '#81c784',
|
||||
'immich-warning': '#ffb74d',
|
||||
|
||||
// Dark Theme
|
||||
'immich-dark-primary': '#adcbfa',
|
||||
'immich-dark-bg': 'black',
|
||||
'immich-dark-fg': '#e5e7eb',
|
||||
'immich-dark-gray': '#212121',
|
||||
'immich-dark-error': '#d32f2f',
|
||||
'immich-dark-success': '#388e3c',
|
||||
'immich-dark-warning': '#f57c00',
|
||||
},
|
||||
fontFamily: {
|
||||
'immich-title': ['Snowburst One', 'cursive'],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user