cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Skyler Mäntysaari
2023-01-27 23:34:39 +02:00
committed by GitHub
parent 2dc2c05ffb 10a0e58572
commit 481560db21
163 changed files with 1693 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
web/src/api/open-api/api.ts generated
View File

@@ -1116,10 +1116,10 @@ export interface ExifResponseDto {
'iso'?: number | null;
/**
*
* @type {number}
* @type {string}
* @memberof ExifResponseDto
*/
'exposureTime'?: number | null;
'exposureTime'?: string | null;
/**
*
* @type {number}
@@ -1203,6 +1203,12 @@ export interface JobCommandDto {
* @memberof JobCommandDto
*/
'command': JobCommand;
/**
*
* @type {boolean}
* @memberof JobCommandDto
*/
'includeAllAssets': boolean;
}
/**
*
@@ -5487,86 +5493,6 @@ export class AuthenticationApi extends BaseAPI {
*/
export const DeviceInfoApiAxiosParamCreator = function (configuration?: Configuration) {
return {
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
createDeviceInfo: async (upsertDeviceInfoDto: UpsertDeviceInfoDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'upsertDeviceInfoDto' is not null or undefined
assertParamExists('createDeviceInfo', 'upsertDeviceInfoDto', upsertDeviceInfoDto)
const localVarPath = `/device-info`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(upsertDeviceInfoDto, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
updateDeviceInfo: async (upsertDeviceInfoDto: UpsertDeviceInfoDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'upsertDeviceInfoDto' is not null or undefined
assertParamExists('updateDeviceInfo', 'upsertDeviceInfoDto', upsertDeviceInfoDto)
const localVarPath = `/device-info`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(upsertDeviceInfoDto, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
@@ -5616,28 +5542,6 @@ export const DeviceInfoApiAxiosParamCreator = function (configuration?: Configur
export const DeviceInfoApiFp = function(configuration?: Configuration) {
const localVarAxiosParamCreator = DeviceInfoApiAxiosParamCreator(configuration)
return {
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
async createDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<DeviceInfoResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.createDeviceInfo(upsertDeviceInfoDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
async updateDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<DeviceInfoResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.updateDeviceInfo(upsertDeviceInfoDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
@@ -5658,26 +5562,6 @@ export const DeviceInfoApiFp = function(configuration?: Configuration) {
export const DeviceInfoApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
const localVarFp = DeviceInfoApiFp(configuration)
return {
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
createDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: any): AxiosPromise<DeviceInfoResponseDto> {
return localVarFp.createDeviceInfo(upsertDeviceInfoDto, options).then((request) => request(axios, basePath));
},
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
*/
updateDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: any): AxiosPromise<DeviceInfoResponseDto> {
return localVarFp.updateDeviceInfo(upsertDeviceInfoDto, options).then((request) => request(axios, basePath));
},
/**
*
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
@@ -5697,30 +5581,6 @@ export const DeviceInfoApiFactory = function (configuration?: Configuration, bas
* @extends {BaseAPI}
*/
export class DeviceInfoApi extends BaseAPI {
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
* @memberof DeviceInfoApi
*/
public createDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: AxiosRequestConfig) {
return DeviceInfoApiFp(this.configuration).createDeviceInfo(upsertDeviceInfoDto, options).then((request) => request(this.axios, this.basePath));
}
/**
* @deprecated
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto
* @param {*} [options] Override http request option.
* @deprecated
* @throws {RequiredError}
* @memberof DeviceInfoApi
*/
public updateDeviceInfo(upsertDeviceInfoDto: UpsertDeviceInfoDto, options?: AxiosRequestConfig) {
return DeviceInfoApiFp(this.configuration).updateDeviceInfo(upsertDeviceInfoDto, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {UpsertDeviceInfoDto} upsertDeviceInfoDto

4
web/src/app.css
View File

@@ -101,4 +101,8 @@ input:focus-visible {
display: none;
scrollbar-width: none;
}
.job-play-button {
@apply h-full flex flex-col place-items-center place-content-center px-8 text-gray-600 transition-all hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-sm dark:hover:text-black w-[120px] gap-2;
}
}

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

@@ -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>

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

@@ -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]}
>

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

@@ -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"

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

@@ -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

21
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@@ -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) => {

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

@@ -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}

25
web/src/lib/components/shared-components/immich-thumbnail.svelte
View File

@@ -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

56
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@@ -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"

1
web/src/lib/constants.ts
View File

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

20
web/src/lib/stores/assets.store.ts
View File

@@ -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
};
}

21
web/src/routes/favorites/+page.server.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ parent }) => {
try {
const { user } = await parent();
if (!user) {
throw error(400, 'Not logged in');
}
return {
user,
meta: {
title: 'Favorites'
}
};
} catch (e) {
console.log('Photo page load error', e);
throw redirect(302, '/auth/login');
}
};

140
web/src/routes/favorites/+page.svelte Normal file
View File

@@ -0,0 +1,140 @@
<script lang="ts">
import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import { handleError } from '$lib/utils/handle-error';
import { api, AssetResponseDto, SharedLinkType } from '@api';
import { onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
import Error from '../+error.svelte';
import type { PageData } from './$types';
export let data: PageData;
let favorites: AssetResponseDto[] = [];
let isShowCreateSharedLinkModal = false;
let selectedAssets: Set<AssetResponseDto> = new Set();
$: isMultiSelectionMode = selectedAssets.size > 0;
onMount(async () => {
try {
const { data: assets } = await api.assetApi.getAllAssets(true);
favorites = assets;
} catch {
handleError(Error, 'Unable to load favorites');
}
});
const clearMultiSelectAssetAssetHandler = () => {
selectedAssets = new Set();
};
const handleCreateSharedLink = async () => {
isShowCreateSharedLinkModal = true;
};
const handleCloseSharedLinkModal = () => {
clearMultiSelectAssetAssetHandler();
isShowCreateSharedLinkModal = false;
};
const handleRemoveFavorite = async () => {
for (const asset of selectedAssets) {
try {
await api.assetApi.updateAsset(asset.id, {
isFavorite: false
});
favorites = favorites.filter((a) => a.id != asset.id);
} catch {
handleError(Error, 'Error updating asset favorite state');
}
}
clearMultiSelectAssetAssetHandler();
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<ControlAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {selectedAssets.size}
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
<CircleIconButton
title="Share"
logo={ShareVariantOutline}
on:click={handleCreateSharedLink}
/>
<CircleIconButton
title="Remove Favorite"
logo={StarMinusOutline}
on:click={handleRemoveFavorite}
/>
</svelte:fragment>
</ControlAppBar>
{/if}
<!-- Create shared link modal -->
{#if isShowCreateSharedLinkModal}
<CreateSharedLinkModal
sharedAssets={Array.from(selectedAssets)}
shareType={SharedLinkType.Individual}
on:close={handleCloseSharedLinkModal}
/>
{/if}
<!-- Main Section -->
<section class="overflow-y-auto relative immich-scrollbar">
<section
id="favorite-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Favorites</p>
</div>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Empty Message -->
{#if favorites.length === 0}
<div
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
>
<img src="/empty-1.svg" alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Add favorites to quickly find your best pictures and videos
</p>
</div>
{/if}
<GalleryViewer assets={favorites} bind:selectedAssets />
</section>
</section>
</section>

14
web/src/routes/favorites/[assetId]/+page.server.ts Normal file
View File

@@ -0,0 +1,14 @@
import { redirect } from '@sveltejs/kit';
export const prerender = false;
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ parent }) => {
const { user } = await parent();
if (!user) {
throw redirect(302, '/auth/login');
} else {
throw redirect(302, '/favorites');
}
};

0
web/src/routes/favorites/[assetId]/+page.svelte Normal file
View File

61
web/src/routes/photos/+page.svelte
View File

@@ -1,33 +1,33 @@
<script lang="ts">
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import { goto } from '$app/navigation';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
import { goto } from '$app/navigation';
import type { PageData } from './$types';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import {
assetInteractionStore,
isMultiSelectStoreState,
selectedAssets
} from '$lib/stores/asset-interaction.store';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import Close from 'svelte-material-icons/Close.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import { AlbumResponseDto, api, SharedLinkType } from '@api';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { assetStore } from '$lib/stores/assets.store';
import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { AlbumResponseDto, api, SharedLinkType } from '@api';
import Close from 'svelte-material-icons/Close.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import type { PageData } from './$types';
export let data: PageData;
let isShowCreateSharedLinkModal = false;
@@ -73,6 +73,28 @@
isShowAddMenu = !isShowAddMenu;
};
const handleAddToFavorites = () => {
isShowAddMenu = false;
let cnt = 0;
for (const asset of $selectedAssets) {
if (!asset.isFavorite) {
api.assetApi.updateAsset(asset.id, {
isFavorite: true
});
assetStore.updateAsset(asset.id, true);
cnt = cnt + 1;
}
}
notificationController.show({
message: `Added ${cnt} to favorites`,
type: NotificationType.Info
});
assetInteractionStore.clearMultiselect();
};
const handleShowAlbumPicker = (shared: boolean) => {
isShowAddMenu = false;
isShowAlbumPicker = true;
@@ -163,6 +185,7 @@
{#if isShowAddMenu}
<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
<div class="flex flex-col rounded-lg ">
<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
<MenuOption on:click={() => handleShowAlbumPicker(false)} text="Add to Album" />
<MenuOption on:click={() => handleShowAlbumPicker(true)} text="Add to Shared Album" />
</div>