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

refactor(web): asset grid stores (#3464)

Browse source 
* Refactor asset grid stores

* Iterate over buckets with for..of loop

* Rebase on top of main branch changes
This commit is contained in:
Sergey Kondrikov 2023-08-01 04:27:56 +03:00 • committed by GitHub
parent 13051c1e5a
commit 5f9dfa9493
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 330 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View file

@ -11,7 +11,7 @@
import { flip } from 'svelte/animate';
import { archivedAsset } from '$lib/stores/archived-asset.store';
import { getThumbnailSize } from '$lib/utils/thumbnail-util';
import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
export let assets: AssetResponseDto[];
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@ -20,6 +20,8 @@
export let viewFrom: ViewFrom;
export let showArchiveIcon = false;
let { isViewing: showAssetViewer } = assetViewingStore;
let selectedAsset: AssetResponseDto;
let currentViewAssetIndex = 0;
@ -33,7 +35,7 @@
currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
selectedAsset = assets[currentViewAssetIndex];
$isViewingAssetStoreState = true;
$showAssetViewer = true;
pushState(selectedAsset.id);
};
@ -81,7 +83,7 @@
};
const closeViewer = () => {
$isViewingAssetStoreState = false;
$showAssetViewer = false;
history.pushState(null, '', `${$page.url.pathname}`);
};
@ -117,7 +119,7 @@
{/if}
<!-- Overlay Asset Viewer -->
{#if $isViewingAssetStoreState}
{#if $showAssetViewer}
<AssetViewer
asset={selectedAsset}
publicSharedKey={sharedLink?.key}

8
web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
View file

@ -19,15 +19,15 @@
<script lang="ts">
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
import { assetGridState } from '$lib/stores/assets.store';
import { createEventDispatcher } from 'svelte';
import { SegmentScrollbarLayout } from './segment-scrollbar-layout';
import type { AssetStore } from '$lib/stores/assets.store';
export let scrollTop = 0;
export let scrollbarHeight = 0;
export let assetStore: AssetStore;
$: timelineHeight = $assetGridState.timelineHeight;
$: timelineHeight = $assetStore.timelineHeight;
$: timelineScrolltop = (scrollbarPosition / scrollbarHeight) * timelineHeight;
let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];
@ -48,7 +48,7 @@
$: {
let result: SegmentScrollbarLayout[] = [];
for (const bucket of $assetGridState.buckets) {
for (const bucket of $assetStore.buckets) {
let segmentLayout = new SegmentScrollbarLayout();
segmentLayout.count = bucket.assets.length;
segmentLayout.height = (bucket.bucketHeight / timelineHeight) * scrollbarHeight;