rebuilt with the sdk rc1

1. More orderly offer-answer exchange sequence.
2. Cache remote ICE candidates that arrive before call establishment is complete (we use trickle ICE).

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.20.0-beta2",
+  "version": "0.20.0-rc1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -71,7 +71,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intl": "^5.20.2",
-    "tinode-sdk": "^0.20.0-beta2",
+    "tinode-sdk": "^0.20.0-rc1",
     "webrtc-adapter": "^8.1.1"
   },
   "devDependencies": {

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.20.0-beta2";
+export const PACKAGE_VERSION = "0.20.0-rc1";

src/views/info-view.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Tinode } from 'tinode-sdk';
+import { AccessMode, Tinode } from 'tinode-sdk';
 
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import BadgeList from '../widgets/badge-list.jsx';
@@ -307,7 +307,7 @@ class InfoView extends React.Component {
           toSkip = 'O';
         } else {
           // Allow accepting any of 'ASDO' permissions but don't allow asking for them.
-          toSkip = Tinode.AccessMode.encode(Tinode.AccessMode.diff('ASDO', this.state.modeGiven));
+          toSkip = AccessMode.encode(AccessMode.diff('ASDO', this.state.modeGiven));
           if (this.state.channel) {
             // Channels are read-only.
             toSkip += 'W';

src/views/login-view.jsx

@@ -5,8 +5,6 @@ import { FormattedMessage } from 'react-intl';
 import CheckBox from '../widgets/checkbox.jsx';
 import VisiblePassword from '../widgets/visible-password.jsx';
 
-import LocalStorageUtil from '../lib/local-storage.js';
-
 export default class LoginView extends React.Component {
   constructor(props) {
     super(props);

src/views/messages-view.jsx

@@ -403,15 +403,25 @@ class MessagesView extends React.Component {
           this.setState({topic: ctrl.topic});
         }
         this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
-        // If there are unsent messages, try sending them now.
+        // If there are unsent messages (except video call messages),
+        // try sending them now. Unsent video call messages will be dropped.
+        let calls = [];
         topic.queuedMessages((pub) => {
           if (pub._sending) {
             return;
           }
+          if (pub.head && pub.head.webrtc) {
+            // Filter out unsent video call messages.
+            calls.push(pub.seq);
+            return;
+          }
           if (topic.isSubscribed()) {
             this.retrySend(pub);
           }
         });
+        if (calls.length > 0) {
+          topic.delMessagesList(calls, true);
+        }
       })
       .catch((err) => {
         console.error("Failed subscription to", this.state.topic, err);
@@ -760,7 +770,12 @@ class MessagesView extends React.Component {
 
   // Retry sending a message.
   retrySend(pub) {
-    this.props.sendMessage(pub.content, undefined, undefined, pub.head);
+    this.props.sendMessage(pub.content, undefined, undefined, pub.head)
+      .then(() => {
+        // All good. Remove the original message draft from the cache.
+        const topic = this.props.tinode.getTopic(this.state.topic);
+        topic.delMessagesList([pub.seq], true);
+      });
   }
 
   // Send attachment as Drafty message:

src/views/tinode-web.jsx

@@ -1007,15 +1007,25 @@ class TinodeWeb extends React.Component {
       const subscribePromise =
         topic.subscribe()
           .then(() => {
-            // If there are unsent messages, try sending them now.
+            // If there are unsent messages (except video call messages),
+            // try sending them now. Unsent video call messages will be dropped.
+            let calls = [];
             topic.queuedMessages(pub => {
               if (pub._sending || pub.seq == msg.seq) {
                 return;
               }
+              if (pub.head && pub.head.webrtc) {
+                // Filter out unsent video call messages.
+                calls.push(pub.seq);
+                return;
+              }
               if (topic.isSubscribed()) {
                 topic.publishMessage(pub);
               }
             });
+            if (calls.length > 0) {
+              topic.delMessagesList(calls, true);
+            }
           });
       completion.push(subscribePromise);
     }
@@ -1141,6 +1151,8 @@ class TinodeWeb extends React.Component {
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
     this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
+    this.tinode.onInfoMessage = this.handleInfoMessage;
+    this.tinode.onDataMessage = this.handleDataMessage;
 
     this.setState({
       serverAddress: serverAddress,
@@ -1400,6 +1412,8 @@ class TinodeWeb extends React.Component {
           this.tinode.onConnect = this.handleConnected;
           this.tinode.onDisconnect = this.handleDisconnect;
           this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
+          this.tinode.onInfoMessage = this.handleInfoMessage;
+          this.tinode.onDataMessage = this.handleDataMessage;
           HashNavigation.navigateTo('');
         })
     });
@@ -1524,7 +1538,8 @@ class TinodeWeb extends React.Component {
       ];
     }
 
-    let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false, archived = false;
+    let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false,
+      archived = false, webrtc = false;
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
@@ -1538,12 +1553,14 @@ class TinodeWeb extends React.Component {
       }
     }
 
+    webrtc = !!this.tinode.getServerParam('iceServers');
+
     return [
       subscribed ? {
         title: this.props.intl.formatMessage(messages.menu_item_info),
         handler: this.handleShowInfoView
       } : null,
-      subscribed && Tinode.isP2PTopicName(topicName) ? {
+      subscribed && Tinode.isP2PTopicName(topicName) && webrtc ? {
         title: this.props.intl.formatMessage(messages.menu_item_video_call),
         handler: this.handleStartVideoCall
       } : null,

src/widgets/call-panel.jsx

@@ -32,22 +32,29 @@ class CallPanel extends React.PureComponent {
       pc: undefined,
 
       previousOnInfo: undefined,
-      waitingForPeer: false
+      waitingForPeer: false,
+      // If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer.
+      callInitialSetupComplete: false
     };
 
     this.localStreamConstraints = {
       audio: true,
       video: true
     };
+    this.isOutgoingCall = props.callState == CALL_STATE_OUTGOING_INITATED;
 
     this.localRef = React.createRef();
     this.remoteRef = React.createRef();
+    // Cache for remote ice candidates until initial setup gets completed.
+    this.remoteIceCandidatesCache = [];
 
     this.onInfo = this.onInfo.bind(this);
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
 
     this.createPeerConnection = this.createPeerConnection.bind(this);
+    this.canSendOffer = this.canSendOffer.bind(this);
+    this.drainRemoteIceCandidatesCache = this.drainRemoteIceCandidatesCache.bind(this);
 
     this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);
     this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
@@ -219,14 +226,25 @@ class CallPanel extends React.PureComponent {
     // Configure the remote description, which is the SDP payload
     // in 'info' message.
     const desc = new RTCSessionDescription(info.payload);
-    this.state.pc.setRemoteDescription(desc).catch(this.reportError);
+    this.state.pc.setRemoteDescription(desc)
+      .then(_ => {
+        this.setState({ callInitialSetupComplete: true }, () => this.drainRemoteIceCandidatesCache());
+      })
+      .catch(this.reportError);
   }
 
   reportError(err) {
     this.props.onError(err.message, 'err');
   }
 
+  canSendOffer() {
+    return this.isOutgoingCall || this.state.callInitialSetupComplete;
+  }
+
   handleNegotiationNeededEvent() {
+    if (!this.canSendOffer()) {
+      return;
+    }
     this.state.pc.createOffer().then(offer => {
       return this.state.pc.setLocalDescription(offer);
     })
@@ -244,8 +262,20 @@ class CallPanel extends React.PureComponent {
 
   handleNewICECandidateMsg(info) {
     const candidate = new RTCIceCandidate(info.payload);
-    this.state.pc.addIceCandidate(candidate)
-      .catch(this.reportError);
+    if (this.state.callInitialSetupComplete) {
+      this.state.pc.addIceCandidate(candidate)
+        .catch(this.reportError);
+    } else {
+      this.remoteIceCandidatesCache.push(candidate);
+    }
+  }
+
+  drainRemoteIceCandidatesCache() {
+    this.remoteIceCandidatesCache.forEach(candidate => {
+      this.state.pc.addIceCandidate(candidate)
+        .catch(this.reportError);
+    });
+    this.remoteIceCandidatesCache = [];
   }
 
   handleICEConnectionStateChangeEvent(event) {
@@ -320,6 +350,7 @@ class CallPanel extends React.PureComponent {
     })
     .then(_ => {
       this.props.onSendAnswer(this.props.topic, this.props.seq, pc.localDescription.toJSON());
+      this.setState({ callInitialSetupComplete: true }, () => this.drainRemoteIceCandidatesCache());
     })
     .catch(this.handleGetUserMediaError);
   }

src/widgets/visible-password.jsx

@@ -19,7 +19,9 @@ export default class VisiblePassword extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.inputRef.current.focus();
+    if (this.props.autoFocus) {
+      this.inputRef.current.focus();
+    }
   }
 
   handeTextChange(e) {

umd/index.dev.js

@@ -57,12 +57,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "jsonEval": () => (/* binding */ jsonEval),
 /* harmony export */   "map": () => (/* binding */ map),
 /* harmony export */   "ordinal": () => (/* binding */ ordinal),
+/* harmony export */   "promiseWithTimeout": () => (/* binding */ promiseWithTimeout),
 /* harmony export */   "querystring": () => (/* binding */ querystring),
 /* harmony export */   "querystringDecode": () => (/* binding */ querystringDecode),
 /* harmony export */   "safeGet": () => (/* binding */ safeGet),
 /* harmony export */   "stringLength": () => (/* binding */ stringLength),
 /* harmony export */   "stringToByteArray": () => (/* binding */ stringToByteArray),
 /* harmony export */   "stringify": () => (/* binding */ stringify),
+/* harmony export */   "uuidv4": () => (/* binding */ uuidv4),
 /* harmony export */   "validateArgCount": () => (/* binding */ validateArgCount),
 /* harmony export */   "validateCallback": () => (/* binding */ validateCallback),
 /* harmony export */   "validateContextObject": () => (/* binding */ validateContextObject),
@@ -845,7 +847,7 @@ function getGlobal() {
  *
  *   catch (e) {
  *     assert(e.message === "Could not find file: foo.txt.");
- *     if (e.code === 'service/file-not-found') {
+ *     if ((e as FirebaseError)?.code === 'service/file-not-found') {
  *       console.log("Could not read file: " + e['file']);
  *     }
  *   }
@@ -1123,6 +1125,33 @@ function isObject(thing) {
     return thing !== null && typeof thing === 'object';
 }
 
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Rejects if the given promise doesn't resolve in timeInMS milliseconds.
+ * @internal
+ */
+function promiseWithTimeout(promise, timeInMS = 2000) {
+    const deferredPromise = new Deferred();
+    setTimeout(() => deferredPromise.reject('timeout!'), timeInMS);
+    promise.then(deferredPromise.resolve, deferredPromise.reject);
+    return deferredPromise.promise;
+}
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1832,6 +1861,34 @@ const stringLength = function (str) {
     return p;
 };
 
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Copied from https://stackoverflow.com/a/2117523
+ * Generates a new uuid.
+ * @public
+ */
+const uuidv4 = function () {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        const r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -3440,7 +3497,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION)
 /* harmony export */ });
-const PACKAGE_VERSION = "0.20.0-beta2";
+const PACKAGE_VERSION = "0.20.0-rc1";
 
 /***/ }),
 
@@ -4760,7 +4817,7 @@ class InfoView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         if (this.state.owner) {
           toSkip = 'O';
         } else {
-          toSkip = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.AccessMode.encode(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.AccessMode.diff('ASDO', this.state.modeGiven));
+          toSkip = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.AccessMode.encode(tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.AccessMode.diff('ASDO', this.state.modeGiven));
 
           if (this.state.channel) {
             toSkip += 'W';
@@ -5179,8 +5236,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../widgets/checkbox.jsx */ "./src/widgets/checkbox.jsx");
 /* harmony import */ var _widgets_visible_password_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../widgets/visible-password.jsx */ "./src/widgets/visible-password.jsx");
-/* harmony import */ var _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/local-storage.js */ "./src/lib/local-storage.js");
-
 
 
 
@@ -5800,15 +5855,25 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       }
 
       this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
+      let calls = [];
       topic.queuedMessages(pub => {
         if (pub._sending) {
           return;
         }
 
+        if (pub.head && pub.head.webrtc) {
+          calls.push(pub.seq);
+          return;
+        }
+
         if (topic.isSubscribed()) {
           this.retrySend(pub);
         }
       });
+
+      if (calls.length > 0) {
+        topic.delMessagesList(calls, true);
+      }
     }).catch(err => {
       console.error("Failed subscription to", this.state.topic, err);
       this.props.onError(err.message, 'err');
@@ -6190,7 +6255,10 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
 
   retrySend(pub) {
-    this.props.sendMessage(pub.content, undefined, undefined, pub.head);
+    this.props.sendMessage(pub.content, undefined, undefined, pub.head).then(() => {
+      const topic = this.props.tinode.getTopic(this.state.topic);
+      topic.delMessagesList([pub.seq], true);
+    });
   }
 
   sendFileAttachment(file) {
@@ -8531,15 +8599,25 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
 
     if (!topic.isSubscribed()) {
       const subscribePromise = topic.subscribe().then(() => {
+        let calls = [];
         topic.queuedMessages(pub => {
           if (pub._sending || pub.seq == msg.seq) {
             return;
           }
 
+          if (pub.head && pub.head.webrtc) {
+            calls.push(pub.seq);
+            return;
+          }
+
           if (topic.isSubscribed()) {
             topic.publishMessage(pub);
           }
         });
+
+        if (calls.length > 0) {
+          topic.delMessagesList(calls, true);
+        }
       });
       completion.push(subscribePromise);
     }
@@ -8676,6 +8754,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
     this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
+    this.tinode.onInfoMessage = this.handleInfoMessage;
+    this.tinode.onDataMessage = this.handleDataMessage;
     this.setState({
       serverAddress: serverAddress,
       transport: transport
@@ -8993,6 +9073,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         this.tinode.onConnect = this.handleConnected;
         this.tinode.onDisconnect = this.handleDisconnect;
         this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
+        this.tinode.onInfoMessage = this.handleInfoMessage;
+        this.tinode.onDataMessage = this.handleDataMessage;
         _lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].navigateTo('');
       });
     });
