allow setting scene thumbnail from capture share modal

[kfarr]

As a user editing and sharing a 3DStreet scene I want to be able to choose which image is used for the scene thumbnail.

From the capture share modal

• there is a new button in the lower-right hand corner of the screencaptured image
• upon pressing, it uses the example same image as in the preview but converts to 320 x 240.
• Note the user has taken a screenshot whose dimensions are the same as the document window. Therefore there will need to be resizing is "contain" (keep same aspect ratio and reduce the image size as much as possible until reducing any more would result in some part of 320x240 dimensions not having part of the original image)

Firebase storage considerations / storage logic:

• store thumbnails as jpeg 320x240 at 50% quality, target size between 20-35kb
• store using firebase storage
• path of file: [Storage Server Root]/scenes/[Scene Document ID]/files/preview.jpg
• after a successful upload on the thumbnail, the path to the thumbnail should be stored inside a field at the top level of the scene document named imagePath.
• if a scene is remixed (save as) it should retain the existing imagePath field and NO new scene image should be created. Therefore it is ok if the scene doc ID does not match the image path ID. It will match again if / when the new author decides to create a new thumbnail.

server side considerations:

• the image should be accessible to public, served with permissive CORS, allow fetching from all domains, and accessible via https
• security rules - viewing: anyone can view, these are all public
• security rules - writing (update / create / delete): the author of a given scene document ID is the only user who has the authority to update / create / delete this jpg or any files within the /scenes/SCENEUUID/files/ path

Setting write permission:

• https://firebase.google.com/docs/storage/security/rules-conditions#enhance_with_firestore

DRAFT of Cloud Storage security rule

service firebase.storage {
  match /b/{bucket}/o {
    match /scenes/{scene_uuid}/files/{allPaths=**} {
      allow write: if request.auth.id in
        firestore.get(/databases/(default)/documents/scenes/{scene_uuid}).author;
      allow read: if resource.size < 100 * 1024;    // if file < 100kb
    }
  }
}

[rostyslavvnahornyi]

Hey, @kfarr !

I’ve tried optimizing downloaded images using various front-end solutions and different libraries, but none of them seem to work as expected. So, I’m suggesting we give server-side uploading a try.

In Firebase, there are two plans:

1. Spark (free)
2. Blaze plan (paid, pay-as-you-go)

The default plan is the free Spark plan. To optimize image loading, we should consider using a plugin provided by the Blaze plan, which can be found at https://extensions.dev/extensions/firebase/storage-resize-images.

I’m not sure if it’s necessary for us to pay for server uploads in the future, so I wanted to ask if we need to use this plugin and which information I would need to provide regarding payment (such as card number, etc.)

[kfarr]

Ok yes we can work out server stuff. In the meantime I went down that rabbit hole and we may need to do a little tweaking on the resizing method: firebase/extensions#1759

[kfarr]

see #309