pix editing ofpinned messages

Removes redundancy and a memory leak (and thus an error upon closing).

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "comments": false,
+  "plugins": [
+    [
+      "formatjs",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+        "ast": true
+      }
+    ]
+  ]
+}

.gitattributes

@@ -0,0 +1,3 @@
+umd/* binary
+package-lock.json binary
+*.min.css binary

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve TinodeWeb
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+If you want to ask a question, please post to https://groups.google.com/d/forum/tinode instead.
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - OS: [e.g. Mac OS, Windows 10 Home]
+ - Browser [e.g. Chrome, Safari]
+ - TinodeWeb Version [e.g. 0.16.6]
+
+**Console log**
+Please attach or insert console log which illustrates the problem. Please use the log produced by `index-dev.html`, not `index.html`; `index.html` uses minified javascript which produces unusable logs.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+If you want to ask a question, please post to https://groups.google.com/d/forum/tinode instead.
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -1,138 +1,4 @@
-# ---> Node
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
+.DS_Store
+node_modules
+src/i18n/srci/
+webapp.code-workspace.code-workspace

.well-known/assetlinks.json

@@ -0,0 +1,25 @@
+[{
+  "relation": ["delegate_permission/common.handle_all_urls"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroidx",
+    "sha256_cert_fingerprints":
+    ["5B:BE:6A:C4:A7:66:A8:BB:4B:C1:52:66:E5:A4:BD:66:3C:33:50:04:11:CB:17:44:45:89:5E:3C:8D:55:77:7A"]
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "web",
+    "site": "https://web.tinode.co"
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroidx",
+    "sha256_cert_fingerprints":
+    ["5B:BE:6A:C4:A7:66:A8:BB:4B:C1:52:66:E5:A4:BD:66:3C:33:50:04:11:CB:17:44:45:89:5E:3C:8D:55:77:7A"]
+  }
+}]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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.

README.md

@@ -1,2 +1,84 @@
-# im_webapp
+# Tinode Web
 
+## Briefing
+
+Single-page web chat application for [Tinode](https://github.com/tinode/chat/). The app is built on
+[React](https://reactjs.org/). The [Tinode javascript SDK](https://github.com/tinode/tinode-js/) has no external dependencies.
+Overall, it's a lot like open source WhatsApp or Telegram web apps.
+
+Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist, some features are missing. The app was tested in the latest Chrome & Firefox only. NPM package is [available](https://www.npmjs.com/package/tinode-webapp).
+
+Try possibly newer or older version live at https://sandbox.tinode.co/.
+
+<a href="https://web.tinode.co/"><img src="web-app.svg" height=36></a>
+
+For demo access and other instructions [see here](https://github.com/tinode/chat/#demosandbox).
+
+## Installing and running
+
+This is _NOT_ a standalone app, this is just a frontend, a client. It requires a [backend](https://github.com/tinode/chat/). See [installation instructions](https://github.com/tinode/chat/blob/master/INSTALL.md). See instructions for [enabling push notifications](push.md).
+
+## Getting support
+
+* Read [client-side](http://tinode.github.io/js-api/) and [server-side](https://github.com/tinode/chat/blob/master/docs/API.md) API documentation.
+* For support, general questions, discussions post to [https://groups.google.com/d/forum/tinode](https://groups.google.com/d/forum/tinode).
+* For bugs and feature requests [open an issue](https://github.com/tinode/webchat/issues/new).
+* Use https://tinode.co/contact for commercial inquiries.
+
+## Helping out
+
+* If you appreciate our work, please help spread the word! Sharing on Reddit, HN, and other communities helps more than you think.
+* Consider buying paid support: https://tinode.co/support.html
+* If you are a software developer, send us your pull requests with bug fixes and new features.
+* If you use the app and discover bugs or missing features, let us know by filing bug reports and feature requests. Vote for existing [feature requests](https://github.com/tinode/chat/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A%22feature+request%22) you find most valuable.
+* If you speak a language other than English, [translate](https://github.com/tinode/chat/blob/devel/docs/translations.md#webapp) the apps into your language. You may also review and improve existing translations.
+* If you are a UI/UX expert, help us polish the app UI.
+* Use it: install it for your colleagues or friends at work or at home.
+
+## Internationalization
+
+The app is fully internationalized using [React-Intl](https://github.com/formatjs/react-intl). The UI language is selected automatically from the language specified by the browser. A specific language can be forced by adding `#?hl=XX` parameter to the URL when starting the app, e.g. https://web.tinode.co/#?hl=ru.
+
+The app is currently available in the following languages:
+ * English
+ * Chinese (simplified)
+ * Chinese (traditional)
+ * French
+ * German
+ * Korean
+ * Romanian
+ * Russian
+ * Spanish
+
+More translations are welcome. See [instructions](https://github.com/tinode/chat/blob/devel/docs/translations.md#webapp).
+
+
+## Not done yet
+
+* End-to-End encryption.
+* Emoji support is weak.
+* Mentions, hashtags.
+* Previews not generated for links and docs.
+* Location and contact sharing.
+* Recording video messages.
+
+## Other
+
+* Demo avatars and some other graphics are from https://www.pexels.com/ under [CC0 license](https://www.pexels.com/photo-license/).
+* Background patterns from http://subtlepatterns.com/, commercial and non-commercial use allowed with attribution.
+* [Fonts](https://fonts.google.com/) and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web) from Google under [license](https://developers.google.com/terms) which permits commercial and non-commercial use.
+* Push notifications built with https://firebase.google.com/.
+
+## Responsive design
+
+### Desktop screenshot
+
+<p align="center">
+  <img src="web-desktop.jpg" alt="Desktop web: full app" width=810 />
+</p>
+
+### Mobile screenshots
+
+<p align="center">
+  <kbd><img src="web-mob-contacts.png" alt="Mobile web: contacts" width=250 /></kbd> <kbd><img src="web-mob-chat.png" alt="Mobile web: chat" width=250 /></kbd> <kbd><img src="web-mob-info.png" alt="Mobile web: topic info" width=250 /></kbd> <kbd><img src="web-mob-forward.png" alt="Mobile web: forward message" width=250 /></kbd> <kbd><img src="web-mob-video-call.png" alt="Mobile web: video call" width=250 /></kbd> <kbd><img src="web-mob-avatar.png" alt="Mobile web: change avatar" width=250 /></kbd>
+</p>

firebase-init.js

@@ -0,0 +1,15 @@
+// Get these values for your project from the https://console.firebase.google.com/
+const FIREBASE_INIT = {
+  // Set up a web application in console then get the config object.
+  // The following keys are copied from the object:
+  apiKey: "AIzaSyD6X4ULR-RUsobvs1zZ2bHdJuPz39q2tbQ",
+  messagingSenderId: "114126160546",
+  projectId: "tinode-1000",
+  appId: "1:114126160546:web:aca6ea2981feb81fb44dfb",
+  // Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
+  // This value IS NOT included in the generated js config you get from
+  // the firebase console. It needs to be added separately.
+  messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58",
+  // Google analytics tag. Uncomment and use one you got from https://analytics.google.com/.
+  // measurementId: "G-ABCDEF1234"
+};

img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="192"><defs><filter id="f" color-interpolation-filters="sRGB"><feFlood flood-opacity=".251" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-1" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="fbSourceGraphic"/><feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feFlood flood-opacity=".251" flood-color="#000" result="flood"/><feComposite in2="fbSourceGraphic" in="flood" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-3" result="offset"/><feComposite in2="offset" in="fbSourceGraphic" result="composite2"/></filter><filter id="d" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#FFF" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><filter id="b" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><filter id="c" color-interpolation-filters="sRGB"><feFlood flood-opacity=".196" flood-color="#000" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="out" result="composite1"/><feGaussianBlur in="composite1" result="blur"/><feOffset dy="-2" result="offset"/><feComposite in="offset" in2="SourceGraphic" operator="atop" result="composite2"/></filter><linearGradient id="a"><stop offset="0" stop-opacity=".251"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient xlink:href="#a" id="e" x1="102.814" y1="97.076" x2="219.019" y2="170.481" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.29306 0 0 1.00596 -43.959 .807)"/></defs><g fill-rule="evenodd"><path d="M14.102 64A88 87.925 0 008 95.924c-.012 44.455 18.485 70.138 1.863 79.822-12.733 7.419 43.153 8.258 70.137 8.248V64H14.102z" fill="#fc5d3e" filter="url(#b)"/><path d="M80 64v119.994c8.24-.003 14.055-.08 14.055-.08L96 183.85a88 87.925 0 0088-87.926A88 87.925 0 00177.99 64H80z" fill="#45ae49" filter="url(#c)"/><path d="M96 8A88 87.925 0 009.52 80h172.978A88 87.925 0 0096 8z" fill="#2d526b" filter="url(#d)"/></g><path d="M88.002 40.975l-8.6 112.808 39.791 26.94c34.169-9.369 59.381-38.298 63.971-73.4z" fill="url(#e)" fill-rule="evenodd" opacity=".5"/><text y="153.195" x="53.125" style="line-height:125%;-inkscape-font-specification:'Arial, Bold';text-align:start" font-weight="700" font-size="160" font-family="Arial" letter-spacing="0" word-spacing="0"><tspan style="line-height:125%;-inkscape-font-specification:'Arial, Bold';text-align:start" y="153.195" x="53.125" fill="#fff">t</tspan></text></svg>

index-dev.html

@@ -0,0 +1,51 @@
+<!-- DEVELOPMENT version of the web app. -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tinode</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="application-name" content="Tinode Web, version for developers" />
+    <meta name="description" content="Tinode instant messenger, development version" />
+    <meta name="application-url" content="https://web.tinode.co/">
+    <!-- Browser styling for Chrome, FF, Opera -->
+    <meta name="theme-color" content="#3949AB" />
+    <!-- Ask Google not to offer page translation -->
+    <meta name="google" value="notranslate" />
+    <!-- Open Graph description -->
+    <meta name="og:url" content="https://web.tinode.co/">
+    <meta name="og:title" content="Tinode Web Development">
+    <meta name="og:image" content="img/og-logo.jpeg">
+    <meta name="og:description" content="Tinode instant messenger, development version" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="manifest.json" />
+    <link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
+    <link rel="canonical" href="https://web.tinode.co/" />
+    <!-- Google's Roboto font -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i" />
+    <!-- Google's material design icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <!-- Styles for local elements -->
+    <link rel="stylesheet" href="css/base.css" />
+    <!-- ReactJS -->
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
+    <!-- React-Intl for translations -->
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6/react-intl.iife.js"></script>
+  </head>
+
+  <body>
+    <noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>
+      <div id="noscript-content">It appears JavaScript is turned off or is not supported by your browser.
+        TinodeWeb does not work without JavaScript. Please enable JavaScript by changing your browser options,
+        then <a href="">try again</a>.
+      </div>
+    </div></noscript>
+    <div id="mountPoint"></div>
+    <script src="firebase-init.js"></script>
+    <script src="umd/tinode.dev.js"></script>
+    <script src="umd/index.dev.js"></script>
+  </body>
+</html>

index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Tinode</title>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="application-name" content="Tinode Web" />
+<meta name="description" content="Tinode instant messenger in a browser" />
+<meta name="application-url" content="https://web.tinode.co/">
+<meta name="theme-color" content="#3949AB" />
+<meta name="google" value="notranslate" />
+<meta name="format-detection" content="telephone=no" />
+<meta name="og:url" content="https://web.tinode.co/">
+<meta name="og:title" content="Tinode Web">
+<meta name="og:image" content="img/og-logo.jpeg">
+<meta name="og:description" content="Tinode instant messenger in a browser" />
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<link rel="manifest" href="manifest.json" />
+<link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
+<link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
+<link rel="canonical" href="https://web.tinode.co/" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link rel="stylesheet" href="css/base.min.css" />
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@6.3.2/react-intl.iife.min.js"></script>
+</head>
+<body>
+<noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>
+<div id="noscript-content">It appears JavaScript is turned off or is not supported by your browser.
+TinodeWeb does not work without JavaScript. Please enable JavaScript by changing your browser options,
+then <a href="">try again</a>.</div></div></noscript>
+<div id="mountPoint"></div>
+<script src="firebase-init.js"></script>
+<script src="umd/tinode.prod.js"></script>
+<script src="umd/index.prod.js"></script>
+</body>
+</html>

manifest.json

@@ -0,0 +1,45 @@
+{
+  "name": "Tinode",
+  "short_name": "Tinode",
+  "description": "Tinode Web App.\nSee more at https://tinode.co/",
+  "categories": ["chat", "communication", "productivity"],
+  "icons": [
+    {
+      "src":"img/logo96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src":"img/logo192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "silver",
+  "theme_color": "#3949AB",
+  "display": "standalone",
+  "gcm_sender_id": "103953800507",
+  "prefer_related_applications": true,
+  "related_applications": [
+    {
+      "platform": "play",
+      "url": "https://play.google.com/store/apps/details?id=co.tinode.tindroidx",
+      "id": "co.tinode.tindroidx"
+    },
+    {
+      "platform": "itunes",
+      "url": "https://apps.apple.com/us/app/tinode/id1483763538"
+    }
+  ],
+  "permissions": {
+    "audio-capture": {
+      "description": "Required for recording voice messages"
+    }
+  }
+}

package.json

@@ -0,0 +1,93 @@
+{
+  "name": "tinode-webapp",
+  "description": "Tinode messenger for the web",
+  "version": "0.23.0-rc1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tinode/webapp.git"
+  },
+  "scripts": {
+    "start": "echo 'Read installation instructions'",
+    "build": "npm run vers && npm run build:css && npm run extract && npm run build:i18n && npm run build:prod && npm run build:dev",
+    "clean": "rm umd/* && rm css/base.min.css && rm src/i18n.min/*",
+    "build:css": "postcss css/base.css > css/base.min.css",
+    "build:dev": "webpack --mode development",
+    "build:prod": "webpack --mode production",
+    "build:i18n": "node scripts/i18n.js",
+    "i18n:missing": "node scripts/i18n.js missing",
+    "i18n:obsolete": "node scripts/i18n.js obsolete",
+    "vers": "node scripts/gen-version.js",
+    "extract": "formatjs extract \"src/**/*.{js,jsx}\" --out-file src/i18n/ex/base-en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
+    "compile": "formatjs compile"
+  },
+  "browserslist": "> 0.5%, not IE 11, not op_mini all, not and_uc >0",
+  "files": [
+    "umd/*.js",
+    "umd/*.map",
+    "audio/*.m4a",
+    "css/base.css",
+    "css/base.min.css",
+    "img/*.png",
+    "img/*.svg",
+    "img/*.jpeg",
+    "index-dev.html",
+    "index.html",
+    "manifest.json",
+    "service-worker.js",
+    "firebase-init.js",
+    "version.js"
+  ],
+  "keywords": [
+    "chat",
+    "instant-messenger",
+    "message",
+    "messenger",
+    "react",
+    "web"
+  ],
+  "locales": [
+    "de",
+    "en",
+    "es",
+    "fr",
+    "ko",
+    "ro",
+    "ru",
+    "zh",
+    "zh-TW"
+  ],
+  "main": "umd/index.prod.js",
+  "bugs": {
+    "url": "https://github.com/tinode/webapp/issues"
+  },
+  "homepage": "https://github.com/tinode/chat",
+  "email": "info@tinode.co",
+  "author": "Tinode Authors <info@tinode.co>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "firebase": "^9.17.2",
+    "libphonenumber-js": "^1.10.24",
+    "npm-check-updates": "^16.7.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.3.0",
+    "tinode-sdk": "^0.23.0-rc1",
+    "webm-duration-fix": "^1.0.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@formatjs/cli": "^6.0.4",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-formatjs": "^10.4.0",
+    "browserslist": "^4.21.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "cssnano": "^5.1.15",
+    "glob": "^9.3.0",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "webpack": "^5.76.1",
+    "webpack-cli": "^5.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('cssnano')({
+            preset: 'default',
+        }),
+    ],
+};

push.md

