refactor(web): asset grid state

[jrasm91]

In this PR:

• Refactor asset grid state
• Only create an abort controller before starting an http request
• Track asset lookup map to bucket, bucket index, and asset index

Tested Scenarios:

• View an asset, hit next until the next time bucket loads (observed in the network tab)
• View an asset towards end of timeline, hit previous until a previous time bucket loads (observed in the network tab)
• View first asset in the timeline, observe clicking previous does nothing
• Scrub the timeline and observe relatively quick loading/rendering.
• Add an artificial delay to get asset by time bucket to verify abort controller is firing and cancelling requests when the bucket is no longer intersecting
• Delete photos, make sure they are removed from the grid
• Archive photos, make sure they are removed from the grid
• Select all photos, make sure the count matches the statistics for the user
• Select the first asset, jump a long way down, shift select an asset, then scroll up and observe everything is selected

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
immich	⬜️ Ignored (Inspect)	Visit Preview		Aug 2, 2023 9:42pm

[brighteyed]

Brilliant! I'm a big fan of your refactoring PRs.

Looks like handleSelectAssets doesn't work as expected:

• Open photos page and select one asset
• Click on the scrollbar somewhere near the bottom and Shift-select another asset

Assets got selected, but addGroupToMultiselectGroup was not called for intermediate date groups

[brighteyed]

Brilliant! I'm a big fan of your refactoring PRs.

Looks like handleSelectAssets doesn't work as expected:

• Open photos page and select one asset
• Click on the scrollbar somewhere near the bottom and Shift-select another asset

Assets got selected, but addGroupToMultiselectGroup was not called for intermediate date groups

getBucketIndexByAssetId returns null instead of 0 in my case:

[alextran1502]

Is this for updating the state?

[jrasm91]

Yes. It updates the svelte store.

[alextran1502]

Can you help explain what does the bind method do here?

[jrasm91]

The this in a method is "whatever object called the method". It's kind of complicated, but basically

on:click={obj.foo}
on:click={() => obj.foo()}

Have different values for this. Only the second one would work.

[jrasm91]

Bind makes a method always use the same this value, which is passed into bind.