create standalone page to display media

[clintonlunn]

Todo

Create a standalone page to display a photo in full screen. This page can be used as a child component in the user gallery and in area/climb page.

• Create /media/[mediaUrl]/page.tsx
• Dispay media using Image component

Notes:

• mediaUrl format: u/abe96612-2742-43b0-a128-6b19d4e4615f/gbWD8LLrnb.jpeg
• Page layout div should be minimal, full width & height since page will be called by other components that will provide the layout.

Related to #1212

Read more about slot / parallel routes to display this page inside of a modal

• https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
• https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

[mikeschen]

question: How will we get to this standalone page?
If we go to area we can click on a photo, it appears in Gallery, then we click again and enter a full screen view.
User Gallery we click on a photo and we enter slideshow.
How would this new page be used?

[vnugent]

I'm hoping we can simplify the user gallery component and have a common slideshow/full screen view that can be used both from the climb/area page gallery and user gallery. We'll have to re-do the user gallery slideshow.

• Climb/Area photo gallery --> click on photo --> slideshow/full screen
• User gallery --> click on photo --> slideshow/full screen

Docs: Nextjs modal

[mikeschen]

Makes sense, something like this may help too: https://vercel.com/blog/building-a-fast-animated-image-gallery-with-next-js
as well as
https://github.com/vercel/nextgram

[ShravaniRoy]

I would like to work on this issue. @mikeschen Can you assign this to me?