@@ -0,0 +1,11 @@
+# Push notifications
+
+If you want to use the app with your own server and want web push notification to work you have to set them up:
+
+* Register at https://firebase.google.com/, set up the project if you have not done so already.
+* Follow instructions to create a web application https://support.google.com/firebase/answer/9326094 in your project.
+* Follow instructions at https://support.google.com/firebase/answer/7015592 to get a Firebase configuration object ("Firebase SDK snippet").
+* Locate `firebase-init.js` in the root folder of your copy of TinodeWeb app. Copy-paste the following keys from the configuration object to `firebase-init.js`: `apiKey`, `messagingSenderId`, `projectId`, `appId` (you may copy all keys).
+* Copy `Web Push certificate` (Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates) to `messagingVapidKey` field in `firebase-init.js`.
+* Double check that `firebase-init.js` contains the following keys: `apiKey`, `messagingSenderId`, `projectId`, `appId`, `messagingVapidKey`. The file may contain other optional keys.
+* Copy Google-provided server key to `tinode.conf`, see details [here](https://github.com/tinode/chat/blob/master/docs/faq.md#q-how-to-setup-fcm-push-notifications).

scripts/gen-version.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const version = require('../package.json').version;
+
+function writeVersion(fileName, useExport) {
+  fs.writeFile(fileName,
+    '// This is a generated file. Don\'t edit.\n\n'+
+    `${useExport ? 'export ' : ''}const PACKAGE_VERSION = "${version}";\n`,
+    { flag: 'w' },
+    (err) => {
+      if (err) {
+          return console.log(err);
+      }
+    }
+  );
+}
+
+writeVersion('./src/version.js', true);
+writeVersion('./version.js', false);

scripts/i18n.js

@@ -0,0 +1,127 @@
+// 1. Updates translations files with new messages, mark no longer needed translations as obsolete.
+// 2. Takes all translations and groups them into a single file.
+// 3. When called with parameters 'missing' or 'obsolete' writes missing and obsolete translations to console.
+
+const fs = require('fs');
+const path = require('path');
+const globSync = require('glob').sync;
+
+const EXTRACTED_STRINGS = './src/i18n/ex/base-en.json';
+const BASE_LANG        = 'en';
+const LANG_PATTERN     = './src/i18n/*.json';
+const LANG_PATTERN_ONE = './src/i18n/%s.json';
+const OUTPUT_PATTERN   = './src/i18n.min/%s.json';
+
+const args = process.argv.slice(2);
+
+function getLocaleFromFileName(filename) {
+  const parts = filename.split('/');
+  return parts[parts.length - 1].split('.json')[0];
+}
+
+function printf(str) {
+  const args = [].slice.call(arguments, 1);
+  let i = 0;
+  return str.replace(/%s/g, () => args[i++]);
+}
+
+// Called with one or two parameters?
+if (args[0] == 'missing' || args[0] == 'obsolete') {
+  // Extract missing or obsolete translations as requested.
+  // Read either all or just one translation.
+  const pattern = args[1] ? printf(LANG_PATTERN_ONE, args[1]) : LANG_PATTERN;
+  const extracted = globSync(pattern)
+    .map((filename) => {
+      const locale = getLocaleFromFileName(filename);
+      const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+      const dest = {};
+      // Copy messages while skipping missing and obsolete ones.
+      for (let key in translated) {
+        if ((args[0] == 'missing' && translated[key].missing) ||
+          (args[0] == 'obsolete' && translated[key].obsolete)) {
+          dest[key] = translated[key];
+        }
+      }
+
+      return { [locale]: dest };
+    })
+    .reduce((collection, descriptors) => {
+      return { ...collection, ...descriptors };
+    }, {});
+
+  console.log(JSON.stringify(extracted, null, 2)+"\n");
+  return;
+}
+
+// The formatjs/cli saves extracted messages into a file {'message_id': {defaultMessage: 'default message text', description: '...'}, ...}.
+// Rewrite them into a single file en.json {'message_id': 'default message text', }.
+
+// Read master-set of messages in default language.
+const baseMessages = JSON.parse(fs.readFileSync(EXTRACTED_STRINGS, 'utf8'));
+
+// Find messages present in baseMessages but missing in translations and vice versa.
+// Mark missing or obsolete messages as such.
+globSync(LANG_PATTERN)
+  .map((filename) => {
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+    const locale = getLocaleFromFileName(filename);
+
+    // Refresh existing entries with possible new descriptions and default messages, add missing.
+    Object.entries(baseMessages).forEach((ent) => {
+      const [key, value] = ent;
+      let translation = translated[key] ? translated[key].translation : "";
+      if (!translation && locale == BASE_LANG) {
+        translation = value.defaultMessage;
+      }
+
+      translated[key] = {
+        translation: translation,
+        defaultMessage: value.defaultMessage,
+        description: value.description,
+        missing: !translation,
+        obsolete: false
+      };
+    });
+
+    // Find no longer needed messages.
+    Object.entries(translated).forEach((ent) => {
+      const [key, value] = ent;
+      if (!baseMessages[key] && translated[key]) {
+        // Obsolete, no longer missing.
+        translated[key].missing = !translated[key].translation;
+        translated[key].obsolete = true;
+      }
+    });
+
+    fs.writeFileSync(filename, JSON.stringify(translated, null, 2)+"\n");
+  });
+
+// Legacy: Combine all translations into a single json {"lang_1": {...}, "lang_2: {...}"}
+// while removing messages marked as missing or obsolete.
+// New way: Emit one file per language with all unnecessary data stripped.
+
+// Read all translations.
+const messages = globSync(LANG_PATTERN)
+  .map((filename) => {
+    const locale = getLocaleFromFileName(filename);
+    const translated = JSON.parse(fs.readFileSync(filename, 'utf8'));
+
+    const dest = {};
+    // Copy messages while skipping missing and obsolete ones.
+    for (let key in translated) {
+      if (!translated[key].missing && !translated[key].obsolete) {
+        dest[key] = translated[key].translation;
+      }
+    }
+
+    return { [locale]: dest };
+  })
+  .reduce((collection, descriptors) => {
+    return { ...collection, ...descriptors };
+  }, {});
+
+// Write minified translation files, one per language.
+for (let lang in messages) {
+  fs.writeFileSync(printf(OUTPUT_PATTERN, lang), JSON.stringify(messages[lang]));
+}

service-worker.js

@@ -0,0 +1,180 @@
+// Must be located at the root.
+importScripts('https://cdn.jsdelivr.net/npm/firebase@9.14.0/firebase-app-compat.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@9.14.0/firebase-messaging-compat.js');
+importScripts('firebase-init.js');
+importScripts('version.js');
+
+// Channel to notify the webapp. There is no BroadcastChannel in Safari.
+const webAppChannel = (typeof BroadcastChannel == 'function') ?
+  new BroadcastChannel('tinode-sw') : null;
+
+// Basic internationalization.
+const i18n = {
+  'de': {
+    'new_message': "Neue Nachricht",
+    'new_chat': "Neuer Chat",
+  },
+  'en': {
+    'new_message': "New message",
+    'new_chat': "New chat",
+  },
+  'fr': {
+    'new_message': "Nouveau message",
+    'new_chat': "Nouvelle conversation",
+  },
+  'es': {
+    'new_message': "Nuevo mensaje",
+    'new_chat': "Nueva conversación",
+  },
+  'ko': {
+    'new_message': "새로운 메시지",
+    'new_chat': "새로운 채팅",
+  },
+  'ro': {
+    'new_message': "Mesaj nou",
+    'new_chat': "Chat nou",
+  },
+  'ru': {
+    'new_message': "Новое сообщение",
+    'new_chat': "Новый чат",
+  },
+  'zh': {
+    'new_message': "新讯息",
+    'new_chat': "新聊天",
+  },
+  'zh-TW': {
+    'new_message': "新訊息",
+    'new_chat': "新聊天",
+  }
+};
+
+self.i18nMessage = function(id) {
+  if (!id) {
+    return null;
+  }
+  // Choose translations: given something like 'de-CH', try 'de-CH' then 'de' then 'en'.
+  const lang = i18n[self.locale] || i18n[self.baseLocale] || i18n['en'];
+  // Try finding string by id in the specified language, if missing try English, otherwise use the id itself
+  // as the last resort.
+  return lang[id] || i18n['en'][id] || id;
+}
+
+firebase.initializeApp(FIREBASE_INIT);
+const fbMessaging = firebase.messaging();
+
+// This method shows the push notifications while the window is in background.
+fbMessaging.onBackgroundMessage(payload => {
+  // Notify webapp that a message was received.
+  if (webAppChannel) {
+    webAppChannel.postMessage(payload.data);
+  }
+
+  if (payload.data.silent == 'true') {
+    // No need to show anything.
+    return;
+  }
+
+  const titles = {'msg': 'new_message', 'sub': 'new_chat'};
+  const pushType = payload.data.what || 'msg';
+  const title = payload.data.title || self.i18nMessage(titles[pushType]);
+  if (title) {
+    const options = {
+      body: payload.data.content || '', // TODO: content for 'sub' should be topic's or user's title.
+      icon: '/img/logo96.png', // TODO: use topic's or user's avatar (would have to fetch for 'sub', read from db for 'msg').
+      badge: '/img/badge96.png',
+      tag: payload.data.topic || undefined,
+      data: {
+        topic: payload.data.topic
+      }
+    };
+    return self.registration.showNotification(title, options);
+  }
+});
+
+// Update service worker immediately for both the current client
+// and all other active clients.
+self.addEventListener('install', _ => {
+  self.skipWaiting();
+});
+
+// This code handles a click on notification: takes
+// the user to the browser tab with the chat or opens a new tab.
+self.addEventListener('notificationclick', event => {
+  const data = event.notification.data;
+  event.notification.close();
+  if (!data) {
+    console.info("Missing 'data' in notification", event.notification);
+    return;
+  }
+
+  const urlHash = '#/' + data.topic;
+
+  event.waitUntil(self.clients.matchAll({
+    type: 'window',
+    includeUncontrolled: true})
+    .then(windowClients => {
+      let anyClient = null;
+      for (let i = 0; i < windowClients.length; i++) {
+        const url = new URL(windowClients[i].url);
+        if (url.hash.includes(data.topic)) {
+          // Found the Tinode tab with the right topic open.
+          return windowClients[i].focus();
+        } else {
+          // This will be the least recently used tab.
+          anyClient = windowClients[i];
+        }
+      }
+
+      // Found tab with Tinode on a different topic,
+      // navigate to the right topic.
+      if (anyClient) {
+        const url = new URL(anyClient.url);
+        url.hash = urlHash;
+        return anyClient.focus().then(thisClient => {
+          return thisClient.navigate(url);
+        });
+      }
+
+      // Did not find a Tinode browser tab. Open one.
+      const url = new URL(self.location.origin);
+      url.hash = urlHash;
+      return clients.openWindow(url);
+    }));
+});
+
+// This is needed for 'Add to Home Screen'.
+self.addEventListener('fetch', event => {
+  if (event.request.method != 'GET') {
+    return;
+  }
+
+  event.respondWith((async _ => {
+    //  Try to find the response in the cache.
+    const cache = await caches.open(PACKAGE_VERSION);
+
+    const reqUrl = new URL(event.request.url);
+    // Using ignoreSearch=true to read cached images and docs despite different auth signatures.
+    const cachedResponse = await cache.match(event.request, {ignoreSearch: (self.location.origin == reqUrl.origin)});
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+    // Not found in cache.
+    const response = await fetch(event.request);
+    if (!response || response.status != 200 || response.type != 'basic') {
+      return response;
+    }
+    if (reqUrl.protocol == 'http:' || reqUrl.protocol == 'https:') {
+      await cache.put(event.request, response.clone());
+    }
+    return response;
+  })());
+});
+
+// This code gets the human language from the webapp.
+self.addEventListener('message', event => {
+  const data = JSON.parse(event.data);
+
+  // The locale is used for selecting strings in an appropriate language.
+  self.locale = data.locale || '';
+  self.baseLocale = self.locale.toLowerCase().split(/[-_]/)[0];
+});

src/config.js

@@ -0,0 +1,124 @@
+import { PACKAGE_VERSION } from './version.js';
+
+// Name of this application, used in the User-Agent.
+export const APP_NAME = 'TinodeWeb/' + (PACKAGE_VERSION || '0.21');
+
+// API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
+export const API_KEY = 'AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K';
+
+// The array of possible hosts to connect to.
+export const KNOWN_HOSTS = {hosted: 'web.tinode.co', local: 'localhost:6060'};
+
+// Default host name and port to connect to.
+export const DEFAULT_HOST = KNOWN_HOSTS.hosted;
+
+// Enable console logging.
+export const LOGGING_ENABLED = true;
+
+// Minimum time between two keypress notifications, milliseconds.
+export const KEYPRESS_DELAY = 3_000;
+// Delay before sending a read notification, milliseconds.
+export const READ_DELAY = 1_500;
+
+// The default shortest allowed tag length. Matches the value on the server.
+export const MIN_TAG_LENGTH = 2;
+// The default greatest allowed tag length. Matches the value on the server.
+export const MAX_TAG_LENGTH = 96;
+// The default maximum number of tags allowed. Matches the value on the server.
+export const MAX_TAG_COUNT = 16;
+
+// Access mode for P2P subscriptions initiated by the current user.
+export const DEFAULT_P2P_ACCESS_MODE = 'JRWPS';
+// Access mode for new group topics created by the current user.
+export const NEW_GRP_ACCESS_MODE = 'JRWPSAO';
+// Access mode for a channel.
+export const CHANNEL_ACCESS_MODE = 'JR';
+
+// Access mode for no access.
+export const NO_ACCESS_MODE = 'N';
+
+// Mediaquery breakpoint between desktop and mobile, in px. Should match the value
+// in @media (max-size: 640px) in base.css
+export const MEDIA_BREAKPOINT = 640;
+// Size of css 'rem' unit in pixels. Default 1rem = 10pt = 13px.
+export const REM_SIZE = 13;
+
+// Size of the avatar image: when image dimensions are greater or the image is not square, it's resized to
+// a square of this size or less.
+export const AVATAR_SIZE = 384;
+
+// Maximum size of an avatar in bytes for sending in-band. Bigger avatars will be sent out of band (as uploads).
+export const MAX_AVATAR_BYTES = 4096;
+
+// Size of the broken_image shown in MessagesView
+export const BROKEN_IMAGE_SIZE = 32;
+
+// Size of video preview when dimensions are missing.
+export const NO_DIMENSIONS_VIDEO = 128;
+
+// Number of chat messages to fetch in one call.
+export const MESSAGES_PAGE = 24;
+
+// Default maximum in-band (included directly into the message) attachment size which fits into
+// a message of 256K in size. Used when the server-provided value is unavailable. The actual
+// binary size of the attachment should be smaller due to base64 encoding expansion and some overhead,
+// for instance 1024 bytes.
+// Increase this limit to a greater value in production, if desired. Also increase
+// max_message_size in the server config.
+export const MAX_INBAND_ATTACHMENT_SIZE = 262_144;
+
+// Default absolute maximum attachment size to be used with the server = 8MB.
+// Used when the server-provided value is unavailable. Increase to something like 100MB in production.
+export const MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
+
+// Maximum allowed linear dimension (pixels) of an image sent inline. Larger images will be shrunk
+// to make the larger dimension fit under this size. You may want to adjust it to 1600 or
+// 2400 for production.
+export const MAX_IMAGE_DIM = 1024;
+
+// Linear dimensions of image preview: shrink image under this size for previews.
+export const IMAGE_PREVIEW_DIM = 64;
+
+// Linear dimensions of video screencapture: shrink image under this size for previews.
+export const VIDEO_PREVIEW_DIM = 96;
+
+// Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
+export const IMAGE_THUMBNAIL_DIM = 36;
+// Width of video thumbnail: allow it to be wider, but not taller. Use IMAGE_THUMBNAIL_DIM for height.
+export const VIDEO_THUMBNAIL_WIDTH = 48;
+
+// Maximum number of online users to be shown in a topic title bar. Others will be
+// hidden under "+X more"
+export const MAX_ONLINE_IN_TOPIC = 4;
+
+// Maximum length of user name, topic title, and private comment.
+export const MAX_TITLE_LENGTH = 60;
+// Maximum length of topic description.
+export const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
+// Maximum length of user name when displaying a video call.
+export const MAX_PEER_TITLE_LENGTH = 20;
+
+// Length of message previews in chat list, in characters.
+export const MESSAGE_PREVIEW_LENGTH = 80;
+
+// Length of a quote in quoted reply (for outgoing messages).
+export const QUOTED_REPLY_LENGTH = 30;
+// Length of a preview of a forwarded message.
+export const FORWARDED_PREVIEW_LENGTH = 84;
+// Length of preview for a message being edited.
+export const EDIT_PREVIEW_LENGTH = 48;
+
+// Minimum duration of an audio recording in milliseconds (2 sec).
+export const MIN_DURATION = 2_000;
+// Maximum duration of an audio recording in milliseconds (10 min).
+export const MAX_DURATION = 600_000;
+
+// Link for "Contact Us".
+export const LINK_CONTACT_US = 'mailto:support@tinode.co';
+
+// Link to Privacy Policy.
+export const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';
+
+// Link to Terms of Service.
+export const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.html';
+

src/constants.js

@@ -0,0 +1,8 @@
+// Video call states.
+export const CALL_STATE_NONE = 0;
+export const CALL_STATE_OUTGOING_INITATED = 1;
+export const CALL_STATE_INCOMING_RECEIVED = 2;
+export const CALL_STATE_IN_PROGRESS = 3;
+
+// Video call message headers representing call state.
+export const CALL_HEAD_STARTED = 'started';

src/i18n/ex/base-en.json

@@ -0,0 +1,939 @@
+{
+  "action_block_contact": {
+    "defaultMessage": "Block Contact",
+    "description": "Flat button [Block Contact]"
+  },
+  "action_cancel": {
+    "defaultMessage": "cancel",
+    "description": "Call to action [cancel]"
+  },
+  "action_clear_messages": {
+    "defaultMessage": "Clear Messages",
+    "description": "Flat button [Clear Messages] (soft-delete messages)"
+  },
+  "action_delete_messages": {
+    "defaultMessage": "Clear Messages for All",
+    "description": "Flat button [Clear for All] (hard-delete all messages)"
+  },
+  "action_leave_chat": {
+    "defaultMessage": "Leave Conversation",
+    "description": "Flat button [Leave Conversation]"
+  },
+  "action_report_chat": {
+    "defaultMessage": "Report Conversation",
+    "description": "Flat button [Report Group]"
+  },
+  "already_in_call": {
+    "defaultMessage": "You already in an ongoing call!",
+    "description": "Error message when the user tried to accept a new call without finishing pervious one"
+  },
+  "archived_contacts": {
+    "defaultMessage": "Archived contacts ({count})",
+    "description": "Label for archived chats"
+  },
+  "badge_danger": {
+    "defaultMessage": "Untrustworthy",
+    "description": "Suspicious or untrustworthy account or topic badge"
+  },
+  "badge_owner": {
+    "defaultMessage": "owner",
+    "description": "Badge for indicating the owner"
+  },
+  "badge_staff": {
+    "defaultMessage": "Staff-managed",
+    "description": "Explanation of a staff-managed account or topic badge"
+  },
+  "badge_verified": {
+    "defaultMessage": "Verified/official",
+    "description": "Explanation of a verified account or topic badge"
+  },
+  "badge_you": {
+    "defaultMessage": "you",
+    "description": "Badge for indicating the current user"
+  },
+  "block_contact_warning": {
+    "defaultMessage": "Are you sure you want to block this contact?",
+    "description": "Alert dialog warning when blocking a contact."
+  },
+  "blocked_contacts_link": {
+    "defaultMessage": "Blocked contacts ({count})",
+    "description": "Blocked contacts link"
+  },
+  "button_add_members": {
+    "defaultMessage": "Add members",
+    "description": "Flat button [Add members] (to topic)"
+  },
+  "button_cancel": {
+    "defaultMessage": "Cancel",
+    "description": "Button [Cancel]"
+  },
+  "button_confirm": {
+    "defaultMessage": "Confirm",
+    "description": "Button [Confirm]"
+  },
+  "button_create": {
+    "defaultMessage": "Create",
+    "description": "Button [Create]"
+  },
+  "button_delete_account": {
+    "defaultMessage": "Delete account",
+    "description": "Button [Delete account]"
+  },
+  "button_edit": {
+    "defaultMessage": "Edit",
+    "description": "Call to action [Edit]"
+  },
+  "button_logout": {
+    "defaultMessage": "Logout",
+    "description": "Button [Logout]"
+  },
+  "button_ok": {
+    "defaultMessage": "OK",
+    "description": "Button [OK]"
+  },
+  "button_reset": {
+    "defaultMessage": "Reset",
+    "description": "Button [Reset]"
+  },
+  "button_security": {
+    "defaultMessage": "Security",
+    "description": "Navigaton button for security panel."
+  },
+  "button_send_request": {
+    "defaultMessage": "Send request",
+    "description": "Button [Send request]"
+  },
+  "button_sign_in": {
+    "defaultMessage": "Sign in",
+    "description": "Button [Sign In]"
+  },
+  "button_sign_up": {
+    "defaultMessage": "Sign up",
+    "description": "Create account button [Sign Up]"
+  },
+  "button_subscribe": {
+    "defaultMessage": "Subscribe",
+    "description": "Button [Subscribe]"
+  },
+  "button_update": {
+    "defaultMessage": "Update",
+    "description": "Button [Update]"
+  },
+  "call_busy": {
+    "defaultMessage": "busy",
+    "description": "Label for busy call line"
+  },
+  "call_cancelled": {
+    "defaultMessage": "cancelled",
+    "description": "Label for cancelled outgoing call"
+  },
+  "call_declined": {
+    "defaultMessage": "declined",
+    "description": "Label for declined call"
+  },
+  "call_disconnected": {
+    "defaultMessage": "disconnected",
+    "description": "Label for disconnected call"
+  },
+  "call_in_progress": {
+    "defaultMessage": "in progress",
+    "description": "Label for call in progress"
+  },
+  "call_missed": {
+    "defaultMessage": "missed",
+    "description": "Label for missed incoming call"
+  },
+  "calls_incoming": {
+    "defaultMessage": "Incoming call",
+    "description": "Incoming call label"
+  },
+  "calls_outgoing": {
+    "defaultMessage": "Outgoing call",
+    "description": "Outgoing call label"
+  },
+  "calls_you_label": {
+    "defaultMessage": "You",
+    "description": "Shown over the local video screen"
+  },
+  "cannot_initiate_file_upload": {
+    "defaultMessage": "Cannot initiate file upload.",
+    "description": "Generic error messagewhen attachment fails"
+  },
+  "change_email": {
+    "defaultMessage": "Change email",
+    "description": "Prompt to change current email"
+  },
+  "change_phone": {
+    "defaultMessage": "Change phone number",
+    "description": "Prompt to change current phone number"
+  },
+  "channel": {
+    "defaultMessage": "channel",
+    "description": "Subtitle shown for channels in MessagesView instead of last seen"
+  },
+  "channel_prompt": {
+    "defaultMessage": "This is a channel",
+    "description": "Checkbox label when creating a channel"
+  },
+  "chat_invitation": {
+    "defaultMessage": "You are invited to start a new chat. What would you like to do?",
+    "description": "New chat invitation message: [Accept] [Ignore] [Block]."
+  },
+  "chat_invitation_accept": {
+    "defaultMessage": "Accept",
+    "description": "Action [Accept] for chat invitation."
+  },
+  "chat_invitation_block": {
+    "defaultMessage": "Block",
+    "description": "Action [Block] for chat invitation."
+  },
+  "chat_invitation_ignore": {
+    "defaultMessage": "Ignore",
+    "description": "Action [Ignore] for chat invitation."
+  },
+  "clear_messages_warning": {
+    "defaultMessage": "Are you sure you want to clear all messages? It cannot be undone.",
+    "description": "Alert dialog warning when deleting all messages."
+  },
+  "code_doesnot_match": {
+    "defaultMessage": "Code does not match",
+    "description": "Error message when the credential validation code is incorrect."
+  },
+  "contacts_not_found": {
+    "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
+    "description": "HTML message shown in ContactList when no contacts are found"
+  },
+  "contacts_not_found_short": {
+    "defaultMessage": "No contacts match ''{query}''",
+    "description": "Shown in ContactsView when search returned no results"
+  },
+  "cred_confirmed_successfully": {
+    "defaultMessage": "Confirmed successfully",
+    "description": "Message explaining that the credential was successfully validated."
+  },
+  "credential_email_prompt": {
+    "defaultMessage": "Your registration email",
+    "description": "Placeholder for entering email"
+  },
+  "current_email": {
+    "defaultMessage": "Current email",
+    "description": "Label for old email"
+  },
+  "current_phone": {
+    "defaultMessage": "Current phone number",
+    "description": "Label for old phone"
+  },
+  "delete_account": {
+    "defaultMessage": "Delete account",
+    "description": "Title for delete account warning"
+  },
+  "delete_account_warning": {
+    "defaultMessage": "Are you sure you want to delete your account? It cannot be undone.",
+    "description": "Warning message when deleting an account"
+  },
+  "delete_messages_warning": {
+    "defaultMessage": "Are you sure you want to delete all messages for everyone? It cannot be undone.",
+    "description": "Alert dialog warning when hard-deleting all messages."
+  },
+  "description_editing_placeholder": {
+    "defaultMessage": "Description (optional)",
+    "description": "Placeholder for editing topic description"
+  },
+  "download_action": {
+    "defaultMessage": "download",
+    "description": "Call to action [download]"
+  },
+  "drafty_attachment": {
+    "defaultMessage": "Attachment",
+    "description": "Comment for attachment in Drafty"
+  },
+  "drafty_form": {
+    "defaultMessage": "Form:",
+    "description": "Comment for form in Drafty"
+  },
+  "drafty_image": {
+    "defaultMessage": "Picture",
+    "description": "Comment for embedded images in Drafty"
+  },
+  "drafty_unknown": {
+    "defaultMessage": "Unsupported",
+    "description": "Unsupported entity in drafty"
+  },
+  "drafty_video": {
+    "defaultMessage": "Video recording",
+    "description": "Comment for videos embedded in Drafty"
+  },
+  "drag_file": {
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner"
+  },
+  "editing_message": {
+    "defaultMessage": "Editing",
+    "description": "Title over message editing preview"
+  },
+  "email_dative": {
+    "defaultMessage": "email",
+    "description": "Dative case of 'email', i.e. 'email' in 'by email'"
+  },
+  "email_prompt": {
+    "defaultMessage": "Email, e.g. jdoe@example.com",
+    "description": "Input placeholder for email entry"
+  },
+  "enable_peers_messaging": {
+    "defaultMessage": "Enable",
+    "description": "Call to action to enable peer's messaging"
+  },
+  "enter_confirmation_code_prompt": {
+    "defaultMessage": "Confirmation code",
+    "description": "Request to enter confirmation code"
+  },
+  "error_invalid_id": {
+    "defaultMessage": "Invalid ID",
+    "description": "Error message"
+  },
+  "file_attachment_too_large": {
+    "defaultMessage": "The file size {size} exceeds the {limit} limit.",
+    "description": "Error message when attachment is too large"
+  },
+  "forgot_password_link": {
+    "defaultMessage": "Forgot password?",
+    "description": "Link to Reset password form"
+  },
+  "forward_to": {
+    "defaultMessage": "Forward to"
+  },
+  "forward_to_search_placeholder": {
+    "defaultMessage": "Search contacts",
+    "description": "Contact search prompt when forwarding a message."
+  },
+  "full_name_prompt": {
+    "defaultMessage": "Full name, e.g. John Doe",
+    "description": "Input placeholder for person's full name"
+  },
+  "granted_permissions": {
+    "defaultMessage": "Granted",
+    "description": "Title for permissions"
+  },
+  "group_has_no_members": {
+    "defaultMessage": "No members",
+    "description": "Shown in place of group members"
+  },
+  "group_user_id_prompt": {
+    "defaultMessage": "Group or User ID",
+    "description": "Prompt for entering user or group ID"
+  },
+  "icon_title_add_image": {
+    "defaultMessage": "Add image",
+    "description": "Icon tool tip for attaching an image"
+  },
+  "icon_title_attach_file": {
+    "defaultMessage": "Attach file",
+    "description": "Icon tool tip for attaching a file"
+  },
+  "icon_title_delete": {
+    "defaultMessage": "Delete recording",
+    "description": "Icon tool tip for deleting recorded audio"
+  },
+  "icon_title_pause": {
+    "defaultMessage": "Pause playback",
+    "description": "Icon tool tip for pausing audio playback"
+  },
+  "icon_title_play": {
+    "defaultMessage": "Play recording",
+    "description": "Icon tool tip for starting audio playback"
+  },
+  "icon_title_record_voice": {
+    "defaultMessage": "Record voice message",
+    "description": "Icon tool tip for recording a voice message"
+  },
+  "icon_title_resume": {
+    "defaultMessage": "Resume playback",
+    "description": "Icon tool tip for resuming audio playback"
+  },
+  "icon_title_send": {
+    "defaultMessage": "Send message",
+    "description": "Icon tool tip for sending a message"
+  },
+  "image_caption_prompt": {
+    "defaultMessage": "Image caption",
+    "description": "Prompt in SendMessage for attached image"
+  },
+  "invalid_content": {
+    "defaultMessage": "invalid content",
+    "description": "Shown when the message is unreadable"
+  },
+  "invalid_security_token": {
+    "defaultMessage": "Invalid security token",
+    "description": "Error message when resetting password."
+  },
+  "label_client": {
+    "defaultMessage": "Client:",
+    "description": "Label for a client version"
+  },
+  "label_content_type": {
+    "defaultMessage": "Content type:",
+    "description": "Label for file content type (mime)"
+  },
+  "label_default_access_mode": {
+    "defaultMessage": "Default access mode:",
+    "description": "Label for default access mode"
+  },
+  "label_description": {
+    "defaultMessage": "Description",
+    "description": "Label for editing topic description"
+  },
+  "label_file_name": {
+    "defaultMessage": "File name:",
+    "description": "Label for a file name"
+  },
+  "label_group_members": {
+    "defaultMessage": "Group members:",
+    "description": "Section title or label"
+  },
+  "label_incognito_mode": {
+    "defaultMessage": "Incognito mode:",
+    "description": "Label for incognito mode toggle"
+  },
+  "label_message_sound": {
+    "defaultMessage": "Message sound:",
+    "description": "Label for message sounds toggle"
+  },
+  "label_muting_topic": {
+    "defaultMessage": "Muted:",
+    "description": "Label for Muting/unmuting the topic"
+  },
+  "label_new_password": {
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password"
+  },
+  "label_other_user": {
+    "defaultMessage": "Other",
+    "description": "Label for the other user when the user is unnamed"
+  },
+  "label_password": {
+    "defaultMessage": "Password",
+    "description": "Label for password editing"
+  },
+  "label_permissions": {
+    "defaultMessage": "Permissions:",
+    "description": "Section title"
+  },
+  "label_private": {
+    "defaultMessage": "Private comment",
+    "description": "Label for editing 'private'"
+  },
+  "label_push_notifications": {
+    "defaultMessage": "Notification alerts:",
+    "description": "Label for push notifications switch"
+  },
+  "label_push_notifications_disabled": {
+    "defaultMessage": "Notification alerts (requires HTTPS):",
+    "description": "Label for push notifications switch"
+  },
+  "label_reset_password": {
+    "defaultMessage": "Send a password reset email",
+    "description": "Label for password reset field"
+  },
+  "label_reset_password_tel": {
+    "defaultMessage": "Send SMS to reset password",
+    "description": "Label for password reset field by phone"
+  },
+  "label_sdk": {
+    "defaultMessage": "SDK:"
+  },
+  "label_server": {
+    "defaultMessage": "Server:",
+    "description": "Label for a server version"
+  },
+  "label_server_address": {
+    "defaultMessage": "Server address:"
+  },
+  "label_server_to_use": {
+    "defaultMessage": "Server to use:",
+    "description": "Label for server selector in SettingsView"
+  },
+  "label_size": {
+    "defaultMessage": "Size:",
+    "description": "Label for file size"
+  },
+  "label_topic_name": {
+    "defaultMessage": "Name",
+    "description": "Label for editing topic name"
+  },
+  "label_unarchive_topic": {
+    "defaultMessage": "Archived:",
+    "description": "Label for unarchiving the topic"
+  },
+  "label_use_secure_connection": {
+    "defaultMessage": "Use secure connection",
+    "description": "Label for WS/WSS connection type in SettingsView"
+  },
+  "label_user_contacts": {
+    "defaultMessage": "Contacts",
+    "description": "Label for user contacts"
+  },
+  "label_user_id": {
+    "defaultMessage": "ID:",
+    "description": "Label for user address (ID)"
+  },
+  "label_wire_transport": {
+    "defaultMessage": "Wire transport:",
+    "description": "Label for wire transport selection in SettingsView"
+  },
+  "label_you": {
+    "defaultMessage": "You:",
+    "description": "Label for the current user"
+  },
+  "label_your_name": {
+    "defaultMessage": "Your name",
+    "description": "Label for full name editing"
+  },
+  "label_your_permissions": {
+    "defaultMessage": "Your permissions:",
+    "description": "Label for current user permissions"
+  },
+  "last_seen_timestamp": {
+    "defaultMessage": "Last seen",
+    "description": "Label for the timestamp of when the user or topic was last online"
+  },
+  "leave_chat_warning": {
+    "defaultMessage": "Are you sure you want to leave this conversation?",
+    "description": "Alert dialog warning when unsubscribing from a chat."
+  },
+  "link_contact_us": {
+    "defaultMessage": "Contact Us",
+    "description": "Ancor text for contacting us by email"
+  },
+  "link_privacy_policy": {
+    "defaultMessage": "Privacy Policy",
+    "description": "Ancor text for privacy policy link"
+  },
+  "link_terms_of_service": {
+    "defaultMessage": "Terms of Service",
+    "description": "Ancor text for terms of service link"
+  },
+  "loading_note": {
+    "defaultMessage": "Loading...",
+    "description": "Message shown when component is loading"
+  },
+  "login_prompt": {
+    "defaultMessage": "Login",
+    "description": "Placeholer for username/login"
+  },
+  "menu_item_archive_topic": {
+    "defaultMessage": "Archive",
+    "description": "Move topic from the list of active chats to archive"
+  },
+  "menu_item_audio_call": {
+    "defaultMessage": "Call",
+    "description": "Start audio call"
+  },
+  "menu_item_block": {
+    "defaultMessage": "Block",
+    "description": "Block topic or user"
+  },
+  "menu_item_clear_messages": {
+    "defaultMessage": "Clear messages",
+    "description": "Delete all messages"
+  },
+  "menu_item_clear_messages_for_all": {
+    "defaultMessage": "Clear for All",
+    "description": "Delete all message(s) for all members"
+  },
+  "menu_item_delete": {
+    "defaultMessage": "Delete",
+    "description": "Delete selected messages"
+  },
+  "menu_item_delete_for_all": {
+    "defaultMessage": "Delete for All",
+    "description": "Delete selected message(s) for all members"
+  },
+  "menu_item_delete_topic": {
+    "defaultMessage": "Delete",
+    "description": "Delete entire topic"
+  },
+  "menu_item_edit": {
+    "defaultMessage": "Edit",
+    "description": "Edit message"
+  },
+  "menu_item_edit_permissions": {
+    "defaultMessage": "Edit permissions",
+    "description": "Menu item [Edit permissions]"
+  },
+  "menu_item_forward": {
+    "defaultMessage": "Forward",
+    "description": "Forward message"
+  },
+  "menu_item_info": {
+    "defaultMessage": "Info",
+    "description": "Show extended topic information"
+  },
+  "menu_item_member_delete": {
+    "defaultMessage": "Remove",
+    "description": "Remove user from topic"
+  },
+  "menu_item_mute": {
+    "defaultMessage": "Mute",
+    "description": "Turn off notifications"
+  },
+  "menu_item_reply": {
+    "defaultMessage": "Reply",
+    "description": "Reply to message"
+  },
+  "menu_item_restore_topic": {
+    "defaultMessage": "Restore",
+    "description": "Restore topic from archive"
+  },
+  "menu_item_send_retry": {
+    "defaultMessage": "Retry",
+    "description": "Retry sending message"
+  },
+  "menu_item_unblock": {
+    "defaultMessage": "Unblock",
+    "description": "Unblock topic or user"
+  },
+  "menu_item_unmute": {
+    "defaultMessage": "Unmute",
+    "description": "Turn notifications on"
+  },
+  "menu_item_video_call": {
+    "defaultMessage": "Video call",
+    "description": "Start video call"
+  },
+  "message_edited_marker": {
+    "defaultMessage": ", edited",
+    "description": "Marker indicating that the message was edited"
+  },
+  "message_sending": {
+    "defaultMessage": "sending...",
+    "description": "Message being sent, in place of time stamp"
+  },
+  "message_sending_failed": {
+    "defaultMessage": "failed",
+    "description": "Failed to send message, in place of time stamp"
+  },
+  "messages_not_readable": {
+    "defaultMessage": "no access to messages",
+    "description": "Message shown in topic without the read access"
+  },
+  "messaging_disabled_prompt": {
+    "defaultMessage": "Messaging disabled",
+    "description": "Prompt in SendMessage in read-only topic"
+  },
+  "mobile_number_required": {
+    "defaultMessage": "Mobile phone number required",
+    "description": "Error message"
+  },
+  "mobile_phone_number": {
+    "defaultMessage": "Mobile phone number",
+    "description": "Prompt for entering a mobile phone number"
+  },
+  "more_online_members": {
+    "defaultMessage": "+{overflow} more",
+    "description": "Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC"
+  },
+  "new_email": {
+    "defaultMessage": "New email",
+    "description": "Prompt for entering a new email"
+  },
+  "new_message_prompt": {
+    "defaultMessage": "New message",
+    "description": "Prompt in send message field"
+  },
+  "new_password_placeholder": {
+    "defaultMessage": "Enter new password",
+    "description": "Placeholder for entering new password"
+  },
+  "new_phone_number": {
+    "defaultMessage": "New phone number",
+    "description": "Prompt for entering a new telephone number"
+  },
+  "no_connection": {
+    "defaultMessage": "No connection",
+    "description": "Warning that the user is offline."
+  },
+  "no_contacts": {
+    "defaultMessage": "You have no contacts :-(",
+    "description": "Shown in ContactsView when the user has no contacts"
+  },
+  "numeric_confirmation_code_prompt": {
+    "defaultMessage": "Numbers only",
+    "description": "Prompt for numeric conformation code"
+  },
+  "online_now": {
+    "defaultMessage": "online now",
+    "description": "Indicator that the user or topic is currently online"
+  },
+  "panel_title_crop": {
+    "defaultMessage": "Drag to Adjust",
+    "description": "Title for AvatarCropView."
+  },
+  "panel_title_general": {
+    "defaultMessage": "General",
+    "description": "Title for TopicCommon."
+  },
+  "panel_title_info": {
+    "defaultMessage": "Info",
+    "description": "Title for InfoView"
+  },
+  "panel_title_members": {
+    "defaultMessage": "Members",
+    "description": "Title for managing group members view."
+  },
+  "panel_title_security": {
+    "defaultMessage": "Security",
+    "description": "Title for TopicSecirity and AccSecurity."
+  },
+  "password_i_have_code": {
+    "defaultMessage": "I have code",
+    "description": "Call to open field to enter password reset code"
+  },
+  "password_prompt": {
+    "defaultMessage": "Password",
+    "description": "Placeholder/prompt for entering password"
+  },
+  "password_reset_email_sent": {
+    "defaultMessage": "An email with security code has been sent.",
+    "description": "Notification that the email with password reset instructions has been sent"
+  },
+  "password_reset_sms_sent": {
+    "defaultMessage": "A text message with security code has been sent.",
+    "description": "Notification that the SMS with password reset instructions has been sent"
+  },
+  "password_unchanged_prompt": {
+    "defaultMessage": "Unchanged",
+    "description": "Message in editor while password is unchanged"
+  },
+  "peers_messaging_disabled": {
+    "defaultMessage": "Peer's messaging is disabled.",
+    "description": "Shown when the p2p peer's messaging is disabled"
+  },
+  "permission_admin": {
+    "defaultMessage": "Approve ({val})",
+    "description": "Name of A permission"
+  },
+  "permission_delete": {
+    "defaultMessage": "Delete ({val})",
+    "description": "Name of D permission"
+  },
+  "permission_join": {
+    "defaultMessage": "Join ({val})",
+    "description": "Name of J permission"
+  },
+  "permission_owner": {
+    "defaultMessage": "Owner ({val})",
+    "description": "Name of O permission"
+  },
+  "permission_pres": {
+    "defaultMessage": "Get notified ({val})",
+    "description": "Name of P permission"
+  },
+  "permission_read": {
+    "defaultMessage": "Read ({val})",
+    "description": "Name of R permission"
+  },
+  "permission_share": {
+    "defaultMessage": "Share ({val})",
+    "description": "Name of S permission"
+  },
+  "permission_write": {
+    "defaultMessage": "Write ({val})",
+    "description": "Name of W permission"
+  },
+  "permissions_anonymous": {
+    "defaultMessage": "Anonymous",
+    "description": "Title for editing default anonymous permissions"
+  },
+  "permissions_authenticated": {
+    "defaultMessage": "Authenticated",
+    "description": "Title for editing default authenticated permissions"
+  },
+  "permissions_user": {
+    "defaultMessage": "User's Permissions",
+    "description": "Title for editing user's permissions"
+  },
+  "phone_dative": {
+    "defaultMessage": "phone",
+    "description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
+  },
+  "pin_message": {
+    "defaultMessage": "Pin",
+    "description": "Menu item [Pin] for pinning message to the top."
+  },
+  "private_editing_placeholder": {
+    "defaultMessage": "Visible to you only",
+    "description": "Placeholder for editing 'private'"
+  },
+  "push_init_failed": {
+    "defaultMessage": "Failed to initialize push notifications",
+    "description": "Error message when push notifications have failed to initialize."
+  },
+  "reconnect_countdown": {
+    "defaultMessage": "Disconnected. Reconnecting in {seconds}…",
+    "description": "Message shown when an app update is available."
+  },
+  "reconnect_now": {
+    "defaultMessage": "Try now",
+    "description": "Prompt for reconnecting now"
+  },
+  "reload_update": {
+    "defaultMessage": "Reload",
+    "description": "Call to action to reload application when update is available."
+  },
+  "report_chat_warning": {
+    "defaultMessage": "Are you sure you want to block and report this conversation?",
+    "description": "Alert dialog warning when reporting a conversation for abuse"
+  },
+  "requested_permissions": {
+    "defaultMessage": "Requested",
+    "description": "Title for permissions"
+  },
+  "save_attachment": {
+    "defaultMessage": "save",
+    "description": "Call to save an attachment"
+  },
+  "search_for_contacts": {
+    "defaultMessage": "Use search to find contacts",
+    "description": "Text shown in contacts view when user entered no search query."
+  },
+  "search_no_results": {
+    "defaultMessage": "Search returned no results",
+    "description": "Text shown in contacts view when query returned no results."
+  },
+  "search_placeholder": {
+    "defaultMessage": "List like email:alice@example.com, tel:17025550003...",
+    "description": "Placeholder in contacts search field"
+  },
+  "sidepanel_title_acc_notifications": {
+    "defaultMessage": "Notifications",
+    "description": "Sidepanel title for AccNotificationsView."
+  },
+  "sidepanel_title_acc_support": {
+    "defaultMessage": "Support",
+    "description": "Sidepanel title for AccSupportView."
+  },
+  "sidepanel_title_account_settings": {
+    "defaultMessage": "Account Settings",
+    "description": "Sidepanel title for AccountSettingsView."
+  },
+  "sidepanel_title_archive": {
+    "defaultMessage": "Archived Chats",
+    "description": "Sidepanel title for ContactsView-Archive."
+  },
+  "sidepanel_title_blocked": {
+    "defaultMessage": "Blocked Chats",
+    "description": "Sidepanel title for ContactsView-Blocked."
+  },
+  "sidepanel_title_cred": {
+    "defaultMessage": "Confirm Credentials",
+    "description": "Sidepanel title for ValidationView."
+  },
+  "sidepanel_title_login": {
+    "defaultMessage": "Sign In",
+    "description": "Sidepanel title for LoginView."
+  },
+  "sidepanel_title_newtpk": {
+    "defaultMessage": "Start New Chat",
+    "description": "Sidepanel title for NewTopicView."
+  },
+  "sidepanel_title_register": {
+    "defaultMessage": "Create Account",
+    "description": "Sidepanel title for CreateAccountView."
+  },
+  "sidepanel_title_reset": {
+    "defaultMessage": "Reset Password",
+    "description": "Sidepanel title for PasswordResetView."
+  },
+  "sidepanel_title_settings": {
+    "defaultMessage": "Settings",
+    "description": "Sidepanel title for SettingsView."
+  },
+  "stay_logged_in": {
+    "defaultMessage": "Stay logged in",
+    "description": "Label for a checkbox"
+  },
+  "tabtitle_find_user": {
+    "defaultMessage": "find",
+    "description": "Tab title Find"
+  },
+  "tabtitle_group_by_id": {
+    "defaultMessage": "by id",
+    "description": "Tab title Find topic by ID"
+  },
+  "tabtitle_new_group": {
+    "defaultMessage": "new group",
+    "description": "Tab title New Group"
+  },
+  "tags_editor_no_tags": {
+    "defaultMessage": "Add some tags",
+    "description": "Tag editor prompt when no tags are found."
+  },
+  "tags_not_found": {
+    "defaultMessage": "No tags defined. Add some.",
+    "description": ""
+  },
+  "title_all_contacts": {
+    "defaultMessage": "All Contacts",
+    "description": "Section title [All Contacts]"
+  },
+  "title_group_members": {
+    "defaultMessage": "Group Members",
+    "description": "Section title"
+  },
+  "title_manage_tags": {
+    "defaultMessage": "Manage",
+    "description": "Section title for the list of tags"
+  },
+  "title_not_found": {
+    "defaultMessage": "Not found",
+    "description": "Title shown when topic is not found"
+  },
+  "title_permissions": {
+    "defaultMessage": "Permissions",
+    "description": "Section title"
+  },
+  "title_tag_manager": {
+    "defaultMessage": "Tags (search & discovery)",
+    "description": "Section title for TagManager"
+  },
+  "topic_block_warning": {
+    "defaultMessage": "Are you sure you want to block this conversation?",
+    "description": "Alert warning when blocking a topic."
+  },
+  "topic_delete": {
+    "defaultMessage": "Delete Conversation",
+    "description": "Alert title when deleting the topic."
+  },
+  "topic_delete_warning": {
+    "defaultMessage": "Are you sure you want to delete this conversation? It cannot be undone.",
+    "description": "Alert warning when deleting entire topic"
+  },
+  "topic_name_editing_placeholder": {
+    "defaultMessage": "Freeform name of the group",
+    "description": "Prompt for entering topic name"
+  },
+  "unnamed_topic": {
+    "defaultMessage": "Unnamed",
+    "description": "Title shown when the topic has no name"
+  },
+  "unpin_message": {
+    "defaultMessage": "Unpin",
+    "description": "Menu item [Unpin] for un-pinning the message."
+  },
+  "unrecognized_video_format": {
+    "defaultMessage": "Format of this video is not recognized",
+    "description": "Error message when uploaded video is invalid"
+  },
+  "update_available": {
+    "defaultMessage": "Update available.",
+    "description": "Message shown when an app update is available."
+  },
+  "upload_finishing": {
+    "defaultMessage": "finishing...",
+    "description": "Notification that upload is finishing"
+  },
+  "user_not_found": {
+    "defaultMessage": "Not found",
+    "description": "In place of a user's full name when the user is not found."
+  }
+}

src/index.js

@@ -0,0 +1,65 @@
+// Put all packages together.
+// Used to generate umd/index.prod.js
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { IntlProvider } from 'react-intl';
+
+import TinodeWeb from './views/tinode-web.jsx';
+import HashNavigation from './lib/navigation.js';
+
+// Insert google analytics script and tag if configured.
+if (typeof FIREBASE_INIT != 'undefined' && FIREBASE_INIT && FIREBASE_INIT.measurementId) {
+  const head = document.getElementsByTagName('head')[0];
+  let script = document.createElement('script');
+  script.src = 'https://www.googletagmanager.com/gtag/js?id=' + FIREBASE_INIT.measurementId;
+  script.async = true;
+  head.prepend(script);
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', FIREBASE_INIT.measurementId);
+}
+
+// Allow loading translation strings for just one language.
+const messageLoader = {
+  'de': _ => import('./i18n.min/de.json'),
+  'en': _ => import('./i18n.min/en.json'),
+  'es': _ => import('./i18n.min/es.json'),
+  'fr': _ => import('./i18n.min/fr.json'),
+  'ko': _ => import('./i18n.min/ko.json'),
+  'ro': _ => import('./i18n.min/ro.json'),
+  'ru': _ => import('./i18n.min/ru.json'),
+  'zh': _ => import('./i18n.min/zh.json'),
+  'zh-TW': _ => import('./i18n.min/zh-TW.json')
+};
+
+// Detect human language to use in the UI:
+//  Check parameters from URL hash #?hl=ru, then browser, then use 'en' as a fallback.
+const { params } = HashNavigation.parseUrlHash(window.location.hash);
+const language = (params && params.hl) ||
+  (navigator.languages && navigator.languages[0]) ||
+  navigator.language ||
+  navigator.userLanguage ||
+  'en';
+
+// Make sure names like 'en_GB' and 'en-GB' consistently use '-'.
+const normalized = language.replace('_', '-');
+// Get the base language 'en' from a more specific 'en-US' as a partial fallback.
+const baseLanguage = normalized.split('-')[0].toLowerCase();
+
+// Try the full locale first, then the locale without the region code, fallback to 'en'.
+const htmlLang = messageLoader[normalized] ? language : messageLoader[baseLanguage] ? baseLanguage : 'en';
+
+// Set lang attribute of the HTML element: <html lang="XX">
+document.getElementsByTagName('html')[0].setAttribute('lang', htmlLang);
+
+// Render the app.
+const root = createRoot(document.getElementById('mountPoint'));
+messageLoader[htmlLang]().then(messages =>
+  root.render(
+    <IntlProvider locale={language} messages={messages} textComponent={React.Fragment}>
+      <TinodeWeb />
+    </IntlProvider>
+));

src/lib/blob-helpers.js

@@ -0,0 +1,307 @@
+// File and image helper functions.
+
+// Supported image MIME types and corresponding file extensions.
+export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
+export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',       'svg',       'svg'];
+
+// Get an URL from a theCard photo: either create a data: URL or return reference URL.
+export function makeImageUrl(photo) {
+  if (photo && typeof photo == 'object') {
+    if (photo.ref) {
+      return photo.ref
+    }
+    if (photo.data && photo.type) {
+      const mime = photo.type.startsWith('image/') ? photo.type : ('image/' + photo.type);
+      return 'data:' + mime + ';base64,' + photo.data;
+    }
+  }
+  return null;
+}
+
+// Calculate linear dimensions for scaling image down to fit under a certain size.
+// Returns an object which contains destination sizes, source sizes, and offsets
+// into source (when making square images).
+export function fitImageSize(width, height, maxWidth, maxHeight, forceSquare) {
+  // Sanitize input
+  width = width | 0;
+  height = height | 0;
+  maxWidth = maxWidth | 0;
+  maxHeight = maxHeight | 0;
+
+  if (width <= 0 || height <= 0 || maxWidth <= 0 || maxHeight <= 0) {
+    return null;
+  }
+
+  if (forceSquare) {
+    maxWidth = maxHeight = Math.min(maxWidth, maxHeight);
+  }
+
+  const scale = Math.min(
+    Math.min(width, maxWidth) / width,
+    Math.min(height, maxHeight) / height
+  );
+
+  const size = {
+    dstWidth: (width * scale) | 0,
+    dstHeight: (height * scale) | 0,
+  };
+
+  if (forceSquare) {
+    // Also calculate parameters for making the image square.
+    size.dstWidth = size.dstHeight = Math.min(size.dstWidth, size.dstHeight);
+    size.srcWidth = size.srcHeight = Math.min(width, height);
+    size.xoffset = ((width - size.srcWidth) / 2) | 0;
+    size.yoffset = ((height - size.srcWidth) / 2) | 0;
+  } else {
+    size.xoffset = size.yoffset = 0;
+    size.srcWidth = width;
+    size.srcHeight = height;
+  }
+  return size;
+}
+
+// Ensure file's extension matches mime content type
+export function fileNameForMime(fname, mime) {
+  const idx = SUPPORTED_IMAGE_FORMATS.indexOf(mime);
+  if (idx < 0 || !fname) {
+    // Unknown mime or empty name.
+    return fname;
+  }
+  const ext = MIME_EXTENSIONS[idx];
+
+  const at = fname.lastIndexOf('.');
+  if (at >= 0) {
+    fname = fname.substring(0, at);
+  }
+  return fname + '.' + ext;
+}
+
+// Scale uploaded image to fit under certain dimensions and byte size, optionally constraining to a square.
+// Returns a promise which is resolven on success or rejected on failure.
+export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onerror = function(err) {
+      reject(new Error("Image format unrecognized"));
+    }
+    img.onload = async function() {
+      // Once the image is loaded, the URL is no longer needed.
+      URL.revokeObjectURL(img.src);
+
+      // Calculate the desired image dimensions.
+      const dim = fitImageSize(img.width, img.height, maxWidth, maxHeight, forceSquare);
+      if (!dim) {
+        reject(new Error("Invalid image"));
+        return;
+      }
+      let canvas = document.createElement('canvas');
+      canvas.width = dim.dstWidth;
+      canvas.height = dim.dstHeight;
+      let ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled = true;
+      ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+        0, 0, dim.dstWidth, dim.dstHeight);
+
+      const mime = SUPPORTED_IMAGE_FORMATS.includes(fileOrBlob.type) ? fileOrBlob.type : 'image/jpeg';
+      // Generate blob to check size of the image.
+      let blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
+      if (!blob) {
+        reject(new Error("Unsupported image format"));
+        return;
+      }
+      // Ensure the image is not too large. Shrink the image keeping the aspect ratio.
+      // Do nothing if maxsize is <= 0.
+      while (maxSize > 0 && blob.length > maxSize) {
+        dim.dstWidth = (dim.dstWidth * 0.70710678118) | 0;
+        dim.dstHeight = (dim.dstHeight * 0.70710678118) | 0;
+        canvas.width = dim.dstWidth;
+        canvas.height = dim.dstHeight;
+        ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+          0, 0, dim.dstWidth, dim.dstHeight);
+        blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
+      }
+
+      canvas = null;
+      resolve({mime: mime, blob: blob, width: dim.dstWidth, height: dim.dstHeight, name: fileNameForMime(fileOrBlob.name, mime)});
+    };
+    img.src = URL.createObjectURL(fileOrBlob);
+  });
+}
+
+// Scale and crop image according to specified dimensions.
+// The coordinates are in unscaled image pixels, i.e. cut the rectangle first then scale it.
+// returns a promise.
+export function imageCrop(mime, objURL, left, top, width, height, scale) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.onerror = _ => {
+      reject(new Error("Image format unrecognized"));
+    };
+    img.onload = _ => {
+      // Once the image is loaded, the URL is no longer needed.
+      URL.revokeObjectURL(img.src);
+
+      let canvas = document.createElement('canvas');
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      let ctx = canvas.getContext('2d');
+      ctx.imageSmoothingEnabled = true;
+      ctx.drawImage(img, left, top, width, height, 0, 0, canvas.width, canvas.height);
+
+      mime = SUPPORTED_IMAGE_FORMATS.includes(mime) ? mime : 'image/jpeg';
+      // Generate blob to check size of the image.
+      canvas.toBlob((blob) => {
+        // Allow GC.
+        canvas = null;
+        if (blob) {
+          resolve({mime: mime, blob: blob, width: width, height: height});
+        } else {
+          reject(new Error("Unsupported image format"));
+        }
+      }, mime);
+    };
+    img.src = objURL;
+  });
+}
+
+// Convert file to base64 string.
+export function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = _ => {
+      reject(reader.error);
+    };
+    reader.onload = _ => {
+      resolve({mime: file.type, bits: reader.result.split(',')[1], name: file.name});
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+// Convert Blob to base64 string. Returns a promise resolved with the base64 string and mime.
+export function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = _ => {
+      reject(reader.error);
+    };
+    reader.onload = _ => {
+      resolve({mime: blob.type, bits: reader.result.split(',')[1]});
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+// File pasted from the clipboard. It's either an inline image or a file attachment.
+export function filePasted(event, onImageSuccess, onAttachmentSuccess, onError) {
+  const items = (event.clipboardData || event.originalEvent.clipboardData || {}).items;
+  if (!items || !items.length) {
+    return false;
+  }
+
+  for (let i in items) {
+    const item = items[i];
+    if (item.kind === 'file') {
+      const file = item.getAsFile();
+      if (!file) {
+        console.error("Failed to get file object from pasted file item", item.kind, item.type);
+        onError("Failed to get file object from pasted file item");
+        continue;
+      }
+      if (file.type && file.type.split('/')[0] == 'image') {
+        onImageSuccess(file);
+      } else {
+        onAttachmentSuccess(file);
+      }
+      // Indicate that the pasted data contains a file.
+      return true;
+    }
+  }
+  // No file found.
+  return false;
+}
+
+// Get mime type from data URL header.
+export function getMimeType(header) {
+  const mime = /^data:(image\/[-+a-z0-9.]+);base64/.exec(header);
+  return (mime && mime.length > 1) ? mime[1] : null;
+}
+
+// Given length of a binary object in bytes, calculate the length after
+// base64 encoding.
+export function base64EncodedLen(n) {
+  return Math.floor((n + 2) / 3) * 4;
+}
+
+// Given length of a base64-encoded object, calculate decoded size of the
+// pbject in bytes.
+export function base64DecodedLen(n) {
+  return Math.floor(n / 4) * 3;
+}
+
+// Re-encode string to standard base64 encoding with padding.
+// The string may be base64-URL encoded without the padding.
+export function base64ReEncode(str) {
+  if (str) {
+    str = str.replace(/-/g, '+').replace(/_/g, '/');
+    try {
+      str = btoa(atob(str));
+    } catch(err) {
+      console.error("Failed to base64 re-encode string.", err);
+      str = null;
+    }
+  }
+  return str;
+}
+
+// Convert a base64 encoded string with the provided mime type into a Blob.
+export function base64ToBlob(str, mime) {
+  if (!str) {
+    return null;
+  }
+
+  try {
+    // Make blob.
+    const bin = atob(str);
+    const length = bin.length;
+    const buf = new ArrayBuffer(length);
+    const arr = new Uint8Array(buf);
+    for (let i = 0; i < length; i++) {
+      arr[i] = bin.charCodeAt(i);
+    }
+
+    return new Blob([buf], { type: mime });
+  } catch(err) {
+    console.error("Failed to convert base64 to blob: ", err);
+  }
+
+  return null;
+}
+
+export function intArrayToBase64(arr) {
+  if (!Array.isArray(arr)) {
+    return null;
+  }
+  try {
+    let bin = '';
+    new Uint8Array(arr).forEach(b => bin += String.fromCharCode(b));
+    return window.btoa(bin);
+  } catch (err) {}
+  return null;
+}
+
+export function base64ToIntArray(b64) {
+  const arr = [];
+  try {
+    const bin =  window.atob(b64);
+    [...bin].forEach(c => {
+      arr.push(c.charCodeAt(0));
+    });
+    return arr;
+  } catch (err) {}
+  return null;
+}

src/lib/formatters.js

@@ -0,0 +1,543 @@
+import React from 'react';
+import { defineMessages } from 'react-intl';
+
+import { Drafty } from 'tinode-sdk';
+
+import AudioPlayer from '../widgets/audio-player.jsx'
+import CallMessage from '../widgets/call-message.jsx'
+import CallStatus from '../widgets/call-status.jsx';
+import InlineVideo from '../widgets/inline-video.jsx';
+import LazyImage from '../widgets/lazy-image.jsx'
+import UploadingImage from '../widgets/uploading-image.jsx'
+
+import { BROKEN_IMAGE_SIZE, IMAGE_THUMBNAIL_DIM, NO_DIMENSIONS_VIDEO, REM_SIZE, VIDEO_THUMBNAIL_WIDTH } from '../config.js';
+import { base64ToBlob, blobToBase64, fitImageSize, imageScaled } from './blob-helpers.js';
+import { idToColorClass, secondsToTime, shortenFileName } from './strformat.js';
+import { cancelablePromise, sanitizeUrlForMime } from './utils.js';
+
+const messages = defineMessages({
+  drafty_form: {
+    id: 'drafty_form',
+    defaultMessage: 'Form: ',
+    description: 'Comment for form in Drafty'
+  },
+  drafty_attachment: {
+    id: 'drafty_attachment',
+    defaultMessage: 'Attachment',
+    description: 'Comment for attachment in Drafty'
+  },
+  drafty_image: {
+    id: 'drafty_image',
+    defaultMessage: 'Picture',
+    description: 'Comment for embedded images in Drafty'
+  },
+  drafty_video: {
+    id: 'drafty_video',
+    defaultMessage: 'Video recording',
+    description: 'Comment for videos embedded in Drafty'
+  },
+  drafty_unknown: {
+    id: 'drafty_unknown',
+    defaultMessage: 'Unsupported',
+    description: 'Unsupported entity in drafty'
+  }
+});
+
+// The main Drafty formatter: converts Drafty elements into React classes. 'this' is set by the caller.
+// 'this' must contain:
+//    viewportWidth:
+//    authorizeURL:
+//    onImagePreview:
+//    onVideoPreview:
+//    onFormButtonClick:
+//    onQuoteClick:
+export function fullFormatter(style, data, values, key, stack) {
+  if (stack.includes('QQ')) {
+    return quoteFormatter.call(this, style, data, values, key);
+  }
+
+  if (!style) {
+    // Unformatted.
+    return values;
+  }
+
+  let el = Drafty.tagName(style);
+  let attr = Drafty.attrValue(style, data) || {};
+  attr.key = key;
+  switch (style) {
+    case 'AU':
+      // Show audio player.
+      if (attr.src) {
+        attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'audio'));
+        attr.duration = data.duration > 0 ? (data.duration | 0) : undefined;
+        attr.preview = data.preview;
+        attr.loading = 'lazy';
+      }
+      el = AudioPlayer;
+      // Audio element cannot have content.
+      values = null;
+      break;
+    case 'BR':
+      values = null;
+      break;
+    case 'EX':
+      // Ignore.
+      break;
+    case 'HL':
+      // Highlighted text. Assign class name.
+      attr.className = 'highlight';
+      break;
+    case 'HD':
+      el = null;
+      values = null;
+      break;
+    case 'IM':
+      // Additional processing for images
+      el = handleImageData.call(this, el, data, attr);
+      // Image element cannot have content.
+      values = null;
+      break;
+    case 'BN':
+      // Button
+      attr.onClick = this.onFormButtonClick;
+      let inner = React.Children.map(values, (child) => {
+        return typeof child == 'string' ? child : undefined;
+      });
+      if (!inner || inner.length == 0) {
+        inner = [attr.name]
+      }
+      // Get text which will be sent back when the button is clicked.
+      attr['data-title'] = inner.join('');
+      break;
+    case 'MN':
+      // Mention
+      attr.className = 'mention'
+      if (data) {
+        attr.className += ' ' + idToColorClass(data.val, false, true);
+      }
+      break;
+    case 'FM':
+      // Form
+      attr.className = 'bot-form';
+      break;
+    case 'RW':
+      // Form element formatting is dependent on element content.
+      break;
+    case 'QQ':
+      // Quote/citation.
+      attr.className = 'reply-quote'
+      attr.onClick = this.onQuoteClick;
+      break;
+    case 'VC':
+      el = CallMessage;
+      // Video call messages do not have content.
+      values = null;
+      if (data) {
+        attr.callState = data.state;
+        attr.incoming = data.incoming;
+        attr.duration = data.duration;
+      }
+      break;
+    case 'VD':
+      // Additional processing for videos.
+      el = handleVideoData.call(this, el, data, attr);
+      // Video element cannot have content.
+      values = null;
+      break;
+    default:
+      if (!el) {
+        // Unknown element.
+        el = React.Fragment;
+        attr = {key: key};
+        // Generate comment for unknown element.
+        let body = values;
+        if (!Array.isArray(values) || !values.join('').trim()) {
+          body = [<span key="x1" className="gray">{this.formatMessage(messages.drafty_unknown)}</span>];
+        }
+        values = [<i key="x0" className="material-icons gray">extension</i>, ' '].concat(body);
+      }
+      break;
+  }
+  if (!el) {
+    return values;
+  }
+  return React.createElement(el, attr, values);
+}
+
+// Additional processing of image data.
+function handleImageData(el, data, attr) {
+  if (!data) {
+    attr.src = 'img/broken_image.png';
+    attr.style = {
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
+    };
+    return el;
+  }
+
+  attr.className = 'inline-image';
+  const dim = fitImageSize(data.width, data.height,
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+  attr.style = {
+    width: dim.dstWidth + 'px',
+    height: dim.dstHeight + 'px',
+    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+    minWidth: dim.dstWidth + 'px',
+    minHeight: dim.dstHeight + 'px'
+  };
+  if (!Drafty.isProcessing(data)) {
+    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'image'));
+    attr.alt = data.name;
+    if (attr.src) {
+      if (Math.max(data.width || 0, data.height || 0) > IMAGE_THUMBNAIL_DIM) {
+        // Allow previews for large enough images.
+        attr.onClick = this.onImagePreview;
+        attr.className += ' image-clickable';
+      }
+      attr.loading = 'lazy';
+    } else {
+      attr.src = null;
+    }
+  } else {
+    // Use custom element instead of <img>.
+    el = UploadingImage;
+  }
+
+  return el;
+}
+
+// Additional processing of image data.
+function handleVideoData(el, data, attr) {
+  if (!data) {
+    attr.src = 'img/broken_video.png';
+    attr.style = {
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
+    };
+    return el;
+  }
+  attr.className = 'inline-image';
+  const dim = fitImageSize(data.width, data.height,
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: NO_DIMENSIONS_VIDEO, dstHeight: NO_DIMENSIONS_VIDEO};
+  attr.style = {
+    width: dim.dstWidth + 'px',
+    height: dim.dstHeight + 'px',
+    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+    minWidth: dim.dstWidth + 'px',
+    minHeight: dim.dstHeight + 'px'
+  };
+  if (!Drafty.isProcessing(data)) {
+    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'image'));
+    attr.alt = data.name;
+    if (data.ref || data.val) {
+      attr.onClick = this.onVideoPreview;
+      attr.loading = 'lazy';
+    }
+    el = InlineVideo;
+  } else {
+    // Use custom element instead of <img>.
+    el = UploadingImage;
+  }
+
+  return el;
+}
+
+// Converts Drafty object into a one-line preview. 'this' is set by the caller.
+// 'this' must contain:
+//    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
+export function previewFormatter(style, data, values, key) {
+  if (!style) {
+    // Unformatted.
+    return values;
+  }
+
+  let el = Drafty.tagName(style);
+  const attr = { key: key };
+  switch (style) {
+    case 'AU':
+      // Voicemail as '[mic] 0:00'.
+      el = React.Fragment;
+      values = [<i key="au" className="material-icons">mic</i>, ' ', secondsToTime(data.duration/1000)];
+      break;
+    case 'BR':
+      // Replace new line with a space.
+      el = React.Fragment;
+      values = [' '];
+      break;
+    case 'HL':
+      // Make highlight less prominent in preview.
+      attr.className = 'highlight preview';
+      break;
+    case 'LN':
+    case 'MN':
+      // Disable links in previews.
+      el = 'span';
+      break;
+    case 'IM':
+      // Replace image with '[icon] Image'.
+      el = React.Fragment;
+      values = [<i key="im" className="material-icons">photo</i>, ' ', this.formatMessage(messages.drafty_image)];
+      break;
+    case 'BN':
+      el = 'span';
+      attr.className = 'flat-button faux';
+      break;
+    case 'FM':
+      el = React.Fragment;
+      values = [<i key="fm" className="material-icons">dashboard</i>,
+        this.formatMessage(messages.drafty_form)].concat(' ', values || []);
+      break;
+    case 'RW':
+      el = React.Fragment;
+      break;
+    case 'EX':
+      if (data) {
+        if (data.mime == 'application/json') {
+          // Ignore JSON attachments: they are form response payloads.
+          return null;
+        }
+        // Clear payload.
+        delete data.val;
+        delete data.ref;
+      }
+      el = React.Fragment;
+      values = [<i key="ex" className="material-icons">attachment</i>, ' ', this.formatMessage(messages.drafty_attachment)];
+      break;
+    case 'VC':
+      el = CallStatus;
+      if (data) {
+        attr.callState = data.state;
+        attr.incoming = data.incoming;
+        attr.duration = data.duration;
+      }
+      values = null;
+      break;
+    case 'QQ':
+    case 'HD':
+      el = null;
+      values = null;
+      break;
+    case 'VD':
+      // Replace image with '[icon] Video'.
+      el = React.Fragment;
+      values = [<i key="im" className="material-icons">play_circle_outline</i>, ' ', this.formatMessage(messages.drafty_video)];
+      break;
+    default:
+      if (!el) {
+        // Unknown element.
+        el = React.Fragment;
+        values = [<i key="x0" className="material-icons gray">extension</i>, ' ', this.formatMessage(messages.drafty_unknown)];
+      }
+      break;
+  }
+  if (!el) {
+    return values;
+  }
+  return React.createElement(el, attr, values);
+};
+
+// Converts Drafty object into a quoted reply; 'this' is set by the caller.
+function inlineImageAttr(attr, data) {
+  attr.style = {
+    width: IMAGE_THUMBNAIL_DIM + 'px',
+    height: IMAGE_THUMBNAIL_DIM + 'px',
+    maxWidth: IMAGE_THUMBNAIL_DIM + 'px',
+    maxHeight: IMAGE_THUMBNAIL_DIM + 'px',
+  }
+  attr.className = 'inline-image';
+  attr.alt = this.formatMessage(messages.drafty_image);
+  if (!data) {
+    attr.src = 'img/broken_image.png';
+  } else {
+    attr.src = attr.src || 'img/broken_image.png';
+  }
+  attr.title = attr.alt;
+  return attr;
+}
+
+// Converts Drafty object into a quoted reply; 'this' is set by the caller.
+function inlineVideoAttr(attr, data) {
+  const dim = fitImageSize(data.width, data.height, VIDEO_THUMBNAIL_WIDTH, IMAGE_THUMBNAIL_DIM);
+  attr.style = {
+    width: dim.width + 'px',
+    height: dim.height + 'px',
+    maxWidth: VIDEO_THUMBNAIL_WIDTH + 'px',
+    maxHeight: IMAGE_THUMBNAIL_DIM + 'px',
+  }
+  attr.className = 'inline-image';
+  attr.alt = this.formatMessage(messages.drafty_video);
+  attr.title = attr.alt;
+  if (!data) {
+    attr.src = 'img/broken_video.png';
+  } else {
+    attr.src = attr.src || 'img/broken_video.png';
+  }
+  return attr;
+}
+
+// Displays a portion of Drafty within 'QQ' quotes. 'this' is set by the caller.
+// 'this' must contain:
+//    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
+//    authorizeURL: this.props.tinode.authorizeURL
+//    onQuoteClick: this.handleQuoteClick (optional)
+function quoteFormatter(style, data, values, key) {
+  if (['BR', 'EX', 'IM', 'MN', 'VD'].includes(style)) {
+    let el = Drafty.tagName(style);
+    let attr = Drafty.attrValue(style, data) || {};
+    attr.key = key;
+    switch(style) {
+      case 'BR':
+        values = null;
+        break;
+      case 'IM':
+        attr = inlineImageAttr.call(this, attr, data);
+        values = [React.createElement('img', attr, null), ' ', attr.alt];
+        el = React.Fragment;
+        // Fragment attributes.
+        attr = {key: key};
+        break;
+      case 'VD':
+        attr = inlineVideoAttr.call(this, attr, data);
+        values = [React.createElement('img', attr, null), ' ', attr.alt];
+        el = React.Fragment;
+        // Fragment attributes.
+        attr = {key: key};
+        break;
+      case 'MN':
+        el = 'span';
+        attr.className = 'mention'
+        if (data) {
+          attr.className += ' ' + idToColorClass(data.val, false, true);
+        }
+        break;
+      case 'EX':
+        let fname;
+        if (data) {
+          if (data.mime == 'application/json') {
+            // Ignore JSON attachments: they are form response payloads.
+            return null;
+          }
+          fname = data.name;
+          // Clear payload.
+          delete data.val;
+          delete data.ref;
+        }
+        el = React.Fragment;
+        values = [<i key="ex" className="material-icons">attachment</i>,
+          shortenFileName(fname, 16) || this.formatMessage(messages.drafty_attachment)];
+        break;
+    }
+    return React.createElement(el, attr, values);
+  }
+  return previewFormatter.call(this, style, data, values, key);
+}
+
+// Create image thumbnail suitable for inclusion in a quote.
+function quoteImageOrVideo(data, isVideo) {
+  let promise;
+  let bits, ref, mime;
+  if (isVideo) {
+    bits = data.preview;
+    mime = data.premime || 'image/jpeg';
+    ref = data.preref;
+  } else {
+    bits = data.val;
+    mime = data.mime;
+    ref = data.ref;
+  }
+  // Get the blob from the image data.
+  if (bits) {
+    const blob = base64ToBlob(bits, mime);
+    if (!blob) {
+      throw new Error("Invalid image");
+    }
+    promise = Promise.resolve(blob);
+  } else if (ref) {
+    promise = fetch(this.authorizeURL(sanitizeUrlForMime(ref, 'image')))
+      .then(evt => {
+        if (evt.ok) {
+          return evt.blob();
+        } else {
+          throw new Error(`Image fetch unsuccessful: ${evt.status} ${evt.statusText}`);
+        }
+      });
+  } else {
+    throw new Error("Missing image data");
+  }
+
+  // Scale the blob.
+  return promise
+    .then(blob => {
+      // If it's an image, cut the square from the center of the image and shrink it.
+      // If it's a video, allow it to be rectantular.
+      return imageScaled(blob, isVideo ? VIDEO_THUMBNAIL_WIDTH : IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, !isVideo)
+    }).then(scaled => {
+      if (isVideo) {
+        data.premime = scaled.mime;
+      } else {
+        data.mime = scaled.mime;
+      }
+      data.size = scaled.blob.size;
+      data.width = scaled.width;
+      data.height = scaled.height;
+      delete data.ref;
+      delete data.preref;
+      // Keeping the original file name, if provided: ex.data.name;
+
+      data.src = URL.createObjectURL(scaled.blob);
+      return blobToBase64(scaled.blob);
+    }).then(b64 => {
+      if (isVideo) {
+        data.preview = b64.bits;
+      } else {
+        data.val = b64.bits;
+      }
+      return data;
+    }).catch(err => {
+      delete data.val;
+      delete data.preview;
+      delete data.src;
+      data.width = IMAGE_THUMBNAIL_DIM;
+      data.height = IMAGE_THUMBNAIL_DIM;
+      // Rethrow.
+      throw err;
+    });
+}
+
+// Create a preview of a reply.
+export function replyFormatter(style, data, values, key, stack) {
+  if (style == 'IM' || style == 'VD') {
+    const isImage = style == 'IM';
+    const attr = isImage ? inlineImageAttr.call(this, {key: key}, data) :
+      inlineVideoAttr.call(this, {key: key}, data);
+
+    let loadedPromise;
+    try {
+      loadedPromise = cancelablePromise(quoteImageOrVideo.call(this, data, style == 'VD'));
+    } catch (error) {
+      console.warn("Failed to quote image:", error.message);
+      loadedPromise = cancelablePromise(error);
+    }
+    attr.whenDone = loadedPromise;
+    values = [React.createElement(LazyImage, attr, null), ' ', attr.alt];
+    return React.createElement(React.Fragment, {key: key}, values);
+  } else if (style == 'QQ') {
+    if (stack.includes('QQ')) {
+      // Quote inside quote when forwarding a message.
+      return React.createElement('span', {key: key},
+        [<i key="qq" className="material-icons">format_quote</i>, ' ']);
+    }
+
+    const attr = Drafty.attrValue('QQ', data) || {};
+    attr.key = key;
+    attr.className = 'reply-quote'
+    return React.createElement(Drafty.tagName('QQ'), attr, values);
+  }
+  return quoteFormatter.call(this, style, data, values, key);
+}

