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

* feat(web): show assets without thumbnails

* chore: open api

web/src/api/open-api/api.ts

@@ -1330,6 +1330,12 @@ export interface GetAssetByTimeBucketDto {
      * @memberof GetAssetByTimeBucketDto
      */
     'userId'?: string;
+    /**
+     * Include assets without thumbnails
+     * @type {boolean}
+     * @memberof GetAssetByTimeBucketDto
+     */
+    'withoutThumbs'?: boolean;
 }
 /**
  * 

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -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}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -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">

web/src/lib/stores/assets.store.ts

@@ -67,7 +67,8 @@ function createAssetStore() {
 			const { data: assets } = await api.assetApi.getAssetByTimeBucket(
 				{
 					timeBucket: [bucket],
-					userId: _assetGridState.userId
+					userId: _assetGridState.userId,
+					withoutThumbs: true
 				},
 				{ signal: currentBucketData?.cancelToken.signal }
 			);