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

feat(web): lighter timeline buckets

Browse Source
This commit is contained in:
Min Idzelis
2025-04-19 22:43:08 +00:00
parent 242a559e0f
commit 5a8f9f3b5c
47 changed files with 531 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/utils/actions.ts
+7 -7
View File
@@ -1,20 +1,20 @@
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import type { AssetStore } from '$lib/stores/assets-store.svelte';
import type { AssetStore, TimelineAsset } from '$lib/stores/assets-store.svelte';
import type { StackResponse } from '$lib/utils/asset-utils';
import { deleteAssets as deleteBulk, type AssetResponseDto } from '@immich/sdk';
import { deleteAssets as deleteBulk } from '@immich/sdk';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';
import { handleError } from './handle-error';
export type OnDelete = (assetIds: string[]) => void;
export type OnRestore = (ids: string[]) => void;
export type OnLink = (assets: { still: AssetResponseDto; motion: AssetResponseDto }) => void;
export type OnUnlink = (assets: { still: AssetResponseDto; motion: AssetResponseDto }) => void;
export type OnLink = (assets: { still: TimelineAsset; motion: TimelineAsset }) => void;
export type OnUnlink = (assets: { still: TimelineAsset; motion: TimelineAsset }) => void;
export type OnAddToAlbum = (ids: string[], albumId: string) => void;
export type OnArchive = (ids: string[], isArchived: boolean) => void;
export type OnFavorite = (ids: string[], favorite: boolean) => void;
export type OnStack = (result: StackResponse) => void;
export type OnUnstack = (assets: AssetResponseDto[]) => void;
export type OnUnstack = (assets: TimelineAsset[]) => void;
export const deleteAssets = async (force: boolean, onAssetDelete: OnDelete, ids: string[]) => {
const $t = get(t);
@@ -64,11 +64,11 @@ export function updateStackedAssetInTimeline(assetStore: AssetStore, { stack, to
* @param assetStore - The asset store to update.
* @param assets - The array of asset response DTOs to update in the asset store.
*/
export function updateUnstackedAssetInTimeline(assetStore: AssetStore, assets: AssetResponseDto[]) {
export function updateUnstackedAssetInTimeline(assetStore: AssetStore, assets: TimelineAsset[]) {
assetStore.updateAssetOperation(
assets.map((asset) => asset.id),
(asset) => {
asset.stack = undefined;
asset.stack = null;
return { remove: false };
},
);
web/src/lib/utils/asset-utils.ts
+15 -12
View File
@@ -3,7 +3,7 @@ import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
import type { InterpolationValues } from '$lib/components/i18n/format-message';
import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import type { AssetInteraction, BaseInteractionAsset } from '$lib/stores/asset-interaction.svelte';
import { assetsSnapshot, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets-store.svelte';
import { downloadManager } from '$lib/stores/download-store.svelte';
import { preferences } from '$lib/stores/user.store';
@@ -364,7 +364,7 @@ export const getAssetType = (type: AssetTypeEnum) => {
}
};
export const getSelectedAssets = (assets: AssetResponseDto[], user: UserResponseDto | null): string[] => {
export const getSelectedAssets = (assets: BaseInteractionAsset[], user: UserResponseDto | null): string[] => {
const ids = [...assets].filter((a) => user && a.ownerId === user.id).map((a) => a.id);
const numberOfIssues = [...assets].filter((a) => user && a.ownerId !== user.id).length;
@@ -383,7 +383,7 @@ export type StackResponse = {
toDeleteIds: string[];
};
export const stackAssets = async (assets: AssetResponseDto[], showNotification = true): Promise<StackResponse> => {
export const stackAssets = async (assets: { id: string }[], showNotification = true): Promise<StackResponse> => {
if (assets.length < 2) {
return { stack: undefined, toDeleteIds: [] };
}
@@ -403,9 +403,9 @@ export const stackAssets = async (assets: AssetResponseDto[], showNotification =
});
}
for (const [index, asset] of assets.entries()) {
asset.stack = index === 0 ? { id: stack.id, assetCount: stack.assets.length, primaryAssetId: asset.id } : null;
}
// for (const [index, asset] of assets.entries()) {
// asset.stack = index === 0 ? { id: stack.id, assetCount: stack.assets.length, primaryAssetId: asset.id } : null;
// }
return {
stack,
@@ -467,7 +467,10 @@ export const keepThisDeleteOthers = async (keepAsset: AssetResponseDto, stack: S
}
};
export const selectAllAssets = async (assetStore: AssetStore, assetInteraction: AssetInteraction) => {
export const selectAllAssets = async (
assetStore: AssetStore,
assetInteraction: AssetInteraction<BaseInteractionAsset>,
) => {
if (get(isSelectingAllAssets)) {
// Selection is already ongoing
return;
@@ -495,7 +498,7 @@ export const selectAllAssets = async (assetStore: AssetStore, assetInteraction:
}
};
export const cancelMultiselect = (assetInteraction: AssetInteraction) => {
export const cancelMultiselect = (assetInteraction: AssetInteraction<BaseInteractionAsset>) => {
isSelectingAllAssets.set(false);
assetInteraction.clearMultiselect();
};
@@ -523,7 +526,7 @@ export const toggleArchive = async (asset: AssetResponseDto) => {
return asset;
};
export const archiveAssets = async (assets: AssetResponseDto[], archive: boolean) => {
export const archiveAssets = async (assets: { id: string }[], archive: boolean) => {
const isArchived = archive;
const ids = assets.map(({ id }) => id);
const $t = get(t);
@@ -533,9 +536,9 @@ export const archiveAssets = async (assets: AssetResponseDto[], archive: boolean
await updateAssets({ assetBulkUpdateDto: { ids, isArchived } });
}
for (const asset of assets) {
asset.isArchived = isArchived;
}
// for (const asset of assets) {
// asset.isArchived = isArchived;
// }
notificationController.show({
message: isArchived
web/src/lib/utils/layout-utils.ts
+7 -4
View File
@@ -1,7 +1,10 @@
import { getAssetRatio } from '$lib/utils/asset-utils';
// import { TUNABLES } from '$lib/utils/tunables';
// note: it's important that this is not imported in more than one file due to https://github.com/sveltejs/kit/issues/7805
// import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { isTimelineAsset } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@immich/sdk';
import createJustifiedLayout from 'justified-layout';
@@ -26,7 +29,7 @@ export type CommonLayoutOptions = {
};
export function getJustifiedLayoutFromAssets(
assets: AssetResponseDto[],
assets: (TimelineAsset | AssetResponseDto)[],
options: CommonLayoutOptions,
): CommonJustifiedLayout {
// if (useWasm) {
@@ -87,7 +90,7 @@ class Adapter {
}
}
export function justifiedLayout(assets: AssetResponseDto[], options: CommonLayoutOptions) {
export function justifiedLayout(assets: (TimelineAsset | AssetResponseDto)[], options: CommonLayoutOptions) {
const adapter = {
targetRowHeight: options.rowHeight,
containerWidth: options.rowWidth,
@@ -96,7 +99,7 @@ export function justifiedLayout(assets: AssetResponseDto[], options: CommonLayou
};
const result = createJustifiedLayout(
assets.map((g) => getAssetRatio(g)),
assets.map((a) => (isTimelineAsset(a) ? a.ratio : getAssetRatio(a))),
adapter,
);
return new Adapter(result);
web/src/lib/utils/timeline-util.ts
+31 -2
View File
@@ -1,8 +1,10 @@
import type { AssetBucket } from '$lib/stores/assets-store.svelte';
import type { BaseInteractionAsset } from '$lib/stores/asset-interaction.svelte';
import type { AssetBucket, TimelineAsset } from '$lib/stores/assets-store.svelte';
import { locale } from '$lib/stores/preferences.store';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { type CommonJustifiedLayout } from '$lib/utils/layout-utils';
import type { AssetResponseDto } from '@immich/sdk';
import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
import { memoize } from 'lodash-es';
import { DateTime, type LocaleOptions } from 'luxon';
import { get } from 'svelte/store';
@@ -105,3 +107,30 @@ export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): strin
date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
export const formatDateGroupTitle = memoize(formatGroupTitle);
export const toTimelineAsset = (unknownAsset: BaseInteractionAsset): TimelineAsset => {
if (isTimelineAsset(unknownAsset)) {
return unknownAsset;
}
const assetResponse = unknownAsset as AssetResponseDto;
const { width, height } = getAssetRatio(assetResponse);
const ratio = width / height;
return {
id: assetResponse.id,
ownerId: assetResponse.ownerId,
ratio,
thumbhash: assetResponse.thumbhash,
localDateTime: assetResponse.localDateTime,
isFavorite: assetResponse.isFavorite,
isArchived: assetResponse.isArchived,
isTrashed: assetResponse.isTrashed,
isVideo: assetResponse.type == AssetTypeEnum.Video,
isImage: assetResponse.type == AssetTypeEnum.Image,
stack: assetResponse.stack || null,
duration: assetResponse.duration || null,
projectionType: assetResponse.exifInfo?.projectionType || null,
livePhotoVideoId: assetResponse.livePhotoVideoId || null,
};
};
export const isTimelineAsset = (arg: BaseInteractionAsset): arg is TimelineAsset =>
(arg as TimelineAsset).ratio !== undefined;