src/lib/host-name.js

@@ -0,0 +1,29 @@
+import { KNOWN_HOSTS, DEFAULT_HOST } from '../config.js';
+
+// Detect server address from the URL
+export function detectServerAddress() {
+  let host = DEFAULT_HOST;
+  if (typeof window.location == 'object') {
+    if (window.location.protocol == 'file:' || window.location.hostname == 'localhost') {
+      host = KNOWN_HOSTS.local;
+    } else if (window.location.hostname) {
+      host = window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+    }
+  }
+  return host;
+}
+
+// Detect if the page is served over HTTPS.
+export function isSecureConnection() {
+  if (typeof window.location == 'object') {
+    return window.location.protocol == 'https:';
+  }
+  return false;
+}
+
+export function isLocalHost() {
+  if (typeof window.location == 'object') {
+    return window.location.hostname == 'localhost';
+  }
+  return false;
+}

src/lib/local-storage.js

@@ -0,0 +1,26 @@
+// Helper functions for storing values in localStorage.
+// By default localStorage can store only strings, not objects or other types.
+
+export default class LocalStorageUtil {
+  // Replace old object with the new one.
+  static setObject(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  // Get stored object.
+  static getObject(key) {
+    const value = localStorage.getItem(key);
+    return value && JSON.parse(value);
+  }
+
+  // Partially or wholly update stored object.
+  static updateObject(key, value) {
+    const oldVal = this.getObject(key);
+    this.setObject(key, Object.assign(oldVal || {}, value));
+  }
+
+  // Just a wrapper.
+  static removeItem(key) {
+    localStorage.removeItem(key);
+  }
+}

src/lib/navigation.js

@@ -0,0 +1,79 @@
+// Utility class for hash navigation.
+
+export default class HashNavigation {
+  // Parse hash as in http://www.example.com/path#hash as if it were
+  // path and arguments.
+  static parseUrlHash(hash) {
+    // Split path from args, path -> parts[0], args->path[1]
+    const parts = hash.split('?', 2);
+    const params = {};
+    let path = [];
+    if (parts[0]) {
+      path = parts[0].replace('#', '').split('/');
+    }
+    if (parts[1]) {
+      parts[1].split('&').forEach((arg) => {
+        // Can't use split() because the value may contain '='.
+        const eq = arg.indexOf('=');
+        if (eq > 0) {
+          params[arg.slice(0, eq)] = decodeURIComponent(arg.slice(eq + 1));
+        }
+      });
+    }
+    return {path: path, params: params};
+  }
+
+  static navigateTo(url) {
+    window.location.hash = url;
+  }
+
+  static composeUrlHash(path, params) {
+    let url = path.join('/');
+    const args = [];
+    for (const key in params) {
+      if (params.hasOwnProperty(key)) {
+        args.push(key + '=' + encodeURIComponent(params[key]));
+      }
+    }
+    if (args.length > 0) {
+      url += '?' + args.join('&');
+    }
+    return url;
+  }
+
+  static addUrlParam(hash, key, value) {
+    const parsed = HashNavigation.parseUrlHash(hash);
+    parsed.params[key] = value;
+    return HashNavigation.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static removeUrlParam(hash, key) {
+    const parsed = HashNavigation.parseUrlHash(hash);
+    delete parsed.params[key];
+    return HashNavigation.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlSidePanel(hash, sidepanel) {
+    const parsed = HashNavigation.parseUrlHash(hash);
+    parsed.path[0] = sidepanel;
+    return HashNavigation.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlInfoPanel(hash, infopanel) {
+    const parsed = HashNavigation.parseUrlHash(hash);
+    if (infopanel) {
+      parsed.params.info = infopanel;
+    } else {
+      delete parsed.params.info;
+    }
+    return HashNavigation.composeUrlHash(parsed.path, parsed.params);
+  }
+
+  static setUrlTopic(hash, topic) {
+    const parsed = HashNavigation.parseUrlHash(hash);
+    parsed.path[1] = topic;
+    // Close InfoView on topic change.
+    delete parsed.params.info;
+    return HashNavigation.composeUrlHash(parsed.path, parsed.params);
+  }
+}

src/lib/strformat.js

@@ -0,0 +1,110 @@
+// Short representation of time in the past.
+export function shortDateFormat(then, locale) {
+  locale = locale || window.navigator.userLanguage || window.navigator.language;
+  const now = new Date();
+  if (then.getFullYear() == now.getFullYear()) {
+    // Same year.
+    if (then.getMonth() == now.getMonth() && then.getDate() == now.getDate()) {
+      // Same month and day, show time only.
+      return then.toLocaleTimeString(locale, {hour12: false, hour: '2-digit', minute: '2-digit'});
+    }
+    // Different month and/or day, show month day, time.
+    return then.toLocaleDateString(locale,
+      {hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
+  }
+  // Different year: just show the date.
+  return then.toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
+}
+
+// Representation a date relative to now.
+export function relativeDateFormat(then, locale) {
+  locale = locale || window.navigator.userLanguage || window.navigator.language;
+  const now = new Date();
+  const thenDays = Math.floor((then.getTime() - then.getTimezoneOffset() * 60_000) / 86_400_000);
+  const nowDays = Math.floor((now.getTime() - now.getTimezoneOffset() * 60_000) / 86_400_000);
+  const diff = thenDays - nowDays;
+  if (Math.abs(diff) < 2) {
+    // Today or yesterday.
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(diff, 'day')
+  }
+  // More than two days: just show the date.
+  return new Intl.DateTimeFormat(locale).format(then);
+}
+
+// Convert seconds to [hours:]minutes:seconds, i.e. 156 sec -> 2:36, 3756 sec -> 1:02:36.
+// If <code>fixedMins</code> is true, then minutes are represented by at least two digits.
+export function secondsToTime(seconds, fixedMin) {
+  if (typeof seconds != 'number') {
+    return '';
+  }
+
+  let min = (Math.floor(seconds / 60) | 0) % 60;
+  let hours = Math.floor(seconds / 3600) | 0;
+
+  if (fixedMin || hours > 0) {
+    min = min < 10 ? `0${min}` : min;
+  }
+  let sec = (seconds | 0) % 60;
+  sec = sec < 10 ? `0${sec}` : sec;
+  if (hours == 0) {
+    return `${min}:${sec}`;
+  }
+  return `${hours}:${min}:${sec}`;
+}
+
+// Convert a number of bytes to human-readable format.
+export function bytesToHumanSize(bytes) {
+  if (!bytes || bytes == 0) {
+    return '0 Bytes';
+  }
+
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  const bucket = Math.min(Math.floor(Math.log2(bytes) / 10) | 0, sizes.length-1);
+  const count = bytes / Math.pow(1024, bucket);
+  const round = bucket > 0 ? (count < 3 ? 2 : (count < 30 ? 1 : 0)) : 0;
+  return count.toFixed(round) + ' ' + sizes[bucket];
+}
+
+// Shorten a file name to be under maxLength by clipping out the middle.
+export function shortenFileName(filename, maxLength) {
+  if (typeof filename != 'string') {
+    return filename;
+  }
+  return filename.length > maxLength ?
+    filename.slice(0, maxLength/2 - 1) + '…' + filename.slice(1 - maxLength/2) : filename;
+}
+
+// Get 32 bit integer hash value for a string. Ideally it should produce the same value
+// as Java's String#hash().
+function stringToColorHash(value) {
+  let hash = 0;
+  value = '' + value;
+  for (let i = 0; i < value.length; i++) {
+    hash = ((hash << 5) - hash) + value.charCodeAt(i);
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+}
+
+// User avatar letter color id.
+export function letterTileColorId(userId) {
+  return Math.abs(stringToColorHash(userId)) % 16;
+}
+
+// Converts user or topic ID to a CSS color class. Ideally it should produce the same color value as Java version.
+// params:
+// - {string} id: user or topic ID
+// - {boolean} light: light or dark version of the color.
+// - {boolean} fg: foreground (text) or background color.
+export function idToColorClass(id, light, fg) {
+  return (light ? 'lt-' : 'dk-') + (fg ? 'fg-' : 'bg-') + letterTileColorId(id);
+}
+
+// Takes ISO Alpha-2 country code, like 'US' and converts it to a flag emoji.
+export function flagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 0x1F1A5 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}

src/lib/utils.js

@@ -0,0 +1,213 @@
+// Odds and ends
+
+import { Tinode } from 'tinode-sdk';
+
+// Make shortcut icon appear with a green dot + show unread count in title.
+export function updateFavicon(count) {
+  const oldIcon = document.getElementById('shortcut-icon');
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const newIcon = document.createElement('link');
+  newIcon.type = 'image/png';
+  newIcon.id = 'shortcut-icon';
+  newIcon.rel = 'shortcut icon';
+  newIcon.href = 'img/logo32x32' + (count > 0 ? 'a' : '') + '.png';
+  if (oldIcon) {
+    head.removeChild(oldIcon);
+  }
+  head.appendChild(newIcon);
+
+  document.title = (count > 0 ? '('+count+') ' : '') + 'Tinode';
+}
+
+// Create theCard which represents user's or topic's "public" info.
+export function theCard(fn, imageUrl, imageMimeType, note) {
+  let card = null;
+  fn = fn && fn.trim();
+  note = note && note.trim();
+
+  if (fn) {
+    card = {
+      fn: fn
+    };
+  }
+
+  if (typeof note == 'string') {
+    card = card || {};
+    card.note = note ? note : Tinode.DEL_CHAR;
+  }
+
+  if (imageUrl) {
+    card = card || {};
+    let mimeType = imageMimeType;
+    // Is this a data URL "data:[<mediatype>][;base64],<data>"?
+    const matches = /^data:(image\/[-a-z0-9+.]+)?(;base64)?,/i.exec(imageUrl);
+    if (matches) {
+      mimeType = matches[1];
+      card.photo = {
+        data: imageUrl.substring(imageUrl.indexOf(',') + 1),
+        ref: Tinode.DEL_CHAR
+      };
+    } else {
+      card.photo = {
+        data: Tinode.DEL_CHAR,
+        ref: imageUrl
+      };
+    }
+    card.photo.type = (mimeType || 'image/jpeg').substring('image/'.length);
+  }
+
+  return card;
+}
+
+// Deep-shallow compare two arrays: shallow compare each element.
+export function arrayEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  if (!Array.isArray(a) || !Array.isArray(b)) {
+    return false;
+  }
+
+  // Compare lengths first.
+  if (a.length != b.length) {
+    return false;
+  }
+  // Order of elements is ignored.
+  a.sort();
+  b.sort();
+  for (let i = 0, l = a.length; i < l; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Checks (loosely) if the given string is a phone. If so, returns the phone number in a format
+// as close to E.164 as possible.
+export function asPhone(val) {
+  val = val.trim();
+  if (/^(?:\+?(\d{1,3}))?[- (.]*(\d{3})[- ).]*(\d{3})[- .]*(\d{2})[- .]*(\d{2})?$/.test(val)) {
+    return val.replace(/[- ().]*/, '');
+  }
+  return null;
+}
+
+// Checks (loosely) if the given string is an email. If so returns the email.
+export function asEmail(val) {
+  val = val.trim();
+  if (/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(val)) {
+    return val;
+  }
+  return null;
+}
+
+// Checks if URL is a relative url, i.e. has no 'scheme://', including the case of missing scheme '//'.
+// The scheme is expected to be RFC-compliant, e.g. [a-z][a-z0-9+.-]*
+// example.html - ok
+// https:example.com - not ok.
+// http:/example.com - not ok.
+// ' ↲ https://example.com' - not ok. (↲ means carriage return)
+export function isUrlRelative(url) {
+  return url && !/^\s*([a-z][a-z0-9+.-]*:|\/\/)/im.test(url);
+}
+
+// Ensure URL does not present an XSS risk. Optional allowedSchemes may contain an array of
+// strings with permitted URL schemes, such as ['ftp', 'ftps']; otherwise accept http and https only.
+export function sanitizeUrl(url, allowedSchemes) {
+  if (typeof url != 'string') {
+    return url;
+  }
+
+  // Strip control characters and whitespace. They are not valid URL characters anyway.
+  url = url.replace(/[^\x20-\x7E]/gmi, '').trim();
+
+  // Relative URLs are safe.
+  // Relative URL does not start with ':', abcd123: or '//'.
+  if (!/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(url)) {
+    return url;
+  }
+
+  // Blob URLs are safe.
+  if (/^blob:http/.test(url)) {
+    return url;
+  }
+
+  // Absolute URL. Accept only safe schemes, or no scheme.
+  const schemes = Array.isArray(allowedSchemes) ? allowedSchemes.join('|') : 'http|https';
+  const re = new RegExp('^((' + schemes + '):|//)', 'i');
+  if (!re.test(url)) {
+    return null;
+  }
+
+  return url;
+}
+
+// Ensure URL is suitable as a source like <img src="url"> field: the URL must be a relative URL or
+// have http:, https:, blob: or data: scheme.
+// In case of data: scheme, the URL must must be of the right MIME type such as 'data:{mimeMajor}/XXXX;base64,'.
+export function sanitizeUrlForMime(url, mimeMajor) {
+  if (!url) {
+    return null;
+  }
+
+  const sanitizedUrl = sanitizeUrl(url);
+  if (sanitizedUrl) {
+    return sanitizedUrl;
+  }
+
+  // Is this a data: URL of the appropriate mime type?
+  const re = new RegExp(`data:${mimeMajor}\/[a-z0-9.-]+;base64,`, 'i');
+  if (re.test(url.trim())) {
+    return url;
+  }
+
+  return null;
+}
+
+// Given message's received status, return name and color of a delivery indicator icon.
+export function deliveryMarker(received) {
+  switch (received) {
+    case Tinode.MESSAGE_STATUS_SENDING:
+      return { name: 'access_time' }; // watch face
+    case Tinode.MESSAGE_STATUS_FAILED:
+    case Tinode.MESSAGE_STATUS_FATAL:
+      return { name: 'warning', color: 'danger-color' }; // yellow icon /!\
+    case Tinode.MESSAGE_STATUS_SENT:
+      return { name: 'done' }; // checkmark
+    case Tinode.MESSAGE_STATUS_RECEIVED:
+      return { name: 'done_all' }; // double checkmark
+    case Tinode.MESSAGE_STATUS_READ:
+      return { name: 'done_all', color: 'blue' }; // blue double checkmark
+  }
+  return null;
+}
+
+// Wraps a promise to make it cancelable.
+// The parameter can be either a promise or an error. If it's an error, the wrapped promise is
+// created in a rejected state.
+export function cancelablePromise(promise) {
+  let hasCanceled = false;
+
+  const wrappedPromise = promise instanceof Error ?
+    Promise.reject(promise) :
+    new Promise((resolve, reject) => {
+      promise.then(
+        result => hasCanceled ? reject({isCanceled: true}) : resolve(result),
+        error => hasCanceled ? reject({isCanceled: true}) : reject(error)
+      );
+    });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled = true;
+    },
+  };
+};
+
+// Clips string to the specified length.
+export function clipStr(str, length) {
+  return str && str.substring(0, length);
+}

src/version.js

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

src/views/acc-notifications-view.jsx

@@ -0,0 +1,61 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+
+export default class EditAccountView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
+  }
+
+  handleCheckboxClick(what, checked) {
+    if (what == 'sound') {
+      this.props.onToggleMessageSounds(checked);
+    } else if (what == 'alert') {
+      this.props.onTogglePushNotifications(checked);
+    } else if (what == 'incognito') {
+      this.props.onToggleIncognitoMode(checked);
+    }
+  }
+
+  render() {
+    return (
+        <div className="scrollable-panel">
+          <div className="panel-form-row">
+            <label htmlFor="message-sound">
+              <FormattedMessage id="label_message_sound" defaultMessage="Message sound:"
+                description="Label for message sounds toggle" />
+            </label>
+            <CheckBox name="sound" id="message-sound"
+              checked={this.props.messageSounds} onChange={this.handleCheckboxClick} />
+          </div>
+          <div className="panel-form-row">
+            <label htmlFor="desktop-alerts">
+            {this.props.desktopAlertsEnabled ?
+              <FormattedMessage id="label_push_notifications" defaultMessage="Notification alerts:"
+                description="Label for push notifications switch" />
+              :
+              <FormattedMessage id="label_push_notifications_disabled"
+                defaultMessage="Notification alerts (requires HTTPS):"
+                description="Label for push notifications switch" />
+            }
+            </label>
+            <CheckBox name="alert" id="desktop-alerts"
+              checked={this.props.desktopAlerts}
+              onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
+          </div>
+          <div className="panel-form-row">
+            <label htmlFor="incognito-mode">
+              <FormattedMessage id="label_incognito_mode" defaultMessage="Incognito mode:"
+                description="Label for incognito mode toggle" />
+            </label>
+            <CheckBox name="incognito" id="incognito-mode"
+              checked={this.props.incognitoMode} onChange={this.handleCheckboxClick} />
+          </div>
+        </div>
+    );
+  }
+};

src/views/acc-security-view.jsx

@@ -0,0 +1,155 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import InPlaceEdit from '../widgets/in-place-edit.jsx';
+import PermissionsEditor from '../widgets/permissions-editor.jsx';
+
+const messages = defineMessages({
+  delete_account: {
+    id: 'delete_account',
+    defaultMessage: 'Delete account',
+    description: 'Title for delete account warning'
+  },
+  delete_account_warning: {
+    id: 'delete_account_warning',
+    defaultMessage: 'Are you sure you want to delete your account? It cannot be undone.',
+    description: 'Warning message when deleting an account'
+  }
+});
+
+class AccSecurityView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const me = this.props.tinode.getMeTopic();
+    let blockedCount = 0;
+    me.contacts((c) => {
+      if (c.acs && !c.acs.isJoiner()) {
+        blockedCount ++;
+      }
+    });
+    const defacs = me.getDefaultAccess();
+    this.state = {
+      auth: defacs ? defacs.auth : null,
+      anon: defacs ? defacs.anon : null,
+      showPermissionEditorFor: undefined,
+      blockedCount: blockedCount,
+    };
+
+    this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
+    this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
+    this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
+    this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
+    this.handleDeleteAccount = this.handleDeleteAccount.bind(this);
+  }
+
+  handlePasswordUpdate(pwd) {
+    this.setState({password: pwd});
+    this.props.onUpdatePassword(pwd);
+  }
+
+  handleLaunchPermissionsEditor(which) {
+    this.setState({
+      showPermissionEditorFor: which,
+      editedPermissions: this.state[which]
+    });
+  }
+
+  handleHidePermissionsEditor() {
+    this.setState({showPermissionEditorFor: undefined});
+  }
+
+  handlePermissionsChanged(perm) {
+    let defacs = {};
+    defacs[this.state.showPermissionEditorFor] = perm;
+    this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);
+
+    let newState = {showPermissionEditorFor: undefined};
+    newState[this.state.showPermissionEditorFor] = perm;
+    this.setState(newState);
+  }
+
+  handleDeleteAccount(e) {
+    e.preventDefault();
+    const {formatMessage} = this.props.intl;
+    this.props.onShowAlert(
+      formatMessage(messages.delete_account), // title
+      formatMessage(messages.delete_account_warning), // content
+      (_ => this.props.onDeleteAccount()), // onConfirm
+      null, // use default text "OK"
+      true, // Show Reject button
+      null  // use default text "Cancel"
+    );
+  }
+
+  render() {
+    return (
+      <>{this.state.showPermissionEditorFor ?
+        <PermissionsEditor
+          mode={this.state.editedPermissions}
+          skip="O"
+          onSubmit={this.handlePermissionsChanged}
+          onCancel={this.handleHidePermissionsEditor} />
+        :
+        <div className="scrollable-panel">
+          <div className="panel-form-column">
+            <label className="small">
+              <FormattedMessage id="label_password" defaultMessage="Password"
+                  description="Label for password editing" />
+            </label>
+            <div>
+              <FormattedMessage id="password_unchanged_prompt" defaultMessage="Unchanged"
+                description="Message in editor while password is unchanged">{
+                (password_unchanged) => <InPlaceEdit
+                  placeholder={password_unchanged}
+                  type="password"
+                  onFinished={this.handlePasswordUpdate} />
+              }</FormattedMessage>
+            </div>
+          </div>
+          <div className="hr" />
+          <div className="panel-form-column">
+            <a href="#" className="danger flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
+              <i className="material-icons">exit_to_app</i> &nbsp;<FormattedMessage id="button_logout"
+                defaultMessage="Logout" description="Button [Logout]" />
+            </a>
+            <a href="#" className="danger flat-button" onClick={(e) => {this.handleDeleteAccount(e);}}>
+              <i className="material-icons">delete</i> &nbsp;<FormattedMessage id="button_delete_account"
+                defaultMessage="Delete account" description="Button [Delete account]" />
+            </a>
+          </div>
+          <div className="hr" />
+          <div className="panel-form-column">
+            <div>
+              <label className="small">
+                <FormattedMessage id="label_default_access_mode" defaultMessage="Default access mode:"
+                  description="Label for default access mode" />
+              </label>
+            </div>
+            <div className="quoted">
+              <div>Auth: <tt className="clickable"
+                onClick={this.handleLaunchPermissionsEditor.bind(this, 'auth')}>{this.state.auth}</tt></div>
+              <div>Anon: <tt className="clickable"
+                onClick={this.handleLaunchPermissionsEditor.bind(this, 'anon')}>{this.state.anon}</tt></div>
+            </div>
+          </div>
+          {this.state.blockedCount > 0 ?
+            <>
+              <div className="hr" />
+              <div className="panel-form-row">
+                <i className="material-icons">block</i>&nbsp;
+                <a href="#" className="gray" onClick={(e) => {e.preventDefault(); this.props.onShowBlocked();}}>
+                  <FormattedMessage id="blocked_contacts_link" defaultMessage="Blocked contacts ({count})"
+                    values={{ count: this.state.blockedCount }} description="Blocked contacts link" />
+                </a>
+              </div>
+            </>
+            : null }
+        </div>
+      }</>
+    );
+  }
+};
+
+export default injectIntl(AccSecurityView);

