Added sharing page to web (#355)

* Added shared album

* Added list tile

* Show info of shared album owner

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

@@ -1,17 +1,23 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+
 	import { AlbumResponseDto, ThumbnailFormat } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-	import CircleAvatar from '../shared/circle-avatar.svelte';
-	import ImmichThumbnail from '../shared/immich-thumbnail.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 
 	const dispatch = createEventDispatcher();
 	export let album: AlbumResponseDto;
 	let viewWidth: number;
 	let thumbnailSize: number = 300;
 	let border = '';
+	let backUrl = '/albums';
 
+	afterNavigate(({ from, to }) => {
+		backUrl = from?.pathname ?? '/albums';
+	});
 	$: {
 		if (album.assets.length < 6) {
 			thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
@@ -51,7 +57,7 @@
 <section class="w-screen h-screen bg-immich-bg">
 	<div class="fixed top-0 w-full bg-immich-bg z-[100]">
 		<div class={`flex justify-between rounded-lg ${border} p-2 mx-2 mt-2 transition-all`}>
-			<a sveltekit:prefetch href="/albums" title="Go Back">
+			<a sveltekit:prefetch href={backUrl} title="Go Back">
 				<button
 					id="immich-circle-icon-button"
 					class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}

web/src/lib/components/asset-viewer-page/asser-viewer-nav-bar.svelte

@@ -6,11 +6,13 @@
 	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
 	import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
 	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-	import CircleIconButton from '../shared/circle-icon-button.svelte';
+	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	const dispatch = createEventDispatcher();
 </script>
 
-<div class="h-16 bg-black/5 flex justify-between place-items-center px-3 transition-transform duration-200 z-[9999]">
+<div
+	class="h-16 bg-black/5 flex justify-between place-items-center px-3 transition-transform duration-200 z-[9999]"
+>
 	<div>
 		<CircleIconButton logo={ArrowLeft} on:click={() => dispatch('goBack')} />
 	</div>

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

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
-	import LoadingSpinner from '../shared/loading-spinner.svelte';
+	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto } from '@api';
 
 	export let assetId: string;
@@ -23,9 +23,15 @@
 	const loadAssetData = async () => {
 		if ($session.user) {
 			try {
-				const { data } = await api.assetApi.serveFile(assetInfo.deviceAssetId, deviceId, false, true, {
-					responseType: 'blob',
-				});
+				const { data } = await api.assetApi.serveFile(
+					assetInfo.deviceAssetId,
+					deviceId,
+					false,
+					true,
+					{
+						responseType: 'blob'
+					}
+				);
 
 				if (!(data instanceof Blob)) {
 					return;
@@ -38,7 +44,10 @@
 	};
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
+<div
+	transition:fade={{ duration: 150 }}
+	class="flex place-items-center place-content-center h-full select-none"
+>
 	{#if assetInfo}
 		{#await loadAssetData()}
 			<LoadingSpinner />

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

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
-	import LoadingSpinner from '../shared/loading-spinner.svelte';
+	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto } from '@api';
 
 	export let assetId: string;
@@ -30,9 +30,15 @@
 
 		if ($session.user) {
 			try {
-				const { data } = await api.assetApi.serveFile(asset.deviceAssetId, asset.deviceId, false, true, {
-					responseType: 'blob',
-				});
+				const { data } = await api.assetApi.serveFile(
+					asset.deviceAssetId,
+					asset.deviceId,
+					false,
+					true,
+					{
+						responseType: 'blob'
+					}
+				);
 
 				if (!(data instanceof Blob)) {
 					return;
@@ -57,7 +63,10 @@
 	};
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
+<div
+	transition:fade={{ duration: 150 }}
+	class="flex place-items-center place-content-center h-full select-none"
+>
 	{#if asset}
 		<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
 			<track kind="captions" />

web/src/lib/components/shared-components/immich-thumbnail.svelte

@@ -2,7 +2,7 @@
 	import { session } from '$app/stores';
 	import { createEventDispatcher, onDestroy } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
-	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
+	import IntersectionObserver from '$lib/components/asset-viewer-page/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';

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

@@ -6,37 +6,24 @@
 	import { page } from '$app/stores';
 	import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
 	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
+	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import SideBarButton from './side-bar-button.svelte';
 	import StatusBox from '../status-box.svelte';
 
 	let selectedAction: AppSideBarSelection;
 
-	const onSidebarButtonClicked = (buttonType: CustomEvent) => {
-		selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
-
-		if (selectedAction == AppSideBarSelection.PHOTOS) {
-			if ($page.routeId != 'photos') {
-				goto('/photos');
-			}
-		}
-
-		if (selectedAction == AppSideBarSelection.ALBUMS) {
-			if ($page.routeId != 'albums') {
-				goto('/albums');
-			}
-		}
-	};
-
 	onMount(async () => {
 		if ($page.routeId == 'albums') {
 			selectedAction = AppSideBarSelection.ALBUMS;
 		} else if ($page.routeId == 'photos') {
 			selectedAction = AppSideBarSelection.PHOTOS;
+		} else if ($page.routeId == 'sharing') {
+			selectedAction = AppSideBarSelection.SHARING;
 		}
 	});
 </script>
 
-<section id="sidebar" class="flex flex-col gap-4 pt-8 pr-6">
+<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
 	<a sveltekit:prefetch href={$page.routeId != 'photos' ? `/photos` : null}>
 		<SideBarButton
 			title="Photos"
@@ -45,8 +32,15 @@
 			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
 		/></a
 	>
-
-	<div class="text-xs ml-5">
+	<a sveltekit:prefetch href={$page.routeId != 'sharing' ? `/sharing` : null}>
+		<SideBarButton
+			title="Sharing"
+			logo={AccountMultipleOutline}
+			actionType={AppSideBarSelection.SHARING}
+			isSelected={selectedAction === AppSideBarSelection.SHARING}
+		/></a
+	>
+	<div class="text-xs ml-5 my-4">
 		<p>LIBRARY</p>
 	</div>
 	<a sveltekit:prefetch href={$page.routeId != 'albums' ? `/albums` : null}>

web/src/lib/components/sharing-page/shared-album-list-tile.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	export let album: AlbumResponseDto;
+	export let user: UserResponseDto;
+
+	const loadImageData = async (thubmnailId: string | null) => {
+		if (thubmnailId == null) {
+			return '/no-thumbnail.png';
+		}
+
+		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
+			responseType: 'blob'
+		});
+		if (data instanceof Blob) {
+			return URL.createObjectURL(data);
+		}
+	};
+
+	const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
+		const { data } = await api.userApi.getUserById(album.ownerId);
+
+		return data;
+	};
+</script>
+
+<div
+	class="flex min-w-[550px] border-b border-gray-300 place-items-center py-4  gap-6 transition-all hover:border-immich-primary"
+>
+	<div>
+		{#await loadImageData(album.albumThumbnailAssetId)}
+			<div
+				class={`bg-immich-primary/10 w-[75px] h-[75px] flex place-items-center place-content-center rounded-xl`}
+			>
+				...
+			</div>
+		{:then imageData}
+			<img
+				in:fade={{ duration: 250 }}
+				src={imageData}
+				alt={album.id}
+				class={`object-cover w-[75px] h-[75px] transition-all z-0 rounded-xl duration-300 `}
+			/>
+		{/await}
+	</div>
+
+	<div>
+		<p class="font-medium text-gray-800">{album.albumName}</p>
+
+		{#await getAlbumOwnerInfo() then albumOwner}
+			{#if user.email == albumOwner.email}
+				<p class="text-xs text-gray-600">Owned</p>
+			{:else}
+				<p class="text-xs text-gray-600">Shared by {albumOwner.email}</p>
+			{/if}
+		{/await}
+	</div>
+</div>