feat(web/server) Add more options to public shared link (#1348)

* Added migration files

* Added logic for shared album level

* Added permission for EXIF

* Update shared link response dto

* Added condition to show download button

* Create and edit link with new parameter:

* Remove deadcode

* PR feedback

* More refactor

* Move logic of allow original file to service

* Simplify

* Wording

web/src/lib/components/shared-components/base-modal.svelte

@@ -36,7 +36,7 @@
 	<div
 		use:clickOutside
 		on:outclick={() => dispatch('close')}
-		class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md"
+		class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[600px] rounded-lg shadow-md"
 	>
 		<div class="flex justify-between place-items-center px-5 py-3">
 			<div>

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -29,6 +29,8 @@
 	let sharedLink = '';
 	let description = '';
 	let shouldChangeExpirationTime = false;
+	let isAllowDownload = true;
+	let shouldShowExif = true;
 	const dispatch = createEventDispatcher();
 
 	const expiredDateOption: ImmichDropDownOption = {
@@ -42,6 +44,8 @@
 				description = editingLink.description;
 			}
 			isAllowUpload = editingLink.allowUpload;
+			isAllowDownload = editingLink.allowDownload;
+			shouldShowExif = editingLink.showExif;
 		}
 	});
 
@@ -58,7 +62,9 @@
 					albumId: album.id,
 					expiredAt: expirationDate,
 					allowUpload: isAllowUpload,
-					description: description
+					description: description,
+					allowDownload: isAllowDownload,
+					showExif: shouldShowExif
 				});
 				buildSharedLink(data);
 			} else {
@@ -66,7 +72,9 @@
 					assetIds: sharedAssets.map((a) => a.id),
 					expiredAt: expirationDate,
 					allowUpload: isAllowUpload,
-					description: description
+					description: description,
+					allowDownload: isAllowDownload,
+					showExif: shouldShowExif
 				});
 				buildSharedLink(data);
 			}
@@ -132,7 +140,9 @@
 					description: description,
 					expiredAt: expirationDate,
 					allowUpload: isAllowUpload,
-					isEditExpireTime: shouldChangeExpirationTime
+					isEditExpireTime: shouldChangeExpirationTime,
+					allowDownload: isAllowDownload,
+					showExif: shouldShowExif
 				});
 
 				notificationController.show({
@@ -185,12 +195,12 @@
 			{/if}
 		{/if}
 
-		<div class="mt-6 mb-2">
+		<div class="mt-4 mb-2">
 			<p class="text-xs">LINK OPTIONS</p>
 		</div>
 		<div class="p-4 bg-gray-100 dark:bg-black/40 rounded-lg">
 			<div class="flex flex-col">
-				<div class="mb-4">
+				<div class="mb-2">
 					<SettingInputField
 						inputType={SettingInputFieldType.TEXT}
 						label="Description"
@@ -198,9 +208,19 @@
 					/>
 				</div>
 
-				<SettingSwitch bind:checked={isAllowUpload} title={'Allow public user to upload'} />
+				<div class="my-3">
+					<SettingSwitch bind:checked={shouldShowExif} title={'Show metadata'} />
+				</div>
 
-				<div class="text-sm mt-4">
+				<div class="my-3">
+					<SettingSwitch bind:checked={isAllowDownload} title={'Allow public user to download'} />
+				</div>
+
+				<div class="my-3">
+					<SettingSwitch bind:checked={isAllowUpload} title={'Allow public user to upload'} />
+				</div>
+
+				<div class="text-sm">
 					{#if editingLink}
 						<p class="my-2 immich-form-label">
 							<SettingSwitch

web/src/lib/components/shared-components/dropdown-button.svelte

@@ -25,7 +25,7 @@
 		{disabled}
 		on:click={toggle}
 		aria-expanded={isOpen}
-		class="bg-gray-200 w-full flex p-2 rounded-lg dark:bg-gray-600 place-items-center justify-between disabled:cursor-not-allowed dark:disabled:bg-gray-300 disabled:bg-gray-600 "
+		class="bg-gray-200 w-full flex p-2 rounded-lg dark:bg-gray-600 place-items-center justify-between disabled:cursor-not-allowed dark:disabled:bg-gray-300 disabled:bg-gray-600"
 	>
 		<div>
 			{selected}

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { handleError } from '$lib/utils/handle-error';
-	import { AssetResponseDto, ThumbnailFormat } from '@api';
+	import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
 
 	import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
 	import ImmichThumbnail from '../../shared-components/immich-thumbnail.svelte';
 
 	export let assets: AssetResponseDto[];
-	export let key: string;
+	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
 	export let selectedAssets: Set<AssetResponseDto> = new Set();
 
 	let isShowAssetViewer = false;
@@ -96,7 +96,7 @@
 			<ImmichThumbnail
 				{asset}
 				{thumbnailSize}
-				publicSharedKey={key}
+				publicSharedKey={sharedLink?.key}
 				format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
 				on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
 				on:select={selectAssetHandler}
@@ -110,7 +110,8 @@
 {#if isShowAssetViewer}
 	<AssetViewer
 		asset={selectedAsset}
-		publicSharedKey={key}
+		publicSharedKey={sharedLink?.key}
+		{sharedLink}
 		on:navigate-previous={navigateAssetBackward}
 		on:navigate-next={navigateAssetForward}
 		on:close={closeViewer}