src/views/acc-support-view.jsx

@@ -0,0 +1,51 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import { APP_NAME, LINK_CONTACT_US, LINK_PRIVACY_POLICY, LINK_TERMS_OF_SERVICE } from '../config.js';
+
+export default class AccSupportView extends React.PureComponent {
+  render() {
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          <a href={LINK_CONTACT_US} className="flat-button" target="_blank">
+            <i className="material-icons">email</i> &nbsp;<FormattedMessage id="link_contact_us"
+              defaultMessage="Contact Us" description="Ancor text for contacting us by email" />
+          </a>
+          <a href={LINK_TERMS_OF_SERVICE} className="flat-button" target="_blank">
+            <i className="material-icons">description</i> &nbsp;<FormattedMessage id="link_terms_of_service"
+              defaultMessage="Terms of Service" description="Ancor text for terms of service link" />
+          </a>
+          <a href={LINK_PRIVACY_POLICY} className="flat-button" target="_blank">
+            <i className="material-icons">policy</i> &nbsp;<FormattedMessage id="link_privacy_policy"
+              defaultMessage="Privacy Policy" description="Ancor text for privacy policy link" />
+          </a>
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_client" defaultMessage="Client:"
+              description="Label for a client version" /></label>
+            {APP_NAME}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_sdk" defaultMessage="SDK:" /></label>
+            {Tinode.getLibrary()}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_server" defaultMessage="Server:"
+              description="Label for a server version" /></label>
+            {this.props.serverVersion}
+          </div>
+          <div className="panel-form-row">
+            <label className="small"><FormattedMessage id="label_server_address" defaultMessage="Server address:" /></label>
+            {this.props.serverAddress}
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

src/views/account-settings-view.jsx

@@ -0,0 +1,152 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { parsePhoneNumber } from 'libphonenumber-js/mobile';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+import CredentialEdit from '../widgets/credential-edit.jsx';
+
+function _clip(str, length) {
+  return str && str.substring(0, length);
+}
+
+export default class AccountSettingsView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const me = this.props.tinode.getMeTopic();
+    this.state = {
+      fullName: _clip(me.public ? me.public.fn : undefined, MAX_TITLE_LENGTH),
+      description: _clip(me.public ? me.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(me.public ? me.public.photo : null),
+      credentials: me.getCredentials() || [],
+      credEdit: undefined
+    };
+  }
+
+  componentDidMount() {
+    const me = this.props.tinode.getMeTopic();
+    me.onCredsUpdated = _ => this.setState({credentials: me.getCredentials()});
+  }
+
+  componentWillUnmount() {
+    const me = this.props.tinode.getMeTopic();
+    me.onCredsUpdated = null;
+  }
+
+  render() {
+    if (this.state.credEdit) {
+      return (
+        <CredentialEdit
+          method={this.state.credEdit.meth}
+          val={this.state.credEdit.val}
+          done={this.state.credEdit.done}
+          onShowCountrySelector={this.props.onShowCountrySelector}
+          onSubmit={this.props.onCredAdd}
+          onCancel={_ => this.setState({credEdit: undefined})}
+          onError={this.props.onError} />
+      );
+    }
+
+    const credentials = [];
+    this.state.credentials.forEach((cred, idx) => {
+      if (!['email', 'tel'].includes(cred.meth)) {
+        // Skip unknown methods.
+        return ;
+      }
+
+      let val = cred.val
+      if (cred.meth == 'tel') {
+        const number = parsePhoneNumber(cred.val);
+        val = number ? number.formatInternational() : cred.val;
+      }
+
+      credentials.push(
+        <div className="group quoted" key={idx}>
+          <tt className="clickable" onClick={e => {e.preventDefault(); this.setState({credEdit: cred});}}>{val}</tt>
+          <span> {
+            cred.done ? null :
+            <>
+              <i className="material-icons">pending</i>&nbsp;
+              <a href="#" onClick={e => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}>
+                <i className="material-icons">delete</i>
+              </a>
+            </>
+          }</span>
+        </div>);
+    });
+    if (credentials.length > 0) {
+      // Add title as the first element.
+      credentials.unshift(
+        <label className="small" key={'title'}>
+          <FormattedMessage id="label_user_contacts" defaultMessage="Contacts"
+            description="Label for user contacts" />
+        </label>);
+    }
+
+    return (
+      <div className="scrollable-panel">
+        <div className="panel-form-column">
+          <a href="#" className="flat-button float-right" onClick={e => {e.preventDefault(); this.props.onNavigate('general');}}>
+            <i className="material-icons">edit</i>&nbsp;
+            <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+          </a>
+          <center>
+            <AvatarUpload
+              tinode={this.props.tinode}
+              avatar={this.state.avatar}
+              readOnly={true}
+              uid={this.props.myUserId}
+              title={this.state.fullName} />
+          </center>
+          <div className="group">
+            <label className="small">
+              <FormattedMessage id="label_your_name" defaultMessage="Your name"
+                description="Label for full name editing" />
+            </label>
+            <div className="large ellipsized">{this.state.fullName}</div>
+          </div>
+          <div className="group">
+            <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+              description="Label for user address (ID)" /></label>&nbsp;
+            <tt>{this.props.myUserId}</tt>
+          </div>
+          <div className="group">
+            <BadgeList trustedBadges={this.props.trustedBadges} />
+          </div>
+          {this.state.description ?
+            <div className="group">
+              <label className="small">
+                <FormattedMessage id="label_description" defaultMessage="Description"
+                  description="Label for editing topic description" />
+              </label>
+              <div className="quoted">{this.state.description}</div>
+            </div> : null}
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <div className="group">{credentials}</div>
+        </div>
+        <div className="hr" />
+        <div className="panel-form-column">
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('notif');}}>
+            <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
+              defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
+          </a>
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('security');}}>
+            <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+              defaultMessage="Security" description="Navigaton button for security panel." />
+          </a>
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('support');}}>
+            <i className="material-icons">contact_support</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_support"
+              defaultMessage="Support" description="Sidepanel title for AccSupportView." />
+          </a>
+        </div>
+      </div>
+    );
+  }
+};

src/views/contacts-view.jsx

