[web] Fix multimedia sending conditions for thick threads

Summary:
Implements 2c from [[ https://linear.app/comm/issue/ENG-9345/multimedia-messages-on-web-are-failed-when-sending-message-really-fast#comment-b04675fb | ENG-9345 ]].
Details in the Linear comment.

Depends on D13419

Test Plan:
Successfully sent a photo:
- "quickly" (before upload finished) and "slowly" (waited until preload completes)
- For thick and thin thread

Reviewers: kamil, tomek

Reviewed By: kamil

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D13420

web/input/input-state-container.react.js

@@ -274,11 +274,11 @@ class InputStateContainer extends React.PureComponent<Props, State> {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
-        const { messageID, serverID, failed } = upload;
+        const { messageID, canBeSent, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
-        if (!serverID || failed) {
+        if (!canBeSent || failed) {
           completed.set(messageID, false);
           continue;
         }
@@ -864,6 +864,7 @@ class InputStateContainer extends React.PureComponent<Props, State> {
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
+          canBeSent: false,
           blobHolder: null,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
@@ -890,6 +891,7 @@ class InputStateContainer extends React.PureComponent<Props, State> {
   async uploadFile(threadInfo: ThreadInfo, upload: PendingMultimediaUpload) {
     const { selectTime, localID, encryptionKey } = upload;
     const threadID = threadInfo.id;
+    const isThickThread = threadTypeIsThick(threadInfo.type);
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
@@ -931,7 +933,6 @@ class InputStateContainer extends React.PureComponent<Props, State> {
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
-      const isThickThread = threadTypeIsThick(threadInfo.type);
       const useBlobService = isThickThread || this.useBlobServiceUploads;
       if (
         useBlobService &&
@@ -1041,6 +1042,10 @@ class InputStateContainer extends React.PureComponent<Props, State> {
               serverID: result.id,
               blobHolder: result.blobHolder,
               abort: null,
+              // For thin threads we can send message right after serverID
+              // is present, but for thick threads we need to wait until
+              // a "real" Blob URI is assigned to the message.
+              canBeSent: !isThickThread,
             },
           },
         },
@@ -1128,8 +1133,9 @@ class InputStateContainer extends React.PureComponent<Props, State> {
               uri: result.uri,
               mediaType: outputMediaType,
               dimensions: result.dimensions,
-              uriIsReal: true,
               loop: result.loop,
+              uriIsReal: true,
+              canBeSent: true,
             },
           },
         },

web/input/input-state.js

@@ -35,6 +35,7 @@ export type PendingMultimediaUpload = {
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly
   +uriIsReal: boolean,
+  +canBeSent: boolean,
   +progressPercent: number,
   // This is set once the network request begins and used if the upload is
   // cancelled