mirror of
https://github.com/immich-app/immich.git
synced 2024-12-24 10:37:28 +02:00
feat(web): add share link on asset-viewer (#7595)
* feat(web): add share link on asset-viewer * PR feedback: move download to context, make share first button
This commit is contained in:
parent
29a4389aac
commit
2bb7b3e60f
@ -9,7 +9,6 @@
|
||||
import {
|
||||
mdiAlertOutline,
|
||||
mdiArrowLeft,
|
||||
mdiCloudDownloadOutline,
|
||||
mdiContentCopy,
|
||||
mdiDeleteOutline,
|
||||
mdiDotsVertical,
|
||||
@ -20,6 +19,7 @@
|
||||
mdiMagnifyPlusOutline,
|
||||
mdiMotionPauseOutline,
|
||||
mdiPlaySpeed,
|
||||
mdiShareVariantOutline,
|
||||
} from '@mdi/js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
@ -32,12 +32,20 @@
|
||||
export let isMotionPhotoPlaying = false;
|
||||
export let showDownloadButton: boolean;
|
||||
export let showDetailButton: boolean;
|
||||
export let showShareButton: boolean;
|
||||
export let showSlideshow = false;
|
||||
export let hasStackChildren = false;
|
||||
|
||||
$: isOwner = asset.ownerId === $user?.id;
|
||||
|
||||
type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
|
||||
type MenuItemEvent =
|
||||
| 'addToAlbum'
|
||||
| 'addToSharedAlbum'
|
||||
| 'asProfileImage'
|
||||
| 'download'
|
||||
| 'playSlideShow'
|
||||
| 'runJob'
|
||||
| 'unstack';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
back: void;
|
||||
@ -54,6 +62,7 @@
|
||||
runJob: AssetJobName;
|
||||
playSlideShow: void;
|
||||
unstack: void;
|
||||
showShareModal: void;
|
||||
}>();
|
||||
|
||||
let contextMenuPosition = { x: 0, y: 0 };
|
||||
@ -82,6 +91,14 @@
|
||||
<CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('back')} />
|
||||
</div>
|
||||
<div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
|
||||
{#if showShareButton}
|
||||
<CircleIconButton
|
||||
isOpacity={true}
|
||||
icon={mdiShareVariantOutline}
|
||||
on:click={() => dispatch('showShareModal')}
|
||||
title="Share"
|
||||
/>
|
||||
{/if}
|
||||
{#if asset.isOffline}
|
||||
<CircleIconButton
|
||||
isOpacity={true}
|
||||
@ -130,15 +147,6 @@
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showDownloadButton}
|
||||
<CircleIconButton
|
||||
isOpacity={true}
|
||||
icon={mdiCloudDownloadOutline}
|
||||
on:click={() => dispatch('download')}
|
||||
title="Download"
|
||||
/>
|
||||
{/if}
|
||||
{#if showDetailButton}
|
||||
<CircleIconButton
|
||||
isOpacity={true}
|
||||
@ -167,6 +175,9 @@
|
||||
{#if showSlideshow}
|
||||
<MenuOption on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
|
||||
{/if}
|
||||
{#if showDownloadButton}
|
||||
<MenuOption on:click={() => onMenuClick('download')} text="Download" />
|
||||
{/if}
|
||||
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
|
||||
<MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
|
||||
|
||||
|
@ -51,6 +51,7 @@
|
||||
import PhotoViewer from './photo-viewer.svelte';
|
||||
import SlideshowBar from './slideshow-bar.svelte';
|
||||
import VideoViewer from './video-viewer.svelte';
|
||||
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||
|
||||
export let assetStore: AssetStore | null = null;
|
||||
export let asset: AssetResponseDto;
|
||||
@ -81,11 +82,13 @@
|
||||
let appearsInAlbums: AlbumResponseDto[] = [];
|
||||
let isShowAlbumPicker = false;
|
||||
let isShowDeleteConfirmation = false;
|
||||
let isShowShareModal = false;
|
||||
let addToSharedAlbum = true;
|
||||
let shouldPlayMotionPhoto = false;
|
||||
let isShowProfileImageCrop = false;
|
||||
let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
|
||||
let shouldShowDetailButton = asset.hasMetadata;
|
||||
let shouldShowShareModal = !asset.isTrashed;
|
||||
let canCopyImagesToClipboard: boolean;
|
||||
let slideshowStateUnsubscribe: () => void;
|
||||
let shuffleSlideshowUnsubscribe: () => void;
|
||||
@ -292,6 +295,10 @@
|
||||
isShowDeleteConfirmation = false;
|
||||
return;
|
||||
}
|
||||
if (isShowShareModal) {
|
||||
isShowShareModal = false;
|
||||
return;
|
||||
}
|
||||
closeViewer();
|
||||
return;
|
||||
}
|
||||
@ -563,6 +570,7 @@
|
||||
showDetailButton={shouldShowDetailButton}
|
||||
showSlideshow={!!assetStore}
|
||||
hasStackChildren={$stackAssetsStore.length > 0}
|
||||
showShareButton={shouldShowShareModal}
|
||||
on:back={closeViewer}
|
||||
on:showDetail={showDetailInfoHandler}
|
||||
on:download={() => downloadFile(asset)}
|
||||
@ -577,6 +585,7 @@
|
||||
on:runJob={({ detail: job }) => handleRunJob(job)}
|
||||
on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
|
||||
on:unstack={handleUnstack}
|
||||
on:showShareModal={() => (isShowShareModal = true)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
@ -767,6 +776,10 @@
|
||||
{#if isShowProfileImageCrop}
|
||||
<ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
|
||||
{/if}
|
||||
|
||||
{#if isShowShareModal}
|
||||
<CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
Loading…
Reference in New Issue
Block a user