@@ -0,0 +1,106 @@
+/* ContactsView holds all contacts-related stuff */
+import React from 'react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+import ContactList from '../widgets/contact-list.jsx';
+
+import { updateFavicon } from '../lib/utils.js';
+
+const messages = defineMessages({
+  archived_contacts_title: {
+    id: "archived_contacts",
+    defaultMessage: "Archived contacts ({count})",
+    description: "Label for archived chats"
+  }
+});
+
+export default class ContactsView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleAction = this.handleAction.bind(this);
+
+    this.state = ContactsView.deriveStateFromProps(props);
+  }
+
+  static deriveStateFromProps(props) {
+    const contacts = [];
+    let unreadThreads = 0;
+    let archivedCount = 0;
+    props.chatList.forEach(c => {
+      const blocked = c.acs && !c.acs.isJoiner();
+      // Show only blocked contacts only when props.blocked == true.
+      if (blocked && props.blocked) {
+        contacts.push(c);
+      }
+      if (blocked || props.blocked) {
+        return;
+      }
+
+      if (c.private && c.private.arch) {
+        if (props.archive) {
+          contacts.push(c);
+        } else {
+          archivedCount ++;
+        }
+      } else if (!props.archive) {
+        contacts.push(c);
+        unreadThreads += c.unread > 0 ? 1 : 0;
+      }
+    });
+
+    contacts.sort((a, b) => {
+      return (b.touched || 0) - (a.touched || 0);
+    });
+
+    if (archivedCount > 0) {
+      contacts.push({
+        action: 'archive',
+        title: messages.archived_contacts_title,
+        values: {count: archivedCount}
+      });
+    }
+
+    return {
+      contactList: contacts,
+      unreadThreads: unreadThreads
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.chatList != this.props.chatList ||
+        prevProps.archive != this.props.archive ||
+        prevProps.blocked != this.props.blocked) {
+      const newState = ContactsView.deriveStateFromProps(this.props);
+      this.setState(newState);
+      if (newState.unreadThreads != prevState.unreadThreads) {
+        updateFavicon(newState.unreadThreads);
+      }
+    }
+  }
+
+  handleAction(action_ignored) {
+    this.props.onShowArchive();
+  }
+
+  render() {
+    return (
+      <FormattedMessage id="contacts_not_found"
+        defaultMessage="You have no chats<br />¯∖_(ツ)_/¯"
+        description="HTML message shown in ContactList when no contacts are found">{
+        (no_contacts) => <ContactList
+          tinode={this.props.tinode}
+          connected={this.props.connected}
+          contacts={this.state.contactList}
+          emptyListMessage={no_contacts}
+          topicSelected={this.props.topicSelected}
+          myUserId={this.props.myUserId}
+          showOnline={true}
+          showUnread={true}
+          onTopicSelected={this.props.onTopicSelected}
+          showContextMenu={this.props.showContextMenu}
+          onAction={this.handleAction} />
+      }</FormattedMessage>
+    );
+  }
+};

src/views/create-account-view.jsx

@@ -0,0 +1,228 @@
+// Account registration.
+import React, { Suspense } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import AvatarCrop from '../widgets/avatar-crop.jsx';
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import CheckBox from '../widgets/checkbox.jsx';
+import PhoneEdit from '../widgets/phone-edit.jsx';
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+import LocalStorageUtil from '../lib/local-storage.js';
+import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { theCard } from '../lib/utils.js';
+
+import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
+  MAX_TITLE_LENGTH } from '../config.js';
+
+export default class CreateAccountView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      login: '',
+      password: '',
+      meth: '',
+      email: '',
+      tel: '',
+      fn: '', // full/formatted name
+      imageUrl: null,
+      uploadUrl: null,
+      newAvatar: null,
+      newAvatarMime: null,
+      buttonDisabled: false,
+      saveToken: LocalStorageUtil.getObject('keep-logged-in')
+    };
+
+    this.handleLoginChange = this.handleLoginChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handlePhoneChange = this.handlePhoneChange.bind(this);
+    this.handleFnChange = this.handleFnChange.bind(this);
+    this.handleImageChanged = this.handleImageChanged.bind(this);
+    this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
+    this.handleAvatarCropped = this.handleAvatarCropped.bind(this);
+    this.handleAvatarCropCancel = this.handleAvatarCropCancel.bind(this);
+    this.uploadAvatar = this.uploadAvatar.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+
+    // Connection will trigger change by changing the this.props.serverVersion.
+    props.tinode.connect()
+      .catch(err => {
+        this.props.onError(err.message, 'err');
+      });
+  }
+
+  handleLoginChange(e) {
+    this.setState({login: e.target.value});
+  }
+
+  handlePasswordChange(password) {
+    this.setState({password: password});
+  }
+
+  handleEmailChange(e) {
+    this.setState({meth: 'email', email: e.target.value});
+  }
+
+  handlePhoneChange(number) {
+    this.setState({meth: 'tel', tel: number});
+  }
+
+  handleFnChange(e) {
+    this.setState({fn: e.target.value});
+  }
+
+  handleImageChanged(mime, img) {
+    this.setState({newAvatar: img, newAvatarMime: mime});
+  }
+
+  handleToggleSaveToken() {
+    LocalStorageUtil.setObject('keep-logged-in', !this.state.saveToken);
+    this.setState({saveToken: !this.state.saveToken});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.onCreateAccount(
+      this.state.login.trim(),
+      this.state.password.trim(),
+      theCard(this.state.fn.trim().substring(0, MAX_TITLE_LENGTH), this.state.uploadUrl),
+      {
+        'meth': this.state.meth,
+        'val': this.state.meth == 'email' ?
+          this.state.email :
+            this.state.meth == 'tel' ? this.state.tel : null
+      }
+    );
+  }
+
+  // AvatarCropView calls this method when the user has cropped the image.
+  handleAvatarCropped(mime, blob, width, height) {
+    const url = blob ? URL.createObjectURL(blob) : null;
+    this.setState({avatar: url, newAvatar: null, newAvatarMime: null});
+    if (blob) {
+      this.uploadAvatar(mime, blob, width, height);
+    }
+  }
+
+  handleAvatarCropCancel() {
+    this.setState({newAvatar: null, newAvatarMime: null});
+  }
+
+    // Utility method for converting cropped avatar blob to bytes for sending inband or
+  // for uploading it to the server out of band.
+  uploadAvatar(mime, blob, width, height) {
+    const readyToUpload = image => {
+      let {mime, blob} = image;
+      this.setState({imageUrl: URL.createObjectURL(blob), buttonDisabled: true});
+      if (blob.size > MAX_AVATAR_BYTES) {
+        // Too large to send inband - uploading out of band and sending as a link.
+        const uploader = this.props.tinode.getLargeFileHelper();
+        uploader.upload(blob, 'newacc')
+          .then(url => this.setState({uploadUrl: url}))
+          .catch(err => this.props.onError(err.message, 'err'))
+          .finally(_ => this.setState({buttonDisabled: false}));
+      } else {
+        // Convert blob to base64-encoded bits.
+        blobToBase64(blob)
+          .then(b64 => this.setState({uploadUrl: makeImageUrl({data: b64.bits, type: mime})}))
+          .finally(_ => this.setState({buttonDisabled: false}));
+      }
+    };
+
+    if (width > AVATAR_SIZE || height > AVATAR_SIZE || width != height) {
+      // Avatar is not square or too large even after cropping. Shrink it and make square.
+      imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true)
+        .then(scaled => readyToUpload(scaled))
+        .catch(err => this.props.onError(err.message, 'err'));
+    } else {
+      readyToUpload({mime: mime, blob: blob, width: width, height: height});
+    }
+  }
+
+  render() {
+    if (this.state.newAvatar) {
+      return (
+        <AvatarCrop
+          avatar={this.state.newAvatar}
+          mime={this.state.newAvatarMime}
+          onSubmit={this.handleAvatarCropped}
+          onCancel={this.handleAvatarCropCancel}
+          onError={this.props.onError} />
+      );
+    }
+
+    let submitClasses = 'primary';
+    if (this.props.disabled) {
+      submitClasses += ' disabled';
+    }
+
+    return (
+      <form className="panel-form-column" onSubmit={this.handleSubmit}>
+        <div className="panel-form-row">
+          <div className="umn">
+            <FormattedMessage id="login_prompt" defaultMessage="Login"
+              description="Placeholer for username/login">{
+              (login_prompt) => <input type="text" placeholder={login_prompt} autoComplete="user-name"
+                value={this.state.login} onChange={this.handleLoginChange} required autoFocus />
+            }</FormattedMessage>
+            <FormattedMessage id="password_prompt" defaultMessage="Password"
+              description="Placeholder/prompt for entering password">{
+              (password_prompt) => <VisiblePassword placeholder={password_prompt} autoComplete="new-password"
+                value={this.state.password} onFinished={this.handlePasswordChange}
+                required={true} />
+            }</FormattedMessage>
+          </div>
+          <AvatarUpload
+            tinode={this.props.tinode}
+            avatar={this.state.imageUrl}
+            onImageUpdated={this.handleImageChanged}
+            onError={this.props.onError} />
+        </div>
+        <div  className="panel-form-row">
+          <FormattedMessage id="full_name_prompt" defaultMessage="Full name, e.g. John Doe"
+            description="Input placeholder for person's full name">{
+            (full_name_prompt) => <input type="text" placeholder={full_name_prompt} autoComplete="name"
+              value={this.state.fn} onChange={this.handleFnChange} required/>
+          }</FormattedMessage>
+        </div>
+        {this.props.reqCredMethod == 'email' ?
+          <div className="panel-form-row">
+            <FormattedMessage id="email_prompt" defaultMessage="Email, e.g. jdoe@example.com"
+              description="Input placeholder for email entry">{
+              (email_prompt) => <input type="email" placeholder={email_prompt} autoComplete="email"
+                value={this.state.email} onChange={this.handleEmailChange} required/>
+            }</FormattedMessage>
+          </div>
+          : this.props.reqCredMethod == 'tel' ?
+          <><div className="panel-form-row">
+            <label className="small gray"><FormattedMessage id="mobile_phone_number" defaultMessage="Mobile phone number"
+              description="Prompt for entering a mobile phone number" /></label>
+          </div>
+          <div className="panel-form-row">
+            <PhoneEdit
+              autoFocus={false}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onSubmit={this.handlePhoneChange} />
+          </div></>
+          : null
+        }
+        <div className="panel-form-row">
+          <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
+            onChange={this.handleToggleSaveToken} />
+          <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in"
+            description="Label for a checkbox">{
+            (stay_logged_in) => <label htmlFor="save-token">&nbsp;{stay_logged_in}</label>
+          }</FormattedMessage>
+        </div>
+        <div className="dialog-buttons">
+          <button className={submitClasses} type="submit" disabled={this.state.buttonDisabled}>
+            <FormattedMessage id="button_sign_up" defaultMessage="Sign up"
+              description="Create account button [Sign Up]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};

src/views/info-view.jsx

@@ -0,0 +1,634 @@
+// InfoView: panel with topic/user info.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import { AccessMode, Tinode } from 'tinode-sdk';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import BadgeList from '../widgets/badge-list.jsx';
+import CheckBox from '../widgets/checkbox.jsx';
+import ContactList from '../widgets/contact-list.jsx';
+import ErrorPanel from '../widgets/error-panel.jsx';
+import GroupManager from '../widgets/group-manager.jsx';
+import MenuCancel from '../widgets/menu-cancel.jsx';
+import PermissionsEditor from '../widgets/permissions-editor.jsx';
+import TopicCommonView from './topic-common-view.jsx';
+import TopicSecurity from '../widgets/topic-security.jsx';
+
+import { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH, NO_ACCESS_MODE } from '../config.js';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { theCard, clipStr } from '../lib/utils.js';
+
+const messages = defineMessages({
+  info: {
+    id: 'panel_title_info',
+    description: 'Title for InfoView',
+    defaultMessage: 'Info'
+  },
+  general: {
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
+    defaultMessage: 'General'
+  },
+  security: {
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
+    defaultMessage: 'Security'
+  },
+  members: {
+    id: 'panel_title_members',
+    description: 'Title for managing group members view.',
+    defaultMessage: 'Members'
+  },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
+  perm_want: {
+    id: 'requested_permissions',
+    defaultMessage: 'Requested',
+    description: 'Title for permissions'
+  },
+  perm_given: {
+    id: 'granted_permissions',
+    defaultMessage: 'Granted',
+    description: 'Title for permissions'
+  },
+  perm_auth: {
+    id: 'permissions_authenticated',
+    defaultMessage: 'Authenticated',
+    description: 'Title for editing default authenticated permissions'
+  },
+  perm_anon: {
+    id: 'permissions_anonymous',
+    defaultMessage: 'Anonymous',
+    description: 'Title for editing default anonymous permissions'
+  },
+  perm_user: {
+    id: 'permissions_user',
+    defaultMessage: 'User\'s Permissions',
+    description: 'Title for editing user\'s permissions'
+  },
+  edit_permissions: {
+    id: 'menu_item_edit_permissions',
+    defaultMessage: 'Edit permissions',
+    description: 'Menu item [Edit permissions]'
+  },
+});
+
+class InfoView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      topic: null,
+      owner: false,
+      admin: false,
+      sharer: false,
+      deleter: false,
+      muted: false,
+      address: null,
+      groupTopic: undefined,
+      channel: undefined,
+      fullName: undefined,
+      description: undefined,
+      avatar: null,
+      private: null,
+      selectedContact: null,
+      access: null,
+      modeGiven: null,
+      modeWant: null,
+      modeGiven2: null, // P2P topic, the other user mode given
+      modeWant2: null,  // P2P topic, the other user mode want
+      auth: null,
+      anon: null,
+      contactList: [],
+      trustedBadges: [],
+      previousMetaDesc: undefined,
+      previousSubsUpdated: undefined,
+    };
+
+    this.resetSubs = this.resetSubs.bind(this);
+    this.resetDesc = this.resetDesc.bind(this);
+    this.resetTags = this.resetTags.bind(this);
+    this.onMetaDesc = this.onMetaDesc.bind(this);
+    this.onSubsUpdated = this.onSubsUpdated.bind(this);
+    this.handleImageChanged = this.handleImageChanged.bind(this);
+    this.handleMuted = this.handleMuted.bind(this);
+    this.handleUnarchive = this.handleUnarchive.bind(this);
+    this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
+    this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);
+    this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
+    this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
+    this.handleMemberSelected = this.handleMemberSelected.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.handleBackNavigate = this.handleBackNavigate.bind(this);
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    if (this.onMetaDesc != topic.onMetaDesc) {
+      this.previousMetaDesc = topic.onMetaDesc;
+      topic.onMetaDesc = this.onMetaDesc;
+
+      this.previousSubsUpdated = topic.onSubsUpdated;
+      topic.onSubsUpdated = this.onSubsUpdated;
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+      this.resetDesc(topic, props);
+      this.resetSubs(topic, props);
+      this.resetTags(topic);
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.setState({topic: null});
+    topic.onMetaDesc = this.previousMetaDesc;
+    topic.onSubsUpdated = this.previousSubsUpdated;
+  }
+
+  resetSubs(topic, props) {
+    const newState = {contactList: []};
+    if (topic.getType() == 'p2p') {
+      // Fetch the other party in the p2p conversation.
+      // Topic may not be ready yet, so check if user is found.
+      const user2 = topic.subscriber(props.topic);
+      if (user2) {
+        newState.modeGiven2 = user2.acs.getGiven();
+        newState.modeWant2 = user2.acs.getWant();
+      } else {
+        newState.modeGiven2 = NO_ACCESS_MODE;
+        newState.modeWant2 = NO_ACCESS_MODE;
+      }
+    } else {
+      topic.subscribers((sub) => {
+        newState.contactList.push(sub);
+      }, this);
+    }
+
+    this.setState(newState);
+  }
+
+  resetDesc(topic, props) {
+    const defacs = topic.getDefaultAccess() || {};
+    const acs = topic.getAccessMode();
+
+    const badges = [];
+    if (topic.trusted) {
+      for (const [key, val] of Object.entries(topic.trusted)) {
+        if (val) {
+          badges.push(key);
+        }
+      }
+    }
+
+    this.setState({
+      owner: acs && acs.isOwner(),
+      admin: acs && acs.isAdmin(),
+      sharer: acs && acs.isSharer(),
+      deleter: acs && acs.isDeleter(),
+      muted: acs && acs.isMuted(),
+
+      fullName: clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
+      description: clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
+      private: clipStr(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
+      archived: topic.isArchived(),
+      address: topic.name,
+      groupTopic: topic.isGroupType(),
+      channel: topic.isChannelType() || topic.chan,
+      access: acs ? acs.getMode() : undefined,
+      modeGiven: acs ? acs.getGiven() : undefined,
+      modeWant: acs ? acs.getWant() : undefined,
+      auth: defacs.auth,
+      anon: defacs.anon
+    });
+  }
+
+  resetTags(topic) {
+    if (topic.getType() != 'grp') {
+      return;
+    }
+
+    const acs = topic.getAccessMode();
+    if (acs && acs.isOwner()) {
+      // Requesting tags: owner is editing the topic.
+      topic.getMeta(topic.startMetaQuery().withTags().build());
+    }
+  }
+
+  onMetaDesc(desc) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetDesc(topic, this.props);
+
+    if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {
+      this.previousMetaDesc(desc);
+    }
+  }
+
+  onSubsUpdated(subs) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetSubs(topic, this.props);
+
+    if (this.previousSubsUpdated && this.previousSubsUpdated != this.onSubsUpdated) {
+      this.previousSubsUpdated(subs);
+    }
+  }
+
+  handleImageChanged(mime, img) {
+    this.setState({avatar: img});
+    this.props.onTopicDescUpdate(this.props.topic, theCard(null, img || Tinode.DEL_CHAR), null);
+  }
+
+  handleMuted(ignored, checked) {
+    this.setState({muted: checked});
+    this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');
+  }
+
+  handleUnarchive(ignored, ignored2) {
+    this.props.onTopicUnArchive(this.props.topic);
+  }
+
+  handlePermissionsChanged(which, perm) {
+    switch (which) {
+      case 'auth':
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {auth: perm});
+        break;
+      case 'anon':
+        this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {anon: perm});
+        break;
+      case 'mode':
+      case 'want':
+        this.props.onChangePermissions(this.props.topic, perm);
+        break;
+      case 'given':
+        this.props.onChangePermissions(this.props.topic, perm, this.props.topic);
+        break;
+      case 'user':
+        this.props.onChangePermissions(this.props.topic, perm, this.state.userPermissionsEdited);
+        break;
+    }
+
+    this.handleBackNavigate();
+  }
+
+  handleLaunchPermissionsEditor(which, uid) {
+    const {formatMessage} = this.props.intl;
+    let toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar;
+    switch (which) {
+      case 'mode':
+        toEdit = this.state.access;
+        break;
+      case 'want':
+        toEdit = this.state.modeWant;
+        toCompare = this.state.modeGiven;
+        if (this.state.owner) {
+          // Don't allow owner to unset 'O' permission. All other permissions are OK.
+          toSkip = 'O';
+        } else {
+          // Allow accepting any of 'ASDO' permissions but don't allow asking for them.
+          toSkip = AccessMode.encode(AccessMode.diff('ASDO', this.state.modeGiven));
+          if (this.state.channel) {
+            // Channels are read-only.
+            toSkip += 'W';
+          }
+        }
+        titleEdit = formatMessage(messages.perm_want);
+        titleCompare = formatMessage(messages.perm_given);
+        break;
+      case 'given':
+        toEdit = this.state.modeGiven2;
+        toCompare = this.state.modeWant2;
+        toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
+        break;
+      case 'auth':
+        toEdit = this.state.auth;
+        toSkip = 'O';
+        break;
+      case 'anon':
+        toEdit = this.state.anon;
+        toSkip = 'O';
+        break;
+      case 'user': {
+        const topic = this.props.tinode.getTopic(this.props.topic);
+        if (!topic) {
+          return;
+        }
+        const user = topic.subscriber(uid);
+        if (!user || !user.acs) {
+          return;
+        }
+        toEdit = user.acs.getGiven();
+        toCompare = user.acs.getWant();
+        toSkip = this.state.owner ? '' : 'O';
+        titleEdit = formatMessage(messages.perm_given);
+        titleCompare = formatMessage(messages.perm_want);
+        if (user.public) {
+          userTitle = user.public.fn;
+          userAvatar = user.public.photo;
+        }
+        break;
+      }
+      default:
+        console.error("Unknown permission editing mode '" + which + "'");
+        return;
+    }
+    this.setState({
+      userPermissionsEdited: uid,
+      userPermissionsTitle: userTitle,
+      userPermissionsAvatar: userAvatar,
+      editedPermissions: toEdit,
+      immutablePermissions: toCompare,
+      editedPermissionsTitle: titleEdit,
+      immutablePermissionsTitle: titleCompare,
+      editedPermissionsSkipped: toSkip,
+    });
+    this.props.onNavigate(`perm/${which}`);
+  }
+
+  handleShowAddMembers(e) {
+    e.preventDefault();
+    this.props.onInitFind();
+    this.props.onNavigate('members');
+  }
+
+  handleMemberUpdateRequest(members, added, removed) {
+    this.props.onMemberUpdateRequest(this.props.topic, added, removed);
+    this.props.onNavigate('info');
+  }
+
+  handleMemberSelected(uid) {
+    this.setState({selectedContact: uid});
+  }
+
+  handleBackNavigate() {
+    const args = (this.props.panel || 'info').split('/');
+    if (args[0] == 'info') {
+      this.props.onNavigate(null);
+    } else if (args[0] == 'perm') {
+      if (args[1] == 'user') {
+        this.props.onNavigate('info');
+      } else {
+        this.props.onNavigate('security');
+      }
+    } else {
+      this.props.onNavigate('info');
+    }
+  }
+
+  handleContextMenu(params) {
+    const {formatMessage} = this.props.intl;
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    const user = topic.subscriber(params.topicName);
+    if (!user || !user.acs) {
+      return;
+    }
+
+    const isMe = this.props.tinode.isMe(params.topicName);
+    const menuItems = [{
+      title: formatMessage(messages.edit_permissions),
+      handler: _ => this.handleLaunchPermissionsEditor(isMe ? 'want' : 'user', params.topicName)
+    }];
+    if (!isMe) {
+      menuItems.push('member_delete');
+    }
+    menuItems.push(user.acs.isMuted() ? 'member_unmute' : 'member_mute');
+    if (!isMe) {
+      menuItems.push(user.acs.isJoiner() ? 'member_block' : 'member_unblock');
+    }
+    this.props.showContextMenu({
+      topicName: this.props.topic,
+      x: params.x,
+      y: params.y,
+      user: params.topicName}, menuItems);
+  }
+
+  render() {
+    const args = (this.props.panel || 'info').split('/');
+    const view = args[0];
+    args.shift();
+
+    const {formatMessage} = this.props.intl;
+    const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])
+      || messages['info']);
+
+    return (
+      <div id="info-view">
+        <div className="caption-panel" id="info-caption-panel">
+          <div className="panel-title" id="info-title">{panelTitle}</div>
+          <div>
+            <MenuCancel onCancel={this.handleBackNavigate} />
+          </div>
+        </div>
+        {this.props.displayMobile ?
+          <ErrorPanel
+            level={this.props.errorLevel}
+            text={this.props.errorText}
+            onClearError={this.props.onError} /> : null}
+        {view == 'members' ?
+          <GroupManager
+            tinode={this.props.tinode}
+            members={this.state.contactList}
+            requiredMember={this.props.myUserId}
+            keepInitialMembers={!this.state.admin && !this.state.owner}
+            myUserId={this.props.myUserId}
+            contacts={this.props.searchableContacts}
+            onCancel={this.handleBackNavigate}
+            onSubmit={this.handleMemberUpdateRequest} />
+          :
+        view == 'perm' && args.length > 0 ?
+          <PermissionsEditor
+            tinode={this.props.tinode}
+            mode={this.state.editedPermissions}
+            compare={this.state.immutablePermissions}
+            skip={this.state.editedPermissionsSkipped}
+            modeTitle={this.state.editedPermissionsTitle}
+            compareTitle={this.state.immutablePermissionsTitle}
+            userTitle={this.state.userPermissionsTitle}
+            item={this.state.userPermissionsEdited}
+            userAvatar={this.state.userPermissionsAvatar}
+            onSubmit={(mode) => this.handlePermissionsChanged(args[0], mode)}
+            onCancel={this.handleBackNavigate} />
+          :
+        view == 'general' ?
+          <TopicCommonView
+            tinode={this.props.tinode}
+            topic={this.props.topic}
+            reqCredMethod={this.props.reqCredMethod}
+            onCredAdd={this.props.onCredAdd}
+            onUpdateTagsRequest={this.props.onTopicTagsUpdateRequest}
+            onCredConfirm={this.props.onCredConfirm}
+            onCredDelete={this.props.onCredDelete}
+            onUpdateTopicDesc={this.props.onTopicDescUpdateRequest}
+            onError={this.props.onError} />
+          :
+        view == 'security' ?
+          <TopicSecurity
+            topic={this.props.topic}
+            owner={this.state.owner}
+            admin={this.state.admin}
+            sharer={this.state.sharer}
+            deleter={this.state.deleter}
+            muted={this.state.muted}
+
+            groupTopic={this.state.groupTopic}
+            channel={this.state.channel}
+            access={this.state.access}
+            modeGiven={this.state.modeGiven}
+            modeWant={this.state.modeWant}
+            modeGiven2={this.state.modeGiven2}
+            modeWant2={this.state.modeWant2}
+            auth={this.state.auth}
+            anon={this.state.anon}
+
+            onShowAlert={this.props.onShowAlert}
+            onDeleteMessages={this.props.onDeleteMessages}
+            onLeaveTopic={this.props.onLeaveTopic}
+            onBlockTopic={this.props.onBlockTopic}
+            onReportTopic={this.props.onReportTopic}
+            onLaunchPermissionsEditor={this.handleLaunchPermissionsEditor}
+            onNavigate={this.props.onNavigate} />
+          :
+          <div id="info-view-content" className="scrollable-panel">
+            <div className="panel-form-column">
+              <a href="#" className="flat-button float-right" onClick={(e) => {e.preventDefault(); this.props.onNavigate('general');}}>
+                <i className="material-icons">edit</i>&nbsp;
+                <FormattedMessage id="button_edit" defaultMessage="Edit" description="Call to action [Edit]" />
+              </a>
+              <center>
+                <AvatarUpload
+                  tinode={this.props.tinode}
+                  avatar={this.state.avatar}
+                  readOnly={true}
+                  uid={this.props.topic}
+                  title={this.state.fullName} />
+              </center>
+              <div className="group">
+                <div><label className="small">
+                  <FormattedMessage id="label_topic_name" defaultMessage="Name"
+                    description="Label for editing topic name" />
+                </label></div>
+                <div className="large ellipsized">{this.state.fullName}
+                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+              </div>
+              {this.state.private ?
+                <div className="group">
+                  <div><label className="small">
+                    <FormattedMessage id="label_private" defaultMessage="Private comment"
+                      description="Label for editing 'private'" />
+                  </label></div>
+                  <div className="large ellipsized">{this.state.private}</div>
+                </div>
+                : null
+              }
+              <div className="group">
+                <label className="small"><FormattedMessage id="label_user_id" defaultMessage="ID:"
+                  description="Label for user address (ID)" /></label>&nbsp;
+                <tt>{this.state.address}</tt>
+              </div>
+              <div className="group">
+                <BadgeList trustedBadges={this.state.trustedBadges} />
+              </div>
+              {this.state.description ?
+                <div className="group">
+                  <label className="small">
+                    <FormattedMessage id="label_description" defaultMessage="Description"
+                      description="Label for editing topic description" />
+                  </label>
+                  <div>{this.state.description}</div>
+                </div> : null}
+            </div>
+            <div className="hr" />
+            <div className="panel-form-row">
+              <label>
+                <FormattedMessage id="label_muting_topic" defaultMessage="Muted:"
+                  description="Label for Muting/unmuting the topic" />
+              </label>
+              <CheckBox name="P" checked={this.state.muted} onChange={this.handleMuted} />
+            </div>
+            {this.state.archived ?
+              <div className="panel-form-row">
+                <label>
+                  <FormattedMessage id="label_unarchive_topic" defaultMessage="Archived:"
+                    description="Label for unarchiving the topic" />
+                </label>
+                <CheckBox name="archived" checked={true} onChange={this.handleUnarchive} />
+              </div>
+              :
+              null
+            }
+            <div className="hr" />
+            <div className="panel-form-row">
+              <a href="#" className="flat-button" onClick={(e) => {e.preventDefault(); this.props.onNavigate('security');}}>
+                <i className="material-icons">security</i>&nbsp;<FormattedMessage id="button_security"
+                  defaultMessage="Security" description="Navigaton button for security panel." />
+              </a>
+            </div>
+            {this.state.groupTopic && this.state.sharer ?
+              <>
+                <div className="hr" />
+                <div className="panel-form-row">
+                  <label className="small">
+                    <FormattedMessage id="label_group_members" defaultMessage="Group members:"
+                      description="Section title or label" />
+                  </label>
+                </div>
+                <div className="panel-form-row">
+                  <a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
+                    <i className="material-icons">person_add</i> &nbsp;<FormattedMessage id="button_add_members"
+                      defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
+                  </a>
+                </div>
+                <FormattedMessage id="group_has_no_members" defaultMessage="No members"
+                  description="Shown in place of group members">{
+                  (no_members) => <ContactList
+                    tinode={this.props.tinode}
+                    contacts={this.state.contactList}
+                    myUserId={this.props.myUserId}
+                    emptyListMessage={no_members}
+                    topicSelected={this.state.selectedContact}
+                    showOnline={false}
+                    showUnread={false}
+                    showMode={true}
+                    noScroll={true}
+                    onTopicSelected={this.handleMemberSelected}
+                    showContextMenu={this.state.admin ? this.handleContextMenu : false}
+                  />
+                }</FormattedMessage>
+              </>
+              :
+              null
+            }
+          </div>
+        }
+      </div>
+    );
+  }
+};
+
+export default injectIntl(InfoView);

src/views/login-view.jsx

