forked from Cutlery/immich
68 lines
1.9 KiB
Svelte
68 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import { asByteUnitString } from '$lib/utils/byte-units';
|
|
import { UploadAsset } from '$lib/models/upload-asset';
|
|
import ImmichLogo from './immich-logo.svelte';
|
|
import { locale } from '$lib/stores/preferences.store';
|
|
|
|
export let uploadAsset: UploadAsset;
|
|
|
|
let showFallbackImage = false;
|
|
const previewURL = URL.createObjectURL(uploadAsset.file);
|
|
</script>
|
|
|
|
<div
|
|
in:fade={{ duration: 250 }}
|
|
out:fade={{ duration: 100 }}
|
|
class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
|
|
>
|
|
<div class="relative">
|
|
{#if showFallbackImage}
|
|
<div in:fade={{ duration: 250 }}>
|
|
<ImmichLogo class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg" />
|
|
</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] object-cover rounded-tl-lg rounded-bl-lg"
|
|
draggable="false"
|
|
/>
|
|
{/if}
|
|
|
|
<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
|
|
<p
|
|
class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
|
|
>
|
|
.{uploadAsset.fileExtension}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-2 pr-4 flex flex-col justify-between">
|
|
<input
|
|
disabled
|
|
class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
|
|
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
|
|
/>
|
|
|
|
<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
|
|
<div
|
|
class="bg-immich-primary h-[15px] rounded-md transition-all"
|
|
style={`width: ${uploadAsset.progress}%`}
|
|
/>
|
|
<p class="absolute h-full w-full text-center top-0 text-[10px]">
|
|
{uploadAsset.progress}/100
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|