immich/web/src/lib/stores/memory.store.svelte.ts
Andreas fe19f9ba84
fix(web): asset selection on memories page is broken (#16759)
* 16712: Proper intialisation of the memory store to avoid loading up duplicate object refs of the same asset.

* 16712: Add auth to memory mapping so isFavorite is actually return correctly from the server.

* 16712: Move logic that belongs in the store into the store.

* 16712: Cleanup.

* 16712: Fix init behaviour.

* 16712: Add comment.

* 16712: Make method private.

* 16712: Fix import.

* 16712: Fix format.

* 16712: Cleaner if/else and fix typo.

* fix: icon size mismatch

* 16712: Fixed up state machine managing memory playback:
* Updated to `Tween` (`tweened` was deprecated)
* Removed `resetPromise`. Setting progressController to 0 had the same effect, so not really sure why it was there?
* Removed the many duplicate places the `handleAction` method was called. Now we just called it on `afterNavigate` as well as when `galleryInView` or `$isViewing` state changes.

* 16712: Add aria tag.

* 16712: Fix memory player duplicate invocation bugs. Now we should only call 'reset' and 'play' once, after navigate/page load. This should hopefully fix all the various bugs around playback.

* 16712: Cleanup

* 16712: Cleanup

* 16712: Cleanup

* 16712: Cleanup

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-03-18 11:34:09 -05:00

120 lines
3.3 KiB
TypeScript

import { asLocalTimeISO } from '$lib/utils/date-time';
import {
type AssetResponseDto,
deleteMemory,
type MemoryResponseDto,
removeMemoryAssets,
searchMemories,
updateMemory,
} from '@immich/sdk';
import { DateTime } from 'luxon';
type MemoryIndex = {
memoryIndex: number;
assetIndex: number;
};
export type MemoryAsset = MemoryIndex & {
memory: MemoryResponseDto;
asset: AssetResponseDto;
previousMemory?: MemoryResponseDto;
previous?: MemoryAsset;
next?: MemoryAsset;
nextMemory?: MemoryResponseDto;
};
class MemoryStoreSvelte {
memories = $state<MemoryResponseDto[]>([]);
private initialized = false;
private memoryAssets = $derived.by(() => {
const memoryAssets: MemoryAsset[] = [];
let previous: MemoryAsset | undefined;
for (const [memoryIndex, memory] of this.memories.entries()) {
for (const [assetIndex, asset] of memory.assets.entries()) {
const current = {
memory,
memoryIndex,
previousMemory: this.memories[memoryIndex - 1],
nextMemory: this.memories[memoryIndex + 1],
asset,
assetIndex,
previous,
};
memoryAssets.push(current);
if (previous) {
previous.next = current;
}
previous = current;
}
}
return memoryAssets;
});
getMemoryAsset(assetId: string | undefined) {
return this.memoryAssets.find((memoryAsset) => memoryAsset.asset.id === assetId) ?? this.memoryAssets[0];
}
hideAssetsFromMemory(ids: string[]) {
const idSet = new Set<string>(ids);
for (const memory of this.memories) {
memory.assets = memory.assets.filter((asset) => !idSet.has(asset.id));
}
// if we removed all assets from a memory, then lets remove those memories (we don't show memories with 0 assets)
this.memories = this.memories.filter((memory) => memory.assets.length > 0);
}
async deleteMemory(id: string) {
const memory = this.memories.find((memory) => memory.id === id);
if (memory) {
await deleteMemory({ id: memory.id });
this.memories = this.memories.filter((memory) => memory.id !== id);
}
}
async deleteAssetFromMemory(assetId: string) {
const memoryWithAsset = this.memories.find((memory) => memory.assets.some((asset) => asset.id === assetId));
if (memoryWithAsset) {
if (memoryWithAsset.assets.length === 1) {
await this.deleteMemory(memoryWithAsset.id);
} else {
await removeMemoryAssets({ id: memoryWithAsset.id, bulkIdsDto: { ids: [assetId] } });
memoryWithAsset.assets = memoryWithAsset.assets.filter((asset) => asset.id !== assetId);
}
}
}
async updateMemorySaved(id: string, isSaved: boolean) {
const memory = this.memories.find((memory) => memory.id === id);
if (memory) {
await updateMemory({
id,
memoryUpdateDto: {
isSaved,
},
});
memory.isSaved = isSaved;
}
}
async initialize() {
if (this.initialized) {
return;
}
this.initialized = true;
await this.loadAllMemories();
}
private async loadAllMemories() {
const memories = await searchMemories({ $for: asLocalTimeISO(DateTime.now()) });
this.memories = memories.filter((memory) => memory.assets.length > 0);
}
}
export const memoryStore = new MemoryStoreSvelte();