forked from Cutlery/immich
adb265794c
* feat(web): allow uploading more file types * fix(web): make filename extension lowercase
83 lines
2.6 KiB
Svelte
83 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { quartInOut } from 'svelte/easing';
|
|
import { scale, fade } 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 { notificationController, NotificationType } from './notification/notification';
|
|
import UploadAssetPreview from './upload-asset-preview.svelte';
|
|
|
|
let showDetail = true;
|
|
let uploadLength = 0;
|
|
let isUploading = false;
|
|
|
|
// Reactive action to update asset uploadLength whenever there is a new one added to the list
|
|
$: {
|
|
if ($uploadAssetsStore.length != uploadLength) {
|
|
uploadLength = $uploadAssetsStore.length;
|
|
}
|
|
}
|
|
|
|
uploadAssetsStore.isUploading.subscribe((value) => {
|
|
isUploading = value;
|
|
});
|
|
</script>
|
|
|
|
{#if isUploading}
|
|
<div
|
|
in:fade={{ duration: 250 }}
|
|
out:fade={{ duration: 250, delay: 1000 }}
|
|
on:outroend={() => {
|
|
notificationController.show({
|
|
message: 'Upload success, refresh the page to see new upload assets',
|
|
type: NotificationType.Info
|
|
});
|
|
}}
|
|
class="absolute right-6 bottom-6 z-[10000]"
|
|
>
|
|
{#if showDetail}
|
|
<div
|
|
in:scale={{ duration: 250, easing: quartInOut }}
|
|
class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border "
|
|
>
|
|
<div class="flex justify-between place-item-center mb-4">
|
|
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
|
|
<button
|
|
on:click={() => (showDetail = false)}
|
|
class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
|
|
>
|
|
<WindowMinimize />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
|
|
{#each $uploadAssetsStore as uploadAsset}
|
|
{#key uploadAsset.id}
|
|
<UploadAssetPreview {uploadAsset} />
|
|
{/key}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="rounded-full">
|
|
<button
|
|
in:scale={{ duration: 250, easing: quartInOut }}
|
|
on:click={() => (showDetail = true)}
|
|
class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
|
|
>
|
|
{$uploadAssetsStore.length}
|
|
</button>
|
|
<button
|
|
in:scale={{ duration: 250, easing: quartInOut }}
|
|
on:click={() => (showDetail = true)}
|
|
class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg "
|
|
>
|
|
<div class="animate-pulse">
|
|
<CloudUploadOutline size="30" color="#4250af" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|