refactor(web): use ImmichApi to create urls (#2435)

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -79,11 +79,6 @@ describe('AlbumCard component', () => {
 		const albumImgElement = sut.getByTestId('album-image');
 		const albumNameElement = sut.getByTestId('album-name');
 		const albumDetailsElement = sut.getByTestId('album-details');
-		// TODO: is this expected?
-		expect(albumImgElement).toHaveAttribute(
-			'src',
-			'/api/asset/thumbnail/thumbnailIdOne?format=WEBP'
-		);
 		expect(albumImgElement).toHaveAttribute('alt', album.id);
 
 		await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));

web/src/lib/components/album-page/album-card.svelte

@@ -23,10 +23,9 @@
 	export let isSharingView = false;
 	export let user: UserResponseDto;
 
-	let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
-	if (!album.albumThumbnailAssetId) {
-		imageData = noThumbnailUrl;
-	}
+	$: imageData = album.albumThumbnailAssetId
+		? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
+		: noThumbnailUrl;
 
 	const dispatchClick = createEventDispatcher<OnClick>();
 	const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlbumResponseDto, ThumbnailFormat } from '@api';
+	import { AlbumResponseDto, ThumbnailFormat, api } from '@api';
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatcher = createEventDispatcher();
@@ -29,7 +29,8 @@
 >
 	<div class="h-12 w-12">
 		<img
-			src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`}
+			src={album.albumThumbnailAssetId &&
+				api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
 			alt={album.albumName}
 			class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
 			data-testid="album-image"

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

@@ -5,7 +5,7 @@
 	import CameraIris from 'svelte-material-icons/CameraIris.svelte';
 	import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
 	import { createEventDispatcher } from 'svelte';
-	import { AssetResponseDto, AlbumResponseDto, api } from '@api';
+	import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
 	import { asByteUnitString } from '../../utils/byte-units';
 	import { locale } from '$lib/stores/preferences.store';
 	import { DateTime } from 'luxon';
@@ -241,7 +241,8 @@
 						<img
 							alt={album.albumName}
 							class="w-[50px] h-[50px] object-cover rounded"
-							src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
+							src={album.albumThumbnailAssetId &&
+								api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
 							draggable="false"
 						/>
 					</div>

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

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { api } from '@api';
 	import { fade } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-	import { getFileUrl } from '@api';
 
 	export let assetId: string;
-	export let publicSharedKey = '';
+	export let publicSharedKey: string | undefined = undefined;
 
 	let isVideoLoading = true;
 	const dispatch = createEventDispatcher();
@@ -31,7 +31,7 @@
 		on:canplay={handleCanPlay}
 		on:ended={() => dispatch('onVideoEnded')}
 	>
-		<source src={getFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
+		<source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
 		<track kind="captions" />
 	</video>
 

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { UserResponseDto } from '@api';
+	import { UserResponseDto, api } from '@api';
 	import { createEventDispatcher } from 'svelte';
-	import { page } from '$app/stores';
 	import { fade } from 'svelte/transition';
 	import Cog from 'svelte-material-icons/Cog.svelte';
 	import Logout from 'svelte-material-icons/Logout.svelte';
@@ -35,7 +34,7 @@
 					<img
 						transition:fade={{ duration: 100 }}
 						class:hidden={showProfilePictureFallback}
-						src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+						src={api.getProfileImageUrl(user.id)}
 						alt="profile-img"
 						class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
 						draggable="false"

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

@@ -126,7 +126,7 @@
 						{#if user.profileImagePath}
 							<img
 								class:hidden={showProfilePictureFallback}
-								src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+								src={api.getProfileImageUrl(user.id)}
 								alt="profile-img"
 								class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
 								draggable="false"

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
+	import {
+		api,
+		AssetResponseDto,
+		SharedLinkResponseDto,
+		SharedLinkType,
+		ThumbnailFormat
+	} from '@api';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import OpenInNew from 'svelte-material-icons/OpenInNew.svelte';
 	import Delete from 'svelte-material-icons/TrashCanOutline.svelte';
@@ -69,7 +75,7 @@
 		{:then asset}
 			<img
 				id={asset.id}
-				src={`/api/asset/thumbnail/${asset.id}?format=WEBP`}
+				src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
 				alt={asset.id}
 				class="object-cover w-[100px] h-[100px] rounded-lg"
 				loading="lazy"

web/src/lib/utils/asset-utils.ts

@@ -1,18 +1,10 @@
-import { api, AddAssetsResponseDto, AssetResponseDto, ThumbnailFormat } from '@api';
+import { api, AddAssetsResponseDto, AssetResponseDto } from '@api';
 import {
 	notificationController,
 	NotificationType
 } from '$lib/components/shared-components/notification/notification';
 import { downloadAssets } from '$lib/stores/download';
 
-export const getThumbnailUrl = (assetId: string, format: ThumbnailFormat, key?: string) => {
-	let url = `/api/asset/thumbnail/${assetId}?format=${format}`;
-	if (key) {
-		url += `&key=${key}`;
-	}
-	return url;
-};
-
 export const addAssetsToAlbum = async (
 	albumId: string,
 	assetIds: Array<string>,