@@ -9121,7 +9203,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         self_blocked = false,
         subscribed = false,
         deleter = false,
-        archived = false;
+        archived = false,
+        webrtc = false;
 
     if (topic) {
       subscribed = topic.isSubscribed();
@@ -9136,10 +9219,11 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       }
     }
 
+    webrtc = !!this.tinode.getServerParam('iceServers');
     return [subscribed ? {
       title: this.props.intl.formatMessage(messages.menu_item_info),
       handler: this.handleShowInfoView
-    } : null, subscribed && tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Tinode.isP2PTopicName(topicName) ? {
+    } : null, subscribed && tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Tinode.isP2PTopicName(topicName) && webrtc ? {
       title: this.props.intl.formatMessage(messages.menu_item_video_call),
       handler: this.handleStartVideoCall
     } : null, subscribed ? 'messages_clear' : null, subscribed && deleter ? 'messages_clear_hard' : null, muted ? blocked ? null : 'topic_unmute' : 'topic_mute', self_blocked ? 'topic_unblock' : 'topic_block', archived ? 'topic_restore' : 'topic_archive', 'topic_delete'];
@@ -11205,18 +11289,23 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       localStream: undefined,
       pc: undefined,
       previousOnInfo: undefined,
-      waitingForPeer: false
+      waitingForPeer: false,
+      callInitialSetupComplete: false
     };
     this.localStreamConstraints = {
       audio: true,
       video: true
     };
