feat(web): Map in albums & shared albums #17906
Conversation
davidpcrd
changed the title
davidpcrd
changed the title
davidpcrd
changed the title
There was a problem hiding this comment.
What's the reason you cannot reuse the existing map?
There was a problem hiding this comment.
What do you mean ? I use the <Map ... /> object on line 127 in album-map.svelte,
There was a problem hiding this comment.
Oh sorry I assumed we had more logic from the map +page.svelte in the map component, but apparently we don't. That's kinda ugly, but not your problem then 😅
There was a problem hiding this comment.
I see... I've taken a lot from /map logic. Sorry for this ugly code 🤦♂️
There was a problem hiding this comment.
I was saying that how the map page currently is built is ugly lol.
| @@ -32,6 +33,8 @@ | |||
|
|
|||
| let { isViewing: showAssetViewer } = assetViewingStore; | |||
|
|
|||
| let isInMapView = $state(false); | |||
There was a problem hiding this comment.
Can you help refactoring this boolean state to a AlbumMapViewManager global state class? It will look nicer because we will not use props drilling and binding.
You can see an example here
There was a problem hiding this comment.
working on it. I've tried something, but not tested yet
|
|
||
| onDestroy(() => { | ||
| abortController?.abort(); | ||
| abortController?.abort(); |
* add btn, map and marker * Fix bug in navigation assetviewer * Correct bug on main Viewer * Add to user album the map of his pictures * change icon to outline * lint & format * with manager instead of variable * remove duplicate * chore: minor styling change * formatting --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Description
The goal of this PR is to add a map in albums and shared albums so that a user receiving a link can quickly locate the photos.
This is ideal for sharing a trip without needing to check the location of each photo individually.
To do this, I added a map button in
/albumsand/share.When clicked, a modal window opens with a map showing markers for photos/videos.
Clicking on a marker allows viewing them just like in the
/mappage.To implement this change, a new component
album-map.sveltewas created, takingalbumandisInMapViewas arguments.The second property was useful because there are two
AssetViewerinstances, and they were interfering with each other, causing unintended behaviors.Following this idea, I also added the same variable to
asset-grid.svelte.How Has This Been Tested?
I tested that viewing photos in the album still works, as well as viewing them on the map.
I also verified that a shared album with hidden metadata does not display any location information.
Additionally, no extra photos are shown: only the photos associated with a marker are displayed.
npm run lintnpm run formatnpm run check:sveltenpm run check:typescriptnpm run testScreenshots
Checklist:
src/services/uses repositories implementations for database calls, filesystem operations, etc.src/repositories/is pretty basic/simple and does not have any immich specific logic (that belongs insrc/services/)