Persist photos for offline usage

wang-li commented 1 year ago

In order to have a decent user experience in areas where the mobile network coverage is not good, the user should be able to download the photos by advance and persist them on the device.

https://github.com/boolder-org/boolder-android/assets/8343416/8fde32c0-c132-4eaa-b64b-48adb8ddf467

This commit also adds an activity that shows the download state of all the areas. For now, it will be used for debugging purposes, and will not be accessible to the users.

nmondollot commented 1 year ago

Great job!! 🔥 🚀

Here's my initial feedback based on the video:

Download UI

I think the icons for the download/downloading/downloaded states are not super clear at the moment. Why is the "download" icon green and the rest gray? Why is the progress indicator and the downloaded icons centered and the rest on the right?

I think we could make it clearer with a few adjustments:

have the same icon for download/downloaded, but with a different color (green for downloaded, gray for download)
put all the info on the right of the bar, nothing in the center
display a modal when user taps on the download icon, with a text like "Do you want to download the area in offline mode?"
display a modal when user taps on the downloaded icon, with a text like "This area is available offline", and in the future a message/button to point to the offline tab where the user can remove the area

Download UI

Why is the "download" icon green and the rest gray?

I wanted to use colors in order to differentiate a primary action (to download the photos) and a secondary action (to cancel it).

Why is the progress indicator and the downloaded icons centered and the rest on the right?

The action are aligned to the right, as it is always done in the top bars on android. That is why only the download and cancel buttons are on the right. Then the download progress and the downloaded state icon are information for which no interaction is possible, therefore not belonging to the same category as the two action buttons for starting the download or cancelling it. Not being interactive UI components, this is why I chose to group them with the name of the area.

The button colors can be adjusted, as well as the modals can be added, but I think it is important not to mix actions and state information on a design perspective. What do you think?

Other questions

what happens when a file can't be downloaded? because of lack of connectivity or server error for instance

For now, no particular check is performed. The task will try to download as best as it can, meaning that if it was able to download only 5 photos out of 10 (could also be because of incorrect URLs), the download will be marked as completed and the topo will try to download these missing photos when displayed.

what happens if the download is blocked (server takes ages to respond)?

If the first call to get the list of photos is too long, the call will time-out and no photo will be downloaded. Otherwise, when downloading the photos themselves, each download can fail, resulting in the assertion that the photo is not available (as an URL can be incorrect).

what happens when new topos are added to an area that has already been downloaded? how can we trigger a new download? should we do it automatically?

For now, the only way to update the offline photos is to clear the app's data (as the screen with the list of areas will not be accessible to the users yet), the download the area's photos again.

nmondollot commented 1 year ago

I made a few tests on my device, it's working ok 👍 Ok for me to ship it 🚀 and improve on it later

boolder-org / boolder-android