Provide photos in a way that can be consumed by the front-end

[gmaclennan]

Description

We store photos in the blob store, and we need to display these photos in the frontend. In Mapeo 5 photos are just stored as files, and to display them we pass a file path to the front end, which sets the file path as the src for an image. This is quick and efficient. We don't have a file path for images stored in the blob store.

Passing the images around as blobs is not really an option. React Native (and the bridge we use) does not support buffers, so they would need to be encoded to Base64 or equivalent. This has big memory and performance overheads. In addition, in React Native images are actually drawn on the UI thread, not the thread that the JS code is running, so this blob needs to go across another bridge (the React Native -> mobile Native world) to be displayed. This will be really expensive for performance.

A couple of options:

1. Serve the images via a local http server
2. Use MirrorDrive to copy the hyperdrive to disk
3. Copy files to disk on-demand to cache storage and cleanup after, e.g. add a mapeo.getBlobFilePath(blobId) method that will copy to cache storage, and cleanup if not accessed for a while.

I think (2) will use up too much disk space and is not really an option due to space restrictions on mobile. (3) will use less disk space, but it can still be an issue. (1) is clunky, but it might end up being less work than trying to deal with the caching of (3).

We also need to bear in mind the upcoming audio and video file storage, which will have similar requirements.

Tasks

• Decide which approach is going to work best
• Implement the API for this

[ximenabb]

@achou11 @gmaclennan can you both chat and see if this ticket needs to be separated into research and implementation? keep @sethvincent in the loop

[achou11]

Discussed with @gmaclennan and decided that implementing an HTTP server will be the most reasonable approach for this.