fix(web) fix test (#1059)

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -18,7 +18,7 @@
 
 	$: [spaceUsage, spaceUnit] = getBytesWithUnit(stats.usageRaw);
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 </script>
 
 <div class="flex flex-col gap-5">
@@ -28,7 +28,7 @@
 		<div class="flex mt-5 justify-between">
 			<StatsCard logo={CameraIris} title={'PHOTOS'} value={stats.photos.toString()} />
 			<StatsCard logo={PlayCircle} title={'VIDEOS'} value={stats.videos.toString()} />
-			<StatsCard logo={Memory} title={'STORAGE'} value={spaceUsage} unit={spaceUnit} />
+			<StatsCard logo={Memory} title={'STORAGE'} value={spaceUsage.toString()} unit={spaceUnit} />
 		</div>
 	</div>
 

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

@@ -14,9 +14,11 @@
 		return user.deletedAt != null;
 	};
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 	const deleteDateFormat: Intl.DateTimeFormatOptions = {
-		month: 'long', day: 'numeric', year: 'numeric'
+		month: 'long',
+		day: 'numeric',
+		year: 'numeric'
 	};
 
 	const getDeleteDate = (user: UserResponseDto): string => {

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

@@ -54,7 +54,7 @@
 		imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || NO_THUMBNAIL;
 	});
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 </script>
 
 <div

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

@@ -86,7 +86,7 @@
 		}
 	}
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 	const albumDateFormat: Intl.DateTimeFormatOptions = {
 		month: 'short',
 		day: 'numeric',
@@ -101,7 +101,9 @@
 		const endDateString = endDate.toLocaleDateString(locale, albumDateFormat);
 
 		// If the start and end date are the same, only show one date
-		return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
+		return startDateString === endDateString
+			? startDateString
+			: `${startDateString} - ${endDateString}`;
 	};
 
 	onMount(async () => {

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

@@ -70,7 +70,7 @@
 		return undefined;
 	};
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 </script>
 
 <section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@@ -100,10 +100,21 @@
 				</div>
 
 				<div>
-					<p>{assetDateTimeOriginal.toLocaleDateString(locale, {month:'short', day:'numeric', year: 'numeric'})}</p>
+					<p>
+						{assetDateTimeOriginal.toLocaleDateString(locale, {
+							month: 'short',
+							day: 'numeric',
+							year: 'numeric'
+						})}
+					</p>
 					<div class="flex gap-2 text-sm">
 						<p>
-							{assetDateTimeOriginal.toLocaleString(locale, {weekday:'short', hour: 'numeric', minute: '2-digit', timeZoneName:'longOffset'})}
+							{assetDateTimeOriginal.toLocaleString(locale, {
+								weekday: 'short',
+								hour: 'numeric',
+								minute: '2-digit',
+								timeZoneName: 'longOffset'
+							})}
 						</p>
 					</div>
 				</div>

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -18,7 +18,7 @@
 	export let bucketHeight: number;
 	export let isAlbumSelectionMode = false;
 
-	const locale = navigator.languages;
+	const locale = navigator.language;
 	const groupDateFormat: Intl.DateTimeFormatOptions = {
 		weekday: 'short',
 		month: 'short',
@@ -114,7 +114,10 @@
 	bind:clientHeight={actualBucketHeight}
 >
 	{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
-		{@const dateGroupTitle = new Date(assetsInDateGroup[0].createdAt).toLocaleDateString(locale, groupDateFormat)}
+		{@const dateGroupTitle = new Date(assetsInDateGroup[0].createdAt).toLocaleDateString(
+			locale,
+			groupDateFormat
+		)}
 		<!-- Asset Group By Date -->
 
 		<div

web/src/lib/utils/byte-units.ts

@@ -39,7 +39,7 @@ export function getBytesWithUnit(bytes: number, maxPrecision = 1): [number, stri
  * @returns localized bytes with unit as string
  */
 export function asByteUnitString(bytes: number, maxPrecision = 1): string {
-	const locale = Array.from(navigator.languages);
+	const locale = Array.from(navigator.language);
 	const [size, unit] = getBytesWithUnit(bytes, maxPrecision);
 	return `${size.toLocaleString(locale)} ${unit}`;
 }