KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): show assets without thumbs (#2561)

Browse Source 
* feat(web): show assets without thumbnails

* chore: open api
This commit is contained in:
Jason Rasmussen
2023-05-24 22:13:02 -04:00
committed by GitHub
parent d827a6182b
commit 1613ae9185
10 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@@ -11,6 +11,7 @@
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
import { fly } from 'svelte/transition';
import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
import {
@@ -350,7 +351,15 @@
<div class="row-start-1 row-span-full col-start-1 col-span-4">
{#key asset.id}
{#if asset.type === AssetTypeEnum.Image}
{#if !asset.resizePath}
<div class="h-full w-full flex justify-center">
<div
class="h-full bg-gray-100 dark:bg-immich-dark-gray flex items-center justify-center aspect-square px-auto"
>
<ImageBrokenVariant size="25%" />
</div>
</div>
{:else if asset.type === AssetTypeEnum.Image}
{#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
<VideoViewer
{publicSharedKey}

22
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@@ -10,6 +10,7 @@
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import ImageThumbnail from './image-thumbnail.svelte';
import VideoThumbnail from './video-thumbnail.svelte';
import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
const dispatch = createEventDispatcher();
@@ -101,7 +102,7 @@
</div>
<div
class="bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
class:scale-[0.85]={selected}
>
<!-- Gradient overlay on hover -->
@@ -121,12 +122,19 @@
<ArchiveArrowDownOutline size="24" class="text-white" />
</div>
{/if}
<ImageThumbnail
url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
altText={asset.originalFileName}
widthStyle="{width}px"
heightStyle="{height}px"
/>
{#if asset.resizePath}
<ImageThumbnail
url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
altText={asset.originalFileName}
widthStyle="{width}px"
heightStyle="{height}px"
/>
{:else}
<div class="w-full h-full p-4 flex items-center justify-center">
<ImageBrokenVariant size="48" />
</div>
{/if}
{#if asset.type === AssetTypeEnum.Video}
<div class="absolute w-full h-full top-0">