self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-06 06:07:29 +02:00
Code Issues Releases Activity

refactor(web): asset viewer actions (#11449)

Browse Source 
* refactor(web): asset viewer actions

* motion photo slot and more refactoring
This commit is contained in:
Michel Heusschen
2024-07-31 18:25:38 +02:00
committed by GitHub
parent 3a3ea6135e
commit 281cfc95a4
27 changed files with 682 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -1,19 +1,20 @@
<script lang="ts">
import Portal from '../portal/portal.svelte';
import { goto } from '$app/navigation';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import { AppRoute, AssetAction } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import type { BucketPosition, Viewport } from '$lib/stores/assets.store';
import { handleError } from '$lib/utils/handle-error';
import { type AssetResponseDto } from '@immich/sdk';
import { createEventDispatcher, onDestroy } from 'svelte';
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
import justifiedLayout from 'justified-layout';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { calculateWidth } from '$lib/utils/timeline-util';
import { handleError } from '$lib/utils/handle-error';
import { navigate } from '$lib/utils/navigation';
import { AppRoute, AssetAction } from '$lib/constants';
import { goto } from '$app/navigation';
import { calculateWidth } from '$lib/utils/timeline-util';
import { type AssetResponseDto } from '@immich/sdk';
import justifiedLayout from 'justified-layout';
import { createEventDispatcher, onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
import Portal from '../portal/portal.svelte';
const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
@ -68,13 +69,13 @@
}
};
const handleAction = async (action: AssetAction, asset: AssetResponseDto) => {
switch (action) {
const handleAction = async (action: Action) => {
switch (action.type) {
case AssetAction.ARCHIVE:
case AssetAction.DELETE:
case AssetAction.TRASH: {
assets.splice(
assets.findIndex((a) => a.id === asset.id),
assets.findIndex((a) => a.id === action.asset.id),
1,
);
assets = assets;
@ -149,11 +150,6 @@
<!-- Overlay Asset Viewer -->
{#if $isViewerOpen}
<Portal target="body">
<AssetViewer
asset={$viewingAsset}
on:action={({ detail: action }) => handleAction(action.type, action.asset)}
on:previous={handlePrevious}
on:next={handleNext}
/>
<AssetViewer asset={$viewingAsset} onAction={handleAction} on:previous={handlePrevious} on:next={handleNext} />
</Portal>
{/if}