+    this.isOutgoingCall = props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED;
     this.localRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.remoteRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
+    this.remoteIceCandidatesCache = [];
     this.onInfo = this.onInfo.bind(this);
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
     this.createPeerConnection = this.createPeerConnection.bind(this);
+    this.canSendOffer = this.canSendOffer.bind(this);
+    this.drainRemoteIceCandidatesCache = this.drainRemoteIceCandidatesCache.bind(this);
     this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);
     this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
     this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
@@ -11391,14 +11480,26 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
 
   handleVideoAnswerMsg(info) {
     const desc = new RTCSessionDescription(info.payload);
-    this.state.pc.setRemoteDescription(desc).catch(this.reportError);
+    this.state.pc.setRemoteDescription(desc).then(_ => {
+      this.setState({
+        callInitialSetupComplete: true
+      }, () => this.drainRemoteIceCandidatesCache());
+    }).catch(this.reportError);
   }
 
   reportError(err) {
     this.props.onError(err.message, 'err');
   }
 
+  canSendOffer() {
+    return this.isOutgoingCall || this.state.callInitialSetupComplete;
+  }
+
   handleNegotiationNeededEvent() {
+    if (!this.canSendOffer()) {
+      return;
+    }
+
     this.state.pc.createOffer().then(offer => {
       return this.state.pc.setLocalDescription(offer);
     }).then(_ => {
@@ -11414,7 +11515,19 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
 
   handleNewICECandidateMsg(info) {
     const candidate = new RTCIceCandidate(info.payload);
-    this.state.pc.addIceCandidate(candidate).catch(this.reportError);
+
+    if (this.state.callInitialSetupComplete) {
+      this.state.pc.addIceCandidate(candidate).catch(this.reportError);
+    } else {
+      this.remoteIceCandidatesCache.push(candidate);
+    }
+  }
+
+  drainRemoteIceCandidatesCache() {
+    this.remoteIceCandidatesCache.forEach(candidate => {
+      this.state.pc.addIceCandidate(candidate).catch(this.reportError);
+    });
+    this.remoteIceCandidatesCache = [];
   }
 
   handleICEConnectionStateChangeEvent(event) {
@@ -11479,6 +11592,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
       return pc.setLocalDescription(answer);
     }).then(_ => {
       this.props.onSendAnswer(this.props.topic, this.props.seq, pc.localDescription.toJSON());
+      this.setState({
+        callInitialSetupComplete: true
+      }, () => this.drainRemoteIceCandidatesCache());
     }).catch(this.handleGetUserMediaError);
   }
 
@@ -17273,7 +17389,9 @@ class VisiblePassword extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
   }
 
   componentDidMount() {
-    this.inputRef.current.focus();
+    if (this.props.autoFocus) {
+      this.inputRef.current.focus();
+    }
   }
 
   handeTextChange(e) {
@@ -17383,7 +17501,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var name = "firebase";
-var version = "9.8.3";
+var version = "9.9.0";
 
 /**
  * @license
@@ -18088,7 +18206,7 @@ function isVersionServiceProvider(provider) {
 }
 
 const name$o = "@firebase/app";
-const version$1 = "0.7.26";
+const version$1 = "0.7.28";
 
 /**
  * @license
@@ -18155,7 +18273,7 @@ const name$2 = "@firebase/firestore";
 const name$1 = "@firebase/firestore-compat";
 
 const name = "firebase";
-const version = "9.8.3";
+const version = "9.9.0";
 
 /**
  * @license
@@ -19398,7 +19516,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const name = "@firebase/installations";
-const version = "0.5.10";
+const version = "0.5.12";
 
 /**
  * @license
@@ -21165,6 +21283,7 @@ const ERROR_FACTORY = new _firebase_util__WEBPACK_IMPORTED_MODULE_3__.ErrorFacto
  * limitations under the License.
  */
 async function requestGetToken(firebaseDependencies, subscriptionOptions) {
+    var _a;
     const headers = await getHeaders(firebaseDependencies);
     const body = getBody(subscriptionOptions);
     const subscribeOptions = {
@@ -21179,7 +21298,7 @@ async function requestGetToken(firebaseDependencies, subscriptionOptions) {
     }
     catch (err) {
         throw ERROR_FACTORY.create("token-subscribe-failed" /* TOKEN_SUBSCRIBE_FAILED */, {
-            errorInfo: err
+            errorInfo: (_a = err) === null || _a === void 0 ? void 0 : _a.toString()
         });
     }
     if (responseData.error) {
@@ -21194,6 +21313,7 @@ async function requestGetToken(firebaseDependencies, subscriptionOptions) {
     return responseData.token;
 }
 async function requestUpdateToken(firebaseDependencies, tokenDetails) {
+    var _a;
     const headers = await getHeaders(firebaseDependencies);
     const body = getBody(tokenDetails.subscriptionOptions);
     const updateOptions = {
@@ -21208,7 +21328,7 @@ async function requestUpdateToken(firebaseDependencies, tokenDetails) {
     }
     catch (err) {
         throw ERROR_FACTORY.create("token-update-failed" /* TOKEN_UPDATE_FAILED */, {
-            errorInfo: err
+            errorInfo: (_a = err) === null || _a === void 0 ? void 0 : _a.toString()
         });
     }
     if (responseData.error) {
@@ -21223,6 +21343,7 @@ async function requestUpdateToken(firebaseDependencies, tokenDetails) {
     return responseData.token;
 }
 async function requestDeleteToken(firebaseDependencies, token) {
+    var _a;
     const headers = await getHeaders(firebaseDependencies);
     const unsubscribeOptions = {
         method: 'DELETE',
@@ -21240,7 +21361,7 @@ async function requestDeleteToken(firebaseDependencies, token) {
     }
     catch (err) {
         throw ERROR_FACTORY.create("token-unsubscribe-failed" /* TOKEN_UNSUBSCRIBE_FAILED */, {
-            errorInfo: err
+            errorInfo: (_a = err) === null || _a === void 0 ? void 0 : _a.toString()
         });
     }
 }
@@ -21802,7 +21923,7 @@ async function messageEventListener(messaging, event) {
 }
 
 const name = "@firebase/messaging";
-const version = "0.9.14";
+const version = "0.9.16";
 
 /**
  * @license

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.20.0-beta2";
+const PACKAGE_VERSION = "0.20.0-rc1";