helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): assets now have a permanent URL (#8532)

Browse source 
* Remove asest redirect pages

* Rename route paths to handle optional assetId

* Update old references to new routes

* Load and display asset from all routes that can show assetId

* Add <main> in base layout, update portals to target it

* Wire up updating navigation in response to open/close/prev/next

* Replace events with navigation functions

* Add types to param matcher

* misc cleanup

* Fix reload on /search pages

* Avoid loading bar between photos nav. Delay loading bar by 200ms for all navigations

* Update url for maps routes. Note: on page reload, next/prev is not available

* Dynamically load asset-viewer on map page

* When reloading a url with assetUrl, hide background page to prevent flash during load

* Mostly style, review comments

* Load buckets for assets on demand

* Forgot this update call

* typo

* fix test

* Fix carelessness

* Review comment

* merge main

* remove assets

* fix submodule

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
This commit is contained in:
Min Idzelis 2024-04-24 15:24:19 -04:00 • committed by GitHub
parent 1e004611e4
commit a78260296c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 289 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/src/lib/stores/asset.store.spec.ts
View file

@ -307,15 +307,15 @@ describe('AssetStore', () => {
});
it('returns null for invalid assetId', async () => {
expect(() => assetStore.getPreviousAsset('invalid')).not.toThrow();
expect(await assetStore.getPreviousAsset('invalid')).toBeNull();
expect(() => assetStore.getPreviousAsset({ id: 'invalid' } as AssetResponseDto)).not.toThrow();
expect(await assetStore.getPreviousAsset({ id: 'invalid' } as AssetResponseDto)).toBeNull();
});
it('returns previous assetId', async () => {
await assetStore.loadBucket('2024-01-01T00:00:00.000Z', BucketPosition.Visible);
const bucket = assetStore.getBucketByDate('2024-01-01T00:00:00.000Z');
expect(await assetStore.getPreviousAsset(bucket!.assets[1].id)).toEqual(bucket!.assets[0]);
expect(await assetStore.getPreviousAsset(bucket!.assets[1])).toEqual(bucket!.assets[0]);
});
it('returns previous assetId spanning multiple buckets', async () => {
@ -324,7 +324,7 @@ describe('AssetStore', () => {
const bucket = assetStore.getBucketByDate('2024-02-01T00:00:00.000Z');
const previousBucket = assetStore.getBucketByDate('2024-03-01T00:00:00.000Z');
expect(await assetStore.getPreviousAsset(bucket!.assets[0].id)).toEqual(previousBucket!.assets[0]);
expect(await assetStore.getPreviousAsset(bucket!.assets[0])).toEqual(previousBucket!.assets[0]);
});
it('loads previous bucket', async () => {
@ -333,7 +333,7 @@ describe('AssetStore', () => {
const loadBucketSpy = vi.spyOn(assetStore, 'loadBucket');
const bucket = assetStore.getBucketByDate('2024-02-01T00:00:00.000Z');
const previousBucket = assetStore.getBucketByDate('2024-03-01T00:00:00.000Z');
expect(await assetStore.getPreviousAsset(bucket!.assets[0].id)).toEqual(previousBucket!.assets[0]);
expect(await assetStore.getPreviousAsset(bucket!.assets[0])).toEqual(previousBucket!.assets[0]);
expect(loadBucketSpy).toBeCalledTimes(1);
});
@ -344,12 +344,12 @@ describe('AssetStore', () => {
const [assetOne, assetTwo, assetThree] = assetStore.assets;
assetStore.removeAssets([assetTwo.id]);
expect(await assetStore.getPreviousAsset(assetThree.id)).toEqual(assetOne);
expect(await assetStore.getPreviousAsset(assetThree)).toEqual(assetOne);
});
it('returns null when no more assets', async () => {
await assetStore.loadBucket('2024-03-01T00:00:00.000Z', BucketPosition.Visible);
expect(await assetStore.getPreviousAsset(assetStore.assets[0].id)).toBeNull();
expect(await assetStore.getPreviousAsset(assetStore.assets[0])).toBeNull();
});
});

66
web/src/lib/stores/assets.store.ts
View file

@ -1,4 +1,5 @@
import { getKey } from '$lib/utils';
import { fromLocalDateTime } from '$lib/utils/timeline-util';
import { TimeBucketSize, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
import { throttle } from 'lodash-es';
import { DateTime } from 'luxon';
@ -188,32 +189,40 @@ export class AssetStore {
this.assetToBucket = {};
this.albumAssets = new Set();
const buckets = await getTimeBuckets({
const timebuckets = await getTimeBuckets({
...this.options,
key: getKey(),
});
this.initialized = true;
this.buckets = buckets.map((bucket) => {
const unwrappedWidth = (3 / 2) * bucket.count * THUMBNAIL_HEIGHT * (7 / 10);
this.buckets = timebuckets.map((bucket) => ({
bucketDate: bucket.timeBucket,
bucketHeight: 0,
bucketCount: bucket.count,
assets: [],
cancelToken: null,
position: BucketPosition.Unknown,
}));
// if loading an asset, the grid-view may be hidden, which means
// it has 0 width and height. No need to update bucket or timeline
// heights in this case. Later, updateViewport will be called to
// update the heights.
if (viewport.height !== 0 && viewport.width !== 0) {
await this.updateViewport(viewport);
}
}
async updateViewport(viewport: Viewport) {
for (const bucket of this.buckets) {
const unwrappedWidth = (3 / 2) * bucket.bucketCount * THUMBNAIL_HEIGHT * (7 / 10);
const rows = Math.ceil(unwrappedWidth / viewport.width);
const height = rows * THUMBNAIL_HEIGHT;
return {
bucketDate: bucket.timeBucket,
bucketHeight: height,
bucketCount: bucket.count,
assets: [],
cancelToken: null,
position: BucketPosition.Unknown,
};
});
bucket.bucketHeight = height;
}
this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
this.emit(false);
let height = 0;
const loaders = [];
for (const bucket of this.buckets) {
@ -222,10 +231,10 @@ export class AssetStore {
loaders.push(this.loadBucket(bucket.bucketDate, BucketPosition.Visible));
continue;
}
break;
}
await Promise.all(loaders);
this.emit(false);
}
async loadBucket(bucketDate: string, position: BucketPosition): Promise<void> {
@ -380,8 +389,19 @@ export class AssetStore {
return this.buckets.find((bucket) => bucket.bucketDate === bucketDate) || null;
}
getBucketInfoForAssetId(assetId: string) {
return this.assetToBucket[assetId] || null;
async getBucketInfoForAssetId({ id, localDateTime }: Pick<AssetResponseDto, 'id' | 'localDateTime'>) {
const bucketInfo = this.assetToBucket[id];
if (bucketInfo) {
return bucketInfo;
}
let date = fromLocalDateTime(localDateTime);
if (this.options.size == TimeBucketSize.Month) {
date = date.set({ day: 1, hour: 0, minute: 0, second: 0, millisecond: 0 });
} else if (this.options.size == TimeBucketSize.Day) {
date = date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
}
await this.loadBucket(date.toISO()!, BucketPosition.Unknown);
return this.assetToBucket[id] || null;
}
getBucketIndexByAssetId(assetId: string) {
@ -451,8 +471,8 @@ export class AssetStore {
this.emit(true);
}
async getPreviousAsset(assetId: string): Promise<AssetResponseDto | null> {
const info = this.getBucketInfoForAssetId(assetId);
async getPreviousAsset(asset: AssetResponseDto): Promise<AssetResponseDto | null> {
const info = await this.getBucketInfoForAssetId(asset);
if (!info) {
return null;
}
@ -472,8 +492,8 @@ export class AssetStore {
return previousBucket.assets.at(-1) || null;
}
async getNextAsset(assetId: string): Promise<AssetResponseDto | null> {
const info = this.getBucketInfoForAssetId(assetId);
async getNextAsset(asset: AssetResponseDto): Promise<AssetResponseDto | null> {
const info = await this.getBucketInfoForAssetId(asset);
if (!info) {
return null;
}