fix DB initialization and teardown, wrong upload parameters order

css/base.css

@@ -822,6 +822,7 @@ i.search {
   margin-top: 0.25rem;
   margin-bottom: auto;
   height: 100%;
+  scroll-behavior: smooth;
 }
 
 .contact-box {
@@ -1387,6 +1388,7 @@ i.search {
   list-style: none;
   padding: 0 0 3.5rem 0;
   margin: 0 0.5rem;
+  scroll-behavior: smooth;
 }
 
 /* Group chats have avatars on the left. Make left margin smaller */

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.17.1",
+  "version": "0.17.2-alpha1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -67,7 +67,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-intl": "^5.18.3",
-    "tinode-sdk": "^0.17.1"
+    "tinode-sdk": "^0.17.2-alpha1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",

src/lib/blob-helpers.js

@@ -124,7 +124,7 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
     }
 
     canvas = null;
-    onSuccess(blob, mime, dim.dstWidth, dim.dstHeight, fileNameForMime(fileOrBlob.name, mime));
+    onSuccess(mime, blob, dim.dstWidth, dim.dstHeight, fileNameForMime(fileOrBlob.name, mime));
   };
   img.src = URL.createObjectURL(fileOrBlob);
 }

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.17.1";
+export const PACKAGE_VERSION = "0.17.2-alpha1";

src/views/login-view.jsx

@@ -15,7 +15,7 @@ export default class LoginView extends React.Component {
       login: props.login,
       password: '',
       hostName: props.serverAddress,
-      saveToken: LocalStorageUtil.getObject('keep-logged-in')
+      saveToken: props.persist
     };
     this.handleLoginChange = this.handleLoginChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
@@ -32,7 +32,7 @@ export default class LoginView extends React.Component {
   }
 
   handleToggleSaveToken() {
-    LocalStorageUtil.setObject('keep-logged-in', !this.state.saveToken);
+    this.props.onPersistenceChange(!this.state.saveToken);
     this.setState({saveToken: !this.state.saveToken});
   }
 

src/views/sidepanel-view.jsx

