Use cookies for client requests (#377)

* Use cookie for frontend request

* Remove api helper to use SDK

* Added error handling to status box

* Remove additional places that check for session.user

* Refactor sending password

* prettier clean up

* remove deadcode

* Move all authentication requests to the client

* refactor upload panel to only fetch assets after the upload panel disappear

* Added keydown to remove focus on title change on album viewer

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -6,7 +6,6 @@
 	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
 	import PhotoViewer from './photo-viewer.svelte';
 	import DetailPanel from './detail-panel.svelte';
-	import { session } from '$app/stores';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
 	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
@@ -62,64 +61,62 @@
 	};
 
 	const downloadFile = async () => {
-		if ($session.user) {
-			try {
-				const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
-				const imageExtension = asset.originalPath.split('.')[1];
-				const imageFileName = imageName + '.' + imageExtension;
+		try {
+			const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
+			const imageExtension = asset.originalPath.split('.')[1];
+			const imageFileName = imageName + '.' + imageExtension;
 
-				// If assets is already download -> return;
-				if ($downloadAssets[imageFileName]) {
-					return;
-				}
+			// If assets is already download -> return;
+			if ($downloadAssets[imageFileName]) {
+				return;
+			}
 
-				$downloadAssets[imageFileName] = 0;
+			$downloadAssets[imageFileName] = 0;
 
-				const { data, status } = await api.assetApi.downloadFile(
-					asset.deviceAssetId,
-					asset.deviceId,
-					false,
-					false,
-					{
-						responseType: 'blob',
-						onDownloadProgress: (progressEvent) => {
-							if (progressEvent.lengthComputable) {
-								const total = progressEvent.total;
-								const current = progressEvent.loaded;
-								let percentCompleted = Math.floor((current / total) * 100);
+			const { data, status } = await api.assetApi.downloadFile(
+				asset.deviceAssetId,
+				asset.deviceId,
+				false,
+				false,
+				{
+					responseType: 'blob',
+					onDownloadProgress: (progressEvent) => {
+						if (progressEvent.lengthComputable) {
+							const total = progressEvent.total;
+							const current = progressEvent.loaded;
+							let percentCompleted = Math.floor((current / total) * 100);
 
-								$downloadAssets[imageFileName] = percentCompleted;
-							}
+							$downloadAssets[imageFileName] = percentCompleted;
 						}
 					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
 				}
+			);
 
-				if (status === 200) {
-					const fileUrl = URL.createObjectURL(data);
-					const anchor = document.createElement('a');
-					anchor.href = fileUrl;
-					anchor.download = imageFileName;
-
-					document.body.appendChild(anchor);
-					anchor.click();
-					document.body.removeChild(anchor);
-
-					URL.revokeObjectURL(fileUrl);
-
-					// Remove item from download list
-					setTimeout(() => {
-						const copy = $downloadAssets;
-						delete copy[imageFileName];
-						$downloadAssets = copy;
-					}, 2000);
-				}
-			} catch (e) {
-				console.log('Error downloading file ', e);
+			if (!(data instanceof Blob)) {
+				return;
 			}
+
+			if (status === 200) {
+				const fileUrl = URL.createObjectURL(data);
+				const anchor = document.createElement('a');
+				anchor.href = fileUrl;
+				anchor.download = imageFileName;
+
+				document.body.appendChild(anchor);
+				anchor.click();
+				document.body.removeChild(anchor);
+
+				URL.revokeObjectURL(fileUrl);
+
+				// Remove item from download list
+				setTimeout(() => {
+					const copy = $downloadAssets;
+					delete copy[imageFileName];
+					$downloadAssets = copy;
+				}, 2000);
+			}
+		} catch (e) {
+			console.log('Error downloading file ', e);
 		}
 	};
 </script>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -37,7 +37,7 @@
 			map = leaflet.map('map');
 			leaflet
 				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 				})
 				.addTo(map);
 		}
@@ -124,7 +124,7 @@
 							{moment(
 								asset.exifInfo.dateTimeOriginal
 									.toString()
-									.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1),
+									.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1)
 							).format('ddd, hh:mm A')}
 						</p>
 						<p>GMT{moment(asset.exifInfo.dateTimeOriginal).format('Z')}</p>
@@ -141,7 +141,9 @@
 					<div class="flex text-sm gap-2">
 						{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
 							{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
-								<p>{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}MP</p>
+								<p>
+									{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}MP
+								</p>
 							{/if}
 
 							<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -14,9 +14,14 @@
 				<div class="mb-2" transition:slide>
 					<p class="font-medium text-xs truncate">■ {fileName}</p>
 					<div class="flex flex-row-reverse place-items-center gap-5">
-						<p><span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100</p>
+						<p>
+							<span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100
+						</p>
 						<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
-							<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${$downloadAssets[fileName]}%`} />
+							<div
+								class="bg-immich-primary h-[7px] rounded-full"
+								style={`width: ${$downloadAssets[fileName]}%`}
+							/>
 						</div>
 					</div>
 				</div>

web/src/lib/components/asset-viewer/intersection-observer.svelte

@@ -22,8 +22,8 @@
 					}
 				},
 				{
-					rootMargin,
-				},
+					rootMargin
+				}
 			);
 
 			observer.observe(container);

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -14,33 +13,29 @@
 	const dispatch = createEventDispatcher();
 
 	onMount(async () => {
-		if ($session.user) {
-			const { data } = await api.assetApi.getAssetById(assetId);
-			assetInfo = data;
-		}
+		const { data } = await api.assetApi.getAssetById(assetId);
+		assetInfo = data;
 	});
 
 	const loadAssetData = async () => {
-		if ($session.user) {
-			try {
-				const { data } = await api.assetApi.serveFile(
-					assetInfo.deviceAssetId,
-					deviceId,
-					false,
-					true,
-					{
-						responseType: 'blob'
-					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
+		try {
+			const { data } = await api.assetApi.serveFile(
+				assetInfo.deviceAssetId,
+				deviceId,
+				false,
+				true,
+				{
+					responseType: 'blob'
 				}
+			);
 
-				const assetData = URL.createObjectURL(data);
-				return assetData;
-			} catch (e) {}
-		}
+			if (!(data instanceof Blob)) {
+				return;
+			}
+
+			const assetData = URL.createObjectURL(data);
+			return assetData;
+		} catch (e) {}
 	};
 </script>
 

web/src/lib/components/asset-viewer/video-viewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -16,50 +15,46 @@
 	let isVideoLoading = true;
 
 	onMount(async () => {
-		if ($session.user) {
-			const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
+		const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
 
-			asset = assetInfo;
+		asset = assetInfo;
 
-			await loadVideoData();
-		}
+		await loadVideoData();
 	});
 
 	const loadVideoData = async () => {
 		isVideoLoading = true;
 
-		if ($session.user) {
-			try {
-				const { data } = await api.assetApi.serveFile(
-					asset.deviceAssetId,
-					asset.deviceId,
-					false,
-					true,
-					{
-						responseType: 'blob'
-					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
+		try {
+			const { data } = await api.assetApi.serveFile(
+				asset.deviceAssetId,
+				asset.deviceId,
+				false,
+				true,
+				{
+					responseType: 'blob'
 				}
+			);
 
-				const videoData = URL.createObjectURL(data);
-				videoPlayerNode.src = videoData;
+			if (!(data instanceof Blob)) {
+				return;
+			}
 
-				videoPlayerNode.load();
+			const videoData = URL.createObjectURL(data);
+			videoPlayerNode.src = videoData;
 
-				videoPlayerNode.oncanplay = () => {
-					videoPlayerNode.muted = true;
-					videoPlayerNode.play();
-					videoPlayerNode.muted = false;
+			videoPlayerNode.load();
 
-					isVideoLoading = false;
-				};
+			videoPlayerNode.oncanplay = () => {
+				videoPlayerNode.muted = true;
+				videoPlayerNode.play();
+				videoPlayerNode.muted = false;
 
-				return videoData;
-			} catch (e) {}
-		}
+				isVideoLoading = false;
+			};
+
+			return videoData;
+		} catch (e) {}
 	};
 </script>