self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +02:00
Code Issues Releases Activity

chore(web): prettier (#2821)

Browse Source 
Co-authored-by: Thomas Way <thomas@6f.io>
This commit is contained in:
Jason Rasmussen
2023-07-01 00:50:47 -04:00
committed by GitHub
parent 7c2f7d6c51
commit f55b3add80
242 changed files with 12794 additions and 13426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
web/src/lib/components/shared-components/upload-asset-preview.svelte
View File

@ -1,67 +1,64 @@
<script lang="ts">
import type { UploadAsset } 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 type { UploadAsset } 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';
export let uploadAsset: UploadAsset;
export let uploadAsset: UploadAsset;
let showFallbackImage = false;
const previewURL = URL.createObjectURL(uploadAsset.file);
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]"
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="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="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="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 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>