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

feat(web): improve individual share ux (#17430)

Browse source
This commit is contained in:
snek 2025-04-08 15:11:37 +02:00 • committed by GitHub
parent 7f116d8e98
commit 6ae24fbbd4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 69 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

95
web/src/lib/components/share-page/individual-shared-viewer.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import { AppRoute, AssetAction } from '$lib/constants';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { getKey, handlePromiseError } from '$lib/utils';
import { downloadArchive } from '$lib/utils/asset-utils';
@ -14,6 +15,7 @@
import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import { cancelMultiselect } from '$lib/utils/asset-utils';
import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
@ -72,44 +74,67 @@
const handleSelectAll = () => {
assetInteraction.selectAssets(assets);
};
const handleAction = async (action: Action) => {
switch (action.type) {
case AssetAction.ARCHIVE:
case AssetAction.DELETE:
case AssetAction.TRASH: {
await goto(AppRoute.PHOTOS);
break;
}
}
};
</script>
<section class="bg-immich-bg dark:bg-immich-dark-bg">
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
{#if sharedLink?.allowDownload}
<DownloadAction filename="immich-shared.zip" />
{/if}
{#if isOwned}
<RemoveFromSharedLink bind:sharedLink />
{/if}
</AssetSelectControlBar>
{:else}
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink />
{/snippet}
{#snippet trailing()}
{#if sharedLink?.allowUpload}
<CircleIconButton
title={$t('add_photos')}
onclick={() => handleUploadAssets()}
icon={mdiFileImagePlusOutline}
/>
{/if}
{#if sharedLink?.allowUpload || assets.length > 1}
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
{#if sharedLink?.allowDownload}
<CircleIconButton title={$t('download')} onclick={downloadAssets} icon={mdiFolderDownloadOutline} />
<DownloadAction filename="immich-shared.zip" />
{/if}
{/snippet}
</ControlAppBar>
{#if isOwned}
<RemoveFromSharedLink bind:sharedLink />
{/if}
</AssetSelectControlBar>
{:else}
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink />
{/snippet}
{#snippet trailing()}
{#if sharedLink?.allowUpload}
<CircleIconButton
title={$t('add_photos')}
onclick={() => handleUploadAssets()}
icon={mdiFileImagePlusOutline}
/>
{/if}
{#if sharedLink?.allowDownload}
<CircleIconButton title={$t('download')} onclick={downloadAssets} icon={mdiFolderDownloadOutline} />
{/if}
{/snippet}
</ControlAppBar>
{/if}
<section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
<GalleryViewer {assets} {assetInteraction} {viewport} />
</section>
{:else}
<AssetViewer
asset={assets[0]}
showCloseButton={false}
onAction={handleAction}
onPrevious={() => Promise.resolve(false)}
onNext={() => Promise.resolve(false)}
onRandom={() => Promise.resolve(undefined)}
onClose={() => {}}
/>
{/if}
<section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
<GalleryViewer {assets} {assetInteraction} {viewport} />
</section>
</section>