Merge branch 'immich-app:main' into feat/samsung-raw-and-fujifilm-raf

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -1,76 +1,102 @@
 <script lang="ts">
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+	import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
+	import Play from 'svelte-material-icons/Play.svelte';
+	import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
+
 	import { createEventDispatcher } from 'svelte';
 	import { JobCounts } from '@api';
 
 	export let title: string;
 	export let subtitle: string;
-	export let buttonTitle = 'Run';
 	export let jobCounts: JobCounts;
+	/**
+	 * Show options to run job on all assets of just missing ones
+	 */
+	export let showOptions = true;
+
+	$: isRunning = jobCounts.active > 0 || jobCounts.waiting > 0;
 
 	const dispatch = createEventDispatcher();
+
+	const run = (includeAllAssets: boolean) => {
+		dispatch('click', { includeAllAssets });
+	};
 </script>
 
-<div class="flex border-b pb-5 dark:border-b-immich-dark-gray">
-	<div class="w-[70%]">
-		<h1 class="text-immich-primary dark:text-immich-dark-primary text-sm font-semibold">
-			{title.toUpperCase()}
-		</h1>
-		<p class="text-sm mt-1 dark:text-immich-dark-fg">{subtitle}</p>
-		<p class="text-sm dark:text-immich-dark-fg">
-			<slot />
-		</p>
-		<table class="text-left w-full mt-5">
-			<!-- table header -->
-			<thead
-				class="border rounded-md mb-2 dark:bg-immich-dark-gray dark:border-immich-dark-gray bg-immich-primary/10 flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
-			>
-				<tr class="flex w-full place-items-center">
-					<th class="text-center w-1/3 font-medium text-sm">Status</th>
-					<th class="text-center w-1/3 font-medium text-sm">Active</th>
-					<th class="text-center w-1/3 font-medium text-sm">Waiting</th>
-				</tr>
-			</thead>
-			<tbody
-				class="overflow-y-auto rounded-md w-full max-h-[320px] block border bg-white dark:border-immich-dark-gray dark:bg-immich-dark-gray/75 dark:text-immich-dark-fg"
-			>
-				<tr class="text-center flex place-items-center w-full h-[60px]">
-					<td class="text-sm px-2 w-1/3 text-ellipsis">
-						{#if jobCounts}
-							<span>{jobCounts.active > 0 || jobCounts.waiting > 0 ? 'Active' : 'Idle'}</span>
-						{:else}
-							<LoadingSpinner />
-						{/if}
-					</td>
-					<td class="flex justify-center text-sm px-2 w-1/3 text-ellipsis">
+<div class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray">
+	<div id="job-info" class="w-[70%] p-9">
+		<div class="flex flex-col gap-2">
+			<div class="text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
+				{title.toUpperCase()}
+			</div>
+
+			{#if subtitle.length > 0}
+				<div class="text-sm dark:text-white">{subtitle}</div>
+			{/if}
+			<div class="text-sm dark:text-white"><slot /></div>
+
+			<div class="flex w-full mt-4">
+				<div
+					class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
+				>
+					<p>Active</p>
+					<p class="text-2xl">
 						{#if jobCounts.active !== undefined}
 							{jobCounts.active}
 						{:else}
 							<LoadingSpinner />
 						{/if}
-					</td>
-					<td class="flex justify-center text-sm px-2 w-1/3 text-ellipsis">
+					</p>
+				</div>
+
+				<div
+					class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
+				>
+					<p class="text-2xl">
 						{#if jobCounts.waiting !== undefined}
 							{jobCounts.waiting}
 						{:else}
 							<LoadingSpinner />
 						{/if}
-					</td>
-				</tr>
-			</tbody>
-		</table>
+					</p>
+					<p>Waiting</p>
+				</div>
+			</div>
+		</div>
 	</div>
-	<div class="w-[30%] flex place-items-center place-content-end">
-		<button
-			on:click={() => dispatch('click')}
-			class="px-6 py-3 text-sm bg-immich-primary dark:bg-immich-dark-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg dark:text-immich-dark-gray"
-			disabled={jobCounts.active > 0 && jobCounts.waiting > 0}
-		>
-			{#if jobCounts.active > 0 || jobCounts.waiting > 0}
+	<div id="job-action" class="flex flex-col">
+		{#if isRunning}
+			<button
+				class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl disabled:cursor-not-allowed"
+				disabled
+			>
 				<LoadingSpinner />
+			</button>
+		{/if}
+
+		{#if !isRunning}
+			{#if showOptions}
+				<button
+					class="job-play-button bg-gray-300 dark:bg-gray-600 rounded-tr-3xl"
+					on:click={() => run(true)}
+				>
+					<AllInclusive size="18" /> ALL
+				</button>
+				<button
+					class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl"
+					on:click={() => run(false)}
+				>
+					<SelectionSearch size="18" /> MISSING
+				</button>
 			{:else}
-				{buttonTitle}
+				<button
+					class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl"
+					on:click={() => run(true)}
+				>
+					<Play size="48" />
+				</button>
 			{/if}
-		</button>
+		{/if}
 	</div>
 </div>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -18,20 +18,28 @@
 
 	onMount(async () => {
 		await load();
-		timer = setInterval(async () => await load(), 5_000);
+		timer = setInterval(async () => await load(), 1_000);
 	});
 
 	onDestroy(() => {
 		clearInterval(timer);
 	});
 
-	const run = async (jobId: JobId, jobName: string, emptyMessage: string) => {
+	const run = async (
+		jobId: JobId,
+		jobName: string,
+		emptyMessage: string,
+		includeAllAssets: boolean
+	) => {
 		try {
-			const { data } = await api.jobApi.sendJobCommand(jobId, { command: JobCommand.Start });
+			const { data } = await api.jobApi.sendJobCommand(jobId, {
+				command: JobCommand.Start,
+				includeAllAssets
+			});
 
 			if (data) {
 				notificationController.show({
-					message: `Started ${jobName}`,
+					message: includeAllAssets ? `Started ${jobName} for all assets` : `Started ${jobName}`,
 					type: NotificationType.Info
 				});
 			} else {
@@ -43,53 +51,77 @@
 	};
 </script>
 
-<div class="flex flex-col gap-10">
+<div class="flex flex-col gap-7">
 	{#if jobs}
 		<JobTile
 			title={'Generate thumbnails'}
-			subtitle={'Regenerate missing thumbnail (JPEG, WEBP)'}
-			on:click={() =>
-				run(JobId.ThumbnailGeneration, 'thumbnail generation', 'No missing thumbnails found')}
+			subtitle={'Regenerate JPEG and WebP thumbnails'}
+			on:click={(e) => {
+				const { includeAllAssets } = e.detail;
+
+				run(
+					JobId.ThumbnailGeneration,
+					'thumbnail generation',
+					'No missing thumbnails found',
+					includeAllAssets
+				);
+			}}
 			jobCounts={jobs[JobId.ThumbnailGeneration]}
 		/>
 
 		<JobTile
-			title={'Extract EXIF'}
-			subtitle={'Extract missing EXIF information'}
-			on:click={() => run(JobId.MetadataExtraction, 'extract EXIF', 'No missing EXIF found')}
+			title={'EXTRACT METADATA'}
+			subtitle={'Extract metadata information i.e. GPS, resolution...etc'}
+			on:click={(e) => {
+				const { includeAllAssets } = e.detail;
+				run(JobId.MetadataExtraction, 'extract EXIF', 'No missing EXIF found', includeAllAssets);
+			}}
 			jobCounts={jobs[JobId.MetadataExtraction]}
 		/>
 
 		<JobTile
 			title={'Detect objects'}
 			subtitle={'Run machine learning process to detect and classify objects'}
-			on:click={() =>
-				run(JobId.MachineLearning, 'object detection', 'No missing object detection found')}
+			on:click={(e) => {
+				const { includeAllAssets } = e.detail;
+
+				run(
+					JobId.MachineLearning,
+					'object detection',
+					'No missing object detection found',
+					includeAllAssets
+				);
+			}}
 			jobCounts={jobs[JobId.MachineLearning]}
 		>
-			Note that some assets may not have any objects detected, this is normal.
+			Note that some assets may not have any objects detected
 		</JobTile>
 
 		<JobTile
 			title={'Video transcoding'}
-			subtitle={'Run video transcoding process to transcode videos not in the desired format'}
-			on:click={() =>
+			subtitle={'Transcode videos not in the desired format'}
+			on:click={(e) => {
+				const { includeAllAssets } = e.detail;
 				run(
 					JobId.VideoConversion,
 					'video conversion',
-					'No videos without an encoded version found'
-				)}
+					'No videos without an encoded version found',
+					includeAllAssets
+				);
+			}}
 			jobCounts={jobs[JobId.VideoConversion]}
 		/>
 
 		<JobTile
 			title={'Storage migration'}
+			showOptions={false}
 			subtitle={''}
 			on:click={() =>
 				run(
 					JobId.StorageTemplateMigration,
 					'storage template migration',
-					'All files have been migrated to the new storage template'
+					'All files have been migrated to the new storage template',
+					false
 				)}
 			jobCounts={jobs[JobId.StorageTemplateMigration]}
 		>

web/src/lib/components/admin-page/settings/confirm-disable-login.svelte

@@ -12,7 +12,7 @@
 			<p class="text-md text-center">
 				To re-enable, use a
 				<a
-					href="https://immich.app/docs/features/server-commands"
+					href="https://immich.app/docs/administration/server-commands"
 					rel="noreferrer"
 					target="_blank"
 					class="underline"

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -111,7 +111,7 @@
 			<form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
 				<p class="text-sm dark:text-immich-dark-fg">
 					For more details about this feature, refer to the <a
-						href="http://immich.app/docs/features/oauth#mobile-redirect-uri"
+						href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
 						class="underline"
 						target="_blank"
 						rel="noreferrer">docs</a

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

@@ -1,26 +1,26 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
-	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
-	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
-	import PhotoViewer from './photo-viewer.svelte';
-	import DetailPanel from './detail-panel.svelte';
 	import { goto } from '$app/navigation';
 	import { downloadAssets } from '$lib/stores/download';
-	import VideoViewer from './video-viewer.svelte';
-	import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
 	import {
+		AlbumResponseDto,
 		api,
 		AssetResponseDto,
 		AssetTypeEnum,
-		AlbumResponseDto,
 		SharedLinkResponseDto
 	} from '@api';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
+	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
+	import { fly } from 'svelte/transition';
+	import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
 	import {
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
+	import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
+	import DetailPanel from './detail-panel.svelte';
+	import PhotoViewer from './photo-viewer.svelte';
+	import VideoViewer from './video-viewer.svelte';
 
 	import { assetStore } from '$lib/stores/assets.store';
 	import { addAssetsToAlbum } from '$lib/utils/asset-utils';
@@ -217,6 +217,7 @@
 		});
 
 		asset.isFavorite = data.isFavorite;
+		assetStore.updateAsset(asset.id, data.isFavorite);
 	};
 
 	const openAlbumPicker = (shared: boolean) => {

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

@@ -152,7 +152,7 @@
 						<p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString(locale)}` || ''}</p>
 
 						{#if asset.exifInfo.exposureTime}
-							<p>{`1/${asset.exifInfo.exposureTime}`}</p>
+							<p>{`${asset.exifInfo.exposureTime}`}</p>
 						{/if}
 
 						{#if asset.exifInfo.focalLength}

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

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy } from 'svelte';
-	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 MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
-	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
-	import LoadingSpinner from './loading-spinner.svelte';
 	import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
+	import { createEventDispatcher, onDestroy } from 'svelte';
+	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
+	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
+	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
+	import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
+	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
+	import Star from 'svelte-material-icons/Star.svelte';
+	import { fade, fly } from 'svelte/transition';
+	import LoadingSpinner from './loading-spinner.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -163,7 +164,7 @@
 		{#if mouseOver || selected || disabled}
 			<div
 				in:fade={{ duration: 200 }}
-				class={`w-full ${getOverlaySelectorIconStyle()} via-white/0 to-white/0 absolute p-2  z-10`}
+				class={`w-full ${getOverlaySelectorIconStyle()} via-white/0 to-white/0 absolute p-2 z-10`}
 			>
 				<button
 					on:click={onIconClickedHandler}
@@ -182,6 +183,12 @@
 			</div>
 		{/if}
 
+		{#if asset.isFavorite}
+			<div class="w-full absolute bottom-2 left-2 z-10">
+				<Star size="24" color={'white'} />
+			</div>
+		{/if}
+
 		<!-- Playback and info -->
 		{#if asset.type === AssetTypeEnum.Video}
 			<div

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

@@ -1,18 +1,20 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { api } from '@api';
+	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	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 InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
-	import SideBarButton from './side-bar-button.svelte';
-	import StatusBox from '../status-box.svelte';
-	import { api } from '@api';
+	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
 	import { fade } from 'svelte/transition';
-	import LoadingSpinner from '../loading-spinner.svelte';
 	import { AppRoute } from '../../../constants';
+	import LoadingSpinner from '../loading-spinner.svelte';
+	import StatusBox from '../status-box.svelte';
+	import SideBarButton from './side-bar-button.svelte';
 
 	let showAssetCount = false;
 	let showSharingCount = false;
+	let showFavoritesCount = false;
 	let showAlbumsCount = false;
 
 	const getAssetCount = async () => {
@@ -24,6 +26,14 @@
 		};
 	};
 
+	const getFavoriteCount = async () => {
+		const { data: assets } = await api.assetApi.getAllAssets(true);
+
+		return {
+			favorites: assets.length
+		};
+	};
+
 	const getAlbumCount = async () => {
 		const { data: albumCount } = await api.albumApi.getAlbumCountByUserId();
 		return {
@@ -104,6 +114,42 @@
 	<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
 		<p>LIBRARY</p>
 	</div>
+	<a
+		data-sveltekit-preload-data="hover"
+		href={AppRoute.FAVORITES}
+		class="relative"
+		draggable="false"
+	>
+		<SideBarButton
+			title="Favorites"
+			logo={StarOutline}
+			isSelected={$page.route.id == AppRoute.FAVORITES}
+		/>
+
+		<div
+			id="favorite-count-info"
+			class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
+			on:mouseenter={() => (showFavoritesCount = true)}
+			on:mouseleave={() => (showFavoritesCount = false)}
+		>
+			<InformationOutline size={18} color="#989a9f" />
+			{#if showFavoritesCount}
+				<div
+					transition:fade={{ duration: 200 }}
+					id="asset-count-info-detail"
+					class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
+				>
+					{#await getFavoriteCount()}
+						<LoadingSpinner />
+					{:then data}
+						<div>
+							<p>{data.favorites} Favorites</p>
+						</div>
+					{/await}
+				</div>
+			{/if}
+		</div>
+	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
 		<SideBarButton
 			title="Albums"

web/src/lib/constants.ts

@@ -8,6 +8,7 @@ export enum AppRoute {
 	ADMIN_JOBS = '/admin/jobs-status',
 
 	ALBUMS = '/albums',
+	FAVORITES = '/favorites',
 	PHOTOS = '/photos',
 	SHARING = '/sharing'
 }

web/src/lib/stores/assets.store.ts

@@ -1,8 +1,8 @@
-import { writable } from 'svelte/store';
-import lodash from 'lodash-es';
-import { api, AssetCountByTimeBucketResponseDto } from '@api';
 import { AssetGridState } from '$lib/models/asset-grid-state';
 import { calculateViewportHeightByNumberOfAsset } from '$lib/utils/viewport-utils';
+import { api, AssetCountByTimeBucketResponseDto } from '@api';
+import lodash from 'lodash-es';
+import { writable } from 'svelte/store';
 
 /**
  * The state that holds information about the asset grid
@@ -141,12 +141,24 @@ function createAssetStore() {
 		});
 	};
 
+	const updateAsset = (assetId: string, isFavorite: boolean) => {
+		assetGridState.update((state) => {
+			const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
+			const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
+			state.buckets[bucketIndex].assets[assetIndex].isFavorite = isFavorite;
+
+			state.assets = lodash.flatMap(state.buckets, (b) => b.assets);
+			return state;
+		});
+	};
+
 	return {
 		setInitialState,
 		getAssetsByBucket,
 		removeAsset,
 		updateBucketHeight,
-		cancelBucketRequest
+		cancelBucketRequest,
+		updateAsset
 	};
 }