refactor: timeline manager renames (#19007)
* refactor: timeline manager renames * refactor(web): improve timeline manager naming consistency - Rename AddContext → GroupInsertionCache for clearer purpose - Rename TimelineDay → DayGroup for better clarity - Rename TimelineMonth → MonthGroup for better clarity - Replace all "bucket" references with "monthGroup" terminology - Update all component props, method names, and variable references - Maintain consistent naming patterns across TypeScript and Svelte files * refactor(web): rename buckets to months in timeline manager - Rename TimelineManager.buckets property to months - Update all store.buckets references to store.months - Use 'month' shorthand for monthGroup arguments (not method names) - Update component templates and test files for consistency - Maintain API-related 'bucket' terminology (bucketHeight, getTimeBucket) * refactor(web): rename assetStore to timelineManager and update types - Rename assetStore variables to timelineManager in all .svelte files - Update parameter names in actions.ts and asset-utils.ts functions - Rename AssetStoreLayoutOptions to TimelineManagerLayoutOptions - Rename AssetStoreOptions to TimelineManagerOptions - Move assets-store.spec.ts to timeline-manager.spec.ts * refactor(web): rename intersectingAssets to viewerAssets and fix property references - Rename intersectingAssets to viewerAssets in DayGroup and MonthGroup classes - Update arrow function parameters to use viewerAsset/viewAsset shorthand - Rename topIntersectingBucket to topIntersectingMonthGroup - Fix dateGroups references to dayGroups in asset-utils.ts and album page - Update template loops and variable names in Svelte components * refactor(web): rename #initializeTimeBuckets to #initializeMonthGroups and bucketDateFormatted to monthGroupTitle * refactor(web): rename monthGroupHeight to height * refactor(web): rename bucketCount to assetsCount, bucketsIterator to monthGroupIterator, and related properties * refactor(web): rename count to assetCount in TimelineManager * refactor(web): rename LiteBucket to ScrubberMonth and update scrubber variables - Rename LiteBucket type to ScrubberMonth - Rename bucketDateFormattted to title in ScrubberMonth type - Rename bucketPercentY to monthGroupPercentY in scrubber component - Rename scrubBucket to scrubberMonth and scrubBucketPercent to scrubberMonthPercent * fix remaining refs to bucket * reset submodule to correct commit * reset submodule to correct commit * refactor(web): extract TimelineManager internals into separate modules - Move search-related functions to internal/search-support.svelte.ts - Extract websocket event handling into WebsocketSupport class - Move utility functions (updateObject, isMismatched) to internal/utils.svelte.ts - Update imports in tests to use new module structure * refactor(web): extract intersection logic from TimelineManager - Create intersection-support.svelte.ts with updateIntersection and calculateIntersecting functions - Remove private intersection methods from TimelineManager - Export findMonthGroupForAsset from search-support for reuse - Update TimelineManager to use the extracted intersection functions * refactor(web): rename a few methods in intersecting * refactor(web): rename a few methods in intersecting * refactor(web): extract layout logic from TimelineManager - Create layout-support.svelte.ts with updateGeometry and layoutMonthGroup functions - Remove private layout methods from TimelineManager - Update TimelineManager to use the extracted layout functions - Remove unused UpdateGeometryOptions import * refactor(web): extract asset operations from TimelineManager - Create operations-support.svelte.ts with addAssetsToMonthGroups and runAssetOperation functions - Remove private asset operation methods from TimelineManager - Update TimelineManager to use extracted operation functions with proper AssetOrder handling - Rename getMonthGroupIndexByAssetId to getMonthGroupByAssetId for consistency - Move utility functions from utils.svelte.ts to internal/utils.svelte.ts - Fix method name references in asset-grid.svelte and tests * refactor(web): extract loading logic from TimelineManager - Create load-support.svelte.ts with loadFromTimeBuckets function - Extract time bucket loading, album asset handling, and error logging - Simplify TimelineManager's loadMonthGroup method to use extracted function * refresh timeline after archive keyboard shortcut * remove debugger * rename * Review comments - remove shadowed var * reduce indents - early return * review comment * refactor: simplify asset filtering in addAssets method Replace for loop with filter operation for better readability * fix: bad merge * refactor(web): simplify timeline layout algorithm - Replace rowSpaceRemaining array with direct cumulative width tracking - Invert logic from tracking remaining space to tracking used space - Fix spelling: cummulative to cumulative - Rename lastRowHeight to currentRowHeight for clarity - Remove confusing lastRow variable and simplify final height calculation - Add explanatory comments for clarity - Rename loop variable assetGroup to dayGroup for consistency * simplify assetsIterator usage * merge/lint --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
@@ -36,13 +36,14 @@
|
||||
import { AlbumPageViewMode, AppRoute } from '$lib/constants';
|
||||
import { activityManager } from '$lib/managers/activity-manager.svelte';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
|
||||
import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
|
||||
import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
|
||||
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
@@ -87,7 +88,6 @@
|
||||
import { t } from 'svelte-i18n';
|
||||
import { fly } from 'svelte/transition';
|
||||
import type { PageData } from './$types';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
|
||||
interface Props {
|
||||
data: PageData;
|
||||
@@ -174,15 +174,15 @@
|
||||
const handleStartSlideshow = async () => {
|
||||
const asset =
|
||||
$slideshowNavigation === SlideshowNavigation.Shuffle
|
||||
? await assetStore.getRandomAsset()
|
||||
: assetStore.buckets[0]?.dateGroups[0]?.intersectingAssets[0]?.asset;
|
||||
? await timelineManager.getRandomAsset()
|
||||
: timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
|
||||
if (asset) {
|
||||
handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleEscape = async () => {
|
||||
assetStore.suspendTransitions = true;
|
||||
timelineManager.suspendTransitions = true;
|
||||
if (viewMode === AlbumPageViewMode.SELECT_THUMBNAIL) {
|
||||
viewMode = AlbumPageViewMode.VIEW;
|
||||
return;
|
||||
@@ -234,7 +234,7 @@
|
||||
};
|
||||
|
||||
const setModeToView = async () => {
|
||||
assetStore.suspendTransitions = true;
|
||||
timelineManager.suspendTransitions = true;
|
||||
viewMode = AlbumPageViewMode.VIEW;
|
||||
await navigate(
|
||||
{ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: oldAt?.at } },
|
||||
@@ -309,17 +309,17 @@
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
|
||||
const handleRemoveAssets = async (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
await refreshAlbum();
|
||||
};
|
||||
|
||||
const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
|
||||
assetStore.addAssets(assets);
|
||||
timelineManager.addAssets(assets);
|
||||
await refreshAlbum();
|
||||
};
|
||||
|
||||
@@ -374,13 +374,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
let assetStore = new AssetStore();
|
||||
let timelineManager = new TimelineManager();
|
||||
|
||||
$effect(() => {
|
||||
if (viewMode === AlbumPageViewMode.VIEW) {
|
||||
void assetStore.updateOptions({ albumId, order: albumOrder });
|
||||
void timelineManager.updateOptions({ albumId, order: albumOrder });
|
||||
} else if (viewMode === AlbumPageViewMode.SELECT_ASSETS) {
|
||||
void assetStore.updateOptions({
|
||||
void timelineManager.updateOptions({
|
||||
visibility: AssetVisibility.Timeline,
|
||||
withPartners: true,
|
||||
timelineAlbumId: albumId,
|
||||
@@ -395,7 +395,7 @@
|
||||
|
||||
onDestroy(() => {
|
||||
activityManager.reset();
|
||||
assetStore.destroy();
|
||||
timelineManager.destroy();
|
||||
});
|
||||
|
||||
let isOwned = $derived($user.id == album.ownerId);
|
||||
@@ -470,7 +470,7 @@
|
||||
<AssetGrid
|
||||
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
|
||||
{album}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
assetInteraction={currentAssetIntersection}
|
||||
{isShared}
|
||||
{isSelectionMode}
|
||||
@@ -590,7 +590,7 @@
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
@@ -599,7 +599,7 @@
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) =>
|
||||
assetStore.updateAssetOperation(ids, (asset) => {
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.isFavorite = isFavorite;
|
||||
return { remove: false };
|
||||
})}
|
||||
@@ -647,7 +647,7 @@
|
||||
color="secondary"
|
||||
aria-label={$t('add_photos')}
|
||||
onclick={async () => {
|
||||
assetStore.suspendTransitions = true;
|
||||
timelineManager.suspendTransitions = true;
|
||||
viewMode = AlbumPageViewMode.SELECT_ASSETS;
|
||||
oldAt = { at: $gridScrollTarget?.at };
|
||||
await navigate(
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
import { AssetAction } from '$lib/constants';
|
||||
|
||||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { mdiDotsVertical, mdiPlus } from '@mdi/js';
|
||||
import { onDestroy } from 'svelte';
|
||||
@@ -27,9 +27,9 @@
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
const assetStore = new AssetStore();
|
||||
void assetStore.updateOptions({ visibility: AssetVisibility.Archive });
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
void timelineManager.updateOptions({ visibility: AssetVisibility.Archive });
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
</script>
|
||||
@@ -49,7 +49,7 @@
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<AssetGrid
|
||||
enableRouting={true}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
removeAction={AssetAction.UNARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
@@ -68,13 +68,13 @@
|
||||
<ArchiveAction
|
||||
unarchive
|
||||
onArchive={(ids, visibility) =>
|
||||
assetStore.updateAssetOperation(ids, (asset) => {
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.visibility = visibility;
|
||||
return { remove: false };
|
||||
})}
|
||||
/>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
@@ -82,7 +82,7 @@
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) =>
|
||||
assetStore.updateAssetOperation(ids, (asset) => {
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.isFavorite = isFavorite;
|
||||
return { remove: false };
|
||||
})}
|
||||
@@ -90,7 +90,7 @@
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
<DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<DeleteAssets menuItem onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { mdiDotsVertical, mdiPlus } from '@mdi/js';
|
||||
import { onDestroy } from 'svelte';
|
||||
@@ -31,9 +31,9 @@
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
void assetStore.updateOptions({ isFavorite: true, withStacked: true });
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
void timelineManager.updateOptions({ isFavorite: true, withStacked: true });
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
</script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<AssetGrid
|
||||
enableRouting={true}
|
||||
withStacked={true}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
removeAction={AssetAction.UNFAVORITE}
|
||||
onEscape={handleEscape}
|
||||
@@ -71,9 +71,9 @@
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<FavoriteAction removeFavorite onFavorite={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
@@ -86,7 +86,7 @@
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
onArchive={(assetIds) => assetStore.removeAssets(assetIds)}
|
||||
onArchive={(assetIds) => timelineManager.removeAssets(assetIds)}
|
||||
/>
|
||||
{#if $preferences.tags.enabled}
|
||||
<TagAction menuItem />
|
||||
@@ -94,8 +94,8 @@
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
<DeleteAssets
|
||||
menuItem
|
||||
onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
|
||||
onUndoDelete={(assets) => assetStore.addAssets(assets)}
|
||||
onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
|
||||
onUndoDelete={(assets) => timelineManager.addAssets(assets)}
|
||||
/>
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { AssetVisibility, lockAuthSession } from '@immich/sdk';
|
||||
import { Button } from '@immich/ui';
|
||||
import { mdiDotsVertical, mdiLockOutline } from '@mdi/js';
|
||||
@@ -27,9 +27,9 @@
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
void assetStore.updateOptions({ visibility: AssetVisibility.Locked });
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
void timelineManager.updateOptions({ visibility: AssetVisibility.Locked });
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
const handleMoveOffLockedFolder = (assetIds: string[]) => {
|
||||
assetInteraction.clearMultiselect();
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
};
|
||||
|
||||
const handleLock = async () => {
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<AssetGrid
|
||||
enableRouting={true}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
onEscape={handleEscape}
|
||||
removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
|
||||
@@ -77,13 +77,13 @@
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<SelectAllAssets withText {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets withText {timelineManager} {assetInteraction} />
|
||||
<SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
<ChangeDate menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<DeleteAssets menuItem force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<DeleteAssets menuItem force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { mdiArrowLeft, mdiPlus } from '@mdi/js';
|
||||
import { onDestroy } from 'svelte';
|
||||
@@ -22,16 +22,16 @@
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
const timelineManager = new TimelineManager();
|
||||
$effect(
|
||||
() =>
|
||||
void assetStore.updateOptions({
|
||||
void timelineManager.updateOptions({
|
||||
userId: data.partner.id,
|
||||
visibility: AssetVisibility.Timeline,
|
||||
withStacked: true,
|
||||
}),
|
||||
);
|
||||
onDestroy(() => assetStore.destroy());
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleEscape = () => {
|
||||
@@ -43,7 +43,7 @@
|
||||
</script>
|
||||
|
||||
<main class="grid h-dvh pt-18">
|
||||
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape} />
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
|
||||
@@ -32,12 +32,12 @@
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
|
||||
import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { websocketEvents } from '$lib/stores/websocket';
|
||||
@@ -77,9 +77,9 @@
|
||||
let numberOfAssets = $state(data.statistics.assets);
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
$effect(() => void assetStore.updateOptions({ visibility: AssetVisibility.Timeline, personId: data.person.id }));
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
$effect(() => void timelineManager.updateOptions({ visibility: AssetVisibility.Timeline, personId: data.person.id }));
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
});
|
||||
|
||||
const handleUnmerge = () => {
|
||||
assetStore.removeAssets(assetInteraction.selectedAssets.map((a) => a.id));
|
||||
timelineManager.removeAssets(assetInteraction.selectedAssets.map((a) => a.id));
|
||||
assetInteraction.clearMultiselect();
|
||||
viewMode = PersonPageViewMode.VIEW_ASSETS;
|
||||
};
|
||||
@@ -348,12 +348,12 @@
|
||||
};
|
||||
|
||||
const handleDeleteAssets = async (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
await updateAssetCount();
|
||||
};
|
||||
|
||||
const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
|
||||
assetStore.addAssets(assets);
|
||||
timelineManager.addAssets(assets);
|
||||
await updateAssetCount();
|
||||
};
|
||||
|
||||
@@ -368,7 +368,7 @@
|
||||
});
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
</script>
|
||||
@@ -386,7 +386,7 @@
|
||||
<AssetGrid
|
||||
enableRouting={true}
|
||||
{person}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
|
||||
singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
|
||||
@@ -506,7 +506,7 @@
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
@@ -514,7 +514,7 @@
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) =>
|
||||
assetStore.updateAssetOperation(ids, (asset) => {
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.isFavorite = isFavorite;
|
||||
return { remove: false };
|
||||
})}
|
||||
@@ -532,7 +532,7 @@
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
onArchive={(assetIds) => assetStore.removeAssets(assetIds)}
|
||||
onArchive={(assetIds) => timelineManager.removeAssets(assetIds)}
|
||||
/>
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
import {
|
||||
@@ -41,9 +41,9 @@
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
const assetStore = new AssetStore();
|
||||
void assetStore.updateOptions({ visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true });
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
void timelineManager.updateOptions({ visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true });
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -69,17 +69,17 @@
|
||||
};
|
||||
|
||||
const handleLink: OnLink = ({ still, motion }) => {
|
||||
assetStore.removeAssets([motion.id]);
|
||||
assetStore.updateAssets([still]);
|
||||
timelineManager.removeAssets([motion.id]);
|
||||
timelineManager.updateAssets([still]);
|
||||
};
|
||||
|
||||
const handleUnlink: OnUnlink = ({ still, motion }) => {
|
||||
assetStore.addAssets([motion]);
|
||||
assetStore.updateAssets([still]);
|
||||
timelineManager.addAssets([motion]);
|
||||
timelineManager.updateAssets([still]);
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
|
||||
<AssetGrid
|
||||
enableRouting={true}
|
||||
{assetStore}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
removeAction={AssetAction.ARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
@@ -113,7 +113,7 @@
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
@@ -121,7 +121,7 @@
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) =>
|
||||
assetStore.updateAssetOperation(ids, (asset) => {
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.isFavorite = isFavorite;
|
||||
return { remove: false };
|
||||
})}
|
||||
@@ -131,8 +131,8 @@
|
||||
{#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
|
||||
<StackAction
|
||||
unstack={isAssetStackSelected}
|
||||
onStack={(result) => updateStackedAssetInTimeline(assetStore, result)}
|
||||
onUnstack={(assets) => updateUnstackedAssetInTimeline(assetStore, assets)}
|
||||
onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
|
||||
onUnstack={(assets) => updateUnstackedAssetInTimeline(timelineManager, assets)}
|
||||
/>
|
||||
{/if}
|
||||
{#if isLinkActionAvailable}
|
||||
@@ -146,14 +146,14 @@
|
||||
<ChangeDate menuItem />
|
||||
<ChangeDescription menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<ArchiveAction menuItem onArchive={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
{#if $preferences.tags.enabled}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<DeleteAssets
|
||||
menuItem
|
||||
onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
|
||||
onUndoDelete={(assets) => assetStore.addAssets(assets)}
|
||||
onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
|
||||
onUndoDelete={(assets) => timelineManager.addAssets(assets)}
|
||||
/>
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
<hr />
|
||||
|
||||
@@ -23,10 +23,10 @@
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
|
||||
import { AppRoute, QueryParameter } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { lang, locale } from '$lib/stores/preferences.store';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
@@ -81,7 +81,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
let assetStore = new AssetStore();
|
||||
let timelineManager = new TimelineManager();
|
||||
|
||||
const onEscape = () => {
|
||||
if ($showAssetViewer) {
|
||||
@@ -131,7 +131,7 @@
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetStore.removeAssets(assetIds);
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
onAssetDelete(assetIds);
|
||||
};
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
import Sidebar from '$lib/components/sidebar/sidebar.svelte';
|
||||
import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
|
||||
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
|
||||
@@ -32,9 +32,9 @@
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
$effect(() => void assetStore.updateOptions({ deferInit: !tag, tagId: tag.id }));
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
$effect(() => void timelineManager.updateOptions({ deferInit: !tag, tagId: tag?.id }));
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
let tags = $derived<TagResponseDto[]>(data.tags);
|
||||
const tree = $derived(TreeNode.fromTags(tags));
|
||||
@@ -157,7 +157,7 @@
|
||||
|
||||
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
|
||||
{#if tag.hasAssets}
|
||||
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
|
||||
{#snippet empty()}
|
||||
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
|
||||
{/snippet}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
|
||||
import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
@@ -36,9 +36,9 @@
|
||||
handlePromiseError(goto(AppRoute.PHOTOS));
|
||||
}
|
||||
|
||||
const assetStore = new AssetStore();
|
||||
void assetStore.updateOptions({ isTrashed: true });
|
||||
onDestroy(() => assetStore.destroy());
|
||||
const timelineManager = new TimelineManager();
|
||||
void timelineManager.updateOptions({ isTrashed: true });
|
||||
onDestroy(() => timelineManager.destroy());
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
@@ -75,8 +75,8 @@
|
||||
// reset asset grid (TODO fix in asset store that it should reset when it is empty)
|
||||
// note - this is still a problem, but updateOptions with the same value will not
|
||||
// do anything, so need to flip it for it to reload/reinit
|
||||
// await assetStore.updateOptions({ deferInit: true, isTrashed: true });
|
||||
// await assetStore.updateOptions({ deferInit: false, isTrashed: true });
|
||||
// await timelineManager.updateOptions({ deferInit: true, isTrashed: true });
|
||||
// await timelineManager.updateOptions({ deferInit: false, isTrashed: true });
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_restore_trash'));
|
||||
}
|
||||
@@ -117,7 +117,7 @@
|
||||
</HStack>
|
||||
{/snippet}
|
||||
|
||||
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape}>
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
|
||||
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
|
||||
{$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
|
||||
</p>
|
||||
@@ -133,8 +133,8 @@
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
>
|
||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||
<DeleteAssets force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<RestoreAssets onRestore={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<DeleteAssets force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
<RestoreAssets onRestore={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user