@@ -0,0 +1,95 @@
+// Login form.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+export default class LoginView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      login: props.login,
+      password: '',
+      hostName: props.serverAddress,
+      saveToken: props.persist
+    };
+    this.handleLoginChange = this.handleLoginChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleToggleSaveToken = this.handleToggleSaveToken.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleLoginChange(e) {
+    this.setState({login: e.target.value});
+  }
+
+  handlePasswordChange(e) {
+    this.setState({password: e.target.value});
+  }
+
+  handleToggleSaveToken() {
+    this.props.onPersistenceChange(!this.state.saveToken);
+    this.setState({saveToken: !this.state.saveToken});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.onLogin(this.state.login.trim(), this.state.password.trim());
+  }
+
+  render() {
+    let submitClasses = 'primary';
+    if (this.props.disabled) {
+      submitClasses += ' disabled';
+    }
+
+    return (
+      <form id="login-form" onSubmit={this.handleSubmit}>
+        <FormattedMessage id="login_prompt" defaultMessage="Login"
+          description="Placeholer for username/login">
+        {
+          (login_prompt) => <input type="text" id="inputLogin"
+            placeholder={login_prompt}
+            autoComplete="username"
+            autoCorrect="off"
+            autoCapitalize="none"
+            value={this.state.login}
+            onChange={this.handleLoginChange}
+            required autoFocus />
+        }
+        </FormattedMessage>
+        <FormattedMessage id="password_prompt" defaultMessage="Password"
+          description="Placeholder/prompt for entering password">
+        {
+          (password_prompt) => <VisiblePassword type="password" id="inputPassword"
+            placeholder={password_prompt}
+            autoComplete="current-password"
+            value={this.state.password}
+            onChange={this.handlePasswordChange}
+            required={true} />
+        }
+        </FormattedMessage>
+        <div className="panel-form-row">
+          <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}
+            onChange={this.handleToggleSaveToken} />
+          <label htmlFor="save-token">&nbsp;
+            <FormattedMessage id="stay_logged_in" defaultMessage="Stay logged in"
+              description="Label for a checkbox" />
+          </label>
+          <a href="#reset">
+            <FormattedMessage id="forgot_password_link" defaultMessage="Forgot password?"
+              description="Link to Reset password form" />
+          </a>
+        </div>
+        <div className="dialog-buttons">
+          <button className={submitClasses} type="submit">
+            <FormattedMessage id="button_sign_in" defaultMessage="Sign in"
+              description="Button [Sign In]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};

src/views/logo-view.jsx

@@ -0,0 +1,27 @@
+/* This is just a static page to display when no conversation is selected. */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import { APP_NAME } from '../config.js';
+
+export default class LogoView extends React.PureComponent {
+  render() {
+    const version = APP_NAME + ' (' + Tinode.getLibrary() + ')';
+    return (
+      <div id="dummy-view">
+        <div>
+          <a href="https://github.com/tinode/chat/">
+            <img id="logo" alt="logo" src="img/logo.svg" />
+            <h2>Tinode Web</h2>
+          </a>
+          <p><FormattedMessage id="label_client" defaultMessage="Client:"
+            description="Label for a client version" /> {version}</p>
+          <p><FormattedMessage id="label_server" defaultMessage="Server:"
+            description="Label for a server version" /> {this.props.serverVersion} ({this.props.serverAddress})</p>
+        </div>
+      </div>
+    );
+  }
+};

src/views/new-topic-view.jsx

@@ -0,0 +1,137 @@
+// Create new topic and invite users or send an invite.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import { Tinode } from 'tinode-sdk';
+
+import ContactList from '../widgets/contact-list.jsx';
+import NewTopicById from '../widgets/new-topic-by-id.jsx';
+import NewTopicGroup from '../widgets/new-topic-group.jsx';
+import SearchContacts from '../widgets/search-contacts.jsx';
+
+import HashNavigation from '../lib/navigation.js';
+import { theCard } from '../lib/utils.js';
+
+const messages = defineMessages({
+  search_for_contacts: {
+    id: "search_for_contacts",
+    defaultMessage: "Use search to find contacts",
+    description: "Text shown in contacts view when user entered no search query."
+  },
+  search_no_results: {
+    id: "search_no_results",
+    defaultMessage: "Search returned no results",
+    description: "Text shown in contacts view when query returned no results."
+  },
+  search_placeholder: {
+    id: "search_placeholder",
+    defaultMessage: "List like email:alice@example.com, tel:17025550003...",
+    description: "Placeholder in contacts search field"
+  },
+});
+
+class NewTopicView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tabSelected: 'find',
+      searchQuery: null
+    };
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.handleSearchContacts = this.handleSearchContacts.bind(this);
+    this.handleSearchResultSelected = this.handleSearchResultSelected.bind(this);
+    this.handleNewGroupSubmit = this.handleNewGroupSubmit.bind(this);
+    this.handleGroupByID = this.handleGroupByID.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.onInitFind();
+  }
+
+  handleTabClick(e) {
+    e.preventDefault();
+    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'tab', e.currentTarget.dataset.id));
+    this.setState({tabSelected: e.currentTarget.dataset.id});
+  }
+
+  handleSearchContacts(query) {
+    this.props.onSearchContacts(query);
+    this.setState({searchQuery: Tinode.isNullValue(query) ? null : query});
+  }
+
+  handleSearchResultSelected(name) {
+    if (this.state.tabSelected == 'find') {
+      HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+      this.props.onCreateTopic(name);
+    }
+  }
+
+  handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
+    HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+    this.props.onCreateTopic(undefined,
+      {public: theCard(name, dataUrl, null, description), private: priv, tags: tags}, isChannel);
+  }
+
+  handleGroupByID(topicName) {
+    HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
+    this.props.onCreateTopic(topicName);
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    const no_contacts_placeholder = formatMessage(this.state.searchQuery ?
+      messages.search_no_results : messages.search_for_contacts);
+    const search_placeholder = formatMessage(messages.search_placeholder);
+    return (
+      <div className="flex-column">
+        <ul className="tabbar">
+          <li className={this.state.tabSelected === "find" ? "active" : null}>
+            <a href="#" data-id="find" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
+                description="Tab title Find" />
+            </a>
+          </li>
+          <li className={this.state.tabSelected === "grp" ? "active" : null}>
+            <a href="#" data-id="grp" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
+                description="Tab title New Group" />
+            </a>
+          </li>
+          <li className={this.state.tabSelected === "byid" ? "active" : null}>
+            <a href="#" data-id="byid" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
+                description="Tab title Find topic by ID" />
+            </a>
+          </li>
+        </ul>
+        {this.state.tabSelected === 'grp' ?
+          <NewTopicGroup
+            tinode={this.props.tinode}
+            onSubmit={this.handleNewGroupSubmit}
+            onError={this.props.onError} /> :
+          this.state.tabSelected === 'byid' ?
+            <NewTopicById
+              onSubmit={this.handleGroupByID}
+              onError={this.props.onError} /> :
+            <div className="flex-column">
+              <SearchContacts
+                placeholder={search_placeholder}
+                onSearchContacts={this.handleSearchContacts} />
+              <ContactList
+                tinode={this.props.tinode}
+                contacts={this.props.searchResults}
+                myUserId={this.props.myUserId}
+                emptyListMessage={no_contacts_placeholder}
+                showOnline={false}
+                showUnread={false}
+                showContextMenu={false}
+                onTopicSelected={this.handleSearchResultSelected} />
+            </div>}
+      </div>
+    );
+  }
+};
+
+export default injectIntl(NewTopicView);

src/views/password-reset-view.jsx

@@ -0,0 +1,215 @@
+// A password reset form.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import PhoneEdit from '../widgets/phone-edit.jsx';
+import VisiblePassword from '../widgets/visible-password.jsx';
+
+import HashNavigation from '../lib/navigation.js';
+
+const messages = defineMessages({
+  password_reset_email_sent: {
+    id: 'password_reset_email_sent',
+    defaultMessage: 'An email with security code has been sent.',
+    description: 'Notification that the email with password reset instructions has been sent'
+  },
+  password_reset_sms_sent: {
+    id: 'password_reset_sms_sent',
+    defaultMessage: 'A text message with security code has been sent.',
+    description: 'Notification that the SMS with password reset instructions has been sent'
+  }
+});
+
+class PasswordResetView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tel: '',
+      email: '',
+      password: '',
+      sent: false,
+      haveCode: false,
+      code: ''
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleEmailChange = this.handleEmailChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleCodeChange = this.handleCodeChange.bind(this);
+    this.handleShowCodeField = this.handleShowCodeField.bind(this);
+
+    // Connection will trigger change by changing the this.props.serverVersion.
+    props.tinode.connect()
+      .catch(err => {
+        this.props.onError(err.message, 'err');
+      });
+  }
+
+  componentDidMount() {
+    const parsed = HashNavigation.parseUrlHash(window.location.hash);
+    this.setState({token: parsed.params.token, scheme: parsed.params.scheme});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.state.token) {
+      // Reset using token.
+      this.props.onReset(this.state.password.trim(), {
+        scheme: 'token',
+        token: this.state.token
+      });
+    } else if (this.state.code && this.props.reqCredMethod) {
+      // Reset using security code.
+      // The secret is structured as <code>:<cred_method>:<cred_value>, "123456:email:alice@example.com".
+      const cred = this.state.email.trim() || this.state.tel.trim();
+      this.props.onReset(this.state.password.trim(), {
+        scheme: 'code',
+        secret: btoa(`${this.state.code}:${this.props.reqCredMethod}:${cred}`)
+      });
+    } else {
+      // Send email or SMS with the secret code.
+      const email = this.state.email.trim();
+      const tel = this.state.tel.trim();
+      this.setState({email: email, tel: tel});
+      this.props.onRequest(this.props.reqCredMethod, email || tel)
+        .then(_ => {
+          this.setState({sent: true});
+          const msg = this.props.reqCredMethod == 'email' ? messages.password_reset_email_sent :
+            this.props.reqCredMethod == 'tel' ? messages.password_reset_sms_sent : null;
+          if (msg) {
+            this.props.onError(this.props.intl.formatMessage(msg), 'info');
+          }
+        });
+    }
+  }
+
+  handleEmailChange(e) {
+    this.setState({email: e.target.value});
+  }
+
+  handlePasswordChange(e) {
+    this.setState({password: e.target.value});
+  }
+
+  handleCodeChange(e) {
+    this.setState({code: e.target.value.replace(/[^\d]/g, '')});
+  }
+
+  handleShowCodeField(e) {
+    e.preventDefault();
+    this.setState({haveCode: true});
+  }
+
+  render() {
+    const showCredentialInput = !(this.state.token && this.state.scheme);
+    const showPasswordInput = !showCredentialInput || this.state.haveCode || this.state.sent;
+
+    const passwordInput = (<>
+        <label className="small gray" htmlFor="new-password">
+          <FormattedMessage id="label_new_password"
+            defaultMessage="New password"
+            description="Label for entering a new password" />
+        </label>
+        <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
+          description="Placeholder for entering new password">{
+          (placeholder) => <VisiblePassword
+            id="new-password"
+            placeholder={placeholder}
+            autoComplete="new-password"
+            value={this.state.password}
+            required={true} autoFocus={true}
+            onChange={this.handlePasswordChange} />
+        }</FormattedMessage>
+      </>);
+
+    const emailInput = (<>
+        {this.state.haveCode ?
+          null :
+          <label htmlFor="inputEmail">
+            <FormattedMessage id="label_reset_password"
+              defaultMessage="Send a password reset email"
+              description="Label for password reset field" />
+          </label>
+        }
+        <FormattedMessage id="credential_email_prompt" defaultMessage="Your registration email"
+          description="Placeholder for entering email">{
+          (placeholder) => <input type="email" id="inputEmail"
+            placeholder={placeholder}
+            autoComplete="email"
+            value={this.state.email}
+            onChange={this.handleEmailChange}
+            required autoFocus />
+        }</FormattedMessage>
+      </>);
+
+    const phoneInput = (<>
+        {this.state.haveCode ?
+          null :
+          <div><label>
+            <FormattedMessage id="label_reset_password_tel"
+              defaultMessage="Send SMS to reset password"
+              description="Label for password reset field by phone" />
+          </label></div>
+        }
+        <div>
+          <label className="small gray">
+            <FormattedMessage id="mobile_phone_number" defaultMessage="Mobile phone number"
+              description="Prompt for entering a mobile phone number" />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <PhoneEdit
+            autoFocus={true}
+            onShowCountrySelector={this.props.onShowCountrySelector}
+            onSubmit={number => this.setState({tel: number})} />
+        </div>
+      </>);
+
+    const codeInput = (<>
+        <div>
+          <label className="small gray" htmlFor="enter-confirmation-code">
+            <FormattedMessage id="enter_confirmation_code_prompt"
+              defaultMessage="Confirmation code"
+              description="Request to enter confirmation code" />
+          </label>
+        </div>
+        <div>
+          <FormattedMessage id="numeric_confirmation_code_prompt"
+            defaultMessage="Numbers only" description="Prompt for numeric conformation code">{
+            (numbers_only) => <input type="text" id="enter-confirmation-code"
+              placeholder={numbers_only} maxLength={10}
+              value={this.state.code} onChange={this.handleCodeChange} required />
+          }</FormattedMessage>
+        </div>
+      </>);
+
+    const credentialInput = this.props.reqCredMethod == 'email' ?
+      emailInput : this.props.reqCredMethod == 'tel' ? phoneInput : null;
+
+    return (
+      <form id="password-reset-form" onSubmit={this.handleSubmit}>
+        {!this.state.sent && showCredentialInput ? credentialInput : null}
+        {this.state.haveCode || this.state.sent ? codeInput : null}
+        {showPasswordInput ? passwordInput : null}
+        <div className="dialog-buttons">
+          {this.state.haveCode || this.state.sent ? null :
+            <a href="#" onClick={this.handleShowCodeField} style={{marginRight: 'auto'}}>
+              <FormattedMessage id="password_i_have_code" defaultMessage="I have code"
+                description="Call to open field to enter password reset code" />
+            </a>
+          }
+          <button className="primary" type="submit">{
+            showPasswordInput ?
+              <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" />
+            :
+              <FormattedMessage id="button_send_request" defaultMessage="Send request"
+                description="Button [Send request]" />
+          }</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default injectIntl(PasswordResetView);

src/views/settings-view.jsx

@@ -0,0 +1,98 @@
+// Tinode config panel.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+
+import HostSelector from '../widgets/host-selector.jsx';
+
+export default class SettingsView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      transport: props.transport || 'def',
+      serverAddress: props.serverAddress,
+      secureConnection: props.secureConnection,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleTransportSelected = this.handleTransportSelected.bind(this);
+    this.handleServerAddressChange = this.handleServerAddressChange.bind(this);
+    this.handleToggleSecure = this.handleToggleSecure.bind(this);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.onUpdate({
+      transport: this.state.transport,
+      serverAddress: this.state.serverAddress,
+      secureConnection: this.state.secureConnection,
+    });
+  }
+
+  handleTransportSelected(e) {
+    this.setState({transport: e.currentTarget.value});
+  }
+
+  handleServerAddressChange(name) {
+    this.setState({serverAddress: name});
+  }
+
+  handleToggleSecure(e) {
+    this.setState({secureConnection: !this.state.secureConnection});
+  }
+
+  render() {
+    const names = {def: "default", ws: "websocket", lp: "long polling"};
+    const transportOptions = [];
+    ['def', 'ws', 'lp'].forEach(item => {
+      const id = 'transport-' + item;
+      const name = names[item];
+      transportOptions.push(
+        <li key={item}>
+          <input type="radio" id={id} name="transport-select" value={item}
+            checked={this.state.transport === item}
+            onChange={this.handleTransportSelected} />
+          <label htmlFor={id}>{name}</label>
+        </li>
+      );
+    });
+
+    return (
+      <form id="settings-form" className="panel-form" onSubmit={this.handleSubmit}>
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="label_server_to_use" defaultMessage="Server to use:"
+              description="Label for server selector in SettingsView" />
+          </label>
+        </div>
+        <HostSelector serverAddress={this.state.serverAddress} onServerAddressChange={this.handleServerAddressChange} />
+        <div className="panel-form-row">
+          <CheckBox id="secure-connection" name="secure-connection" checked={this.state.secureConnection}
+            className="quoted" onChange={this.handleToggleSecure} /><label htmlFor="secure-connection">
+            <FormattedMessage id="label_use_secure_connection" defaultMessage="Use secure connection"
+              description="Label for WS/WSS connection type in SettingsView" />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <label className="small">
+            <FormattedMessage id="label_wire_transport" defaultMessage="Wire transport:"
+              description="Label for wire transport selection in SettingsView" />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <ul className="quoted">
+            {transportOptions}
+          </ul>
+        </div>
+        <div className="dialog-buttons">
+          <button type="submit" className="primary">
+            <FormattedMessage id="button_update" defaultMessage="Update"
+              description="Button [Update]" />
+          </button>
+        </div>
+      </form>
+    );
+  }
+};

src/views/sidepanel-view.jsx

@@ -0,0 +1,275 @@
+import React, { Suspense } from 'react';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+
+import ErrorPanel from '../widgets/error-panel.jsx';
+import LoadSpinner from '../widgets/load-spinner.jsx';
+import SideNavbar from '../widgets/side-navbar.jsx';
+import TopicCommonView from './topic-common-view.jsx';
+
+const AccountSettingsView = React.lazy(_ => import('./account-settings-view.jsx'));
+import ContactsView from './contacts-view.jsx';
+const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
+import AccNotificationsView from './acc-notifications-view.jsx';
+import AccSecurityView from './acc-security-view.jsx';
+import AccSupportView from './acc-support-view.jsx';
+import LoginView from './login-view.jsx';
+import NewTopicView from './new-topic-view.jsx';
+const PasswordResetView = React.lazy(_ => import('./password-reset-view.jsx'));
+import SettingsView from './settings-view.jsx';
+import ValidationView from './validation-view.jsx';
+
+// Panel titles for translation.
+const messages = defineMessages({
+  login: {
+    id: 'sidepanel_title_login',
+    description: 'Sidepanel title for LoginView.',
+    defaultMessage: 'Sign In'
+  },
+  register: {
+    id: 'sidepanel_title_register',
+    description: 'Sidepanel title for CreateAccountView.',
+    defaultMessage: 'Create Account'
+  },
+  settings: {
+    id: 'sidepanel_title_settings',
+    description: 'Sidepanel title for SettingsView.',
+    defaultMessage: 'Settings'
+  },
+  edit: {
+    id: 'sidepanel_title_account_settings',
+    description: 'Sidepanel title for AccountSettingsView.',
+    defaultMessage: 'Account Settings'
+  },
+  general: {
+    id: 'panel_title_general',
+    description: 'Title for TopicCommon.',
+    defaultMessage: 'General'
+  },
+  security: {
+    id: 'panel_title_security',
+    description: 'Title for TopicSecirity and AccSecurity.',
+    defaultMessage: 'Security'
+  },
+  crop: {
+    id: 'panel_title_crop',
+    description: 'Title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
+  notif: {
+    id: 'sidepanel_title_acc_notifications',
+    description: 'Sidepanel title for AccNotificationsView.',
+    defaultMessage: 'Notifications'
+  },
+  support: {
+    id: 'sidepanel_title_acc_support',
+    description: 'Sidepanel title for AccSupportView.',
+    defaultMessage: 'Support'
+  },
+  newtpk: {
+    id: 'sidepanel_title_newtpk',
+    description: 'Sidepanel title for NewTopicView.',
+    defaultMessage: 'Start New Chat'
+  },
+  cred: {
+    id: 'sidepanel_title_cred',
+    description: 'Sidepanel title for ValidationView.',
+    defaultMessage: 'Confirm Credentials'
+  },
+  reset: {
+    id: 'sidepanel_title_reset',
+    description: 'Sidepanel title for PasswordResetView.',
+    defaultMessage: 'Reset Password'
+  },
+  archive: {
+    id: 'sidepanel_title_archive',
+    description: 'Sidepanel title for ContactsView-Archive.',
+    defaultMessage: 'Archived Chats'
+  },
+  blocked: {
+    id: 'sidepanel_title_blocked',
+    description: 'Sidepanel title for ContactsView-Blocked.',
+    defaultMessage: 'Blocked Chats'
+  }
+});
+
+class SidepanelView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleNewTopic = this.handleNewTopic.bind(this);
+  }
+
+  handleNewTopic() {
+    this.props.onNavigate('newtpk');
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    const view = this.props.state || (this.props.myUserId ? 'contacts' : 'login');
+
+    let title, avatar, badges;
+    if (view == 'contacts') {
+      title = this.props.title;
+      avatar = this.props.avatar ? this.props.avatar : true;
+      badges = this.props.trustedBadges;
+    } else {
+      title = formatMessage(messages[view]);
+      avatar = false;
+      badges = null;
+    }
+
+    let onCancel;
+    if (['login', 'contacts'].indexOf(view) == -1) {
+      onCancel = this.props.onCancel;
+    }
+
+    return (
+      <div id="sidepanel">
+        <SideNavbar
+          state={view}
+          title={title}
+          avatar={avatar}
+          tinode={this.props.tinode}
+          trustedBadges={badges}
+          myUserId={this.props.myUserId}
+          onSignUp={this.props.onSignUp}
+          onSettings={this.props.onSettings}
+          onNewTopic={this.handleNewTopic}
+          onCancel={onCancel} />
+
+        <ErrorPanel
+          level={this.props.errorLevel}
+          text={this.props.errorText}
+          action={this.props.errorAction}
+          actionText={this.props.errorActionText}
+          onClearError={this.props.onError} />
+
+        <LoadSpinner show={this.props.loadSpinnerVisible} />
+
+        {view === 'login' ?
+          <LoginView
+            login={this.props.login}
+            disabled={this.props.loginDisabled}
+            persist={this.props.persist}
+            onLogin={this.props.onLoginRequest}
+            onPersistenceChange={this.props.onPersistenceChange} /> :
+
+          view === 'register' ?
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <CreateAccountView
+              tinode={this.props.tinode}
+              reqCredMethod={this.props.reqCredMethod}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onCreateAccount={this.props.onCreateAccount}
+              onCancel={this.props.onCancel}
+              onError={this.props.onError} />
+          </Suspense> :
+
+          view === 'settings' ?
+          <SettingsView
+            transport={this.props.transport}
+            serverAddress={this.props.serverAddress}
+            secureConnection={this.props.secureConnection}
+            onCancel={this.props.onCancel}
+            onUpdate={this.props.onGlobalSettings} /> :
+
+          view === 'edit' ?
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <AccountSettingsView
+              tinode={this.props.tinode}
+              myUserId={this.props.myUserId}
+              trustedBadges={this.props.trustedBadges}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onNavigate={this.props.onNavigate}
+              onCredAdd={this.props.onCredAdd}
+              onCredDelete={this.props.onCredDelete}
+              onCredConfirm={this.props.onCredConfirm}
+              onError={this.props.onError} />
+          </Suspense> :
+
+          (view === 'general' || view === 'crop') ?
+          <TopicCommonView
+            topic="me"
+            tinode={this.props.tinode}
+            myUserId={this.props.myUserId}
+            reqCredMethod={this.props.reqCredMethod}
+            onUpdateTopicDesc={this.props.onUpdateAccountDesc}
+            onUpdateTagsRequest={this.props.onUpdateAccountTags}
+            onError={this.props.onError} /> :
+
+          view === 'notif' ?
+          <AccNotificationsView
+            messageSounds={this.props.messageSounds}
+            desktopAlerts={this.props.desktopAlerts}
+            desktopAlertsEnabled={this.props.desktopAlertsEnabled}
+            incognitoMode={this.props.incognitoMode}
+            onTogglePushNotifications={this.props.onTogglePushNotifications}
+            onToggleMessageSounds={this.props.onToggleMessageSounds}
+            onToggleIncognitoMode={this.props.onToggleIncognitoMode} /> :
+
+          view === 'security' ?
+          <AccSecurityView
+            tinode={this.props.tinode}
+            onUpdateAccountDesc={this.props.onUpdateAccountDesc}
+            onUpdatePassword={this.props.onUpdatePassword}
+            onLogout={this.props.onLogout}
+            onDeleteAccount={this.props.onDeleteAccount}
+            onShowAlert={this.props.onShowAlert}
+            onShowBlocked={this.props.onShowBlocked} /> :
+
+          view === 'support' ?
+          <AccSupportView
+            serverAddress={this.props.serverAddress}
+            serverVersion={this.props.serverVersion} /> :
+
+          (view === 'contacts' || view == 'archive' || view == 'blocked') ?
+          <ContactsView
+            tinode={this.props.tinode}
+            myUserId={this.props.myUserId}
+            connected={this.props.connected}
+            topicSelected={this.props.topicSelected}
+            archive={view == 'archive'}
+            blocked={view == 'blocked'}
+            chatList={this.props.chatList}
+            showContextMenu={this.props.showContextMenu}
+            onTopicSelected={this.props.onTopicSelected}
+            onShowArchive={this.props.onShowArchive} /> :
+
+          view === 'newtpk' ?
+          <NewTopicView
+            tinode={this.props.tinode}
+            searchResults={this.props.searchResults}
+            onInitFind={this.props.onInitFind}
+            onSearchContacts={this.props.onSearchContacts}
+            onCreateTopic={this.props.onCreateTopic}
+            onError={this.props.onError} /> :
+
+          view === 'cred' ?
+          <ValidationView
+            credCode={this.props.credCode}
+            credMethod={this.props.credMethod}
+            credToken={this.props.credToken}
+            onSubmit={this.props.onValidateCredentials}
+            onCancel={this.props.onCancel} /> :
+
+          view === 'reset' ?
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <PasswordResetView
+              tinode={this.props.tinode}
+              reqCredMethod={this.props.reqCredMethod}
+              onShowCountrySelector={this.props.onShowCountrySelector}
+              onRequest={this.props.onPasswordResetRequest}
+              onReset={this.props.onResetPassword}
+              onCancel={this.props.onCancel}
+              onError={this.props.onError} />
+          </Suspense> :
+          null}
+      </div>
+    );
+  }
+};
+
+export default injectIntl(SidepanelView);

src/views/topic-common-view.jsx

@@ -0,0 +1,79 @@
+// View for editing topic parameters (including 'me' topic).
+
+import React from 'react';
+
+import TopicDescEdit from '../widgets/topic-desc-edit.jsx';
+
+import { arrayEqual } from '../lib/utils.js';
+
+export default class TopicCommonView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    const acs = topic.getAccessMode();
+    this.state = {
+      tags: []
+    };
+
+    this.previousTagsUpdated = undefined;
+
+    this.onTagsUpdated = this.onTagsUpdated.bind(this);
+    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    if (topic.onTagsUpdated != this.onTagsUpdated) {
+      if (topic.getType() == 'grp') {
+        this.previousTagsUpdated = topic.onTagsUpdated;
+        topic.onTagsUpdated = this.onTagsUpdated;
+      } else {
+        this.previousTagsUpdated = undefined;
+      }
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    topic.onTagsUpdated = this.previousTagsUpdated;
+  }
+
+  // Server informs that the tags have been updated.
+  onTagsUpdated(tags) {
+    this.setState({tags: tags});
+
+    if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
+      this.previousTagsUpdated(tags);
+    }
+  }
+
+  // Request server to change tags.
+  handleTagsUpdated(tags) {
+    if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
+      this.props.onUpdateTagsRequest(this.props.topic, tags);
+    }
+  }
+
+  render() {
+    return (
+      <div className="scrollable-panel">
+        <TopicDescEdit
+          tinode={this.props.tinode}
+          topic={this.props.topic}
+          onUpdateTopicDesc={this.props.onUpdateTopicDesc}
+          onUpdateTags={this.handleTagsUpdated}
+          onError={this.props.onError} />
+      </div>
+    );
+  }
+};

src/views/validation-view.jsx

