helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): preload assets in photo-viewer (#7920)

Browse source 
* feat(web): preload assets in photo-viewer

* PR feedback

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sam Holton 2024-03-14 17:12:32 -04:00 • committed by GitHub
parent 582cdcab82
commit ab4b8eca15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -55,6 +55,7 @@
export let assetStore: AssetStore | null = null;
export let asset: AssetResponseDto;
export let preloadAssets: AssetResponseDto[] = [];
export let showNavigation = true;
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
$: isTrashEnabled = $featureFlags.trash;
@ -103,6 +104,11 @@
$stackAssetsStore = [...$stackAssetsStore, asset].sort(
(a, b) => new Date(b.fileCreatedAt).getTime() - new Date(a.fileCreatedAt).getTime(),
);
// if its a stack, add the next stack image in addition to the next asset
if (asset.stackCount > 1) {
preloadAssets.push($stackAssetsStore[1]);
}
}
if (!$stackAssetsStore.map((a) => a.id).includes(asset.id)) {
@ -613,7 +619,7 @@
{#if previewStackedAsset}
{#key previewStackedAsset.id}
{#if previewStackedAsset.type === AssetTypeEnum.Image}
<PhotoViewer asset={previewStackedAsset} on:close={closeViewer} haveFadeTransition={false} />
<PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} />
{:else}
<VideoViewer
assetId={previewStackedAsset.id}
@ -645,7 +651,7 @@
.endsWith('.insp'))}
<PanoramaViewer {asset} />
{:else}
<PhotoViewer {asset} on:close={closeViewer} />
<PhotoViewer {asset} {preloadAssets} on:close={closeViewer} />
{/if}
{:else}
<VideoViewer
@ -676,7 +682,7 @@
class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
{#each $stackAssetsStore as stackedAsset (stackedAsset.id)}
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
@ -687,7 +693,10 @@
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
asset={stackedAsset}
on:click={() => (asset = stackedAsset)}
on:click={() => {
asset = stackedAsset;
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
}}
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}