@@ -91,14 +91,9 @@ class SidepanelView extends React.Component {
   constructor(props) {
     super(props);
 
-    this.handleLoginRequested = this.handleLoginRequested.bind(this);
     this.handleNewTopic = this.handleNewTopic.bind(this);
   }
 
-  handleLoginRequested(login, password) {
-    this.props.onLoginRequest(login, password);
-  }
-
   handleNewTopic() {
     this.props.onBasicNavigate('newtpk');
   }
@@ -146,7 +141,9 @@ class SidepanelView extends React.Component {
           <LoginView
             login={this.props.login}
             disabled={this.props.loginDisabled}
-            onLogin={this.handleLoginRequested} /> :
+            persist={this.props.persist}
+            onLogin={this.props.onLoginRequest}
+            onPersistenceChange={this.props.onPersistenceChange} /> :
 
           view === 'register' ?
           <CreateAccountView

src/views/tinode-web.jsx

@@ -79,6 +79,7 @@ class TinodeWeb extends React.Component {
     this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleLoginRequest = this.handleLoginRequest.bind(this);
+    this.handlePersistenceChange = this.handlePersistenceChange.bind(this);
     this.handleConnected = this.handleConnected.bind(this);
     this.handleAutoreconnectIteration = this.handleAutoreconnectIteration.bind(this);
     this.doLogin = this.doLogin.bind(this);
@@ -175,6 +176,7 @@ class TinodeWeb extends React.Component {
 
       login: '',
       password: '',
+      persist: persist,
       myUserId: null,
       liveConnection: navigator.onLine,
       topicSelected: '',
@@ -226,11 +228,9 @@ class TinodeWeb extends React.Component {
       viewportHeight: document.documentElement.clientHeight
     });
 
-    const keepLoggedIn = LocalStorageUtil.getObject('keep-logged-in');
-
     new Promise((resolve, reject) => {
       this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport,
-        this.props.intl.locale, keepLoggedIn, resolve);
+        this.props.intl.locale, this.state.persist, resolve);
       this.tinode.onConnect = this.handleConnected;
       this.tinode.onDisconnect = this.handleDisconnect;
       this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
@@ -257,7 +257,7 @@ class TinodeWeb extends React.Component {
       // Read contacts from cache.
       this.resetContactList();
 
-      const token = keepLoggedIn ? LocalStorageUtil.getObject('auth-token') : undefined;
+      const token = this.state.persist ? LocalStorageUtil.getObject('auth-token') : undefined;
       if (token) {
         this.setState({autoLogin: true});
 
@@ -465,6 +465,23 @@ class TinodeWeb extends React.Component {
     }
   }
 
+  // Enable or disable saving the password and IndexedDB.
+  handlePersistenceChange(persist) {
+    if (persist) {
+      this.tinode.initStorage().then(() => {
+        console.log("storage initialized");
+        LocalStorageUtil.setObject('keep-logged-in', true);
+        this.setState({persist: true});
+      });
+    } else {
+      this.tinode.clearStorage().then(() => {
+        console.log("storage cleared");
+        LocalStorageUtil.setObject('keep-logged-in', false);
+        this.setState({persist: false});
+      });
+    }
+  }
+
   // Connection succeeded.
   handleConnected() {
     // Just to be sure.
@@ -1016,6 +1033,7 @@ class TinodeWeb extends React.Component {
       LocalStorageUtil.getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
+    this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
 
     this.setState({
       serverAddress: serverAddress,
@@ -1252,6 +1270,7 @@ class TinodeWeb extends React.Component {
       this.state.transport, this.props.intl.locale, LocalStorageUtil.getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
+    this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
     HashNavigation.navigateTo('');
   }
 
@@ -1517,6 +1536,7 @@ class TinodeWeb extends React.Component {
           title={this.state.sidePanelTitle}
           avatar={this.state.sidePanelAvatar}
           login={this.state.login}
+          persist={this.state.persist}
           myUserId={this.state.myUserId}
           loginDisabled={this.state.loginDisabled}
           loadSpinnerVisible={this.state.loadSpinnerVisible}
@@ -1544,6 +1564,7 @@ class TinodeWeb extends React.Component {
           onSettings={this.handleSettings}
           onBasicNavigate={this.basicNavigator}
           onLoginRequest={this.handleLoginRequest}
+          onPersistenceChange={this.handlePersistenceChange}
           onCreateAccount={this.handleNewAccountRequest}
           onUpdateAccount={this.handleUpdateAccountRequest}
           onUpdateAccountTags={this.handleUpdateAccountTagsRequest}

src/widgets/chat-message.jsx

@@ -204,6 +204,7 @@ function draftyFormatter(style, data, values, key) {
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
               attr.className += ' image-clickable';
+              attr.loading = 'lazy';
             } else {
               attr.src = 'img/broken_image.png';
             }

umd/index.dev.js

@@ -210,7 +210,8 @@ function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare, onSu
     }
 
     canvas = null;
-    onSuccess(blob, mime, dim.dstWidth, dim.dstHeight, fileNameForMime(fileOrBlob.name, mime));
+    console.log("imageScaled", blob);
+    onSuccess(mime, blob, dim.dstWidth, dim.dstHeight, fileNameForMime(fileOrBlob.name, mime));
   };
 
   img.src = URL.createObjectURL(fileOrBlob);
@@ -220,6 +221,7 @@ function fileToBase64(file, onSuccess) {
   reader.addEventListener('load', function () {
     onSuccess(file.type, reader.result.split(',')[1], file.name);
   });
+  console.log("fileToBase64", file);
   reader.readAsDataURL(file);
 }
 function blobToBase64(blob, onSuccess) {
@@ -720,7 +722,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.17.1";
+const PACKAGE_VERSION = "0.17.2-alpha1";
 
 /***/ }),
 
@@ -2825,7 +2827,7 @@ class LoginView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       login: props.login,
       password: '',
       hostName: props.serverAddress,
-      saveToken: _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_4__.default.getObject('keep-logged-in')
+      saveToken: props.persist
     };
     this.handleLoginChange = this.handleLoginChange.bind(this);
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
@@ -2846,7 +2848,7 @@ class LoginView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
   }
 
   handleToggleSaveToken() {
-    _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_4__.default.setObject('keep-logged-in', !this.state.saveToken);
+    this.props.onPersistenceChange(!this.state.saveToken);
     this.setState({
       saveToken: !this.state.saveToken
     });
@@ -4637,14 +4639,9 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
 class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
   constructor(props) {
     super(props);
-    this.handleLoginRequested = this.handleLoginRequested.bind(this);
     this.handleNewTopic = this.handleNewTopic.bind(this);
   }
 
-  handleLoginRequested(login, password) {
-    this.props.onLoginRequest(login, password);
-  }
-
   handleNewTopic() {
     this.props.onBasicNavigate('newtpk');
   }
@@ -4693,7 +4690,9 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
     }), view === 'login' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_login_view_jsx__WEBPACK_IMPORTED_MODULE_12__.default, {
       login: this.props.login,
       disabled: this.props.loginDisabled,
-      onLogin: this.handleLoginRequested
+      persist: this.props.persist,
+      onLogin: this.props.onLoginRequest,
+      onPersistenceChange: this.props.onPersistenceChange
     }) : view === 'register' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_create_account_view_jsx__WEBPACK_IMPORTED_MODULE_6__.default, {
       onCreateAccount: this.props.onCreateAccount,
       onCancel: this.props.onCancel,
@@ -4896,6 +4895,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleLoginRequest = this.handleLoginRequest.bind(this);
+    this.handlePersistenceChange = this.handlePersistenceChange.bind(this);
     this.handleConnected = this.handleConnected.bind(this);
     this.handleAutoreconnectIteration = this.handleAutoreconnectIteration.bind(this);
     this.doLogin = this.doLogin.bind(this);
@@ -4982,6 +4982,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       loadSpinnerVisible: false,
       login: '',
       password: '',
+      persist: persist,
       myUserId: null,
       liveConnection: navigator.onLine,
       topicSelected: '',
@@ -5024,9 +5025,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       viewportWidth: document.documentElement.clientWidth,
       viewportHeight: document.documentElement.clientHeight
     });
-    const keepLoggedIn = _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.getObject('keep-logged-in');
     new Promise((resolve, reject) => {
-      this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport, this.props.intl.locale, keepLoggedIn, resolve);
+      this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport, this.props.intl.locale, this.state.persist, resolve);
       this.tinode.onConnect = this.handleConnected;
       this.tinode.onDisconnect = this.handleDisconnect;
       this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
@@ -5045,7 +5045,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
 
       const parsedNav = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_16__.default.parseUrlHash(window.location.hash);
       this.resetContactList();
-      const token = keepLoggedIn ? _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.getObject('auth-token') : undefined;
+      const token = this.state.persist ? _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.getObject('auth-token') : undefined;
 
       if (token) {
         this.setState({
@@ -5289,6 +5289,26 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     }
   }
 
+  handlePersistenceChange(persist) {
+    if (persist) {
+      this.tinode.initStorage().then(() => {
+        console.log("storage initialized");
+        _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.setObject('keep-logged-in', true);
+        this.setState({
+          persist: true
+        });
+      });
+    } else {
+      this.tinode.clearStorage().then(() => {
+        console.log("storage cleared");
+        _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.setObject('keep-logged-in', false);
+        this.setState({
+          persist: false
+        });
+      });
+    }
+  }
+
   handleConnected() {
     clearInterval(this.reconnectCountdown);
     this.handleError();
@@ -5824,6 +5844,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.tinode = TinodeWeb.tnSetup(serverAddress, transport, this.props.intl.locale, _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
+    this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
     this.setState({
       serverAddress: serverAddress,
       transport: transport
@@ -6122,6 +6143,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport, this.props.intl.locale, _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_15__.default.getObject('keep-logged-in'));
     this.tinode.onConnect = this.handleConnected;
     this.tinode.onDisconnect = this.handleDisconnect;
+    this.tinode.onAutoreconnectIteration = this.handleAutoreconnectIteration;
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_16__.default.navigateTo('');
   }
 
@@ -6398,6 +6420,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       title: this.state.sidePanelTitle,
       avatar: this.state.sidePanelAvatar,
       login: this.state.login,
+      persist: this.state.persist,
       myUserId: this.state.myUserId,
       loginDisabled: this.state.loginDisabled,
       loadSpinnerVisible: this.state.loadSpinnerVisible,
@@ -6421,6 +6444,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       onSettings: this.handleSettings,
       onBasicNavigate: this.basicNavigator,
       onLoginRequest: this.handleLoginRequest,
+      onPersistenceChange: this.handlePersistenceChange,
       onCreateAccount: this.handleNewAccountRequest,
       onUpdateAccount: this.handleUpdateAccountRequest,
       onUpdateAccountTags: this.handleUpdateAccountTagsRequest,
@@ -7204,6 +7228,7 @@ function draftyFormatter(style, data, values, key) {
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
               attr.className += ' image-clickable';
+              attr.loading = 'lazy';
             } else {
               attr.src = 'img/broken_image.png';
             }

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.17.1";
+const PACKAGE_VERSION = "0.17.2-alpha1";