diff --git a/server/apps/immich/src/api-v1/asset/asset.controller.ts b/server/apps/immich/src/api-v1/asset/asset.controller.ts index eb6ff5fd41..cdf73a819c 100644 --- a/server/apps/immich/src/api-v1/asset/asset.controller.ts +++ b/server/apps/immich/src/api-v1/asset/asset.controller.ts @@ -123,12 +123,12 @@ export class AssetController { } @Get('/thumbnail/:assetId') - @Header('Cache-Control', 'max-age=300') async getAssetThumbnail( + @Response({ passthrough: true }) res: Res, @Param('assetId') assetId: string, @Query(new ValidationPipe({ transform: true })) query: GetAssetThumbnailDto, ): Promise { - return this.assetService.getAssetThumbnail(assetId, query); + return this.assetService.getAssetThumbnail(assetId, query, res); } @Get('/curated-objects') diff --git a/server/apps/immich/src/api-v1/asset/asset.service.ts b/server/apps/immich/src/api-v1/asset/asset.service.ts index 8b2d61f2c7..2fbe75a56f 100644 --- a/server/apps/immich/src/api-v1/asset/asset.service.ts +++ b/server/apps/immich/src/api-v1/asset/asset.service.ts @@ -165,7 +165,7 @@ export class AssetService { } } - public async getAssetThumbnail(assetId: string, query: GetAssetThumbnailDto) { + public async getAssetThumbnail(assetId: string, query: GetAssetThumbnailDto, res: Res) { let fileReadStream: ReadStream; const asset = await this.assetRepository.findOne({ where: { id: assetId } }); @@ -196,8 +196,10 @@ export class AssetService { } } + res.header('Cache-Control', 'max-age=300'); return new StreamableFile(fileReadStream); } catch (e) { + res.header('Cache-Control', 'none'); Logger.error(`Cannot create read stream for asset ${asset.id}`, 'getAssetThumbnail'); throw new InternalServerErrorException( e, diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index ba6074f5a5..75f69436b7 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -209,7 +209,6 @@ const createAlbumHandler = async (event: CustomEvent) => { const { assets }: { assets: AssetResponseDto[] } = event.detail; - try { const { data } = await api.albumApi.addAssetsToAlbum(album.id, { assetIds: assets.map((a) => a.id) @@ -226,6 +225,22 @@ } }; + const assetUploadedToAlbumHandler = async (event: CustomEvent) => { + const { assetIds }: { assetIds: string[] } = event.detail; + try { + const { data } = await api.albumApi.addAssetsToAlbum(album.id, { + assetIds: assetIds + }); + album = data; + } catch (e) { + console.error('Error [assetUploadedToAlbumHandler] ', e); + notificationController.show({ + type: NotificationType.Error, + message: 'Error adding asset to album, check console for more details' + }); + } + }; + const addUserHandler = async (event: CustomEvent) => { const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail; @@ -480,6 +495,7 @@ assetsInAlbum={album.assets} on:go-back={() => (isShowAssetSelection = false)} on:create-album={createAlbumHandler} + on:asset-uploaded={assetUploadedToAlbumHandler} /> {/if} diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte index cc7ffe7968..d9e35aebb5 100644 --- a/web/src/lib/components/album-page/asset-selection.svelte +++ b/web/src/lib/components/album-page/asset-selection.svelte @@ -39,20 +39,23 @@ $: { if (uploadAssets.length == uploadAssetsCount) { // Filter assets that are already in the album - const assetsToAdd = uploadAssets.filter( + const assetIds = uploadAssets.filter( (asset) => !!asset && !assetsInAlbum.some((a) => a.id === asset) ); // Add the just uploaded assets to the album - if (assetsToAdd.length) { - dispatch('create-album', { - assets: assetsToAdd + if (assetIds.length) { + dispatch('asset-uploaded', { + assetIds }); } // Clean up states. albumUploadAssetStore.asset.set([]); albumUploadAssetStore.count.set(9999); + + assetInteractionStore.clearMultiselect(); + dispatch('go-back'); } } @@ -99,6 +102,6 @@
- +
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte index 9e9db0969d..23a4cb2380 100644 --- a/web/src/lib/components/photos-page/asset-date-group.svelte +++ b/web/src/lib/components/photos-page/asset-date-group.svelte @@ -18,8 +18,7 @@ export let assets: AssetResponseDto[]; export let bucketDate: string; export let bucketHeight: number; - - const dispatch = createEventDispatcher(); + export let isAlbumSelectionMode = false; let isMouseOverGroup = false; let actualBucketHeight: number; @@ -41,6 +40,11 @@ assetsInDateGroup: AssetResponseDto[], dateGroupTitle: string ) => { + if (isAlbumSelectionMode) { + assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle); + return; + } + if ($isMultiSelectStoreState) { assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle); } else { diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index 5ef8680588..aab3b32865 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -16,6 +16,7 @@ let viewportHeight = 0; let viewportWidth = 0; let assetGridElement: HTMLElement; + export let isAlbumSelectionMode = false; onMount(async () => { const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({ @@ -87,6 +88,7 @@
{#if intersecting} { - // getAssetsInfo() + notificationController.show({ + message: 'Upload success, refresh the page to see new upload assets', + type: NotificationType.Info + }); }} class="absolute right-6 bottom-6 z-[10000]" > diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts index aa2f4faaeb..3ca8dc2d08 100644 --- a/web/src/lib/stores/assets.store.ts +++ b/web/src/lib/stores/assets.store.ts @@ -1,3 +1,4 @@ +import { TimeGroupEnum } from './../../api/open-api/api'; import { writable, derived, readable } from 'svelte/store'; import lodash from 'lodash-es'; import _ from 'lodash';