@@ -0,0 +1,119 @@
+// ValidationView: panel for confirming credentials, like email or phone.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  phone: {
+    id: 'phone_dative',
+    defaultMessage: 'phone',
+    description: "Dative case of 'phone', i.e. 'phone' in 'by phone'",
+  },
+  email: {
+    id: 'email_dative',
+    defaultMessage: 'email',
+    description: "Dative case of 'email', i.e. 'email' in 'by email'",
+  }
+});
+
+class ValidationView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      code: props.credCode || '',
+      codeReceived: props.credCode
+    };
+
+    this.handleCodeChange = this.handleCodeChange.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.credCode != prevState.codeReceived) {
+      return {
+        code: nextProps.credCode || '',
+        codeReceived: nextProps.credCode
+      };
+    }
+
+    return prevState;
+  }
+
+  componentDidMount() {
+    // Submit code automatically if it's received from the parent.
+    if (this.props.credCode) {
+      this.props.onSubmit(this.props.credMethod, this.props.credCode, this.props.credToken);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // Submit code automatically if it's received from the parent.
+    if (this.state.codeReceived && this.state.code && this.state.code != prevState.code) {
+      this.props.onSubmit(this.props.credMethod, this.state.code, this.props.credToken);
+    }
+  }
+
+
+  handleCodeChange(e) {
+    this.setState({code: e.target.value.replace(/[^\d]/g, '')});
+  }
+
+  handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      this.handleSubmit(e);
+    } else if (e.key == 'Escape') {
+      this.handleCancel(e);
+    }
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (this.state.code && this.state.code.trim()) {
+      this.props.onSubmit(this.props.credMethod, this.state.code.trim(), this.props.credToken);
+    }
+  }
+
+  handleCancel(e) {
+    e.preventDefault();
+    this.props.onCancel();
+  }
+
+  render() {
+    const { formatMessage } = this.props.intl;
+    const methods = {'email': formatMessage(messages.email), 'tel': formatMessage(messages.phone)};
+    const method = methods[this.props.credMethod] || this.props.credMethod;
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <label className="small gray" htmlFor="enter-confirmation-code">
+            <FormattedMessage id="enter_confirmation_code_prompt"
+              defaultMessage="Confirmation code"
+              description="Request to enter confirmation code"
+              values={{method: method}} />
+          </label>
+        </div>
+        <div className="panel-form-row">
+          <FormattedMessage id="numeric_confirmation_code_prompt"
+            defaultMessage="Numbers only" description="Prompt for numeric conformation code">{
+            (numbers_only) => <input type="text" id="enter-confirmation-code"
+              placeholder={numbers_only}
+              value={this.state.code} onChange={this.handleCodeChange}
+              onKeyPress={this.handleKeyPress} required />
+          }</FormattedMessage>
+        </div>
+        <div className="dialog-buttons">
+          <button className="secondary" onClick={this.handleCancel}>
+            <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+          </button>
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default injectIntl(ValidationView);

src/widgets/alert.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class Alert extends React.PureComponent {
+  render() {
+    return (<div className="alert-container">
+      <div className="alert">
+        <div className="title">{this.props.title}</div>
+        <div className="content">{this.props.content}</div>
+        <div className="dialog-buttons">
+          {this.props.onReject ?
+            <button className="outline" onClick={this.props.onReject}>
+              {this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
+            </button>
+            :
+            null
+          }
+          {this.props.onConfirm ?
+            <button className="primary" onClick={this.props.onConfirm}>
+              {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
+            </button>
+            :
+            null
+          }
+        </div>
+      </div>
+    </div>);
+  }
+};

src/widgets/attachment.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import FileProgress from './file-progress.jsx';
+import { bytesToHumanSize } from '../lib/strformat.js';
+import { isUrlRelative, sanitizeUrl } from '../lib/utils.js';
+
+export default class Attachment extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      downloader: null,
+      progress: 0
+    };
+
+    this.downloadFile = this.downloadFile.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  downloadFile(url, filename, mimetype) {
+    if (!url) {
+      this.props.onError("Invalid download URL '" + url + "'");
+      return;
+    }
+
+    const downloader = this.props.tinode.getLargeFileHelper();
+    this.setState({downloader: downloader});
+    downloader.download(url, filename, mimetype,
+      loaded => this.setState({progress: loaded / this.props.size}),
+      err => this.props.onError(err, 'err')
+    )
+    .then(_ => this.setState({downloader: null, progress: 0}))
+    .catch(err => {
+      if (err) {
+        this.props.onError("Error downloading file: " + err.message, 'err');
+      }
+      this.setState({downloader: null, progress: 0});
+    });
+  }
+
+  handleCancel() {
+    if (this.props.uploading) {
+      this.props.onCancelUpload();
+    } else if (this.state.downloader) {
+      this.state.downloader.cancel();
+    }
+  }
+
+  render() {
+    let filename = this.props.filename || 'file_attachment';
+    if (filename.length > 36) {
+      filename = filename.substr(0, 16) + '...' + filename.substr(-16);
+    }
+    let size = this.props.size > 0 ?
+      <span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
+      null;
+
+    // Detect if the download URL is relative or absolute.
+    // If the URL is relative use LargeFileHelper to attach authentication
+    // credentials to the request.
+    let url, helperFunc;
+    if (!this.props.uploading && !this.state.downloader && isUrlRelative(this.props.downloadUrl)) {
+      // Relative URL. Use download helper.
+      url = '#';
+      helperFunc = (e) => {
+        e.preventDefault();
+        this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
+      };
+    } else {
+      url = sanitizeUrl(this.props.downloadUrl);
+      helperFunc = null;
+    }
+    const downloadWidget = <><i className="material-icons">file_download</i> <FormattedMessage id="save_attachment"
+      defaultMessage="save" description="Call to save an attachment" /></>;
+    return (
+      <div className="attachment">
+        <div><i className="material-icons big gray">insert_drive_file</i></div>
+        <div className="flex-column">
+          <div>{filename} {size}</div>
+          {this.props.uploading || this.state.downloader ?
+            <FileProgress progress={this.props.uploading ? this.props.progress : this.state.progress}
+              onCancel={this.handleCancel} />
+            :
+            <div>{url ?
+              <a href={url} download={this.props.filename} onClick={helperFunc}>{downloadWidget}</a>
+              :
+              <span className="light-gray">{downloadWidget}</span>
+            }</div>
+          }
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/audio-player.jsx

@@ -0,0 +1,271 @@
+// Audio recorder widget.
+
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { secondsToTime } from '../lib/strformat';
+import { base64ToIntArray } from '../lib/blob-helpers';
+
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Color of histogram bars.
+const BAR_COLOR = '#888A';
+const BAR_COLOR_DARK = '#666C';
+const THUMB_COLOR = '#444E';
+// Minimum number of amplitude bars to draw.
+const MIN_PREVIEW_LENGTH = 16;
+
+const messages = defineMessages({
+  icon_title_play: {
+    id: 'icon_title_play',
+    defaultMessage: 'Play recording',
+    description: 'Icon tool tip for starting audio playback'
+  }
+});
+
+class AudioPlayer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    let preview = base64ToIntArray(this.props.preview);
+    if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
+      preview = null;
+    }
+
+    this.state = {
+      canPlay: false,
+      playing: false,
+      currentTime: '0:00',
+      duration: this.props.duration > 0 ? secondsToTime(this.props.duration / 1000) : '-:--',
+      longMin: this.props.duration >= 600000,
+      preview: preview
+    };
+
+    this.initAudio = this.initAudio.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.resampleBars = this.resampleBars.bind(this);
+    this.visualize = this.visualize.bind(this);
+
+    this.handlePlay = this.handlePlay.bind(this);
+    this.handleSeek = this.handleSeek.bind(this);
+    this.handleError = this.handleError.bind(this);
+
+    this.audioPlayer = null;
+
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.props.src) {
+      this.initAudio();
+    }
+
+    this.initCanvas();
+  }
+
+  componentWillUnmount() {
+    if (this.audioPlayer) {
+      this.audioPlayer.oncanplay = null;
+      this.audioPlayer.ontimeupdate = null;
+      this.audioPlayer.onended = null;
+      this.audioPlayer.pause();
+      this.audioPlayer = null;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src != prevProps.src) {
+      this.initAudio();
+    }
+
+    if (this.props.preview != prevProps.preview) {
+      let preview = base64ToIntArray(this.props.preview);
+      if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
+        preview = null;
+      }
+      this.setState({preview: preview}, this.initCanvas);
+    }
+  }
+
+  initAudio() {
+    this.audioPlayer = new Audio(this.props.src);
+    this.audioPlayer.oncanplay = _ => this.setState({canPlay: true});
+    this.audioPlayer.ontimeupdate = _ => this.setState({
+      currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)
+    });
+    this.audioPlayer.onended = _ => {
+      this.audioPlayer.currentTime = 0;
+      this.setState({playing: false, currentTime: secondsToTime(0, this.state.longMin)})
+    }
+  }
+
+  initCanvas() {
+    // Force canvas aspect ratio to match one of the element + upscale canvas to reduce blurring.
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+
+    this.viewBuffer = this.resampleBars(this.state.preview);
+    this.visualize();
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    if (!this.canvasRef.current) {
+      return;
+    }
+
+    const width = this.effectiveWidth;
+    const height = this.canvasRef.current.height;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+
+    const drawFrame = _ => {
+      if (!this.canvasRef.current || !this.audioPlayer) {
+        // The component is unmounted.
+        return;
+      }
+
+      this.canvasContext.clearRect(0, 0, this.canvasRef.current.width, height);
+
+      if (this.viewBuffer) {
+        if (this.state.playing) {
+          window.requestAnimationFrame(drawFrame);
+        }
+
+        // Current playback position.
+        const thumbAt = this.props.duration ?
+          Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * (width - LINE_WIDTH * 2) : -1;
+
+        // Draw amplitude bars.
+        this.canvasContext.beginPath();
+        this.canvasContext.strokeStyle = BAR_COLOR_DARK;
+        for (let i = 0; i < this.viewBuffer.length; i++) {
+          let x = 1 + i * (LINE_WIDTH + SPACING) + LINE_WIDTH * 0.5;
+          let y = this.viewBuffer[i] * height * 0.9;
+
+          const color = x < thumbAt ? BAR_COLOR_DARK : BAR_COLOR;
+          if (this.canvasContext.strokeStyle != color) {
+            this.canvasContext.stroke();
+            this.canvasContext.beginPath();
+            this.canvasContext.strokeStyle = color;
+          }
+
+          this.canvasContext.moveTo(x, (height - y) * 0.5);
+          this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+        }
+        // Actually draw the bars on canvas.
+        this.canvasContext.stroke();
+
+        // Draw thumb.
+        if (this.props.duration) {
+          this.canvasContext.beginPath();
+          this.canvasContext.arc(thumbAt + LINE_WIDTH * 2, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);
+          this.canvasContext.fillStyle = THUMB_COLOR;
+          this.canvasContext.fill();
+        }
+      }
+    }
+
+    drawFrame();
+  }
+
+  // Quick and dirty downsampling of the original preview bars into a smaller (or equal) number of bars we can display here.
+  resampleBars(original) {
+    const dstCount = ((this.canvasRef.current.width - SPACING) / (LINE_WIDTH + SPACING)) | 0;
+    // Remove extra padding on the right due to fractional bar which is not drawn.
+    this.effectiveWidth = dstCount * (LINE_WIDTH + SPACING) + SPACING;
+
+    if (!Array.isArray(original) || original.length == 0) {
+      return Array.apply(null, Array(dstCount)).map(_ => 0.01);
+    }
+
+    const factor = original.length / dstCount;
+    let amps = [];
+    let maxAmp = -1;
+    for (let i=0; i<dstCount; i++) {
+      let lo = (i * factor) | 0; // low bound;
+      let hi = ((i + 1) * factor) | 0; // high bound;
+      if (hi == lo) {
+        amps[i] = original[lo];
+      } else {
+        let amp = 0.0;
+        for (let j=lo; j<hi; j++) {
+          amp += original[j]
+        }
+        amps[i] = Math.max(0, amp / (hi - lo));
+      }
+      maxAmp = Math.max(amps[i], maxAmp);
+    }
+
+    if (maxAmp > 0) {
+      return amps.map(a => a / maxAmp);
+    }
+    return Array.apply(null, Array(dstCount)).map(_ => 0.01);
+  }
+
+  handlePlay(e) {
+    e.preventDefault();
+    if (!this.state.canPlay) {
+      return;
+    }
+    if (this.state.playing) {
+      this.audioPlayer.pause();
+      this.setState({playing: false});
+    } else {
+      this.audioPlayer.play();
+      this.setState({playing: true}, this.visualize);
+    }
+  }
+
+  handleError(err) {
+    console.error(err);
+  }
+
+  handleSeek(e) {
+    e.preventDefault();
+    if (e.target && this.props.duration) {
+      const rect = e.target.getBoundingClientRect();
+      const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;
+      this.audioPlayer.currentTime = this.props.duration * offset / 1000;
+      this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)});
+      if (!this.state.playing) {
+        this.visualize();
+      }
+    }
+  }
+
+  render() {
+    const playClass = 'material-icons' +
+      (this.props.short ? '' : ' large') +
+      (this.state.canPlay ? '' : ' disabled');
+    const play = (<a href="#" onClick={this.handlePlay} title={this.props.intl.formatMessage(messages.icon_title_play)}>
+        <i className={playClass}>{this.state.playing ? 'pause_circle' :
+          (this.state.canPlay ? 'play_circle' : 'not_interested')}</i>
+      </a>);
+    return (<div className="audio-player">{this.props.short ?
+      <>
+        <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} />
+        {play}
+      </>
+    :
+      <>
+        {play}
+        <div>
+          <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} />
+          <div className="timer">{this.state.currentTime}/{this.state.duration}</div>
+        </div>
+      </>
+    }
+    </div>);
+  }
+}
+
+export default injectIntl(AudioPlayer);

src/widgets/audio-recorder.jsx

@@ -0,0 +1,388 @@
+// Audio recorder widget.
+
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import AudioPlayer from './audio-player.jsx';
+// Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=642012
+// It adds duration and SeekHead to the webm record.
+import fixWebmDuration from 'webm-duration-fix';
+
+import { intArrayToBase64 } from '../lib/blob-helpers.js'
+import { secondsToTime } from '../lib/strformat';
+import { KEYPRESS_DELAY, MAX_DURATION, MIN_DURATION } from '../config.js';
+
+// FFT resolution.
+const BUFFER_SIZE = 256;
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Duration represented by one visualization bar.
+const MILLIS_PER_BAR = 100;
+// Color of histogram bars
+const BAR_COLOR = '#BBBD';
+// Vertical scaling for visualization bars.
+const BAR_SCALE = 64.0;
+// Number of bars in preview.
+const VISUALIZATION_BARS = 96;
+// Maximum number of samples per bar.
+const MAX_SAMPLES_PER_BAR = 10;
+
+// Recording format.
+const AUDIO_MIME_TYPE = 'audio/webm';
+
+const messages = defineMessages({
+  icon_title_delete: {
+    id: 'icon_title_delete',
+    defaultMessage: 'Delete recording',
+    description: 'Icon tool tip for deleting recorded audio'
+  },
+  icon_title_pause: {
+    id: 'icon_title_pause',
+    defaultMessage: 'Pause playback',
+    description: 'Icon tool tip for pausing audio playback'
+  },
+  icon_title_resume: {
+    id: 'icon_title_resume',
+    defaultMessage: 'Resume playback',
+    description: 'Icon tool tip for resuming audio playback'
+  },
+  icon_title_send: {
+    id: 'icon_title_send',
+    defaultMessage: 'Send message',
+    description: 'Icon tool tip for sending a message'
+  },
+});
+
+class AudioRecorder extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      enabled: true,
+      audioRecord: null,
+      recording: true,
+      paused: false,
+      duration: '0:00',
+      blobUrl: null,
+      preview: null
+    };
+
+    this.visualize = this.visualize.bind(this);
+    this.initMediaRecording = this.initMediaRecording.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.getRecording = this.getRecording.bind(this);
+    this.cleanUp = this.cleanUp.bind(this);
+
+    this.handleResume = this.handleResume.bind(this);
+    this.handlePause = this.handlePause.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleDone = this.handleDone.bind(this);
+
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+
+    // Timestamp for sending "recording" notifications.
+    this.recordingTimestamp = 0;
+  }
+
+  componentDidMount() {
+    this.stream = null;
+    this.mediaRecorder = null;
+    this.audioContext = null;
+    this.audioInput = null;
+    this.analyser = null;
+
+    this.audioChunks = [];
+
+    // Start recorder right away.
+    try {
+      navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(this.initMediaRecording, this.props.onError);
+    } catch (err) {
+      this.props.onError(err);
+    }
+  }
+
+  componentWillUnmount() {
+    this.startedOn = null;
+    if (this.stream) {
+      this.cleanUp();
+    }
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    this.initCanvas();
+
+    const pcmData = new Uint8Array(this.analyser.frequencyBinCount);
+    const width = this.canvasWidth;
+    const height = this.canvasHeight;
+    // Number of bars.
+    const viewLength = (width / (LINE_WIDTH + SPACING)) | 0;
+    // Duration of audio which fits onto the screen.
+    const viewDuration = MILLIS_PER_BAR * viewLength;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+    this.canvasContext.strokeStyle = BAR_COLOR;
+
+    let prevBarCount = 0;
+    let volume = 0.0;
+    let countPerBar = 0;
+    const drawFrame = _ => {
+      if (!this.startedOn) {
+        return;
+      }
+      window.requestAnimationFrame(drawFrame);
+
+      const duration = this.durationMillis + (Date.now() - this.startedOn);
+      // Update record length timer.
+      this.setState({duration: secondsToTime(duration / 1000)});
+
+      // Check if record is too long.
+      if (duration > MAX_DURATION) {
+        this.startedOn = null;
+        this.mediaRecorder.pause();
+        this.durationMillis += Date.now() - this.startedOn;
+        this.setState({enabled: false, recording: false, duration: secondsToTime(this.durationMillis / 1000)});
+      }
+
+      // Draw histogram.
+
+      // Get current waveform and calculate its amplitude.
+      this.analyser.getByteTimeDomainData(pcmData);
+      let amp = 0.0;
+      for (const amplitude of pcmData) {
+        amp += (amplitude - 127) ** 2;
+      }
+
+      // Sum the amplitude.
+      volume += Math.sqrt(amp/pcmData.length);
+      countPerBar ++;
+
+      let barCount = (duration / MILLIS_PER_BAR) | 0;
+      // Shift of the histogram along x-axis to make scrolling smooth. No need to shift if recording is too short.
+      const dx = viewDuration > duration ? 0 :
+        (duration - MILLIS_PER_BAR * barCount) / MILLIS_PER_BAR * (LINE_WIDTH + SPACING);
+
+      if (prevBarCount != barCount) {
+        prevBarCount = barCount;
+        // Add new amplitude visualization bar.
+        this.viewBuffer.push(volume/countPerBar);
+        volume = 0.0;
+        countPerBar = 0;
+        if (this.viewBuffer.length > viewLength) {
+          // Keep at most 'viewLength' amplitude bars.
+          this.viewBuffer.shift();
+        }
+      }
+
+      // Clear canvas.
+      this.canvasContext.clearRect(0, 0, width, height);
+
+      // Draw amplitude bars.
+      this.canvasContext.beginPath();
+      for (let i = 0; i < this.viewBuffer.length; i++) {
+        let x = i * (LINE_WIDTH + SPACING) - dx;
+        let y = Math.min(this.viewBuffer[i] / BAR_SCALE, 0.9) * height;
+
+        this.canvasContext.moveTo(x, (height - y) * 0.5);
+        this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+      }
+      // Actually draw the bars on canvas.
+      this.canvasContext.stroke();
+
+      // Send notification, if needed.
+      const now = new Date().getTime();
+      if (now - this.recordingTimestamp > KEYPRESS_DELAY) {
+        this.props.onRecordingProgress();
+        this.recordingTimestamp = now;
+      }
+    }
+
+    drawFrame();
+  }
+
+  handlePause(e) {
+    e.preventDefault();
+    this.mediaRecorder.pause();
+    this.mediaRecorder.requestData();
+    this.durationMillis += Date.now() - this.startedOn;
+    this.startedOn = null;
+    this.setState({recording: false});
+  }
+
+  handleResume(e) {
+    e.preventDefault();
+    if (this.state.enabled) {
+      this.startedOn = Date.now();
+      this.mediaRecorder.resume();
+      this.setState({recording: true}, this.visualize);
+    }
+  }
+
+  handleDelete(e) {
+    e.preventDefault();
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.mediaRecorder.stop();
+    this.cleanUp();
+    this.setState({recording: false});
+  }
+
+  handleDone(e) {
+    e.preventDefault();
+    this.setState({recording: false});
+    if (this.startedOn) {
+      this.durationMillis += Date.now() - this.startedOn;
+      this.startedOn = null;
+    }
+    // Stop recording and return data.
+    if (this.mediaRecorder) {
+      this.mediaRecorder.stop();
+    }
+  }
+
+  initCanvas() {
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+    // To reduce line blurring.
+    this.canvasContext.translate(0.5, 0.5);
+    this.canvasWidth = this.canvasRef.current.width;
+    this.canvasHeight = this.canvasRef.current.height;
+  }
+
+  initMediaRecording(stream) {
+    this.stream = stream;
+    this.mediaRecorder = new MediaRecorder(stream, {mimeType: AUDIO_MIME_TYPE, audioBitsPerSecond: 24_000});
+
+    // The following code is needed for visualization.
+    this.audioContext = new AudioContext();
+    this.audioInput = this.audioContext.createMediaStreamSource(stream);
+    this.analyser = this.audioContext.createAnalyser();
+    this.analyser.fftSize = BUFFER_SIZE;
+    this.audioInput.connect(this.analyser);
+
+    this.mediaRecorder.onstop = _ => {
+      if (this.durationMillis > MIN_DURATION) {
+        this.getRecording(this.mediaRecorder.mimeType)
+          .then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
+      } else {
+        this.props.onDeleted();
+      }
+      this.cleanUp();
+    }
+
+    this.mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        this.audioChunks.push(e.data);
+      }
+
+      if (this.mediaRecorder.state != 'inactive') {
+        this.getRecording(this.mediaRecorder.mimeType).then(result => {
+          this.setState({
+            blobUrl: result.url,
+            preview: result.preview
+          });
+        });
+      }
+    }
+
+    this.durationMillis = 0;
+    this.startedOn = Date.now();
+    this.mediaRecorder.start();
+    this.visualize();
+
+    this.props.onRecordingProgress();
+    this.recordingTimestamp = this.startedOn;
+  }
+
+  // Obtain data in a form sutable for sending or playing back.
+  // If duration is valid, apply fix for Chrome's WebM duration bug.
+  getRecording(mimeType) {
+    mimeType = mimeType || AUDIO_MIME_TYPE;
+    let blob = new Blob(this.audioChunks, {type: mimeType});
+    return fixWebmDuration(blob, mimeType)
+      .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
+      .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
+      .then(decoded => this.createPreview(decoded))
+      .then(preview => ({url: window.URL.createObjectURL(blob), preview: intArrayToBase64(preview)}));
+  }
+
+  // Preview must be calculated at the source: Chrome does not allow background AudioContext.
+  createPreview(audio) {
+    const data = audio.getChannelData(0);
+    // Number of amplitude bars in preview.
+    const viewLength = Math.min(data.length, VISUALIZATION_BARS);
+    // The number of samples in each bar.
+    const totalSPB = (data.length / viewLength) | 0;
+    // Distance between samples: we are going to take just a fracton of samples.
+    const samplingRate = Math.max(1, (totalSPB / MAX_SAMPLES_PER_BAR) | 0);
+
+    let buffer = [];
+    let max = -1;
+    for (let i = 0; i < viewLength; i++) {
+      let amplitude = 0;
+      let count = 0;
+      for (let j = 0; j < totalSPB; j += samplingRate) {
+        amplitude += data[totalSPB * i + j] ** 2;
+        count ++;
+      }
+      const val = Math.sqrt(amplitude / count);
+      buffer.push(val);
+      max = Math.max(max, val);
+    }
+    // Normalize amplitude to 0..100.
+    if (max > 0) {
+      buffer = buffer.map(a => (100 * a / max) | 0);
+    }
+    return buffer;
+  }
+
+  cleanUp() {
+    this.audioInput.disconnect();
+    this.stream.getTracks().forEach(track => track.stop());
+  }
+
+  render() {
+    const {formatMessage} = this.props.intl;
+    const resumeClass = 'material-icons ' + (this.state.enabled ? 'red' : 'gray');
+    return (
+      <div className="audio">
+        <a href="#" onClick={this.handleDelete} title={formatMessage(messages.icon_title_delete)}>
+          <i className="material-icons gray">delete_outline</i>
+        </a>
+        {this.state.recording ?
+          <canvas ref={this.canvasRef} />
+          :
+          <AudioPlayer
+            src={this.state.blobUrl}
+            preview={this.state.preview}
+            duration={this.durationMillis}
+            short={true} />
+        }
+        <div className="duration">{this.state.duration}</div>
+        {this.state.recording ?
+          <a href="#" onClick={this.handlePause} title={formatMessage(messages.icon_title_pause)}>
+            <i className="material-icons">pause_circle_outline</i>
+          </a> :
+          <a href="#" onClick={this.handleResume} title={formatMessage(messages.icon_title_resume)}>
+            <i className={resumeClass}>radio_button_checked</i>
+          </a>
+        }
+        <a href="#" onClick={this.handleDone} title={formatMessage(messages.icon_title_send)}>
+          <i className="material-icons">send</i>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(AudioRecorder);

src/widgets/avatar-crop.jsx

@@ -0,0 +1,68 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Cropper from './cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+export default class AvatarCrop extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  // Cut out in image coordinates and desired scale factor.
+  handleChange(left, top, width, height, scale) {
+    this.setState({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      scale: scale
+    });
+  }
+
+  handleSubmit() {
+    imageCrop(this.props.mime, this.props.avatar,
+      this.state.left, this.state.top, this.state.width, this.state.height,
+      this.state.scale)
+      .then(img => {
+        this.props.onSubmit(img.mime, img.blob, img.width, img.height);
+      })
+      .catch(err => {
+        this.props.onError(err);
+      });
+  }
+
+  render() {
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <Cropper
+            source={this.props.avatar}
+            onChange={this.handleChange} />
+        </div>
+        <div className="dialog-buttons">
+          {this.props.onCancel ?
+            <button className="secondary" onClick={this.props.onCancel}>
+              <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+            </button>
+            : null}
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/avatar-upload.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import LetterTile from './letter-tile.jsx';
+import LoadSpinner from './load-spinner.jsx';
+
+import { sanitizeUrlForMime } from '../lib/utils.js';
+
+import { AVATAR_SIZE } from '../config.js';
+
+export default class AvatarUpload extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      source: props.avatar
+    };
+
+    this.handleFileReceived = this.handleFileReceived.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.avatar != prevProps.avatar) {
+      this.setState({source: this.props.avatar});
+    }
+  }
+
+  handleFileReceived(e) {
+    const image = e.target.files[0];
+    this.props.onImageUpdated(image.type, URL.createObjectURL(image), image.name);
+    // Clear the value so the same file can be uploaded again.
+    e.target.value = '';
+  }
+
+  render() {
+    // Randomize id value in case more than one AvatarUpload is shown
+    // at the same time.
+    const randId = 'file-input-avatar-' + ('' + Math.random()).substring(0, 4);
+    const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
+    return (
+      <div className={className}>
+        {this.props.readOnly || !this.state.source ?
+          null :
+          <a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageUpdated();}}>
+            <i className="material-icons">clear</i>
+          </a>}
+        {this.state.source ?
+          <img src={this.props.tinode.authorizeURL(sanitizeUrlForMime(this.state.source, 'image'))} className="preview" /> :
+          this.props.readOnly && this.props.uid ?
+            <div className="avatar-box">
+              <LetterTile
+                tinode={this.props.tinode}
+                avatar={true}
+                topic={this.props.uid}
+                title={this.props.title} />
+            </div>
+            :
+            <div className="blank">{AVATAR_SIZE}&times;{AVATAR_SIZE}</div>}
+        {this.props.readOnly ? null :
+          <input type="file" id={randId} className="inputfile hidden"
+            accept="image/*" onChange={this.handleFileReceived} />}
+        {this.props.readOnly ? null :
+        <label htmlFor={randId} className="round">
+          <i className="material-icons">file_upload</i>
+        </label>}
+        <LoadSpinner show={this.props.uploading} large={true} clear={true} centered={true} />
+      </div>
+    );
+  }
+};

src/widgets/badge-list.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const icon_mapping = {'staff': 'verified_user'};
+
+const messages = defineMessages({
+  badge_verified: {
+    id: 'badge_verified',
+    defaultMessage: 'Verified/official',
+    description: 'Explanation of a verified account or topic badge'
+  },
+  badge_staff: {
+    id: 'badge_staff',
+    defaultMessage: 'Staff-managed',
+    description: 'Explanation of a staff-managed account or topic badge'
+  },
+  badge_danger: {
+    id: 'badge_danger',
+    defaultMessage: 'Untrustworthy',
+    description: 'Suspicious or untrustworthy account or topic badge'
+  },
+});
+
+
+/* Trusted badges with labels: verified, staff, danger */
+class BadgeList extends React.PureComponent {
+  render() {
+    const {formatMessage} = this.props.intl;
+    let badges = null;
+    if (this.props.trustedBadges && this.props.trustedBadges.length > 0) {
+      badges = [];
+      this.props.trustedBadges.forEach(b => {
+        const comment = this.props.short ? null : formatMessage(messages['badge_' + b]);
+        const style = 'material-icons ' + b + '-color';
+        badges.push(<div className="trusted-badge" key={b}><i className={style}>{icon_mapping[b] || b}</i> {comment}</div>);
+      });
+      return <>{badges}</>;
+    }
+    return null;
+  }
+};
+
+export default injectIntl(BadgeList);

src/widgets/button-back.jsx

@@ -0,0 +1,12 @@
+// The <- button to be displayed in title bars.
+import React from 'react';
+
+export default class ButtonBack extends React.PureComponent {
+  render() {
+    return (
+      <a href="#" onClick={(e) => {e.preventDefault(); this.props.onBack();}}>
+        <i className="material-icons">arrow_back</i>
+      </a>
+    );
+  }
+}

src/widgets/call-incoming.jsx

