Refactor web to use OpenAPI SDK (#326)

* Refactor main index page

* Refactor admin page

* Refactor Auth endpoint

* Refactor directory to prep for monorepo

* Fixed refactoring path

* Resolved file path in vite

* Refactor photo index page

* Refactor thumbnail

* Fixed test

* Refactor Video Viewer component

* Refactor download file

* Refactor navigation bar

* Refactor upload file check

* Simplify Upload Asset signature

* PR feedback

web/src/lib/components/admin/user-management.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { UserResponseDto } from '@api';
+
 	import { createEventDispatcher } from 'svelte';
 	import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
-	export let usersOnServer: Array<any>;
+	export let allUsers: Array<UserResponseDto>;
 
 	const dispatch = createEventDispatcher();
 </script>
@@ -18,7 +20,7 @@
 		</tr>
 	</thead>
 	<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
-		{#each usersOnServer as user, i}
+		{#each allUsers as user, i}
 			<tr
 				class={`text-center flex place-items-center w-full border-b h-[80px] ${
 					i % 2 == 0 ? 'bg-gray-100' : 'bg-immich-bg'

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

@@ -1,22 +1,21 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import { fly, slide } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 	import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
 	import { flattenAssetGroupByDate } from '$lib/stores/assets';
 	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
 	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import { AssetType, type ImmichAsset, type ImmichExif } from '../../models/immich-asset';
+	import { AssetType } from '../../models/immich-asset';
 	import PhotoViewer from './photo-viewer.svelte';
 	import DetailPanel from './detail-panel.svelte';
 	import { session } from '$app/stores';
-	import { serverEndpoint } from '../../constants';
-	import axios from 'axios';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
+	import { api, AssetResponseDto } from '@api';
 
 	const dispatch = createEventDispatcher();
 
-	export let selectedAsset: ImmichAsset;
+	export let selectedAsset: AssetResponseDto;
 
 	export let selectedIndex: number;
 
@@ -99,8 +98,6 @@
 
 	const downloadFile = async () => {
 		if ($session.user) {
-			const url = `${serverEndpoint}/asset/download?aid=${selectedAsset.deviceAssetId}&did=${selectedAsset.deviceId}&isThumb=false`;
-
 			try {
 				const imageName = selectedAsset.exifInfo?.imageName ? selectedAsset.exifInfo?.imageName : selectedAsset.id;
 				const imageExtension = selectedAsset.originalPath.split('.')[1];
@@ -112,24 +109,31 @@
 				}
 				$downloadAssets[imageFileName] = 0;
 
-				const res = await axios.get(url, {
-					responseType: 'blob',
-					headers: {
-						Authorization: 'Bearer ' + $session.user.accessToken,
-					},
-					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(
+					selectedAsset.deviceAssetId,
+					selectedAsset.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 (res.status === 200) {
-					const fileUrl = URL.createObjectURL(new Blob([res.data]));
+				if (!(data instanceof Blob)) {
+					return;
+				}
+
+				if (status === 200) {
+					const fileUrl = URL.createObjectURL(data);
 					const anchor = document.createElement('a');
 					anchor.href = fileUrl;
 					anchor.download = imageFileName;

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

@@ -5,24 +5,23 @@
 	import CameraIris from 'svelte-material-icons/CameraIris.svelte';
 	import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
 	import moment from 'moment';
-	import type { ImmichAsset } from '../../models/immich-asset';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { browser } from '$app/env';
-	import { round } from 'lodash';
+	import { AssetResponseDto } from '@api';
 
 	// Map Property
 	let map: any;
 	let leaflet: any;
 	let marker: any;
 
-	export let asset: ImmichAsset;
-	$: if (asset.exifInfo) {
+	export let asset: AssetResponseDto;
+	$: if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
 		drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 	}
 
 	onMount(async () => {
 		if (browser) {
-			if (asset.exifInfo) {
+			if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
 				await drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 			}
 		}

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { AssetType, type ImmichAsset } from '../../models/immich-asset';
+	import { AssetType } from '../../models/immich-asset';
 	import { session } from '$app/stores';
 	import { createEventDispatcher, onDestroy } from 'svelte';
-	import { fade, fly, slide } from 'svelte/transition';
-	import { serverEndpoint } from '../../constants';
+	import { fade, fly } from 'svelte/transition';
 	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
 	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
 	import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
 	import LoadingSpinner from '../shared/loading-spinner.svelte';
+	import { api, AssetResponseDto } from '@api';
 
 	const dispatch = createEventDispatcher();
 
-	export let asset: ImmichAsset;
+	export let asset: AssetResponseDto;
 	export let groupIndex: number;
 
 	let imageData: string;
@@ -29,33 +29,28 @@
 
 	const loadImageData = async () => {
 		if ($session.user) {
-			const res = await fetch(serverEndpoint + '/asset/thumbnail/' + asset.id, {
-				method: 'GET',
-				headers: {
-					Authorization: 'bearer ' + $session.user.accessToken,
-				},
-			});
-
-			imageData = URL.createObjectURL(await res.blob());
-
-			return imageData;
+			const { data } = await api.assetApi.getAssetThumbnail(asset.id, { responseType: 'blob' });
+			if (data instanceof Blob) {
+				imageData = URL.createObjectURL(data);
+				return imageData;
+			}
 		}
 	};
 
 	const loadVideoData = async () => {
 		isThumbnailVideoPlaying = false;
-		const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
 
 		if ($session.user) {
 			try {
-				const res = await fetch(serverEndpoint + videoUrl, {
-					method: 'GET',
-					headers: {
-						Authorization: 'bearer ' + $session.user.accessToken,
-					},
+				const { data } = await api.assetApi.serveFile(asset.deviceAssetId, asset.deviceId, false, true, {
+					responseType: 'blob',
 				});
 
-				videoData = URL.createObjectURL(await res.blob());
+				if (!(data instanceof Blob)) {
+					return;
+				}
+
+				videoData = URL.createObjectURL(data);
 
 				videoPlayerNode.src = videoData;
 				// videoPlayerNode.src = videoData + '#t=0,5';

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

@@ -1,43 +1,39 @@
 <script lang="ts">
 	import { session } from '$app/stores';
-	import { serverEndpoint } from '$lib/constants';
 	import { fade } from 'svelte/transition';
 
-	import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import LoadingSpinner from '../shared/loading-spinner.svelte';
+	import { api, AssetResponseDto } from '@api';
 
 	export let assetId: string;
 	export let deviceId: string;
 
-	let assetInfo: ImmichAsset;
+	let assetInfo: AssetResponseDto;
 
 	const dispatch = createEventDispatcher();
 
 	onMount(async () => {
 		if ($session.user) {
-			const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
-				headers: {
-					Authorization: 'bearer ' + $session.user.accessToken,
-				},
-			});
-			assetInfo = await res.json();
+			const { data } = await api.assetApi.getAssetById(assetId);
+			assetInfo = data;
 		}
 	});
 
 	const loadAssetData = async () => {
-		const assetUrl = `/asset/file?aid=${assetInfo.deviceAssetId}&did=${deviceId}&isWeb=true`;
 		if ($session.user) {
-			const res = await fetch(serverEndpoint + assetUrl, {
-				method: 'GET',
-				headers: {
-					Authorization: 'bearer ' + $session.user.accessToken,
-				},
-			});
+			try {
+				const { data } = await api.assetApi.serveFile(assetInfo.deviceAssetId, deviceId, false, true, {
+					responseType: 'blob',
+				});
 
-			const assetData = URL.createObjectURL(await res.blob());
+				if (!(data instanceof Blob)) {
+					return;
+				}
 
-			return assetData;
+				const assetData = URL.createObjectURL(data);
+				return assetData;
+			} catch (e) {}
 		}
 	};
 </script>

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

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { session } from '$app/stores';
-	import { serverEndpoint } from '$lib/constants';
 	import { fade } from 'svelte/transition';
 
-	import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import LoadingSpinner from '../shared/loading-spinner.svelte';
+	import { api, AssetResponseDto } from '@api';
 
 	export let assetId: string;
 
-	let asset: ImmichAsset;
+	let asset: AssetResponseDto;
 
 	const dispatch = createEventDispatcher();
 
@@ -18,12 +17,9 @@
 
 	onMount(async () => {
 		if ($session.user) {
-			const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
-				headers: {
-					Authorization: 'bearer ' + $session.user.accessToken,
-				},
-			});
-			asset = await res.json();
+			const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
+
+			asset = assetInfo;
 
 			await loadVideoData();
 		}
@@ -31,17 +27,18 @@
 
 	const loadVideoData = async () => {
 		isVideoLoading = true;
-		const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
+
 		if ($session.user) {
 			try {
-				const res = await fetch(serverEndpoint + videoUrl, {
-					method: 'GET',
-					headers: {
-						Authorization: 'bearer ' + $session.user.accessToken,
-					},
+				const { data } = await api.assetApi.serveFile(asset.deviceAssetId, asset.deviceId, false, true, {
+					responseType: 'blob',
 				});
 
-				const videoData = URL.createObjectURL(await res.blob());
+				if (!(data instanceof Blob)) {
+					return;
+				}
+
+				const videoData = URL.createObjectURL(data);
 				videoPlayerNode.src = videoData;
 
 				videoPlayerNode.load();

web/src/lib/components/forms/change-password-form.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { session } from '$app/stores';
-
-	import { sendRegistrationForm, sendUpdateForm } from '$lib/auth-api';
+	import { sendUpdateForm } from '$lib/auth-api';
 	import { createEventDispatcher } from 'svelte';
 	import type { ImmichUser } from '../../models/immich-user';
 

web/src/lib/components/shared/navigation-bar.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
+	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fade, fly, slide } from 'svelte/transition';
-	import { postRequest } from '../../api';
 	import { serverEndpoint } from '../../constants';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
 	import { clickOutside } from './click-outside';
+	import { api } from '@api';
 
 	export let user: ImmichUser;
 
@@ -16,12 +17,22 @@
 
 	const dispatch = createEventDispatcher();
 	let shouldShowAccountInfoPanel = false;
-	onMount(async () => {
-		const res = await fetch(`${serverEndpoint}/user/profile-image/${user.id}`, { method: 'GET' });
 
-		if (res.status == 200) shouldShowProfileImage = true;
+	onMount(() => {
+		getUserProfileImage();
 	});
 
+	const getUserProfileImage = async () => {
+		if ($session.user) {
+			try {
+				await api.userApi.getProfileImage(user.id);
+				shouldShowProfileImage = true;
+			} catch (e) {
+				console.log('User does not have a profile image');
+				shouldShowProfileImage = false;
+			}
+		}
+	};
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
 	};

web/src/lib/components/shared/status-box.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getRequest } from '$lib/api';
+	import { getRequest } from '$lib/utils/api-helper';
 	import { onDestroy, onMount } from 'svelte';
 	import { serverEndpoint } from '$lib/constants';
 	import Cloud from 'svelte-material-icons/Cloud.svelte';