desmos-labs / mooncake

The first decentralized social app based on Desmos
MIT License
47 stars 14 forks source link

Post photos view improvements #135

Closed ryuash closed 3 years ago

ryuash commented 3 years ago
## Feature description

Open a lightbox instead of a url. on mutli image uploads if the user is not on the first page and clicks on the photo it redirects them to post details when it should open up a lightbox

update: I think it's a gesture hierarchy issue update: having issues implementing this. will look in to it later

Implementation proposal

ryuash commented 3 years ago

There's a known issue in flutter where nested GestureDetectors will fight with each other until there's is only one standing. I haven't found a good solution for this just yet.

kwunyeung commented 3 years ago

@RiccardoM how's the current caching mechanism on Mooncake? I see that the image showing on the timeline is not too slow.

To improve the photo viewing experience, we should implement a cache layer. Mooncake should only display the cached images unless the user request for the original file hosted on IPFS.

In the current design, we have

  1. a preview image on timeline
  2. square image for Poll
  3. large image when user tap on the image

Every time when a user upload an image to IPFS, we will create a set of these thumbnails, store them on IPFS and update thumbnail urls for the corresponding post.

Usually the caches can be created at either of the following point of time.

  1. Create the thumbnails during user photo upload
  2. Create the thumbnails when the image is being accessed by the client for the first time
RiccardoM commented 3 years ago

@kwunyeung Currently, the caching is done automatically by the library we use to download the images stored on IPFS and display them inside the posts list: cached_network_image. This is based on the flutter_cache_manager library.

Even though the images assume different shapes and sizes, they are always the same cached file that gets then resized if needed.

The only time the image is not cached is when you tap on it to view it entirely. In that case, the tap redirects you to the Desmos IPFS node opening the browser. Instead, what we should do is open the image full screen by reading the cached one instead of opening the browser. This was a first implementation to make everything faster, but as far as I understand now @ryuash has proposed to change this.

So, I personally don't think we need our caching layer (which would only make everything very complicated due to different URLs etc). Instead we can rely on the existing layer and simply implement the detail viewing offline.

kwunyeung commented 3 years ago

It's good that Flutter has a package handling this!

ryuash commented 3 years ago

Leaving here for reference later: (handling multi gesture detectors in parent/child) https://gist.github.com/Nash0x7E2/08acca529096d93f3df0f60f9c034056

https://medium.com/flutter-community/combining-multiple-gesturedetectors-in-flutter-26d899d008b2