@@ -0,0 +1,151 @@
+// IncomingCall: displays Accept & Reject buttons for incoming calls.
+import React from 'react';
+
+import BadgeList from './badge-list.jsx';
+import LetterTile from './letter-tile.jsx';
+
+import { MAX_TITLE_LENGTH, MAX_PEER_TITLE_LENGTH } from '../config.js';
+import { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';
+
+import { makeImageUrl } from '../lib/blob-helpers.js';
+import { clipStr } from '../lib/utils.js'
+
+const RING_SOUND = new Audio('audio/call-in.m4a');
+
+export default class CallIncoming extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      topic: null,
+      fullName: undefined,
+      avatar: null,
+      trustedBadges: [],
+      previousMetaDesc: undefined,
+    };
+
+    this.resetDesc = this.resetDesc.bind(this);
+    this.onMetaDesc = this.onMetaDesc.bind(this);
+    this.handleRejectCall = this.handleRejectCall.bind(this);
+    this.handleAcceptCall = this.handleAcceptCall.bind(this);
+    this.ringTimer = null;
+  }
+
+  componentDidMount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+
+    this.resetDesc(topic);
+    if (this.props.callState == CALL_STATE_INCOMING_RECEIVED) {
+      // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.
+      RING_SOUND.play().catch(_ => {});
+      this.ringTimer = setInterval(_ => {RING_SOUND.play().catch(_ => {})}, 2000);
+      this.props.onRinging(this.props.topic, this.props.seq);
+    }
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    if (this.onMetaDesc != topic.onMetaDesc) {
+      this.previousMetaDesc = topic.onMetaDesc;
+      topic.onMetaDesc = this.onMetaDesc;
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+      this.resetDesc(topic, props);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.ringTimer != null) {
+      clearInterval(this.ringTimer);
+      RING_SOUND.pause();
+    }
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.setState({topic: null});
+    topic.onMetaDesc = this.previousMetaDesc;
+  }
+
+  resetDesc(topic) {
+    const badges = [];
+    if (topic.trusted) {
+      for (const [key, val] of Object.entries(topic.trusted)) {
+        if (val) {
+          badges.push(key);
+        }
+      }
+    }
+
+    this.setState({
+      fullName: clipStr(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
+      avatar: makeImageUrl(topic.public ? topic.public.photo : null),
+      trustedBadges: badges,
+    });
+  }
+
+  onMetaDesc(desc) {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    if (!topic) {
+      return;
+    }
+    this.resetDesc(topic);
+
+    if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {
+      this.previousMetaDesc(desc);
+    }
+  }
+
+  handleAcceptCall() {
+    this.props.onAcceptCall(this.props.topic);
+  }
+
+  handleRejectCall() {
+    this.props.onReject(this.props.topic, this.props.seq);
+    this.props.onClose();
+  }
+
+  render() {
+    return (
+      <div className="alert-container">
+        <div className="incoming-call">
+          <div className="caller-card incoming pulse">
+            <div className="avatar-box">
+              <LetterTile
+                tinode={this.props.tinode}
+                avatar={this.state.avatar || true}
+                topic={this.props.topic}
+                title={this.state.fullName} />
+            </div>
+            <div className="caller-name">{clipStr(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
+              <BadgeList short={true} trustedBadges={this.state.trustedBadges} /></div>
+          </div>
+          <div className="controls">
+            {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
+              <>
+                <button className="danger" onClick={this.handleRejectCall}>
+                  <i className="material-icons">call_end</i>
+                </button>
+                <button className="positive" onClick={this.handleAcceptCall}>
+                  <i className="material-icons">call</i>
+                </button>
+              </>
+              :
+              null
+            }
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

src/widgets/call-message.jsx

@@ -0,0 +1,47 @@
+// Chat message describing a video or voice call.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { secondsToTime } from '../lib/strformat.js';
+
+export default class CallMessage extends React.PureComponent {
+  render() {
+    const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);
+    const successClass = 'material-icons medium ' + (isCallDropped ? 'red' : 'green');
+    const callIcon = this.props.incoming ?
+      (isCallDropped ? 'call_missed' : 'call_received') :
+      (isCallDropped ? 'call_missed_outgoing' : 'call_made');
+    let duration;
+    if (isCallDropped) {
+      switch (this.props.callState) {
+        case 'busy':
+          duration = <FormattedMessage id="call_busy" defaultMessage="busy" description="Label for busy call line" />;
+          break;
+        case 'declined':
+          duration = <FormattedMessage id="call_declined" defaultMessage="declined" description="Label for declined call" />;
+          break;
+        case 'missed':
+          duration = this.props.incoming ?
+            <FormattedMessage id="call_missed" defaultMessage="missed" description="Label for missed incoming call" /> :
+            <FormattedMessage id="call_cancelled" defaultMessage="cancelled" description="Label for cancelled outgoing call" />;
+          break;
+        default:
+          duration = <FormattedMessage id="call_disconnected" defaultMessage="disconnected" description="Label for disconnected call" />;
+          break;
+      }
+    } else {
+      duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
+    }
+    return <div className="call-message">
+      <div><i className="material-icons big gray">call</i></div>
+      <div className="flex-column narrow">
+        <div>{this.props.incoming ?
+          <FormattedMessage id="calls_incoming" defaultMessage="Incoming call" description="Incoming call label" /> :
+          <FormattedMessage id="calls_outgoing" defaultMessage="Outgoing call" description="Outgoing call label" />
+        }</div>
+        <div className="duration"><i className={successClass}>{callIcon}</i> {duration}</div>
+      </div>
+    </div>;
+  }
+}

src/widgets/call-panel.jsx

@@ -0,0 +1,649 @@
+// CallPanel displays call in progress: local and remote viewports and controls.
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+
+import LetterTile from './letter-tile.jsx';
+
+import { MAX_PEER_TITLE_LENGTH } from '../config.js';
+import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
+
+import { clipStr } from '../lib/utils.js'
+
+const RING_SOUND = new Audio('audio/call-out.m4a');
+RING_SOUND.loop = true;
+const CALL_ENDED_SOUND = new Audio('audio/call-end.m4a');
+CALL_ENDED_SOUND.loop = true;
+const DIALING_SOUND = new Audio('audio/dialing.m4a');
+
+const VIDEO_MUTED_EVENT = 'video:muted';
+const VIDEO_UNMUTED_EVENT = 'video:unmuted';
+
+const messages = defineMessages({
+  already_in_call: {
+    id: 'already_in_call',
+    defaultMessage: 'You already in an ongoing call!',
+    description: 'Error message when the user tried to accept a new call without finishing pervious one',
+  }
+});
+
+class CallPanel extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      localStream: undefined,
+      remoteStream: undefined,
+      pc: undefined,
+      dataChannel: undefined,
+
+      previousOnInfo: undefined,
+      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,
+      audioOnly: props.callAudioOnly,
+      // Video mute/unmute in progress.
+      videoToggleInProgress: false,
+      // Indicates if the remote peer has informed us that their camera is on.
+      remoteVideoLive: false,
+    };
+
+    this.localStreamConstraints = {
+      audio: true,
+      video: !props.callAudioOnly
+    };
+    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);
+    this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
+    this.handleICEConnectionStateChangeEvent = this.handleICEConnectionStateChangeEvent.bind(this);
+    this.handleSignalingStateChangeEvent = this.handleSignalingStateChangeEvent.bind(this);
+    this.handleICEGatheringStateChangeEvent = this.handleICEGatheringStateChangeEvent.bind(this);
+    this.handleIceCandidateErrorEvent = this.handleIceCandidateErrorEvent.bind(this);
+    this.handleTrackEvent = this.handleTrackEvent.bind(this);
+
+    this.handleVideoOfferMsg = this.handleVideoOfferMsg.bind(this);
+    this.handleVideoAnswerMsg = this.handleVideoAnswerMsg.bind(this);
+    this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
+
+    this.reportError = this.reportError.bind(this);
+    this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
+
+    this.stopTracks = this.stopTracks.bind(this);
+    this.disconnectMedia = this.disconnectMedia.bind(this);
+
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
+    this.handleToggleMicClick = this.handleToggleMicClick.bind(this);
+
+    this.handleRemoteHangup = this.handleRemoteHangup.bind(this);
+    this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
+
+    this.muteVideo = this.muteVideo.bind(this);
+    this.unmuteVideo = this.unmuteVideo.bind(this);
+    this.emptyVideoTrack = this.emptyVideoTrack.bind(this);
+
+    this.handleDataChannelEvent = this.handleDataChannelEvent.bind(this);
+    this.handleDataChannelError = this.handleDataChannelError.bind(this);
+    this.handleDataChannelMessage = this.handleDataChannelMessage.bind(this);
+    this.handleDataChannelOpen = this.handleDataChannelOpen.bind(this);
+    this.handleDataChannelClose = this.handleDataChannelClose.bind(this);
+  }
+
+  componentDidMount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    this.previousOnInfo = topic.onInfo;
+    topic.onInfo = this.onInfo;
+    if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
+         this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
+      this.start();
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    topic.onInfo = this.previousOnInfo;
+    this.stop();
+  }
+
+  handleVideoCallAccepted(info) {
+    RING_SOUND.pause();
+    // Create peer connection with a data channel.
+    const pc = this.createPeerConnection(true);
+    const stream = this.state.localStream;
+    stream.getTracks().forEach(track => {
+      pc.addTrack(track, stream);
+
+      if (track.kind == 'video' && this.state.audioOnly) {
+        // This is an audio-only call.
+        // Remove dummy video track (placeholder remains).
+        track.enabled = false;
+        track.stop();
+        stream.removeTrack(track);
+      }
+    });
+  }
+
+  onInfo(info) {
+    if (info.what != 'call') {
+      return;
+    }
+    switch (info.event) {
+      case 'accept':
+        this.handleVideoCallAccepted(info);
+        break;
+      case 'answer':
+        this.handleVideoAnswerMsg(info);
+        break;
+      case 'ice-candidate':
+        this.handleNewICECandidateMsg(info);
+        break;
+      case 'hang-up':
+        this.handleRemoteHangup(info);
+        break;
+      case 'offer':
+        this.handleVideoOfferMsg(info);
+        break;
+      case 'ringing':
+        // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.
+        RING_SOUND.play().catch(_ => {});
+        break;
+      default:
+        console.warn("Unknown call event", info.event);
+        break;
+    }
+  }
+
+  // Creates an empty video track placeholder.
+  emptyVideoTrack() {
+    const width = 640;
+    const height = 480;
+    const canvas = Object.assign(document.createElement("canvas"), {width, height});
+    canvas.getContext('2d').fillRect(0, 0, width, height);
+    const stream = canvas.captureStream(0);
+    return Object.assign(stream.getVideoTracks()[0], {enabled: false});
+  }
+
+  start() {
+    if (this.state.localStream) {
+      this.props.onError(this.props.intl.formatMessage(messages.already_in_call), 'info');
+      return;
+    }
+
+    if (this.props.callState == CALL_STATE_IN_PROGRESS) {
+      // We apparently just accepted the call.
+      this.props.onInvite(this.props.topic, this.props.seq, CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);
+      return;
+    }
+
+    // This is an outgoing call waiting for the other side to pick up.
+    // Start local video.
+    navigator.mediaDevices.getUserMedia(this.localStreamConstraints)
+      .then(stream => {
+        if (!this.localStreamConstraints.video) {
+          // Starting an audio-only call. Create a dummy video track
+          // (so video can be enabled during the call if the user desires).
+          stream.addTrack(this.emptyVideoTrack());
+        }
+        this.setState({localStream: stream, waitingForPeer: true});
+        this.localRef.current.srcObject = stream;
+
+        DIALING_SOUND.play();
+
+        // Send call invitation.
+        this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly);
+      })
+      .catch(this.handleGetUserMediaError);
+  }
+
+  stop() {
+    CALL_ENDED_SOUND.pause();
+    CALL_ENDED_SOUND.currentTime = 0;
+    RING_SOUND.pause();
+    RING_SOUND.currentTime = 0;
+
+    this.stopTracks(this.state.localStream);
+    this.stopTracks(this.state.remoteStream);
+    this.disconnectMedia(this.localRef.current);
+    this.disconnectMedia(this.remoteRef.current);
+    if (this.state.pc) {
+      this.state.pc.ontrack = null;
+      this.state.pc.onremovetrack = null;
+      this.state.pc.onremovestream = null;
+      this.state.pc.onicecandidate = null;
+      this.state.pc.oniceconnectionstatechange = null;
+      this.state.pc.onsignalingstatechange = null;
+      this.state.pc.onicegatheringstatechange = null;
+      this.state.pc.onnegotiationneeded = null;
+      this.state.pc.onicecandidateerror = null;
+      this.state.pc.ondatachannel = null;
+
+      if (this.state.dataChannel && (this.state.dataChannel.readyState == 'open' || this.state.dataChannel.readyState == 'connecting')) {
+        this.state.dataChannel.close();
+      }
+      this.state.pc.close();
+    }
+    this.setState({pc: null, waitingForPeer: false});
+  }
+
+  disconnectMedia(el) {
+    if (!el) {
+      return;
+    }
+
+    el.srcObject = null;
+    el.src = '';
+  }
+
+  stopTracks(stream) {
+    if (!stream) {
+      return;
+    }
+
+    let tracks = stream.getTracks();
+    if (tracks) {
+      tracks.forEach(track => {
+        track.stop();
+        track.enabled = false;
+      });
+    }
+  }
+
+  handleDataChannelError(error) {
+    console.error('data channel error', error);
+  }
+
+  handleDataChannelMessage(event) {
+    switch (event.data) {
+    case VIDEO_MUTED_EVENT:
+      this.setState({remoteVideoLive: false}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });
+      break;
+    case VIDEO_UNMUTED_EVENT:
+      this.setState({remoteVideoLive: true}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });
+      break;
+    default:
+      break;
+    }
+  }
+
+  handleDataChannelOpen(event) {
+    if (!this.state.audioOnly) {
+      event.target.send(VIDEO_UNMUTED_EVENT);
+    }
+  }
+
+  handleDataChannelClose(event) {
+    console.log('close data channel:', event);
+  }
+
+  handleDataChannelEvent(event) {
+    console.log('data channel event:', event);
+    const channel = event.channel;
+    channel.onerror = this.handleDataChannelError;
+    channel.onmessage = this.handleDataChannelMessage;
+    channel.onopen = this.handleDataChannelOpen;
+    channel.onclose = this.handleDataChannelClose;
+    this.setState({dataChannel: channel});
+  }
+
+  createPeerConnection(withDataChannel) {
+    const iceServers = this.props.tinode.getServerParam('iceServers', null);
+    const pc = iceServers ? new RTCPeerConnection({iceServers: iceServers}) : new RTCPeerConnection();
+
+    pc.onicecandidate = this.handleICECandidateEvent;
+    pc.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent;
+    pc.onicegatheringstatechange = this.handleICEGatheringStateChangeEvent;
+    pc.onsignalingstatechange = this.handleSignalingStateChangeEvent;
+    pc.onnegotiationneeded = this.handleNegotiationNeededEvent;
+    pc.onicecandidateerror = this.handleIceCandidateErrorEvent;
+    pc.ontrack = this.handleTrackEvent;
+    pc.ondatachannel = this.handleDataChannelEvent;
+
+    let stateUpdate = {pc: pc, waitingForPeer: false};
+    if (withDataChannel) {
+      // Create data channel for exchanging events.
+      const channel = pc.createDataChannel("events", {ordered: true});
+      channel.onerror = this.handleDataChannelError;
+      channel.onmessage = this.handleDataChannelMessage;
+      channel.onopen = this.handleDataChannelOpen;
+      channel.onclose = this.handleDataChannelClose;
+      stateUpdate.dataChannel = channel;
+    }
+    this.setState(stateUpdate);
+    return pc;
+  }
+
+  handleVideoAnswerMsg(info) {
+    // Configure the remote description, which is the SDP payload
+    // in 'info' message.
+    const desc = new RTCSessionDescription(info.payload);
+    this.state.pc.setRemoteDescription(desc)
+      .then(_ => {
+        this.setState({ callInitialSetupComplete: true }, _ => this.drainRemoteIceCandidatesCache());
+      })
+      .catch(err => this.reportError(err));
+  }
+
+  reportError(err) {
+    this.props.onError(err.message, 'err');
+  }
+
+  canSendOffer() {
+    return this.isOutgoingCall || this.state.callInitialSetupComplete;
+  }
+
+  handleNegotiationNeededEvent(event) {
+    const pc = event.target;
+    if (!this.canSendOffer()) {
+      return;
+    }
+    pc.createOffer().then(offer => {
+      return pc.setLocalDescription(offer);
+    })
+    .then(_ => {
+      this.props.onSendOffer(this.props.topic, this.props.seq, pc.localDescription.toJSON());
+    })
+    .catch(err => this.reportError(err));
+  }
+
+  handleIceCandidateErrorEvent(event) {
+    console.warn("ICE candidate error:", event);
+  }
+
+  handleICECandidateEvent(event) {
+    if (event.candidate) {
+      this.props.onIceCandidate(this.props.topic, this.props.seq, event.candidate.toJSON());
+    }
+  }
+
+  handleNewICECandidateMsg(info) {
+    const candidate = new RTCIceCandidate(info.payload);
+    if (this.state.callInitialSetupComplete) {
+      this.state.pc.addIceCandidate(candidate)
+        .catch(err => {
+          if (candidate.candidate) {
+            this.reportError(err);
+          }
+          console.warn("Error adding new ice candidate", candidate, err);
+        });
+    } else {
+      this.remoteIceCandidatesCache.push(candidate);
+    }
+  }
+
+  drainRemoteIceCandidatesCache() {
+    this.remoteIceCandidatesCache.forEach(candidate => {
+      this.state.pc.addIceCandidate(candidate)
+        .catch(err => {
+          if (candidate.candidate) {
+            this.reportError(err);
+          }
+          console.warn("Error adding cached ice candidate", candidate, err);
+        });
+    });
+    this.remoteIceCandidatesCache = [];
+  }
+
+  handleICEConnectionStateChangeEvent(event) {
+    switch (event.target.iceConnectionState) {
+      case 'closed':
+      case 'failed':
+        this.handleCloseClick();
+        break;
+    }
+  }
+
+  handleSignalingStateChangeEvent(event) {
+    if (event.target.signalingState == 'closed') {
+      this.handleCloseClick();
+    }
+  }
+
+  handleICEGatheringStateChangeEvent(event) {
+    // ICE gathering change state
+  }
+
+  handleTrackEvent(event) {
+    // Remote video becomes available.
+    this.remoteRef.current.srcObject = event.streams[0];
+    this.setState({remoteStream: event.streams[0]});
+  }
+
+  handleGetUserMediaError(e) {
+    console.error("Error opening camera and/or microphone", e);
+    switch(e.name) {
+      case 'NotFoundError':
+        // Cannot start the call b/c no camera and/or microphone found.
+        this.reportError(e);
+        break;
+      case 'SecurityError':
+      case 'PermissionDeniedError':
+        // Do nothing; this is the same as the user canceling the call.
+        break;
+      default:
+        this.reportError(e);
+        break;
+    }
+
+    // Make sure we shut down our end of the RTCPeerConnection so we're
+    // ready to try again.
+    this.handleCloseClick();
+  }
+
+  handleVideoOfferMsg(info) {
+    let localStream = null;
+    // If needed, create peer connection.
+    // Not creating data channel since it should be created by the peer.
+    const pc = this.state.pc ? this.state.pc : this.createPeerConnection(false);
+    const desc = new RTCSessionDescription(info.payload);
+
+    pc.setRemoteDescription(desc).then(_ => {
+      return navigator.mediaDevices.getUserMedia(this.localStreamConstraints);
+    })
+    .then(stream => {
+      let dummyVideo;
+      if (!this.localStreamConstraints.video) {
+        // Starting an audio-only call. Create an empty video track so
+        // so the user can enable the video during the call.
+        dummyVideo = this.emptyVideoTrack();
+        stream.addTrack(dummyVideo);
+      }
+      localStream = stream;
+      this.localRef.current.srcObject = stream;
+      this.setState({localStream: stream});
+
+      localStream.getTracks().forEach(track => {
+        pc.addTrack(track, localStream);
+      });
+
+      if (dummyVideo) {
+        dummyVideo.enabled = false;
+        dummyVideo.stop();
+        stream.removeTrack(dummyVideo);
+      }
+    })
+    .then(_ => {
+      return pc.createAnswer();
+    })
+    .then(answer => {
+      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);
+  }
+
+  // Call disconnected by remote.
+  handleRemoteHangup() {
+    if (!this.state.waitingForPeer) {
+      // This is live call, just hang up.
+      this.handleCloseClick();
+    } else {
+      // This is a call which is not yet connected.
+      // Stop pulse animation.
+      this.setState({waitingForPeer: false});
+      // Change sound and wait a bit before ending it.
+      RING_SOUND.pause();
+      RING_SOUND.currentTime = 0;
+      CALL_ENDED_SOUND.loop = true;
+      CALL_ENDED_SOUND.play().catch(_ => {});
+      setTimeout(_ => {
+        this.handleCloseClick();
+      }, 2000);
+    }
+  }
+
+  handleCloseClick() {
+    this.stop();
+    this.props.onHangup(this.props.topic, this.props.seq);
+  }
+
+  // Ends video track and turns off the camera.
+  muteVideo() {
+    if (!this.state.pc || !this.state.dataChannel) {
+      return;
+    }
+
+    const stream = this.state.localStream;
+    const t = stream.getVideoTracks()[0];
+    t.enabled = false;
+    t.stop();
+
+    stream.removeTrack(t);
+    this.state.dataChannel.send(VIDEO_MUTED_EVENT);
+    this.setState({videoToggleInProgress: false});
+  }
+
+  unmuteVideo() {
+    if (!this.state.pc || !this.state.dataChannel) {
+      return;
+    }
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then(stream => {
+        // Will extract video track from stream and throw stream away,
+        // and replace video track in the media sender.
+        this.localRef.current.srcObject = null;
+        const sender = this.state.pc.getSenders().find(s => s.track.kind == 'video');
+        const track = stream.getVideoTracks()[0];
+        // Remote track from new stream.
+        stream.removeTrack(track);
+        // Add this track to the existing local stream.
+        this.state.localStream.addTrack(track);
+        return sender.replaceTrack(track);
+      })
+      .then(_ => {
+        this.localRef.current.srcObject = this.state.localStream;
+        this.state.dataChannel.send(VIDEO_UNMUTED_EVENT);
+      })
+      .catch(err => this.handleGetUserMediaError(err))
+      .finally(_ => { this.setState({videoToggleInProgress: false}); }); // Make sure we redraw the mute/unmute icons (e.g. camera -> camera_off).
+  }
+
+  handleToggleCameraClick() {
+    if (this.state.videoToggleInProgress) {
+      // Toggle currently in progress.
+      return;
+    }
+    const tracks = this.state.localStream.getVideoTracks();
+    this.setState({videoToggleInProgress: true}, _ => {
+      if (tracks && tracks.length > 0 && tracks[0].enabled && tracks[0].readyState == 'live') {
+        this.muteVideo();
+      } else {
+        this.unmuteVideo();
+      }
+      this.setState({audioOnly: !this.state.audioOnly});
+    });
+  }
+
+  handleToggleMicClick() {
+    const stream = this.state.localStream;
+    const t = stream.getAudioTracks()[0];
+    t.enabled = !t.enabled;
+    // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off).
+    this.forceUpdate();
+  }
+
+  render() {
+    const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();
+    const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();
+    const disabled = !this.state.pc || !this.state.dataChannel || !(audioTracks && audioTracks[0]);
+    const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
+    const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off';
+    const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
+    const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';
+
+    let remoteActive = false;
+    if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) {
+      const rstream = this.remoteRef.current.srcObject;
+      if (rstream.getVideoTracks().length > 0) {
+        const t = rstream.getVideoTracks()[0];
+        remoteActive = t.enabled && t.readyState == 'live';
+      }
+    }
+
+    return (
+      <>
+        <div id="video-container">
+          <div id="video-container-panel">
+            <div className="call-party self" disabled={this.state.audioOnly}>
+              <video ref={this.localRef} autoPlay muted playsInline />
+              <div className="caller-name inactive">
+                <FormattedMessage id="calls_you_label"
+                  defaultMessage="You" description="Shown over the local video screen" />
+              </div>
+            </div>
+            <div className="call-party peer" disabled={!remoteActive}>
+              {remoteActive ?
+                <>
+                  <video ref={this.remoteRef} autoPlay playsInline />
+                  <div className="caller-name inactive">{peerTitle}</div>
+                </> :
+                <>
+                  <audio ref={this.remoteRef} autoPlay />
+                  <div className={`caller-card${pulseAnimation}`}>
+                    <div className="avatar-box">
+                      <LetterTile
+                        tinode={this.props.tinode}
+                        avatar={this.props.avatar}
+                        topic={this.props.topic}
+                        title={this.props.title} />
+                    </div>
+                    <div className="caller-name">{peerTitle}</div>
+                  </div>
+                </>
+              }
+            </div>
+          </div>
+          <div className="controls">
+            <button className="danger" onClick={this.handleCloseClick}>
+              <i className="material-icons">call_end</i>
+            </button>
+            <button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
+              <i className="material-icons">{videoIcon}</i>
+            </button>
+            <button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
+              <i className="material-icons">{audioIcon}</i>
+            </button>
+          </div>
+        </div>
+      </>
+    );
+  }
+};
+
+export default injectIntl(CallPanel);

src/widgets/call-status.jsx

@@ -0,0 +1,47 @@
+// The counter of unread messages in the topic.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { secondsToTime } from '../lib/strformat.js';
+
+// Props:
+//  incoming: true | false.
+//  success: true | false.
+export default class CallStatus extends React.PureComponent {
+  render() {
+    const isCallDropped = ['busy', 'declined', 'disconnected', 'missed'].includes(this.props.callState);
+    const icon2 = this.props.incoming ?
+      (isCallDropped ? 'call_missed' : 'call_received') :
+      (isCallDropped ? 'call_missed_outgoing' : 'call_made');
+    let duration;
+    if (isCallDropped) {
+      switch (this.props.callState) {
+        case 'busy':
+          duration = <FormattedMessage id="call_busy" defaultMessage="busy" description="Label for busy call line" />;
+          break;
+        case 'declined':
+          duration = <FormattedMessage id="call_declined" defaultMessage="declined" description="Label for declined call" />;
+          break;
+        case 'missed':
+          duration = this.props.incoming ?
+            <FormattedMessage id="call_missed" defaultMessage="missed" description="Label for missed incoming call" /> :
+            <FormattedMessage id="call_cancelled" defaultMessage="cancelled" description="Label for cancelled outgoing call" />;
+          break;
+        default:
+          duration = <FormattedMessage id="call_disconnected" defaultMessage="disconnected" description="Label for disconnected call" />;
+          break;
+      }
+    } else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {
+      duration = <FormattedMessage id="call_in_progress" defaultMessage="in progress" description="Label for call in progress" />
+    } else {
+      duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
+    }
+    return (
+      <>
+        <div className="composed-material">
+          <i className="material-icons">call</i><i className="material-icons second">{icon2}</i>
+        </div> {duration}
+      </>
+    );
+  }
+};

src/widgets/chat-message.jsx

@@ -0,0 +1,241 @@
+// Single chat message bubble, sent or received.
+
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { Drafty, Tinode } from 'tinode-sdk';
+
+import Attachment from './attachment.jsx';
+import LetterTile from './letter-tile.jsx';
+import ReceivedMarker from './received-marker.jsx'
+
+import { fullFormatter } from '../lib/formatters.js';
+import { sanitizeUrl } from '../lib/utils.js';
+
+class BaseChatMessage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      progress: 0
+    };
+
+    if (props.uploader) {
+      props.uploader.onProgress = this.handleProgress.bind(this);
+    }
+
+    this.handleExpandImage = this.handleExpandImage.bind(this);
+    this.handlePlayVideo = this.handlePlayVideo.bind(this);
+    this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
+    this.handleContextClick = this.handleContextClick.bind(this);
+    this.handleCancelUpload = this.handleCancelUpload.bind(this);
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
+
+    this.formatterContext = {
+      formatMessage: props.intl.formatMessage.bind(props.intl),
+      viewportWidth: props.viewportWidth,
+      authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
+
+      onImagePreview: this.handleExpandImage,
+      onVideoPreview: this.handlePlayVideo,
+      onFormButtonClick: this.handleFormButtonClick,
+      onQuoteClick: this.handleQuoteClick
+    };
+  }
+
+  handleExpandImage(e) {
+    e.preventDefault();
+    this.props.onExpandMedia({
+      url: e.target.src,
+      filename: e.target.dataset.name,
+      width: e.target.dataset.width,
+      height: e.target.dataset.height,
+      size: e.target.dataset.size,
+      type: e.target.dataset.mime
+    });
+  }
+
+  handlePlayVideo(e) {
+    e.preventDefault();
+    this.props.onExpandMedia({
+      video: true,
+      url: e.target.dataset.src,
+      preview: e.target.src,
+      filename: e.target.dataset.name,
+      width: e.target.dataset.width,
+      height: e.target.dataset.height,
+      duration: e.target.dataset.duration,
+      size: e.target.dataset.size,
+      type: e.target.dataset.mime
+    });
+  }
+
+  handleFormButtonClick(e) {
+    e.preventDefault();
+    const data = {
+      seq: this.props.seq
+    };
+    data.resp = {};
+    if (e.target.dataset.name) {
+      data.resp[e.target.dataset.name] = e.target.dataset.val ? e.target.dataset.val :
+        e.target.dataset.val === undefined ? 1 : '' + e.target.dataset.val;
+    }
+    if (e.target.dataset.act == 'url') {
+      data.ref = sanitizeUrl(e.target.dataset.ref) || 'about:blank';
+    }
+    const text = e.target.dataset.title || 'unknown';
+    this.props.onFormResponse(e.target.dataset.act, text, data);
+  }
+
+  handleContextClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const menuItems = [];
+    if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
+      menuItems.push('menu_item_send_retry');
+    }
+    if (this.props.received > Tinode.MESSAGE_STATUS_FATAL) {
+      if (this.props.userIsWriter) {
+        menuItems.push('menu_item_reply');
+        if (!this.props.response) {
+          let immutable = false;
+          Drafty.entities(this.props.content, (_0, _1, tp) => {
+            immutable = ['AU', 'EX', 'FM', 'IM', 'VC', 'VD'].includes(tp);
+            return immutable;
+          });
+          if (!immutable) {
+            Drafty.styles(this.props.content, tp => {
+              immutable = ['QQ'].includes(tp);
+              return immutable;
+            });
+          }
+          if (!immutable) {
+            menuItems.push('menu_item_edit');
+          }
+        }
+      }
+      if (this.props.userIsAdmin) {
+        menuItems.push(this.props.pinned ? 'menu_item_unpin' : 'menu_item_pin');
+      }
+    }
+    menuItems.push('menu_item_forward');
+
+    this.props.showContextMenu({
+      seq: this.props.seq,
+      replace: this.props.edited ? parseInt(this.props.edited.split(':')[1]) : 0,
+      content: this.props.content,
+      userFrom: this.props.userFrom,
+      userName: this.props.userName,
+      y: e.pageY,
+      x: e.pageX,
+      pickReply: this.props.pickReply,
+      editMessage: this.props.editMessage,
+    }, menuItems);
+  }
+
+  handleProgress(ratio) {
+    this.setState({progress: ratio});
+  }
+
+  handleCancelUpload() {
+    this.props.onCancelUpload(this.props.seq, this.props.uploader);
+  }
+
+  handleQuoteClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const replyToSeq = this.props.replyToSeq;
+    if (replyToSeq) {
+      this.props.onQuoteClick(replyToSeq);
+    }
+  }
+
+  render() {
+    const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
+    const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
+    const avatar = this.props.userAvatar || true;
+    const fullDisplay = (this.props.isGroup && this.props.response &&
+      (this.props.sequence == 'single' || this.props.sequence == 'last'));
+
+    let content = this.props.content;
+    const attachments = [];
+    if (this.props.mimeType == Drafty.getContentType() && Drafty.isValid(content)) {
+      Drafty.attachments(content, (att, i) => {
+        if (att.mime == 'application/json') {
+          // Don't show json objects as attachments.
+          // They are not meant for users.
+          return;
+        }
+        attachments.push(<Attachment
+          tinode={this.props.tinode}
+          downloadUrl={Drafty.getDownloadUrl(att)}
+          filename={att.name}
+          uploading={Drafty.isProcessing(att)}
+          mimetype={att.mime}
+          size={Drafty.getEntitySize(att)}
+          progress={this.state.progress}
+          onCancelUpload={this.handleCancelUpload}
+          onError={this.props.onError}
+          key={i} />);
+      }, this);
+      const tree = Drafty.format(content, fullFormatter, this.formatterContext);
+      content = React.createElement(React.Fragment, null, tree);
+    } else if (typeof content != 'string') {
+      content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
+        <FormattedMessage id="invalid_content"
+          defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
+    }
+
+    return (
+      <li ref={this.props.innerRef} className={sideClass}>
+        {this.props.isGroup && this.props.response ?
+          <div className="avatar-box">
+            {fullDisplay ?
+              <LetterTile
+                tinode={this.props.tinode}
+                topic={this.props.userFrom}
+                title={this.props.userName}
+                avatar={avatar} /> :
+              null}
+          </div> :
+          null}
+        <div>
+          <div className={bubbleClass}>
+            <div className="content-meta">
+              <div className="message-content">
+                {content}
+                {attachments}
+              </div>
+              {this.props.timestamp ?
+                <ReceivedMarker
+                  edited={this.props.edited}
+                  timestamp={this.props.timestamp}
+                  received={this.props.received} />
+                : null}
+            </div>
+            {this.props.showContextMenu ?
+              <span className="menuTrigger">
+                <a href="#" onClick={this.handleContextClick}>
+                  <i className="material-icons">expand_more</i>
+                </a>
+              </span> : null
+            }
+          </div>
+          {fullDisplay ?
+            <div className="author">
+              {this.props.userName ||
+                <i><FormattedMessage id="user_not_found" defaultMessage="Not found"
+                description="In place of a user's full name when the user is not found." /></i>
+              }
+            </div>
+            : null
+          }
+        </div>
+      </li>
+    );
+  }
+};
+
+const IntlChatMessage = injectIntl(BaseChatMessage);
+const ChatMessage = React.forwardRef((props, ref) => <IntlChatMessage innerRef = {ref} {...props} />);
+
+export default ChatMessage;