diff --git a/index-dev.html b/index-dev.html
index 62fb1585..3a86b40e 100644
--- a/index-dev.html
+++ b/index-dev.html
@@ -40,5 +40,11 @@
     <script src="src/tinode.js"></script>
     <!-- the application -->
     <script type="text/babel" src="src/webapp.js"></script>
+    <script type="text/babel">
+      ReactDOM.render(
+        <TinodeWeb />,
+        document.getElementById('mountPoint')
+      );
+    </script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 1d03d671..b3ef7eb4 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,6 @@
   </head>
   <body>
     <div id="mountPoint"></div>
-    <script src="index.min.js"></script>
+    <script src="umd/index.prod.js"></script>
   </body>
 </html>
diff --git a/index.min.js b/index.min.js
deleted file mode 100644
index 4f01e331..00000000
--- a/index.min.js
+++ /dev/null
@@ -1 +0,0 @@
-const APP_NAME="TinodeWeb/0.15",KNOWN_HOSTS={hosted:"api.tinode.co",local:"localhost:6060"},DEFAULT_HOST=KNOWN_HOSTS.hosted,POP_SOUND=new Audio("audio/msg.mp3"),DEL_CHAR="\u2421",API_KEY="AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K",KEYPRESS_DELAY=3000,RECEIVED_DELAY=500,READ_DELAY=1e3,MIN_TAG_LENGTH=4,MEDIA_BREAKPOINT=640,REM_SIZE=13,AVATAR_SIZE=128,MESSAGES_PAGE=24,MAX_INBAND_ATTACHMENT_SIZE=195840,MAX_EXTERN_ATTACHMENT_SIZE=8388608,MAX_IMAGE_DIM=768,SUPPORTED_IMAGE_FORMATS=["image/jpeg","image/gif","image/png","image/svg","image/svg+xml"],MIME_EXTENSIONS=["jpg","gif","png","svg","svg"];var Drafty=Tinode.Drafty;Storage.prototype.setObject=function(e,t){this.setItem(e,JSON.stringify(t))},Storage.prototype.getObject=function(e){var t=this.getItem(e);return t&&JSON.parse(t)};function shortDateFormat(e){var t=window.navigator.userLanguage||window.navigator.language,a=new Date;return e.getFullYear()==a.getFullYear()?e.getMonth()==a.getMonth()&&e.getDate()==a.getDate()?e.toLocaleTimeString(t,{hour12:!1,hour:"2-digit",minute:"2-digit"}):e.toLocaleDateString(t,{hour12:!1,month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}):e.toLocaleDateString(t,{hour12:!1,year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}function bytesToHumanSize(e){if(!e||0==e)return"0 Bytes";var t=["Bytes","KB","MB","GB","TB","PB"],a=Math.min(0|Math.floor(Math.log2(e)/10),t.length-1),n=e/Math.pow(1024,a),s=0<a?3>n?2:30>n?1:0:0;return n.toFixed(s)+" "+t[a]}function makeImageUrl(e){return e&&e.type&&e.data?"data:image/"+e.type+";base64,"+e.data:null}function fitImageSize(e,t,a,n,s){var o=Math.min;if(!e||!t||!a||!n)return null;s&&(a=n=o(a,n));let r=o(o(e,a)/e,o(t,n)/t),i={dstWidth:0|e*r,dstHeight:0|t*r};return s?(i.dstWidth=i.dstHeight=o(i.dstWidth,i.dstHeight),i.srcWidth=i.srcHeight=o(e,t),i.xoffset=0|(e-i.srcWidth)/2,i.yoffset=0|(t-i.srcWidth)/2):(i.xoffset=i.yoffset=0,i.srcWidth=e,i.srcHeight=t),i}function fileNameForMime(e,t){var a=SUPPORTED_IMAGE_FORMATS.indexOf(t),n=MIME_EXTENSIONS[a],s=e.lastIndexOf(".");return 0<=s&&(e=e.substring(0,s)),e+"."+n}function getMimeType(e){var t=/^data:(image\/[-+a-z0-9.]+);base64/.exec(e);return t&&1<t.length?t[1]:null}function base64EncodedLen(e){return 4*Math.floor((e+2)/3)}function base64DecodedLen(e){return 3*Math.floor(e/4)}function imageFileScaledToBase64(e,t,a,n,s,o){var r=new Image;r.crossOrigin="Anonymous",r.onerror=function(){o("Image format unrecognized")},r.onload=function(){var r=fitImageSize(this.width,this.height,t,a,n);if(!r)return void o("Invalid image");var i=document.createElement("canvas");i.width=r.dstWidth,i.height=r.dstHeight;var d=i.getContext("2d");d.imageSmoothingEnabled=!0,d.drawImage(this,r.xoffset,r.yoffset,r.srcWidth,r.srcHeight,0,0,r.dstWidth,r.dstHeight);var l=this.width!=r.dstWidth||this.height!=r.dstHeight||0>SUPPORTED_IMAGE_FORMATS.indexOf(e.type)?"image/jpeg":e.type,c=i.toDataURL(l),p=c.split(",");if(l=getMimeType(p[0]),!l)return void o("Unsupported image format");var m=.78;if(base64DecodedLen(c.length)>MAX_INBAND_ATTACHMENT_SIZE&&(l="image/jpeg"),"image/jpeg"==l)for(;base64DecodedLen(c.length)>MAX_INBAND_ATTACHMENT_SIZE&&.45<m;)c=i.toDataURL(l,m),m*=.84;return base64DecodedLen(c.length)>MAX_INBAND_ATTACHMENT_SIZE?void o("The image size "+bytesToHumanSize(base64DecodedLen(c.length))+" exceeds the "+bytesToHumanSize(MAX_INBAND_ATTACHMENT_SIZE)+" limit.","err"):void(i=null,s(c.split(",")[1],l,r.dstWidth,r.dstHeight,fileNameForMime(e.name,l)))},r.src=URL.createObjectURL(e)}function imageFileToBase64(e,t,a){var n=new FileReader;n.addEventListener("load",function(){var s=n.result.split(","),o=getMimeType(s[0]);if(!o)return void a("Failed to process image file");var r=new Image;r.crossOrigin="Anonymous",r.onload=function(){t(s[1],o,this.width,this.height,fileNameForMime(e.name,o))},r.onerror=function(){a("Image format not recognized")},r.src=URL.createObjectURL(e)},!1),n.readAsDataURL(e)}function fileToBase64(e,t){var a=new FileReader;a.addEventListener("load",function(){t(e.type,a.result.split(",")[1],e.name)}),a.readAsDataURL(e)}function filePasted(e,t,a,n){var s=(e.clipboardData||e.originalEvent.clipboardData||{}).items;for(var o in s){var r=s[o];if("file"===r.kind){var i=r.getAsFile();if(!i){console.log("Failed to get file object from pasted file item",r.kind,r.type);continue}return i.type&&"image"==i.type.split("/")[0]?i.size>MAX_INBAND_ATTACHMENT_SIZE||0>SUPPORTED_IMAGE_FORMATS.indexOf(i.type)?imageFileScaledToBase64(i,MAX_IMAGE_DIM,MAX_IMAGE_DIM,!1,t,n):imageFileToBase64(i,t,n):fileToBase64(i,a,n),!0}}return!1}function updateFavicon(e){var t=document.getElementById("shortcut-icon");if(t){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("link");n.type="image/png",n.id="shortcut-icon",n.rel="shortcut icon",n.href="img/logo32x32"+(0<e?"a":"")+".png",a.removeChild(t),a.appendChild(n)}document.title=(0<e?"("+e+") ":"")+"Tinode"}function stringHash(e){var t=0;e=""+e;for(var a=0;a<e.length;a++)t=(t<<5)-t+e.charCodeAt(a),t&=t;return t}function parseUrlHash(e){let t=e.split("?",2),a={},n=[];return t[0]&&(n=t[0].substr(1).split("/")),t[1]&&t[1].split("&").forEach(function(e){let t=e.split("=");t[0]&&(a[decodeURIComponent(t[0])]=decodeURIComponent(t[1]))}),{path:n,params:a}}function composeUrlHash(e,t){var a=e.join("/"),n=[];for(var s in t)t.hasOwnProperty(s)&&n.push(s+"="+t[s]);return 0<n.length&&(a+="?"+n.join("&")),a}function addUrlParam(e,t,a){var n=parseUrlHash(e);return n.params[t]=a,composeUrlHash(n.path,n.params)}function removeUrlParam(e,t){var a=parseUrlHash(e);return delete a.params[t],composeUrlHash(a.path,a.params)}function setUrlSidePanel(e,t){var a=parseUrlHash(e);return a.path[0]=t,composeUrlHash(a.path,a.params)}function setUrlTopic(e,t){var a=parseUrlHash(e);return a.path[1]=t,delete a.params.info,composeUrlHash(a.path,a.params)}function detectServerAddress(){var e=DEFAULT_HOST;return"file:"===window.location.protocol||"localhost"===window.location.hostname?e=KNOWN_HOSTS.local:window.location.hostname&&(e=window.location.hostname+(window.location.port?":"+window.location.port:"")),e}function vcard(e,t){var a=null;if((e&&e.trim()||t)&&(a={},e&&(a.fn=e.trim()),t)){var n=t.indexOf(",");a.photo={data:t.substring(n+1),type:"jpg"}}return a}function arrayEqual(e,t){if(e.length!=t.length)return!1;e.sort(),t.sort();for(var a=0,n=e.length;a<n;a++)if(e[a]!==t[a])return!1;return!0}function topicPermissionSetter(e,t,a){var n=Tinode.getTopic(t.topicName);if(!n)return void console.log("Topic not found",t.topicName);var s,o;if(t.user){if(o=n.subscriber(t.user),!o)return void console.log("Subscriber not found",t.topicName+"["+t.user+"]");s=o.acs.updateGiven(e).getGiven()}else s=n.getAccessMode().updateWant(e).getWant();this;n.setMeta({sub:{user:t.user,mode:s}}).catch(function(e){a&&a(e.message,"err")})}function deleteMessages(e,t,a,n){var s=Tinode.getTopic(a.topicName);if(!s)return void console.log("Topic not found: ",a.topicName);if(s.cancelSend(a.seq))return new Promise.resolve;var o=e?s.delMessagesAll(t):s.delMessagesList([a.seq],t);o.catch(function(e){n&&n(e.message,"err")})}var ContextMenuItems={topic_info:{title:"Info",handler:null},messages_clear:{title:"Clear messages",handler:function(e,t){deleteMessages(!0,!1,e,t)}},messages_clear_hard:{title:"Clear for All",handler:function(e,t){deleteMessages(!0,!0,e,t)}},message_delete:{title:"Delete",handler:function(e,t){deleteMessages(!1,!1,e,t)}},message_delete_hard:{title:"Delete for All",handler:function(e,t){deleteMessages(!1,!0,e,t)}},topic_unmute:{title:"Unmute",handler:topicPermissionSetter.bind(this,"+P")},topic_mute:{title:"Mute",handler:topicPermissionSetter.bind(this,"-P")},topic_unblock:{title:"Unblock",handler:topicPermissionSetter.bind(this,"+J")},topic_block:{title:"Block",handler:topicPermissionSetter.bind(this,"-J")},topic_delete:{title:"Delete",handler:function(e,t){var a=Tinode.getTopic(e.topicName);return a?void a.delTopic().catch(function(e){t&&t(e.message,"err")}):void console.log("Topic not found: ",e.topicName)}},permissions:{title:"Edit permissions",handler:null},member_delete:{title:"Remove",handler:function(e,t){var a=Tinode.getTopic(e.topicName);return a&&e.user?void a.delSubscription(e.user).catch(function(e){t&&t(e.message,"err")}):void console.log("Topic or user not found: '"+e.topicName+"', '"+e.user+"'")}},member_mute:{title:"Mute",handler:topicPermissionSetter.bind(this,"-P")},member_unmute:{title:"Unmute",handler:topicPermissionSetter.bind(this,"+P")},member_block:{title:"Block",handler:topicPermissionSetter.bind(this,"-J")},member_unblock:{title:"Unblock",handler:topicPermissionSetter.bind(this,"+J")}};class ContextMenu extends React.Component{constructor(e){super(e),this.toggle=this.toggle.bind(this),this.handlePageClick=this.handlePageClick.bind(this),this.handleEscapeKey=this.handleEscapeKey.bind(this),this.handleClick=this.handleClick.bind(this)}componentWillUnmount(){this.toggle(!1)}componentWillReceiveProps(e){this.toggle(e.visible)}toggle(e){e?(document.addEventListener("mousedown",this.handlePageClick,!1),document.addEventListener("keyup",this.handleEscapeKey,!1)):(document.removeEventListener("mousedown",this.handlePageClick,!1),document.removeEventListener("keyup",this.handleEscapeKey,!1))}handlePageClick(t){ReactDOM.findDOMNode(this).contains(t.target)||(t.preventDefault(),t.stopPropagation(),this.props.hide())}handleEscapeKey(t){27===t.keyCode&&this.props.hide()}handleClick(t){t.preventDefault(),t.stopPropagation(),this.props.hide();var e=this.props.items[t.currentTarget.dataset.id];e.handler(this.props.params,this.props.onError)}render(){if(!this.props.visible)return null;var e=0,t=this,a=[];this.props.items.map(function(n){n&&n.title&&a.push("-"===n.title?React.createElement("li",{className:"separator",key:e}):React.createElement("li",{onClick:t.handleClick,"data-id":e,key:e},n.title)),e++});var n=REM_SIZE*(.7+2.5*a.length),s=this.props.bounds.right-this.props.clickAt.x<156?this.props.clickAt.x-this.props.bounds.left-156:this.props.clickAt.x-this.props.bounds.left,o=this.props.bounds.bottom-this.props.clickAt.y<n?this.props.clickAt.y-this.props.bounds.top-n:this.props.clickAt.y-this.props.bounds.top;return React.createElement("ul",{className:"menu",style:{left:s+"px",top:o+"px"}},a)}}class MenuCancel extends React.PureComponent{constructor(e){super(e)}render(){return React.createElement("a",{href:"javascript:;",onClick:this.props.onCancel},React.createElement("i",{className:"material-icons"},"close"))}}class LoadSpinner extends React.PureComponent{render(){return this.props.show?React.createElement("div",{className:"load-spinner-box"},React.createElement("div",{className:"loader-spinner"})):null}}class MoreButton extends React.PureComponent{constructor(e){super(e),this.state={open:e.open},this.handleToggle=this.handleToggle.bind(this)}handleToggle(){var e=!this.state.open;this.setState({open:e}),this.props.onToggle&&this.props.onToggle(e)}render(){return React.createElement("label",{className:"small",onClick:this.handleToggle},this.props.title,"...",this.state.open?React.createElement("i",{className:"material-icons"},"expand_more"):React.createElement("i",{className:"material-icons"},"chevron_right"))}}class LetterTile extends React.PureComponent{render(){var e;if(!(!0===this.props.avatar))e=this.props.avatar?React.createElement("img",{className:"avatar",alt:"avatar",src:this.props.avatar}):null;else if(this.props.topic&&this.props.title&&this.props.title.trim()){var t=this.props.title.trim().charAt(0),a="lettertile dark-color"+Math.abs(stringHash(this.props.topic))%16;e=React.createElement("div",{className:a},React.createElement("div",null,t))}else e="grp"===Tinode.topicType(this.props.topic)?React.createElement("i",{className:"material-icons"},"group"):React.createElement("i",{className:"material-icons"},"person");return e}}class InPlaceEdit extends React.Component{constructor(e){super(e),this.state={active:e.state,text:e.text||""},this.handeTextChange=this.handeTextChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleStartEditing=this.handleStartEditing.bind(this),this.handleEditingFinished=this.handleEditingFinished.bind(this)}componentWillReceiveProps(e){this.props.text==e.text||this.state.active||this.setState({text:e.text||""})}handeTextChange(t){this.setState({text:t.target.value})}handleKeyDown(t){27===t.keyCode?this.setState({text:this.props.text,active:!1}):13===t.keyCode&&this.handleEditingFinished()}handleStartEditing(){this.props.readOnly||(ReactDOM.findDOMNode(this).focus(),this.setState({active:!0}))}handleEditingFinished(){this.setState({active:!1});var e=this.state.text.trim();(e||this.props.text)&&e!==this.props.text&&this.props.onFinished(e)}render(){var e="password"===this.props.type?"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022":this.state.text,t="in-place-edit"+(this.props.readOnly?" disabled":"");return e||(e=this.props.placeholder,t+=" placeholder"),20<e.length&&(e=e.substring(0,19)+"..."),this.state.active?React.createElement("input",{type:this.props.type||"text",value:this.state.text,placeholder:this.props.placeholder,onChange:this.handeTextChange,onKeyDown:this.handleKeyDown,onBlur:this.handleEditingFinished,autoFocus:!0}):React.createElement("span",{className:t,onClick:this.handleStartEditing},React.createElement("span",{className:"content"},e))}}class HostSelector extends React.PureComponent{constructor(e){super(e),this.state={hostName:e.serverAddress,changed:!1},this.handleHostNameChange=this.handleHostNameChange.bind(this),this.handleEditingFinished=this.handleEditingFinished.bind(this)}handleHostNameChange(t){this.setState({hostName:t.target.value,changed:!0})}handleEditingFinished(){this.state.changed&&(this.setState({changed:!1}),this.props.onServerAddressChange(this.state.hostName.trim()))}render(){var e=[];for(var t in KNOWN_HOSTS){var a=KNOWN_HOSTS[t];e.push(React.createElement("option",{key:a,value:a}))}return React.createElement("div",null,React.createElement("label",{htmlFor:"host-name"},"Server address:"),React.createElement("input",{type:"search",id:"host-name",placeholder:this.props.hostName,list:"known-hosts",value:this.state.hostName,onChange:this.handleHostNameChange,onBlur:this.handleEditingFinished,required:!0}),React.createElement("datalist",{id:"known-hosts"},e))}}class CheckBox extends React.PureComponent{constructor(e){super(e),this.handleChange=this.handleChange.bind(this)}handleChange(){this.props.onChange(this.props.name,!this.props.checked)}render(){return this.props.onChange?this.props.checked?React.createElement("i",{className:"material-icons blue clickable",onClick:this.handleChange},"check_box"):React.createElement("i",{className:"material-icons blue clickable",onClick:this.handleChange},"check_box_outline_blank"):this.props.checked?React.createElement("i",{className:"material-icons"},"check_box"):React.createElement("i",{className:"material-icons"},"check_box_outline_blank")}}class PermissionsEditor extends React.Component{constructor(e){super(e),this.state={mode:(e.mode||"").replace("N","")},this.handleChange=this.handleChange.bind(this),this.handleSubmit=this.handleSubmit.bind(this),this.handleCancel=this.handleCancel.bind(this)}handleChange(e){var t=this.state.mode,a=t.indexOf(e);-1==a?t+=e:t=t.replace(e,""),this.setState({mode:t})}handleSubmit(){var e=(this.state.mode||"N").split("").sort().join(""),t=(this.props.mode||"N").split("").sort().join("");e===t?this.props.onCancel():this.props.onSubmit(e)}handleCancel(){this.props.onCancel()}render(){for(var e,t={J:"Join (J)",R:"Read (R)",W:"Write (W)",P:"Get notified (P)",A:"Approve (A)",S:"Share (S)",D:"Delete (D)",O:"Owner (O)"},a=this.props.skip||"",n=this.state.mode,s=(this.props.compare||"").replace("N",""),o=[],r=0;r<8;r++)(e="JRWPASDO".charAt(r),!(0<=a.indexOf(e)&&0>n.indexOf(e)))&&o.push(React.createElement("tr",{key:e},React.createElement("td",null,t[e]),React.createElement("td",{className:"checkbox"},0>a.indexOf(e)?React.createElement(CheckBox,{name:e,checked:0<=n.indexOf(e),onChange:this.handleChange}):React.createElement(CheckBox,{name:e,checked:0<=n.indexOf(e)})),this.props.compare?React.createElement("td",{className:"checkbox"},React.createElement(CheckBox,{name:e,checked:0<=s.indexOf(e)})):null));return React.createElement("div",{className:"panel-form-column"},this.props.userTitle?React.createElement("ul",{className:"contact-box"},React.createElement(Contact,{item:this.props.item,title:this.props.userTitle,avatar:makeImageUrl(this.props.userAvatar?this.props.userAvatar:null)})):null,React.createElement("label",{className:"small"},"Permissions"),React.createElement("table",{className:"permission-editor"},this.props.compare?React.createElement("thead",null,React.createElement("tr",null,React.createElement("th",null),React.createElement("th",null,this.props.modeTitle),React.createElement("th",null,this.props.compareTitle))):null,React.createElement("tbody",null,o)),React.createElement("br",null),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:"blue",onClick:this.handleSubmit},"Ok"),React.createElement("button",{className:"white",onClick:this.handleCancel},"Cancel")))}}class ChipInput extends React.Component{constructor(e){super(e),this.state={placeholder:e.chips?"":e.prompt,sortedChips:ChipInput.sortChips(e.chips,e.required),chipIndex:ChipInput.indexChips(e.chips),input:"",focused:!1},this.handleTextInput=this.handleTextInput.bind(this),this.removeChipAt=this.removeChipAt.bind(this),this.handleChipCancel=this.handleChipCancel.bind(this),this.handleFocusGained=this.handleFocusGained.bind(this),this.handleFocusLost=this.handleFocusLost.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillReceiveProps(e){this.setState({sortedChips:ChipInput.sortChips(e.chips,e.required),chipIndex:ChipInput.indexChips(e.chips)}),e.chips.length>this.props.chips.length&&this.setState({input:""})}static indexChips(e){var t={},a=0;return e.map(function(e){t[e.user]=a,a++}),t}static sortChips(e,t){var a=[],n=[];return e.map(function(e){e.user===t?a.push(e):n.push(e)}),a.concat(n)}handleTextInput(t){this.setState({input:t.target.value}),this.props.filterFunc&&this.props.filterFunc(t.target.value)}removeChipAt(e){var t=this.state.sortedChips[e];this.props.onChipRemoved(t.user,this.state.chipIndex[t.user])}handleChipCancel(e,t){this.removeChipAt(t)}handleFocusGained(){this.setState({focused:!0})}handleFocusLost(){this.setState({focused:!1}),this.props.onFocusLost&&this.props.onFocusLost(this.state.input)}handleKeyDown(t){if(!("Backspace"===t.key))"Enter"===t.key?this.props.onEnter&&this.props.onEnter(this.state.input):"Escape"===t.key&&this.props.onCancel&&this.props.onCancel();else if(0==this.state.input.length&&0<this.state.sortedChips.length){var e=this.state.sortedChips.length-1;this.state.sortedChips[e].user!==this.props.required&&this.removeChipAt(e)}}render(){var e=[],t=this,a=0;this.state.sortedChips.map(function(n){e.push(React.createElement(Chip,{onCancel:t.handleChipCancel,avatar:makeImageUrl(n.public?n.public.photo:null),title:n.public?n.public.fn:void 0,noAvatar:t.props.avatarDisabled,topic:n.user,required:n.user===t.props.required,index:a,key:n.user})),a++});var n="chip-input"+(this.state.focused?" focused":"");return React.createElement("div",{className:n},e,React.createElement("input",{type:"text",placeholder:this.state.placeholder,onChange:this.handleTextInput,onFocus:this.handleFocusGained,onBlur:this.handleFocusLost,onKeyDown:this.handleKeyDown,value:this.state.input,autoFocus:!0}))}}class Chip extends React.PureComponent{constructor(e){super(e),this.handleCancel=this.handleCancel.bind(this)}handleCancel(){this.props.onCancel(this.props.topic,this.props.index)}render(){var e=this.props.title||this.props.topic;return React.createElement("div",{className:"chip"},this.props.noAvatar?React.createElement("span",{className:"spacer"}):React.createElement("div",{className:"avatar-box"},React.createElement(LetterTile,{avatar:this.props.avatar||!0,topic:this.props.topic,title:this.props.title})),React.createElement("span",null,e),this.props.onCancel&&!this.props.required?React.createElement("a",{href:"javascript:;",onClick:this.handleCancel},"\xD7"):React.createElement("span",{className:"spacer"}))}}class GroupSubs extends React.Component{constructor(e){super(e),this.state={onlineSubs:e.subscribers||[]}}componentWillReceiveProps(e){this.setState({onlineSubs:e.subscribers?e.subscribers:[]})}render(){var e=[];return this.state.onlineSubs.map(t=>{e.push(React.createElement("div",{className:"avatar-box"},React.createElement(LetterTile,{topic:t.user,avatar:makeImageUrl(t.public?t.public.photo:null)||!0,title:t.public?t.public.fn:null,key:t.user})))}),React.createElement("div",{id:"topic-users"},e)}}class LoginView extends React.Component{constructor(e){super(e),this.state={login:e.login,password:"",hostName:e.serverAddress,saveToken:localStorage.getObject("keep-logged-in")},this.handleLoginChange=this.handleLoginChange.bind(this),this.handlePasswordChange=this.handlePasswordChange.bind(this),this.handleServerAddressChange=this.handleServerAddressChange.bind(this),this.handleToggleSaveToken=this.handleToggleSaveToken.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleLoginChange(t){this.setState({login:t.target.value})}handlePasswordChange(t){this.setState({password:t.target.value})}handleServerAddressChange(e){this.setState({hostName:e}),this.props.onServerAddressChange(e)}handleToggleSaveToken(){localStorage.setObject("keep-logged-in",!this.state.saveToken),this.setState({saveToken:!this.state.saveToken})}handleSubmit(t){t.preventDefault(),this.props.onLogin(this.state.login.trim(),this.state.password.trim())}render(){var e="blue";return this.props.disabled&&(e+=" disabled"),React.createElement("form",{id:"login-form",onSubmit:this.handleSubmit},React.createElement("input",{type:"text",id:"inputLogin",placeholder:"Login (alice, bob, carol, dave, frank)",autoComplete:"username",value:this.state.login,onChange:this.handleLoginChange,required:!0,autoFocus:!0}),React.createElement("input",{type:"password",id:"inputPassword",placeholder:"Password (alice123, bob123, ...)",autoComplete:"current-password",value:this.state.password,onChange:this.handlePasswordChange,required:!0}),React.createElement("div",{className:"panel-form-row"},React.createElement(HostSelector,{serverAddress:this.props.serverAddress,onServerAddressChange:this.handleServerAddressChange})),React.createElement("div",{className:"panel-form-row"},React.createElement(CheckBox,{id:"save-token",name:"save-token",checked:this.state.saveToken,onChange:this.handleToggleSaveToken}),React.createElement("label",{forHtml:"save-token"},"\xA0Keep me logged in")),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:e,type:"submit"},"Sign in")))}}class CreateAccountView extends React.PureComponent{constructor(e){super(e),this.state={login:"",password:"",password2:"",email:"",fn:"",imageDataUrl:null,errorCleared:!1,saveToken:localStorage.getObject("keep-logged-in")},this.handleLoginChange=this.handleLoginChange.bind(this),this.handlePasswordChange=this.handlePasswordChange.bind(this),this.handlePassword2Change=this.handlePassword2Change.bind(this),this.handleEmailChange=this.handleEmailChange.bind(this),this.handleFnChange=this.handleFnChange.bind(this),this.handleImageChanged=this.handleImageChanged.bind(this),this.handleToggleSaveToken=this.handleToggleSaveToken.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleLoginChange(t){this.setState({login:t.target.value})}handlePasswordChange(t){this.setState({password:t.target.value})}handlePassword2Change(t){this.setState({password2:t.target.value})}handleEmailChange(t){this.setState({email:t.target.value})}handleFnChange(t){this.setState({fn:t.target.value})}handleImageChanged(e){this.setState({imageDataUrl:e})}handleToggleSaveToken(){localStorage.setObject("keep-logged-in",!this.state.saveToken),this.setState({saveToken:!this.state.saveToken})}handleSubmit(t){t.preventDefault(),this.state.password.trim()==this.state.password2.trim()?(this.setState({errorCleared:!1}),this.props.onCreateAccount(this.state.login.trim(),this.state.password.trim(),vcard(this.state.fn,this.state.imageDataUrl),{meth:"email",val:this.state.email})):this.props.onError("Passwords don't match","warn")}render(){var e="blue";return this.props.disabled&&(e+=" disabled"),React.createElement("form",{className:"panel-form-column",onSubmit:this.handleSubmit},React.createElement("div",{className:"panel-form-row"},React.createElement("div",{className:"panel-form-column"},React.createElement("input",{type:"text",placeholder:"Login",autoComplete:"user-name",value:this.state.login,onChange:this.handleLoginChange,required:!0,autoFocus:!0}),React.createElement("input",{type:"password",placeholder:"Password",autoComplete:"new-password",value:this.state.password,onChange:this.handlePasswordChange,required:!0}),React.createElement("input",{type:"password",placeholder:"Repeat password",autoComplete:"new-password",value:this.state.password2,onChange:this.handlePassword2Change,required:!0})),React.createElement(AvatarUpload,{onImageChanged:this.handleImageChanged,onError:this.props.onError})),React.createElement("div",{className:"panel-form-row"},React.createElement("input",{type:"email",placeholder:"Email, e.g john.doe@example.com",autoComplete:"email",value:this.state.email,onChange:this.handleEmailChange,required:!0})),React.createElement("div",{className:"panel-form-row"},React.createElement("input",{type:"text",placeholder:"Full name, e.g. John Doe",autoComplete:"name",value:this.state.fn,onChange:this.handleFnChange,required:!0})),React.createElement("div",{className:"panel-form-row"},React.createElement(CheckBox,{id:"save-token",name:"save-token",checked:this.state.saveToken,onChange:this.handleToggleSaveToken}),React.createElement("label",{forHtml:"save-token"},"\xA0Keep me logged in")),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:e,type:"submit"},"Sign up")))}}class AvatarUpload extends React.Component{constructor(e){super(e),this.state={dataUrl:e.avatar},this.handleFileUpload=this.handleFileUpload.bind(this)}componentWillReceiveProps(e){this.props.avatar!=e.avatar&&this.setState({dataUrl:e.avatar})}handleFileUpload(t){var e=this;imageFileScaledToBase64(t.target.files[0],AVATAR_SIZE,AVATAR_SIZE,!0,function(t,a){var n=makeImageUrl({data:t,type:a});e.setState({dataUrl:n}),e.props.onImageChanged(n)},function(e){this.props.onError(e,"err")}),t.target.value=""}render(){var e="file-input-avatar-"+(Math.random()+"").substr(2);return React.createElement("div",{className:"avatar-upload"},this.state.dataUrl?React.createElement("img",{src:this.state.dataUrl,className:"preview"}):this.props.readOnly&&this.props.uid?React.createElement("div",{className:"avatar-box"},React.createElement(LetterTile,{avatar:!0,topic:this.props.uid,title:this.props.title})):React.createElement("div",{className:"blank"},"128\xD7128"),this.props.readOnly?null:React.createElement("input",{type:"file",id:e,className:"inputfile hidden",accept:"image/*",onChange:this.handleFileUpload}),this.props.readOnly?null:React.createElement("label",{htmlFor:e,className:"round"},React.createElement("i",{className:"material-icons"},"file_upload")))}}class SettingsView extends React.PureComponent{constructor(e){super(e),this.state={transport:e.transport||"def",messageSounds:e.messageSounds},this.handleSubmit=this.handleSubmit.bind(this),this.handleMessageSoundsToggle=this.handleMessageSoundsToggle.bind(this),this.handleTransportSelected=this.handleTransportSelected.bind(this)}handleSubmit(t){t.preventDefault(),this.props.onUpdate(null,this.state.transport,this.state.messageSounds)}handleMessageSoundsToggle(e,t){this.setState({messageSounds:t})}handleTransportSelected(t){this.setState({transport:t.currentTarget.value})}render(){var e={def:"default",ws:"websocket",lp:"long polling"},t=[],a=this;return["def","ws","lp"].map(function(n){var s="transport-"+n,o=e[n];t.push(React.createElement("li",{key:n},React.createElement("input",{type:"radio",id:s,name:"transport-select",value:n,checked:a.state.transport===n,onChange:a.handleTransportSelected}),React.createElement("label",{htmlFor:s},o)))}),React.createElement("form",{id:"settings-form",onSubmit:this.handleSubmit},React.createElement("div",{className:"panel-form-row"},React.createElement("label",{forHtml:"message-sound"},"Message sound:"),React.createElement(CheckBox,{id:"message-sound",checked:this.state.messageSounds,onChange:this.handleMessageSoundsToggle})),React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small"},"Wire transport:")),React.createElement("div",{className:"panel-form-row"},React.createElement("ul",{className:"quoted"},t)),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{type:"submit",className:"blue"},"Update")))}}class SideNavbar extends React.PureComponent{render(){return React.createElement("div",{id:"side-caption-panel",className:"caption-panel"},React.createElement("div",{id:"self-avatar",className:"avatar-box"},React.createElement(LetterTile,{avatar:this.props.avatar,topic:this.props.myUserId,title:this.props.title})),React.createElement("div",{id:"sidepanel-title",className:"panel-title"},this.props.title),"login"===this.props.state?React.createElement(MenuStart,{onSignUp:this.props.onSignUp,onSettings:this.props.onSettings}):"contacts"===this.props.state?React.createElement(MenuContacts,{onNewTopic:this.props.onNewTopic,onSettings:this.props.onSettings}):null,this.props.onCancel?React.createElement(MenuCancel,{onCancel:this.props.onCancel}):null)}}class MenuStart extends React.PureComponent{render(){return React.createElement("div",null,React.createElement("a",{href:"javascript:;",onClick:this.props.onSignUp},React.createElement("i",{className:"material-icons"},"person_add")),"\xA0",React.createElement("a",{href:"javascript:;",onClick:this.props.onSettings},React.createElement("i",{className:"material-icons"},"settings")))}}class MenuContacts extends React.PureComponent{render(){return React.createElement("div",null,React.createElement("a",{href:"javascript:;",onClick:this.props.onNewTopic},React.createElement("i",{className:"material-icons"},"chat")),"\xA0",React.createElement("a",{href:"javascript:;",onClick:this.props.onSettings},React.createElement("i",{className:"material-icons"},"settings")))}}class SidepanelView extends React.Component{constructor(e){super(e),this.handleLoginRequested=this.handleLoginRequested.bind(this)}handleLoginRequested(e,t){this.props.onLoginRequest(e,t)}render(){var e=null,t=!1,a=void 0,n=this.props.state||(this.props.myUserId?"contacts":"login");switch(n){case"login":e="Sign In";break;case"register":e="Create Account",a=this.props.onCancel;break;case"settings":e="Settings",a=this.props.onCancel;break;case"edit":e="Edit Account",a=this.props.onCancel;break;case"contacts":e=this.props.title,t=!this.props.avatar||this.props.avatar;break;case"newtpk":e="Start New Chat",a=this.props.onCancel;break;case"cred":e="Confirm Credentials",a=this.props.onCancel;break;default:;}return React.createElement("div",{id:"sidepanel",className:this.props.hideSelf?"nodisplay":null},React.createElement(SideNavbar,{state:n,title:e,avatar:t,myUserId:this.props.myUserId,onSignUp:this.props.onSignUp,onSettings:this.props.onSettings,onNewTopic:this.props.onNewTopic,onCancel:a}),React.createElement(ErrorPanel,{level:this.props.errorLevel,text:this.props.errorText,onClearError:this.props.onError}),"login"===n?React.createElement(LoginView,{login:this.props.login,disabled:this.props.loginDisabled,serverAddress:this.props.serverAddress,onLogin:this.handleLoginRequested,onServerAddressChange:this.props.onGlobalSettings}):"register"===n?React.createElement(CreateAccountView,{onCreateAccount:this.props.onCreateAccount,onCancel:this.props.onCancel,onError:this.props.onError}):"settings"===n?React.createElement(SettingsView,{transport:this.props.transport,messageSounds:this.props.messageSounds,onCancel:this.props.onCancel,onUpdate:this.props.onGlobalSettings}):"edit"===n?React.createElement(EditAccountView,{login:this.props.login,onSubmit:this.props.onUpdateAccount,onUpdateTags:this.props.onUpdateAccountTags,onLogout:this.props.onLogout,onCancel:this.props.onCancel,onError:this.props.onError}):"contacts"===n?React.createElement(ContactsView,{connected:this.props.connected,topicSelected:this.props.topicSelected,showContextMenu:this.props.showContextMenu,messageSounds:this.props.messageSounds,onTopicSelected:this.props.onTopicSelected,onAcsChange:this.props.onAcsChange,onOnlineChange:this.props.onOnlineChange}):"newtpk"===n?React.createElement(NewTopicView,{contactsSearchQuery:this.props.contactsSearchQuery,foundContacts:this.props.foundContacts,onInitFind:this.props.onInitFind,onSearchContacts:this.props.onSearchContacts,onCreateTopic:this.props.onCreateTopic,onError:this.props.onError}):"cred"===n?React.createElement(ValidationView,{credCode:this.props.credCode,credMethod:this.props.credMethod,onSubmit:this.props.onValidateCredentials,onCancel:this.props.onCancel,onError:this.props.onError}):null)}}class ErrorPanel extends React.PureComponent{constructor(e){super(e),this.state={show:!1},this.hide=this.hide.bind(this)}componentWillReceiveProps(e){this.setState({show:!!e.level})}hide(){this.setState({show:!1}),this.props.onClearError&&this.props.onClearError()}render(){var e="err"==this.props.level?"error":"warning";return React.createElement("div",{className:this.state.show?"err"==this.props.level?"alert-box error":"alert-box warning":"alert-box"},React.createElement("div",{className:"icon"},React.createElement("i",{className:"material-icons"},e)),this.props.text,React.createElement("div",{className:"cancel"},React.createElement(MenuCancel,{onCancel:this.hide})))}}class EditAccountView extends React.Component{constructor(e){super(e);let t=Tinode.getMeTopic(),a=t.getDefaultAccess(),n=Tinode.getFndTopic();this.state={fullName:t.public?t.public.fn:void 0,avatar:makeImageUrl(t.public?t.public.photo:null),address:Tinode.getCurrentUserID(),auth:a.auth,anon:a.anon,tags:n.tags(),previousOnTags:n.onTagsUpdated},this.tnNewTags=this.tnNewTags.bind(this),this.handleFullNameUpdate=this.handleFullNameUpdate.bind(this),this.handlePasswordUpdate=this.handlePasswordUpdate.bind(this),this.handleImageChanged=this.handleImageChanged.bind(this),this.handleTagsUpdated=this.handleTagsUpdated.bind(this)}componentDidMount(){let e=Tinode.getFndTopic();e.onTagsUpdated=this.tnNewTags,e.isSubscribed()||e.subscribe(e.startMetaQuery().withLaterDesc().withTags().build()).catch(e=>{this.props.onError(e.message,"err")})}componentWillUnmount(){var e=Tinode.getFndTopic();e.onTagsUpdated=this.state.previousOnTags}tnNewTags(e){this.setState({tags:e})}handleFullNameUpdate(e){this.setState({fullName:e}),this.props.onSubmit(null,vcard(e,this.state.avatar))}handlePasswordUpdate(e){this.setState({password:e}),this.props.onSubmit(e,null)}handleImageChanged(e){this.setState({avatar:e}),this.props.onSubmit(null,vcard(this.state.fullName,e))}handleTagsUpdated(e){arrayEqual(this.state.tags.slice(0),e.slice(0))||this.props.onUpdateTags(e)}render(){var e=[];return this.state.tags.map(function(t){e.push(React.createElement("span",{className:"badge",key:e.length},t))}),0==e.length&&(e=React.createElement("i",null,"No tags defined. Add some.")),React.createElement("div",{id:"edit-account",className:"panel-form"},React.createElement("div",{className:"panel-form-row"},React.createElement("div",{className:"panel-form-column"},React.createElement("div",null,React.createElement("label",{className:"small"},"Your name")),React.createElement("div",null,React.createElement(InPlaceEdit,{placeholder:"Full name, e.g. John Doe",text:this.state.fullName,onFinished:this.handleFullNameUpdate})),React.createElement("div",null,React.createElement("label",{className:"small"},"Password")),React.createElement("div",null,React.createElement(InPlaceEdit,{placeholder:"Unchanged",type:"password",onFinished:this.handlePasswordUpdate}))),React.createElement(AvatarUpload,{avatar:this.state.avatar,uid:this.state.address,title:this.state.fullName,onImageChanged:this.handleImageChanged,onError:this.props.onError})),React.createElement("div",{className:"hr"}),React.createElement("div",{className:"panel-form-column"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",null,"Login:"),React.createElement("tt",null,this.props.login)),React.createElement("div",{className:"panel-form-row"},React.createElement("label",null,"Address:"),React.createElement("tt",null,this.state.address)),React.createElement("div",null,React.createElement("label",{className:"small"},"Default access mode:")),React.createElement("div",{className:"quoted"},React.createElement("div",null,"Auth: ",React.createElement("tt",null,this.state.auth)),React.createElement("div",null,"Anon: ",React.createElement("tt",null,this.state.anon)))),React.createElement("div",{className:"hr"}),React.createElement(TagManager,{title:"Tags (user discovery)",activated:!1,tags:this.state.tags,onSubmit:this.handleTagsUpdated}),React.createElement("div",{className:"hr"}),React.createElement("div",{className:"panel-form-column"},React.createElement("a",{href:"javascript:;",className:"red flat-button",onClick:this.props.onLogout},React.createElement("i",{className:"material-icons"},"exit_to_app")," Logout")))}}class TagManager extends React.Component{constructor(e){super(e),this.state={tags:this.props.tags,tagInput:"",activated:this.props.activated,noTagsMessage:"Add some tags"},this.handleShowTagManager=this.handleShowTagManager.bind(this),this.handleTagInput=this.handleTagInput.bind(this),this.handleAddTag=this.handleAddTag.bind(this),this.handleRemoveTag=this.handleRemoveTag.bind(this),this.handleSubmit=this.handleSubmit.bind(this),this.handleCancel=this.handleCancel.bind(this)}componentWillReceiveProps(e){this.setState({tags:e.tags})}handleShowTagManager(){this.setState({activated:!0})}handleTagInput(e){if(this.setState({tagInput:e}),0<e.length){var t=e[e.length-1];if(","==t||" "==t||";"==t){var a=e.substr(0,e.length-1).trim();a.length>=MIN_TAG_LENGTH&&this.handleAddTag(a)}}}handleAddTag(e){if(e=e.trim(),0<e.length){var t=this.state.tags.slice(0);t.push(e),this.setState({tags:t,tagInput:""}),this.props.onTagsChanged&&this.props.onTagsChanged(t)}}handleRemoveTag(e,t){var a=this.state.tags.slice(0);a.splice(t,1),this.setState({tags:a}),this.props.onTagsChanged&&this.props.onTagsChanged(a)}handleSubmit(){var e=this.state.tags.slice(0),t=this.state.tagInput.trim();0<t.length&&(e.push(t),this.props.onTagsChanged&&this.props.onTagsChanged(e)),this.props.onSubmit(e),this.setState({activated:!1,tagInput:"",tags:this.props.tags})}handleCancel(){this.setState({activated:!1,tagInput:"",tags:this.props.tags}),this.props.onCancel&&this.props.onCancel()}render(){var e=[];return this.state.activated?this.state.tags.map(function(t){e.push({user:t})}):(this.state.tags.map(function(t){e.push(React.createElement("span",{className:"badge",key:e.length},t))}),0==e.length&&(e=React.createElement("i",null,"No tags defined. Add some."))),React.createElement("div",{className:"panel-form-column"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small"},this.props.title)),this.state.activated?React.createElement("div",null,React.createElement(ChipInput,{chips:e,avatarDisabled:!0,prompt:this.state.noTagsMessage,onEnter:this.handleAddTag,onFocusLost:this.handleAddTag,onCancel:this.handleCancel,onChipRemoved:this.handleRemoveTag,filterFunc:this.handleTagInput}),this.props.onSubmit||this.props.onCancel?React.createElement("div",{id:"tag-manager-buttons",className:"panel-form-row"},React.createElement("button",{className:"blue",onClick:this.handleSubmit},"OK"),React.createElement("button",{className:"white",onClick:this.handleCancel},"Cancel")):null):React.createElement("div",null,React.createElement("a",{href:"javascript:;",className:"flat-button",onClick:this.handleShowTagManager},React.createElement("i",{className:"material-icons"},"edit")," Manage tags"),React.createElement("span",null,e)))}}class Contact extends React.Component{constructor(e){super(e),this.handleClick=this.handleClick.bind(this),this.handleContextClick=this.handleContextClick.bind(this)}handleClick(t){t.preventDefault(),t.stopPropagation(),this.props.onSelected&&this.props.onSelected(this.props.item,this.props.index,this.props.now,this.props.acs)}handleContextClick(t){t.preventDefault(),t.stopPropagation(),this.props.showContextMenu({topicName:this.props.item,y:t.pageY,x:t.pageX})}render(){var e=this.props.title;e?30<e.length&&(e=e.substring(0,28)+"..."):e=React.createElement("i",null,"unknown");var t=this.props.now?"online":"offline",a=!this.props.avatar||this.props.avatar,n=[];if(this.props.badges&&0<this.props.badges.length){var s=0;this.props.badges.map(function(e){var t="badge"+(e.color?" "+e.color:"");n.push(React.createElement("span",{className:t,key:s},e.name)),s++})}return this.props.showMode&&this.props.acs&&n.push(React.createElement("span",{className:"badge",key:"mode"},this.props.acs.getMode())),React.createElement("li",{className:!this.props.showCheckmark&&this.props.selected?"selected":null,onClick:this.handleClick},React.createElement("div",{className:"avatar-box"},React.createElement(LetterTile,{avatar:a,title:this.props.title,topic:this.props.item}),this.props.showOnline?React.createElement("span",{className:t}):this.props.showCheckmark&&this.props.selected?React.createElement("i",{className:"checkmark material-icons"},"check_circle"):null),React.createElement("div",{className:"text-box"},React.createElement("div",null,React.createElement("span",{className:"contact-title"},e),0<this.props.unread?React.createElement(UnreadBadge,{count:this.props.unread}):null),this.props.comment?React.createElement("div",{className:"contact-comment"},this.props.comment):null,React.createElement("span",null,n)),this.props.showContextMenu?React.createElement("span",{className:"menuTrigger"},React.createElement("a",{href:"javascript:;",onClick:this.handleContextClick},React.createElement("i",{className:"material-icons"},"expand_more"))):null)}}class UnreadBadge extends React.PureComponent{render(){var e=null;if(0<this.props.count){var t=9<this.props.count?"9+":this.props.count;e=React.createElement("span",{className:"unread"},t)}return e}}class ContactBadges_UNUSED_REMOVE extends React.PureComponent{render(){let e=null;return this.props.badges&&0<this.props.badges.length&&(e=[],this.props.badges.map(function(t){var a="badge"+(t.color?" "+t.color:"");e.push(React.createElement("span",{className:a,key:t.name},t.name))})),e}}class ContactsView extends React.Component{constructor(e){super(e),this.prepareContactList=this.prepareContactList.bind(this),this.state={contactList:this.prepareContactList()},this.tnMeContactUpdate=this.tnMeContactUpdate.bind(this),this.tnMeSubsUpdated=this.tnMeSubsUpdated.bind(this),this.resetContactList=this.resetContactList.bind(this);var t=Tinode.getMeTopic();t.onContactUpdate=this.tnMeContactUpdate,t.onSubsUpdated=this.tnMeSubsUpdated}componentWillUnmount(){var e=Tinode.getMeTopic();e.onContactUpdate=void 0,e.onSubsUpdated=void 0}componentWillReceiveProps(e){if(this.props.topicSelected!=e.topicSelected)for(var t,a=0;a<this.state.contactList.length;a++)if(t=this.state.contactList[a],t.topic==e.topicSelected){e.onOnlineChange(t.online),e.onAcsChange(t.acs);break}}tnMeContactUpdate(e,t){"on"==e||"off"==e?(this.resetContactList(),this.props.topicSelected==t.topic&&this.props.onOnlineChange("on"===e)):"read"===e?this.resetContactList():"msg"===e?this.props.topicSelected===t.topic?document.hidden&&this.props.messageSounds&&POP_SOUND.play():(this.props.messageSounds&&POP_SOUND.play(),this.resetContactList()):"recv"==e||("gone"===e||"unsub"===e?(this.props.topicSelected===t.topic&&this.props.onTopicSelected(null),this.resetContactList()):"acs"===e?this.props.topicSelected===t.topic&&this.props.onAcsChange(t.acs):"del"==e||console.log("Unsupported (yet) presence update:"+e+" in: "+t.topic))}tnMeSubsUpdated(){this.resetContactList()}prepareContactList(){var e=this,t=[],a=0;return Tinode.getMeTopic().contacts(function(n){n.seq=~~n.seq,n.read=~~n.read,n.unread=n.seq-n.read,a+=0<n.unread?1:0,t.push(n),e.props.topicSelected==n.topic&&(e.props.onOnlineChange(n.online),e.props.onAcsChange(n.acs))},this),t.sort(function(e,t){return t.touched-e.touched}),updateFavicon(a),t}resetContactList(){this.setState({contactList:this.prepareContactList()})}render(){return React.createElement(ContactList,{connected:this.props.connected,contacts:this.state.contactList,emptyListMessage:React.createElement("span",null,"You have no chats",React.createElement("br",null),"\xAF\\_(\u30C4)_/\xAF"),topicSelected:this.props.topicSelected,showOnline:!0,showUnread:!0,onTopicSelected:this.props.onTopicSelected,showContextMenu:this.props.showContextMenu})}}class ContactList extends React.Component{render(){var e=Tinode.getCurrentUserID(),t=[],a=this,n=Array.isArray(this.props.topicSelected);return this.props.contacts&&0<this.props.contacts.length&&this.props.contacts.map(function(s){var o=s.topic?s.topic:s.user;if(a.props.filterFunc&&a.props.filter){var r=[o];if(s.private&&s.private.comment&&r.push((""+s.private.comment).toLowerCase()),s.public&&s.public.fn&&r.push((""+s.public.fn).toLowerCase()),!a.props.filterFunc(a.props.filter,r))return}var i=n?-1<this.props.topicSelected.indexOf(o):this.props.topicSelected===o,d=[];this.props.showMode&&(o===e&&d.push({name:"you",color:"green"}),s.acs&&s.acs.isOwner()&&d.push({name:"owner"}));var l=Array.isArray(s.private)?s.private.join(", "):s.private?s.private.comment:null;t.push(React.createElement(Contact,{title:s.public?s.public.fn:null,avatar:makeImageUrl(s.public?s.public.photo:null),comment:l,unread:this.props.showUnread?s.unread:0,now:s.online&&this.props.connected,acs:s.acs,showMode:this.props.showMode,badges:d,showCheckmark:n,selected:i,showOnline:this.props.showOnline,onSelected:this.props.onTopicSelected,showContextMenu:this.props.showContextMenu,item:o,index:t.length,key:o}))},this),React.createElement("div",{className:this.props.noScroll?null:"scrollable-panel"},0<t.length?React.createElement("ul",{className:"contact-box"},t):React.createElement("div",{className:"center-medium-text"},this.props.emptyListMessage))}}class GroupManager extends React.Component{constructor(e){super(e),this.state={members:e.members,index:GroupManager.indexMembers(e.members),contactFilter:"",noContactsMessage:"You have no contacts :-(",selectedContacts:GroupManager.selectedContacts(e.members)},this.handleContactSelected=this.handleContactSelected.bind(this),this.handleMemberRemoved=this.handleMemberRemoved.bind(this),this.handleContactFilter=this.handleContactFilter.bind(this),this.handleSubmit=this.handleSubmit.bind(this),this.handleCancel=this.handleCancel.bind(this)}static indexMembers(e){var t={};return e.map(function(e){t[e.user]={delta:0,present:!0}}),t}static selectedContacts(e){var t=[];return e.map(function(e){t.push(e.user)}),t}handleContactSelected(e,t){var a=this.state.index[e];if(a){if(a.present)return;a.delta+=1,a.present=!0}else a={delta:1,present:!0};var n=this.state.members.slice();n.push(this.props.contacts[t]);var s=this.selectedContacts(n),o=this.state.index;o[e]=a,this.setState({members:n,index:o,selectedContacts:s})}handleMemberRemoved(e,t){var a=this.state.index[e];if(a&&a.present){a.present=!1,a.delta-=1;var n=this.state.members.slice();n.splice(t,1);var s=this.selectedContacts(n),o=this.state.index;o[e]=a,this.setState({members:n,index:o,selectedContacts:s})}}handleContactFilter(e){var t=e?"No contacts match '"+e+"'":"You have no contacts :-(";this.setState({contactFilter:e,noContactsMessage:t})}static doContactFiltering(e,t){if(e){for(var a=0;a<t.length;a++)if(0<=t[a].indexOf(e))return!0;return!1}return!0}handleSubmit(){var e=this,t=[],a=[],n=[],s=Object.keys(this.state.index);s.map(function(s){e.state.index[s].present&&t.push(s),0<e.state.index[s].delta?a.push(s):0>e.state.index[s].delta&&n.push(s)}),this.props.onSubmit(t,a,n)}handleCancel(){this.props.onCancel()}render(){return React.createElement("div",{id:"group-manager"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small"},"Group members")),React.createElement("div",{className:"panel-form-row"},React.createElement(ChipInput,{chips:this.state.members,required:this.props.requiredMember,prompt:"add members",filterFunc:this.handleContactFilter,onChipRemoved:this.handleMemberRemoved})),React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small"},"All contacts")),React.createElement(ContactList,{contacts:this.props.contacts,topicSelected:this.state.selectedContacts,filter:this.state.contactFilter,filterFunc:GroupManager.doContactFiltering,emptyListMessage:this.state.noContactsMessage,showOnline:!1,showUnread:!1,onTopicSelected:this.handleContactSelected}),React.createElement("div",{id:"group-manager-buttons",className:"panel-form-row"},React.createElement("button",{className:"blue",onClick:this.handleSubmit},"OK"),React.createElement("button",{className:"white",onClick:this.handleCancel},"Cancel")))}}class NewTopicView extends React.Component{constructor(e){super(e),this.state={tabSelected:"p2p",searchQuery:e.contactsSearchQuery,contactList:e.foundContacts},this.handleTabClick=this.handleTabClick.bind(this),this.handleContactSelected=this.handleContactSelected.bind(this),this.handleNewGroupSubmit=this.handleNewGroupSubmit.bind(this),this.handleGroupByID=this.handleGroupByID.bind(this)}componentDidMount(){this.props.onInitFind()}static getDerivedStateFromProps(e){return{searchQuery:e.contactsSearchQuery,contactList:e.foundContacts}}handleTabClick(t){t.preventDefault(),window.location.hash=addUrlParam(window.location.hash,"tab",t.currentTarget.dataset.id),this.setState({tabSelected:t.currentTarget.dataset.id})}handleContactSelected(e){"p2p"===this.state.tabSelected&&(window.location.hash=removeUrlParam(window.location.hash,"tab"),this.props.onCreateTopic(e,void 0))}handleNewGroupSubmit(e,t,a,n){window.location.hash=removeUrlParam(window.location.hash,"tab"),this.props.onCreateTopic(void 0,vcard(e,t),a,n)}handleGroupByID(e){window.location.hash=removeUrlParam(window.location.hash,"tab"),this.props.onCreateTopic(e)}render(){return React.createElement("div",{className:"flex-column"},React.createElement("ul",{className:"tabbar"},React.createElement("li",{className:"p2p"===this.state.tabSelected?"active":null},React.createElement("a",{href:"javascript:;","data-id":"p2p",onClick:this.handleTabClick},"find")),React.createElement("li",{className:"grp"===this.state.tabSelected?"active":null},React.createElement("a",{href:"javascript:;","data-id":"grp",onClick:this.handleTabClick},"new group")),React.createElement("li",{className:"byid"===this.state.tabSelected?"active":null},React.createElement("a",{href:"javascript:;","data-id":"byid",onClick:this.handleTabClick},"by id"))),"grp"===this.state.tabSelected?React.createElement(NewTopicGroup,{onSubmit:this.handleNewGroupSubmit}):"byid"===this.state.tabSelected?React.createElement(NewTopicById,{onSubmit:this.handleGroupByID,onError:this.props.onError}):React.createElement("div",{className:"flex-column"},React.createElement(SearchContacts,{type:"p2p",searchQuery:this.state.searchQuery,onSearchContacts:this.props.onSearchContacts}),React.createElement(ContactList,{contacts:this.state.contactList,emptyListMessage:"Use search to find contacts",topicSelected:this.state.selectedContact,showOnline:!1,showUnread:!1,showContextMenu:!1,onTopicSelected:this.handleContactSelected})))}}class NewTopicGroup extends React.PureComponent{constructor(e){super(e),this.state={fn:"",private:"",imageDataUrl:null,tags:[]},this.handleFnChange=this.handleFnChange.bind(this),this.handlePrivateChange=this.handlePrivateChange.bind(this),this.handleImageChanged=this.handleImageChanged.bind(this),this.handleTagsChanged=this.handleTagsChanged.bind(this),this.handleTagsChanged=this.handleTagsChanged.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleFnChange(t){this.setState({fn:t.target.value})}handlePrivateChange(t){this.setState({private:t.target.value})}handleImageChanged(e){this.setState({imageDataUrl:e})}handleTagsChanged(e){this.setState({tags:e})}handleSubmit(t){t.preventDefault(),this.state.fn&&this.state.fn.trim()&&this.props.onSubmit(this.state.fn.trim(),this.state.imageDataUrl,this.state.private.trim(),this.state.tags)}render(){var e="blue";return this.props.disabled&&(e+=" disabled"),React.createElement("form",{className:"panel-form",onSubmit:this.handleSubmit},React.createElement("div",{className:"panel-form-row"},React.createElement("div",{className:"panel-form-column"},React.createElement("label",{className:"small",htmlFor:"new-topic-fn"},"Group name"),React.createElement("input",{type:"text",id:"new-topic-fn",placeholder:"Freeform name of the group",value:this.state.fn,onChange:this.handleFnChange,autoFocus:!0,required:!0}),React.createElement("br",null),React.createElement("label",{className:"small",htmlFor:"new-topic-priv"},"Private comment"),React.createElement("input",{type:"text",id:"new-topic-priv",placeholder:"Visible to you only",value:this.state.private,onChange:this.handlePrivateChange})),React.createElement(AvatarUpload,{onError:this.props.onError,onImageChanged:this.handleImageChanged})),React.createElement(TagManager,{tags:this.state.tags,activated:!0,onTagsChanged:this.handleTagsChanged,title:"Optional tags (search and discovery)"}),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:e},"Create")))}}class SearchContacts extends React.Component{constructor(e){super(e),this.state={edited:!1,search:e.searchQuery},this.handleSearchChange=this.handleSearchChange.bind(this),this.handleSearch=this.handleSearch.bind(this),this.handleClear=this.handleClear.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillUnmount(){this.state.search&&(this.setState({search:""}),this.props.onSearchContacts(DEL_CHAR))}handleSearchChange(t){this.setState({search:t.target.value})}handleSearch(t){t.preventDefault();var e=this.state.search.trim();0<e.length?(this.setState({edited:!0}),this.props.onSearchContacts(e)):this.props.searchQuery&&this.props.onSearchContacts(DEL_CHAR)}handleClear(){(this.state.edited||this.state.search)&&this.props.onSearchContacts(DEL_CHAR),this.setState({search:"",edited:!1})}handleKeyDown(t){"Enter"===t.key?this.handleSearch(t):"Escape"===t.key&&this.handleClear()}render(){return React.createElement("div",{className:"panel-form"},React.createElement("div",{className:"panel-form-row"},React.createElement("i",{className:"material-icons search"},"search"),React.createElement("input",{className:"search",type:"text",placeholder:"List like email:alice@example.com, tel:17025550003...",value:this.state.search,onChange:this.handleSearchChange,onKeyDown:this.handleKeyDown,required:!0,autoFocus:!0}),React.createElement("a",{href:"javascript:;",onClick:this.handleClear},React.createElement("i",{className:"material-icons"},"close"))))}}class NewTopicById extends React.PureComponent{constructor(e){super(e),this.state={groupId:""},this.handleChange=this.handleChange.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleChange(t){this.setState({groupId:t.target.value})}handleKeyPress(t){"Enter"===t.key&&this.handleSubmit(t)}handleSubmit(t){if(t.preventDefault(),this.state.groupId){var e=this.state.groupId.trim();3<e.length&&("usr"==e.substr(0,3)||"grp"==e.substr(0,3))?this.props.onSubmit(e):this.props.onError("Invalid ID","err")}}render(){return React.createElement("div",{className:"panel-form"},React.createElement("div",{className:"panel-form-row"},React.createElement("input",{type:"text",placeholder:"Group or User ID",value:this.state.groupId,onChange:this.handleChange,onKeyPress:this.handleKeyPress,required:!0})),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:"blue",onClick:this.handleSubmit},"Subscribe")))}}class ValidationView extends React.PureComponent{constructor(e){super(e),this.state={code:e.credCode},this.handleChange=this.handleChange.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}componentWillReceiveProps(e){this.setState({code:e.credCode})}handleChange(t){this.setState({code:t.target.value})}handleKeyPress(t){"Enter"===t.key&&this.handleSubmit(t)}handleSubmit(t){t.preventDefault(),this.state.code&&this.state.code.trim()&&this.props.onSubmit(this.props.credMethod,this.state.code.trim())}render(){var e={email:"email",tel:"phone"}[this.props.credMethod]||this.props.credMethod;return React.createElement("div",{className:"panel-form"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small",htmlFor:"enter-confirmation-code"},"Enter confirmation code sent to you by ",e,":")),React.createElement("div",{className:"panel-form-row"},React.createElement("input",{type:"text",id:"enter-confirmation-code",placeholder:"Numbers only",value:this.state.code,onChange:this.handleChange,onKeyPress:this.handleKeyPress,required:!0})),React.createElement("div",{className:"dialog-buttons"},React.createElement("button",{className:"blue",onClick:this.handleSubmit},"Confirm")))}}class InfoView extends React.Component{constructor(e){super(e),this.state={topic:null,owner:!1,admin:!1,sharer:!1,muted:!1,address:null,groupTopic:void 0,fullName:void 0,avatar:null,private:null,selectedContact:null,access:null,modeGiven:null,modeWant:null,modeGiven2:null,modeWant2:null,auth:null,anon:null,contactList:[],tags:[],showMemberPanel:!1,showPermissionEditorFor:void 0,moreInfoExpanded:!1,previousMetaDesc:void 0,previousSubsUpdated:void 0,previousTagsUpdated:void 0},this.resetSubs=this.resetSubs.bind(this),this.resetDesc=this.resetDesc.bind(this),this.onMetaDesc=this.onMetaDesc.bind(this),this.onSubsUpdated=this.onSubsUpdated.bind(this),this.onTagsUpdated=this.onTagsUpdated.bind(this),this.handleFullNameUpdate=this.handleFullNameUpdate.bind(this),this.handlePrivateUpdate=this.handlePrivateUpdate.bind(this),this.handleImageChanged=this.handleImageChanged.bind(this),this.handleMuted=this.handleMuted.bind(this),this.handlePermissionsChanged=this.handlePermissionsChanged.bind(this),this.handleLaunchPermissionsEditor=this.handleLaunchPermissionsEditor.bind(this),this.handleHidePermissionsEditor=this.handleHidePermissionsEditor.bind(this),this.handleShowAddMembers=this.handleShowAddMembers.bind(this),this.handleHideAddMembers=this.handleHideAddMembers.bind(this),this.handleMemberUpdateRequest=this.handleMemberUpdateRequest.bind(this),this.handleLeave=this.handleLeave.bind(this),this.handleMemberSelected=this.handleMemberSelected.bind(this),this.handleMoreInfo=this.handleMoreInfo.bind(this),this.handleTagsUpdated=this.handleTagsUpdated.bind(this),this.handleContextMenu=this.handleContextMenu.bind(this)}componentWillReceiveProps(e){var t=Tinode.getTopic(e.topic);t&&(this.onMetaDesc!=t.onMetaDesc&&(this.previousMetaDesc=t.onMetaDesc,t.onMetaDesc=this.onMetaDesc,this.previousSubsUpdated=t.onSubsUpdated,t.onSubsUpdated=this.onSubsUpdated,"grp"===t.getType()?(this.previousTagsUpdated=t.onTagsUpdated,t.onTagsUpdated=this.onTagsUpdated):this.previousTagsUpdated=void 0),this.state.topic!=e.topic&&(this.setState({topic:e.topic}),this.resetDesc(t,e),this.resetSubs(t,e)))}componentWillUnmount(){var e=Tinode.getTopic(this.props.topic);e&&(this.setState({topic:null}),e.onMetaDesc=this.previousMetaDesc,e.onSubsUpdated=this.previousSubsUpdated,e.onTagsUpdated=this.previousTagsUpdated)}resetSubs(e,t){var a={contactList:[]};if("p2p"===e.getType()){var n=e.subscriber(t.topic);n&&(a.modeGiven2=n.acs.getGiven(),a.modeWant2=n.acs.getWant())}else e.subscribers(function(e){a.contactList.push(e)},this);this.setState(a)}resetDesc(e){var t=e.getDefaultAccess()||{},a=e.getAccessMode();this.setState({owner:a&&a.isOwner(),admin:a&&a.isAdmin(),sharer:a&&(a.isAdmin()||a.isSharer()),muted:a&&a.isMuted(),fullName:e.public?e.public.fn:void 0,avatar:makeImageUrl(e.public?e.public.photo:null),private:e.private?e.private.comment:null,address:e.name,groupTopic:"grp"===e.getType(),showMemberPanel:!1,access:a?a.getMode():void 0,modeGiven:a?a.getGiven():void 0,modeWant:a?a.getWant():void 0,auth:t.auth,anon:t.anon}),"grp"===e.getType()&&a&&a.isOwner()&&e.getMeta(e.startMetaQuery().withTags().build())}onMetaDesc(e){var t=Tinode.getTopic(this.props.topic);t&&(this.resetDesc(t,this.props),this.previousMetaDesc&&this.previousMetaDesc!=this.onMetaDesc&&this.previousMetaDesc(e))}onSubsUpdated(){var e=Tinode.getTopic(this.props.topic);e&&(this.resetSubs(e,this.props),this.previousSubsUpdated&&this.previousSubsUpdated!=this.onSubsUpdated&&this.previousSubsUpdated())}onTagsUpdated(e){this.setState({tags:e}),this.previousTagsUpdated&&this.previousTagsUpdated!=this.onTagsUpdated&&this.previousTagsUpdated()}handleFullNameUpdate(e){this.state.fullName!==e&&(this.setState({fullName:e}),this.props.onTopicDescUpdate(this.props.topic,vcard(e,this.state.avatar),null))}handlePrivateUpdate(e){this.state.priv!==e&&(this.setState({private:e}),this.props.onTopicDescUpdate(this.props.topic,null,e))}handleImageChanged(e){this.setState({avatar:e}),this.props.onTopicDescUpdate(this.props.topic,vcard(this.state.fullName,e),null)}handleMuted(e,t){this.setState({muted:t}),this.props.onChangePermissions(this.props.topic,t?"-P":"+P")}handlePermissionsChanged(e){switch(this.state.showPermissionEditorFor){case"auth":this.props.onTopicDescUpdate(this.props.topic,null,null,{auth:e});break;case"anon":this.props.onTopicDescUpdate(this.props.topic,null,null,{anon:e});break;case"mode":case"want":this.props.onChangePermissions(this.props.topic,e);break;case"given":this.props.onChangePermissions(this.props.topic,e,this.props.topic);break;case"user":this.props.onChangePermissions(this.props.topic,e,this.state.userPermissionsEdited);}this.setState({showPermissionEditorFor:void 0})}handleLaunchPermissionsEditor(e,t){var a,n,s,o,r,i,d;switch(e){case"mode":a=this.state.access;break;case"want":a=this.state.modeWant,n=this.state.modeGiven,s=this.state.groupTopic?"O":"ASDO",o="Requested",r="Granted";break;case"given":a=this.state.modeGiven2,n=this.state.modeWant2,s=this.state.groupTopic?this.state.owner?"":"O":"ASDO",o="Granted",r="Requested";break;case"auth":a=this.state.auth,s="O";break;case"anon":a=this.state.anon,s="O";break;case"user":{var l=Tinode.getTopic(this.props.topic);if(!l)return;var c=l.subscriber(t);if(!c||!c.acs)return;a=c.acs.getGiven(),n=c.acs.getWant(),s=this.state.owner?"":"O",o="Granted",r="Requested",c.public&&(i=c.public.fn,d=c.public.photo);break}default:console.log("Unknown permission editing mode '"+e+"'");}this.setState({showPermissionEditorFor:e,userPermissionsEdited:t,userPermissionsTitle:i,userPermissionsAvatar:d,editedPermissions:a,immutablePermissions:n,editedPermissionsTitle:o,immutablePermissionsTitle:r,editedPermissionsSkipped:s})}handleHidePermissionsEditor(){this.setState({showPermissionEditorFor:void 0})}handleShowAddMembers(){this.props.onInitFind(),this.setState({showMemberPanel:!0})}handleHideAddMembers(){this.setState({showMemberPanel:!1})}handleMemberUpdateRequest(e,t,a){this.props.onMemberUpdateRequest(this.props.topic,t,a),this.setState({showMemberPanel:!1})}handleLeave(){this.props.onLeaveTopic(this.props.topic)}handleMemberSelected(e){this.setState({selectedContact:e})}handleMoreInfo(e){this.setState({moreInfoExpanded:e})}handleTagsUpdated(e){arrayEqual(this.state.tags.slice(0),e.slice(0))||this.props.onTopicTagsUpdate(this.props.topic,e)}handleContextMenu(e){var t=this,a=Tinode.getTopic(this.props.topic);if(a){var n=a.subscriber(e.topicName);if(n&&n.acs){var s=[{title:"Edit permissions",handler:function(){t.handleLaunchPermissionsEditor("user",e.topicName)}},ContextMenuItems.member_delete,n.acs.isMuted()?ContextMenuItems.member_unmute:ContextMenuItems.member_mute,n.acs.isJoiner()?ContextMenuItems.member_block:ContextMenuItems.member_unblock];this.props.showContextMenu({topicName:this.props.topic,x:e.x,y:e.y,user:e.topicName},s)}}}render(){return React.createElement("div",{id:"info-view"},React.createElement("div",{className:"caption-panel",id:"info-caption-panel"},React.createElement("div",{className:"panel-title",id:"info-title"},"Info"),React.createElement("div",null,React.createElement(MenuCancel,{onCancel:this.props.onCancel}))),this.props.displayMobile?React.createElement(ErrorPanel,{level:this.props.errorLevel,text:this.props.errorText,onClearError:this.props.onError}):null,this.state.showMemberPanel?React.createElement(GroupManager,{members:this.state.contactList,requiredMember:this.props.myUserId,contacts:this.props.foundContacts,onCancel:this.handleHideAddMembers,onSubmit:this.handleMemberUpdateRequest}):this.state.showPermissionEditorFor?React.createElement(PermissionsEditor,{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,skip:this.state.editedPermissionsSkipped,onSubmit:this.handlePermissionsChanged,onCancel:this.handleHidePermissionsEditor}):React.createElement("div",{id:"info-view-content",className:"scrollable-panel"},React.createElement("div",{className:"panel-form-row"},React.createElement("div",{className:"panel-form-column"},React.createElement("div",null,React.createElement("label",{className:"small"},"Name")),React.createElement("div",null,React.createElement(InPlaceEdit,{placeholder:"Group name",readOnly:!this.state.owner,text:this.state.fullName,onFinished:this.handleFullNameUpdate})),React.createElement("div",null,React.createElement("label",{className:"small"},"Private comment")),React.createElement("div",null,React.createElement(InPlaceEdit,{placeholder:"Visible to you only",text:this.state.private,onFinished:this.handlePrivateUpdate}))),React.createElement(AvatarUpload,{avatar:this.state.avatar,readOnly:!this.state.owner,uid:this.props.topic,title:this.state.fullName,onImageChanged:this.handleImageChanged,onError:this.props.onError})),React.createElement("div",{className:"hr"}),React.createElement("div",{className:"panel-form-column"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",null,"Muted:"),React.createElement(CheckBox,{name:"P",checked:this.state.muted,onChange:this.handleMuted})),React.createElement(MoreButton,{title:"More",open:this.state.moreInfoExpanded,onToggle:this.handleMoreInfo}),this.state.moreInfoExpanded?React.createElement("div",{className:"panel-form-column"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",null,"Address:"),React.createElement("tt",null,this.state.address)),this.state.groupTopic?React.createElement("div",{className:"panel-form-row"},React.createElement("label",null,"Your permissions:"),React.createElement("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"want")},this.state.access)):React.createElement("div",null,React.createElement("div",null,React.createElement("label",{className:"small"},"Permissions:")),React.createElement("div",{className:"quoted"},React.createElement("div",null,"Yours: \xA0",React.createElement("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"want")},this.state.access)),React.createElement("div",null,this.state.fullName,"\u2032s: \xA0",React.createElement("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"given")},this.state.modeGiven2)))),this.state.sharer&&(this.state.auth||this.state.anon)?React.createElement("div",null,React.createElement("div",null,React.createElement("label",{className:"small"},"Default access mode:")),React.createElement("div",{className:"quoted"},React.createElement("div",null,"Auth: ",this.state.admin?React.createElement("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"auth")},this.state.auth):React.createElement("tt",null,this.state.auth)),React.createElement("div",null,"Anon: ",this.state.admin?React.createElement("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"anon")},this.state.anon):React.createElement("tt",null,this.state.anon)))):null):null),React.createElement("div",{className:"hr"}),this.state.owner?React.createElement(TagManager,{title:"Tags",tags:this.state.tags,activated:!1,onSubmit:this.handleTagsUpdated}):null,this.state.owner?React.createElement("div",{className:"hr"}):null,this.state.groupTopic?React.createElement("div",{className:"panel-form-column"},React.createElement("div",{className:"panel-form-row"},React.createElement("label",{className:"small"},"Group members:")),React.createElement("div",{className:"panel-form-row"},this.state.sharer?React.createElement("a",{href:"javascript:;",className:"flat-button",onClick:this.handleShowAddMembers},React.createElement("i",{className:"material-icons"},"person_add")," Add members"):null,this.state.owner?null:React.createElement("a",{href:"javascript:;",className:"red flat-button",onClick:this.handleLeave},React.createElement("i",{className:"material-icons"},"exit_to_app")," Leave")),React.createElement(ContactList,{contacts:this.state.contactList,emptyListMessage:"No members",topicSelected:this.state.selectedContact,showOnline:!1,showUnread:!1,showMode:!0,noScroll:!0,onTopicSelected:this.handleMemberSelected,showContextMenu:!!this.state.admin&&this.handleContextMenu})):React.createElement("div",{className:"panel-form-row"},React.createElement("a",{href:"javascript:;",className:"red flat-button",onClick:this.handleLeave},React.createElement("i",{className:"material-icons"},"exit_to_app")," Leave"))))}}class ChatMessage extends React.Component{constructor(e){super(e),this.state={progress:0},e.uploader&&(e.uploader.onProgress=this.handleProgress.bind(this)),this.handlePreviewImage=this.handlePreviewImage.bind(this),this.handleContextClick=this.handleContextClick.bind(this),this.handleCancelUpload=this.handleCancelUpload.bind(this)}handlePreviewImage(t){t.preventDefault(),this.props.onImagePreview({url:t.target.src,filename:t.target.title,width:t.target.dataset.width,height:t.target.dataset.height,size:t.target.dataset.size,type:t.target.dataset.mime})}handleContextClick(t){t.preventDefault(),t.stopPropagation(),this.props.showContextMenu({seq:this.props.seq,y:t.pageY,x:t.pageX})}handleProgress(e){this.setState({progress:e})}handleCancelUpload(){this.props.uploader.cancel()}render(){var e=0,t=function(t,a,n){e+=1;var s=Drafty.tagName(t);if(s){var o=Drafty.attrValue(t,a)||{};if(o.key=e,"IM"==t){var r=fitImageSize(a.width,a.height,Math.min(this.props.viewportWidth-52,468),312,!1);o.className="inline-image",o.style=r?{width:r.dstWidth+"px",height:r.dstHeight+"px"}:null,o.onClick=this.handlePreviewImage}return React.createElement(s,o,n)}return n},a=this.props.sequence+" "+(this.props.response?"left":"right"),n="single"===this.props.sequence||"last"===this.props.sequence?"bubble tip":"bubble",s=this.props.userAvatar||!0,o=this.props.userFrom&&this.props.response&&("single"===this.props.sequence||"last"===this.props.sequence),r=this.props.content,d=[];return this.props.mimeType==Drafty.getContentType()&&(Drafty.attachments(r,function(e,t){d.push(React.createElement(Attachment,{downloadUrl:Drafty.getDownloadUrl(e),filename:e.name,uploader:Drafty.isUploading(e),mimetype:e.mime,size:Drafty.getEntitySize(e),progress:this.state.progress,onCancelUpload:this.handleCancelUpload,onError:this.props.onError,key:t}))},this),r=React.createElement("span",null,Drafty.format(r,t,this))),React.createElement("li",{className:a},this.props.userFrom&&this.props.response?React.createElement("div",{className:"avatar-box"},o?React.createElement(LetterTile,{topic:this.props.userFrom,title:this.props.userName,avatar:s}):null):null,React.createElement("div",null,React.createElement("div",{className:n},React.createElement("p",null,r,d,React.createElement(ReceivedMarker,{timestamp:this.props.timestamp,received:this.props.received})),React.createElement("span",{className:"menuTrigger"},React.createElement("a",{href:"javascript:;",onClick:this.handleContextClick},React.createElement("i",{className:"material-icons"},"expand_more")))),o?React.createElement("div",{className:"author"},this.props.userName):null))}}class ReceivedMarker extends React.PureComponent{render(){var e=this.props.received<=Tinode.MESSAGE_STATUS_SENDING?"sending ...":shortDateFormat(this.props.timestamp),t=null;return this.props.received<=Tinode.MESSAGE_STATUS_SENDING?t=React.createElement("i",{className:"material-icons small"},"access_time"):this.props.received==Tinode.MESSAGE_STATUS_SENT?t=React.createElement("i",{className:"material-icons small"},"done"):this.props.received==Tinode.MESSAGE_STATUS_RECEIVED?t=React.createElement("i",{className:"material-icons small"},"done_all"):this.props.received==Tinode.MESSAGE_STATUS_READ&&(t=React.createElement("i",{className:"material-icons small blue"},"done_all")),React.createElement("span",{className:"timestamp"},e,"\xA0",t)}}class FileProgress extends React.PureComponent{render(){return React.createElement("div",{className:"uploader"},React.createElement("div",null,React.createElement("span",{style:{width:100*this.props.progress+"%"}})),.999>this.props.progress?React.createElement("a",{href:"javascript:;",onClick:this.props.onCancel},React.createElement("i",{className:"material-icons"},"close")," cancel"):React.createElement("span",null,"finishing..."))}}class Attachment extends React.Component{constructor(e){super(e),this.state={downloader:null,progress:0},this.downloadFile=this.downloadFile.bind(this),this.handleCancel=this.handleCancel.bind(this)}downloadFile(e,t,a){var n=Tinode.getLargeFileHelper();this.setState({downloader:n}),n.download(e,t,a,e=>{this.setState({progress:e/this.props.size})}).then(()=>{this.setState({downloader:null,progress:0})}).catch(e=>{e&&this.props.onError("Error downloading file: "+e.message,"err"),this.setState({downloader:null,progress:0})})}handleCancel(){this.props.uploader?this.props.onCancelUpload():this.state.downloader&&this.state.downloader.cancel()}render(){let e=this.props.filename||"file_attachment";36<e.length&&(e=e.substr(0,16)+"..."+e.substr(-16));let t,a,n=0<this.props.size?React.createElement("span",{className:"small gray"},"(",bytesToHumanSize(this.props.size),")"):null;return this.props.uploader||this.state.downloader||/^(?:(?:[a-z]+:)?\/\/)/i.test(this.props.downloadUrl)?(t=this.props.downloadUrl,a=null):(t="javascript:;",a=()=>{this.downloadFile(this.props.downloadUrl,this.props.filename,this.props.mimetype)}),React.createElement("div",{className:"attachment"},React.createElement("div",null,React.createElement("i",{className:"material-icons big gray"},"insert_drive_file")),React.createElement("div",{className:"flex-column"},React.createElement("div",null,e," ",n),this.props.uploader||this.state.downloader?React.createElement(FileProgress,{progress:this.props.uploader?this.props.progress:this.state.progress,onCancel:this.handleCancel}):React.createElement("div",null,React.createElement("a",{href:t,download:this.props.filename,onClick:a},React.createElement("i",{className:"material-icons"},"file_download")," save"))))}}class MessagesView extends React.Component{constructor(e){super(e),this.state={messages:[],onlineSubs:[],topic:"",title:"",avatar:null,scrollPosition:0,readOnly:!e.acs||!e.acs.isWriter(),writeOnly:!e.acs||!e.acs.isReader(),typingIndicator:!1,imagePreview:null},this.propsChange=this.propsChange.bind(this),this.leave=this.leave.bind(this),this.handleScrollReference=this.handleScrollReference.bind(this),this.fetchMoreMessages=this.fetchMoreMessages.bind(this),this.handleDescChange=this.handleDescChange.bind(this),this.handleSubsUpdated=this.handleSubsUpdated.bind(this),this.handleNewMessage=this.handleNewMessage.bind(this),this.handleInfoReceipt=this.handleInfoReceipt.bind(this),this.handleImagePreview=this.handleImagePreview.bind(this),this.handleCloseImagePreview=this.handleCloseImagePreview.bind(this),this.handleContextClick=this.handleContextClick.bind(this),this.handleShowContextMenuMessage=this.handleShowContextMenuMessage.bind(this),this.handleBackNavigation=this.handleBackNavigation.bind(this)}componentDidUpdate(e,t){this.messagesScroller&&(t.title!=this.state.title||t.messages.length!=this.state.messages.length)&&(this.messagesScroller.scrollTop=this.messagesScroller.scrollHeight-this.state.scrollPosition)}componentDidMount(){this.propsChange(this.props),this.messagesScroller&&this.messagesScroller.addEventListener("scroll",this.fetchMoreMessages)}componentWillUnmount(){this.leave(),this.messagesScroller&&this.messagesScroller.removeEventListener("scroll",this.fetchMoreMessages)}componentWillReceiveProps(e){this.propsChange(e)}propsChange(e){if(!e||!e.topic)return this.setState({messages:[],onlineSubs:[],topic:null}),void this.leave();if(!e.connected)return void this.setState({onlineSubs:[]});var t=!this.props.connected&&e.connected,a=Tinode.getTopic(e.topic);if(e.topic!=this.state.topic){var n=[],s=[];a.onData=this.handleNewMessage,a.onInfo=this.handleInfoReceipt,a.onMetaDesc=this.handleDescChange,a.onSubsUpdated=this.handleSubsUpdated,a.onPres=this.handleSubsUpdated,this.leave(),this.handleDescChange(a);var o=this.props.myUserId;a.subscribers(function(e){e.online&&e.user!=o&&s.push(e)}),a.messages(function(e){e.deleted||(n=n.concat(e))}),this.setState({messages:n,onlineSubs:s,topic:e.topic,imagePreview:null,scrollPosition:0}),t=!0,this.props.readTimerHandler(null)}if(this.setState({readOnly:!e.acs||!e.acs.isWriter(),writeOnly:!e.acs||!e.acs.isReader()}),!a.isSubscribed()&&t){var r=a.startMetaQuery().withLaterDesc().withLaterSub().withLaterData(MESSAGES_PAGE).withLaterDel();this.setState({fetchingMessages:!0}),a.subscribe(r.build()).then(()=>{this.setState({fetchingMessages:!1})}).catch(e=>{this.props.onError(e.message,"err"),this.setState({title:"Not found",avatar:null,readOnly:!0,writeOnly:!0,fetchingMessages:!1})})}}leave(){if(this.state.topic){var e=Tinode.getTopic(this.state.topic);e&&(e.isSubscribed()&&e.leave(!1).catch(function(e){console.log(e)}),e.onData=void 0,e.onInfo=void 0,e.onMetaDesc=void 0,e.onSubsUpdated=void 0,e.onPres=void 0)}}handleScrollReference(e){e&&(e.addEventListener("scroll",this.fetchMoreMessages),this.messagesScroller=e)}fetchMoreMessages(e){var t=this;if(0>=e.target.scrollTop){var a={scrollPosition:e.target.scrollHeight-e.target.scrollTop};this.setState(function(e){if(!e.fetchingMessages){var n=Tinode.getTopic(t.state.topic);n&&n.isSubscribed()&&n.msgHasMoreMessages()&&(a.fetchingMessages=!0,n.getMessagesPage(MESSAGES_PAGE).then(function(){t.setState({fetchingMessages:!1})}).catch(function(e){t.setState({fetchingMessages:!1}),t.props.onError(e.message,"err")}))}return a})}}handleDescChange(e){e.public&&this.setState({title:e.public.fn,avatar:makeImageUrl(e.public.photo)}),e.acs&&this.setState({readOnly:!e.acs.isWriter(),writeOnly:!e.acs.isReader()})}handleSubsUpdated(){if(this.state.topic){var e=[],t=this.props.myUserId,a=Tinode.getTopic(this.state.topic);a.subscribers(function(a){a.online&&a.user!=t&&e.push(a)}),this.setState({onlineSubs:e})}}handleNewMessage(e){var t=Tinode.getTopic(this.state.topic),a={messages:[]};if(t.messages(function(e){e.deleted||(a.messages=a.messages.concat(e))}),e&&!e.deleted){t.isNewMessage(e.seq)&&(a.scrollPosition=0);let n=t.msgStatus(e);n>=Tinode.MESSAGE_STATUS_SENT&&this.props.readTimerHandler(()=>{t.noteRead(e.seq)}),this.props.onData(e)}this.setState(a)}handleInfoReceipt(e){switch(e.what){case"kp":{clearTimeout(this.keyPressTimer);var t=this;this.keyPressTimer=setTimeout(function(){t.setState({typingIndicator:!1})},4000),this.state.typingIndicator||this.setState({typingIndicator:!0});break}case"read":case"recv":this.forceUpdate();break;default:console.log("Other change in topic: ",e.what);}}handleImagePreview(e){this.setState({imagePreview:e})}handleCloseImagePreview(){this.setState({imagePreview:null})}handleContextClick(t){t.preventDefault(),t.stopPropagation(),this.props.showContextMenu({topicName:this.state.topic,y:t.pageY,x:t.pageX})}handleShowContextMenuMessage(e){e.topicName=this.state.topic;var t=[ContextMenuItems.message_delete],a=Tinode.getTopic(e.topicName);if(a){var n=a.getAccessMode();n&&n.isDeleter()&&t.push(ContextMenuItems.message_delete_hard)}this.props.showContextMenu(e,t)}handleBackNavigation(){this.props.onHideMessagesView()}render(){var e=null;if(this.state.topic){for(var t=[],a=Tinode.getTopic(this.state.topic),n="grp"===a.getType(),s=null,o=0;o<this.state.messages.length;o++){var r=this.state.messages[o],d=null;o+1<this.state.messages.length&&(d=this.state.messages[o+1].from);var l="single";r.from===s?r.from===d?l="middle":l="last":r.from===d&&(l="first"),s=r.from;var c,p,m,h,u=r.from!==this.props.myUserId,g=a.msgStatus(r);if(n){var b=a.userDesc(r.from);b&&b.public&&(c=b.public.fn,p=makeImageUrl(b.public.photo)),m=r.from,h="chat-box group"}else h="chat-box";t.push(React.createElement(ChatMessage,{content:r.content,mimeType:r.head?r.head.mime:null,timestamp:r.ts,response:u,seq:r.seq,userFrom:m,userName:c,userAvatar:p,sequence:l,received:g,uploader:r._uploader,viewportWidth:this.props.viewportWidth,showContextMenu:this.handleShowContextMenuMessage,onImagePreview:this.handleImagePreview,onError:this.props.onError,key:r.seq}))}var E=null,v=Tinode.getMeTopic().getContact(this.state.topic);v&&"p2p"===Tinode.topicType(v.topic)&&(v.online?E="online now":v.seen&&(E="Last active: "+shortDateFormat(v.seen.when)));var f=this.state.avatar||!0,C=this.props.online?"online"+(this.state.typingIndicator?" typing":""):"offline";e=React.createElement("div",{id:"topic-view",className:this.props.hideSelf?"nodisplay":null},React.createElement("div",{id:"topic-caption-panel",className:"caption-panel"},this.props.displayMobile?React.createElement("a",{href:"javascript:;",id:"hide-message-view",onClick:this.handleBackNavigation},React.createElement("i",{className:"material-icons"},"arrow_back")):null,React.createElement("div",{className:"avatar-box"},React.createElement(LetterTile,{avatar:f,topic:this.state.topic,title:this.state.title}),React.createElement("span",{className:C})),React.createElement("div",{id:"topic-title-group"},React.createElement("div",{id:"topic-title",className:"panel-title"},this.state.title),React.createElement("div",{id:"topic-last-seen"},E)),n?React.createElement(GroupSubs,{subscribers:this.state.onlineSubs}):React.createElement("div",{id:"topic-users"}),React.createElement("div",null,React.createElement("a",{href:"javascript:;",onClick:this.handleContextClick},React.createElement("i",{className:"material-icons"},"more_vert")))),this.props.displayMobile?React.createElement(ErrorPanel,{level:this.props.errorLevel,text:this.props.errorText,onClearError:this.props.onError}):null,React.createElement(LoadSpinner,{show:this.state.fetchingMessages}),React.createElement("div",{id:"messages-container"},React.createElement("div",{id:"messages-panel",ref:this.handleScrollReference},React.createElement("ul",{id:"scroller",className:h},t)),this.state.writeOnly?React.createElement("div",{id:"write-only-background"},React.createElement("div",{id:"write-only-note"},"no access to messages")):null),React.createElement(SendMessage,{topic:this.props.topic,disabled:this.state.readOnly,sendMessage:this.props.sendMessage,onError:this.props.onError}),this.state.imagePreview?React.createElement(ImagePreview,{content:this.state.imagePreview,onClose:this.handleCloseImagePreview}):null)}else e=React.createElement(LogoView,{hideSelf:this.props.hideSelf,serverVersion:this.props.serverVersion,serverAddress:this.props.serverAddress});return e}}class SendMessage extends React.PureComponent{constructor(e){super(e),this.state={message:"",keypressTimestamp:new Date().getTime()-KEYPRESS_DELAY-1},this.handlePasteEvent=this.handlePasteEvent.bind(this),this.handleAttachImage=this.handleAttachImage.bind(this),this.handleAttachFile=this.handleAttachFile.bind(this),this.handleSend=this.handleSend.bind(this),this.handleKeyPress=this.handleKeyPress.bind(this),this.handleMessageTyping=this.handleMessageTyping.bind(this)}componentDidMount(){this.pasteFile.addEventListener("paste",this.handlePasteEvent,!1)}componentWillUnmount(){this.pasteFile.removeEventListener("paste",this.handlePasteEvent,!1)}handlePasteEvent(t){this.props.disabled||filePasted(t,(e,t,a,n,s)=>{this.props.sendMessage(Drafty.insertImage(null,0,t,e,a,n,s))},(e,t,a)=>{this.props.sendMessage(Drafty.attachFile(null,e,t,a))},this.props.onError)&&t.preventDefault()}handleAttachImage(t){if(t.target.files&&0<t.target.files.length){let e=t.target.files[0];e.size>MAX_INBAND_ATTACHMENT_SIZE||0>SUPPORTED_IMAGE_FORMATS.indexOf(e.type)?imageFileScaledToBase64(e,MAX_IMAGE_DIM,MAX_IMAGE_DIM,!1,(e,t,a,n,s)=>{this.props.sendMessage(Drafty.insertImage(null,0,t,e,a,n,s))},e=>{this.props.onError(e,"err")}):imageFileToBase64(e,(e,t,a,n,s)=>{this.props.sendMessage(Drafty.insertImage(null,0,t,e,a,n,s))},e=>{this.props.onError(e,"err")})}t.target.value=""}handleAttachFile(t){if(t.target.files&&0<t.target.files.length){var e=t.target.files[0];if(e.size>MAX_EXTERN_ATTACHMENT_SIZE)this.props.onError("The file size "+bytesToHumanSize(e.size)+" exceeds the "+bytesToHumanSize(MAX_EXTERN_ATTACHMENT_SIZE)+" limit.","err");else if(e.size>MAX_INBAND_ATTACHMENT_SIZE){let t=Tinode.getLargeFileHelper();if(!t)return void this.props.onError("Cannot initiate file upload.");let a=t.upload(e),n=Drafty.attachFile(null,e.type,null,e.name,e.size,a);this.props.sendMessage(n,a,t)}else fileToBase64(e,(e,t,a)=>{this.props.sendMessage(Drafty.attachFile(null,e,t,a))},this.props.onError)}t.target.value=""}handleSend(){var e=this.state.message.trim();e&&(this.props.sendMessage(this.state.message.trim()),this.setState({message:""}))}handleKeyPress(t){"Enter"!==t.key||t.shiftKey||(t.preventDefault(),t.stopPropagation(),this.handleSend())}handleMessageTyping(t){var e={message:t.target.value},a=new Date().getTime();if(a-this.state.keypressTimestamp>KEYPRESS_DELAY){var n=Tinode.getTopic(this.props.topic);n.isSubscribed()&&n.noteKeyPress(),e.keypressTimestamp=a}this.setState(e)}render(){var e=this.props.disabled?"Messaging disabled":"New message",t=this;return React.createElement("div",{id:"send-message-panel"},this.props.disabled?React.createElement("i",{className:"material-icons disabled"},"photo"):React.createElement("a",{href:"javascript:;",onClick:function(){t.attachImage.click()},title:"Add image"},React.createElement("i",{className:"material-icons secondary"},"photo")),this.props.disabled?React.createElement("i",{className:"material-icons disabled"},"attach_file"):React.createElement("a",{href:"javascript:;",onClick:function(){t.attachFile.click()},title:"Attach file"},React.createElement("i",{className:"material-icons secondary"},"attach_file")),React.createElement("textarea",{id:"sendMessage",placeholder:e,disabled:this.props.disabled,value:this.state.message,onChange:this.handleMessageTyping,onKeyPress:this.handleKeyPress,ref:function(e){t.pasteFile=e},autoFocus:!0}),this.props.disabled?React.createElement("i",{className:"material-icons disabled"},"send"):React.createElement("a",{href:"javascript:;",onClick:this.handleSend,title:"Send"},React.createElement("i",{className:"material-icons"},"send")),React.createElement("input",{type:"file",ref:function(e){t.attachFile=e},onChange:this.handleAttachFile,style:{display:"none"}}),React.createElement("input",{type:"file",ref:function(e){t.attachImage=e},accept:"image/*",onChange:this.handleAttachImage,style:{display:"none"}}))}}class LogoView extends React.PureComponent{render(){var e=Tinode.getVersion()+" build "+document.lastModified;return React.createElement("div",{id:"dummy-view",className:this.props.hideSelf?"nodisplay":null},React.createElement("div",null,React.createElement("a",{href:"https://github.com/tinode/chat/"},React.createElement("img",{id:"logo",alt:"logo",src:"img/logo.svg"}),React.createElement("h2",null,"Tinode Demo Chat")),React.createElement("p",null,"Client: ",e),React.createElement("p",null,"Server: ",this.props.serverVersion," (",this.props.serverAddress,")")))}}class ImagePreview extends React.PureComponent{constructor(e){super(e),this.state={}}componentDidMount(){this.setState({width:this.container.clientWidth,height:this.container.clientHeight})}render(){if(!this.props.content)return null;var e=this,t=fitImageSize(this.props.content.width,this.props.content.height,this.state.width,this.state.height,!1),a=t?{width:t.dstWidth+"px",height:t.dstHeight+"px"}:this.props.content.width>this.props.content.height?{width:"100%"}:{height:"100%"};a.maxWidth="100%",a.maxHeight="100%";var n=this.props.content.filename,s=0|this.props.content.width/REM_SIZE;return n.length>s&&(n=n.slice(0,s-2)+"..."+n.slice(2-s)),React.createElement("div",{id:"image-preview",onClick:this.props.onClose},React.createElement("div",{id:"image-preview-caption-panel"},React.createElement("a",{href:"javascript:;",download:this.props.content.filename},React.createElement("i",{className:"material-icons"},"file_download")," download"),React.createElement("a",{href:"javascript:;",onClick:this.props.onClose},React.createElement("i",{className:"material-icons gray"},"close"))),React.createElement("div",{id:"image-preview-container",ref:function(t){e.container=t}},React.createElement("img",{src:this.props.content.url,style:a})),React.createElement("div",{id:"image-preview-footer"},React.createElement("div",null,React.createElement("div",null,React.createElement("b",null,"File name"),":"),React.createElement("div",null,React.createElement("span",{title:this.props.content.filename},n))),React.createElement("div",null,React.createElement("div",null,React.createElement("b",null,"Content type"),":"),React.createElement("div",null,this.props.content.type)),React.createElement("div",null,React.createElement("div",null,React.createElement("b",null,"Size"),":"),React.createElement("div",null,this.props.content.width," \xD7 ",this.props.content.height," px; ",bytesToHumanSize(this.props.content.size)))))}}class TinodeWeb extends React.Component{constructor(e){super(e),this.state=this.getBlankState(),this.handleResize=this.handleResize.bind(this),this.handleHashRoute=this.handleHashRoute.bind(this),this.handleOnline=this.handleOnline.bind(this),this.handleAppVisibility=this.handleAppVisibility.bind(this),this.handleReadTimer=this.handleReadTimer.bind(this),this.handleVisibilityEvent=this.handleVisibilityEvent.bind(this),this.handleError=this.handleError.bind(this),this.handleLoginRequest=this.handleLoginRequest.bind(this),this.handleConnected=this.handleConnected.bind(this),this.doLogin=this.doLogin.bind(this),this.handleCredentialsRequest=this.handleCredentialsRequest.bind(this),this.handleLoginSuccessful=this.handleLoginSuccessful.bind(this),this.handleDisconnect=this.handleDisconnect.bind(this),this.tnMeMetaDesc=this.tnMeMetaDesc.bind(this),this.tnData=this.tnData.bind(this),this.tnInitFind=this.tnInitFind.bind(this),this.tnFndSubsUpdated=this.tnFndSubsUpdated.bind(this),this.handleSearchContacts=this.handleSearchContacts.bind(this),this.handleTopicSelected=this.handleTopicSelected.bind(this),this.handleTopicSelectedOnline=this.handleTopicSelectedOnline.bind(this),this.handleTopicSelectedAcs=this.handleTopicSelectedAcs.bind(this),this.handleHideMessagesView=this.handleHideMessagesView.bind(this),this.handleSendMessage=this.handleSendMessage.bind(this),this.handleNewAccount=this.handleNewAccount.bind(this),this.handleNewAccountRequest=this.handleNewAccountRequest.bind(this),this.handleUpdateAccountRequest=this.handleUpdateAccountRequest.bind(this),this.handleUpdateAccountTagsRequest=this.handleUpdateAccountTagsRequest.bind(this),this.handleSettings=this.handleSettings.bind(this),this.handleGlobalSettings=this.handleGlobalSettings.bind(this),this.handleSidepanelCancel=this.handleSidepanelCancel.bind(this),this.handleNewTopic=this.handleNewTopic.bind(this),this.handleNewTopicRequest=this.handleNewTopicRequest.bind(this),this.handleTopicUpdateRequest=this.handleTopicUpdateRequest.bind(this),this.handleChangePermissions=this.handleChangePermissions.bind(this),this.handleTagsUpdated=this.handleTagsUpdated.bind(this),this.handleLogout=this.handleLogout.bind(this),this.handleLeaveUnsubRequest=this.handleLeaveUnsubRequest.bind(this),this.handleDialogCancel=this.handleDialogCancel.bind(this),this.handleShowContextMenu=this.handleShowContextMenu.bind(this),this.defaultTopicContextMenu=this.defaultTopicContextMenu.bind(this),this.handleHideContextMenu=this.handleHideContextMenu.bind(this),this.handleShowInfoView=this.handleShowInfoView.bind(this),this.handleHideInfoView=this.handleHideInfoView.bind(this),this.handleMemberUpdateRequest=this.handleMemberUpdateRequest.bind(this),this.handleValidateCredentialsRequest=this.handleValidateCredentialsRequest.bind(this),this.handleHashRoute()}getBlankState(){let e=localStorage.getObject("settings")||{};return{connected:!1,transport:e.transport||null,serverAddress:e.serverAddress||detectServerAddress(),messageSounds:!e.messageSoundsOff,sidePanelSelected:"login",sidePanelTitle:null,sidePanelAvatar:null,dialogSelected:null,contextMenuVisible:!1,login:"",password:"",myUserId:null,errorText:"",errorLevel:null,liveConnection:navigator.onLine,topicSelected:"",topicSelectedOnline:!1,topicSelectedAcs:null,loginDisabled:!1,displayMobile:window.innerWidth<=MEDIA_BREAKPOINT,showInfoPanel:!1,mobilePanel:"sidepanel",contextMenuVisible:!1,contextMenuBounds:null,contextMenuClickAt:null,contextMenuParams:null,contextMenuItems:[],serverVersion:"no connection",contactsSearchQuery:void 0,foundContacts:[],credMethod:void 0,credCode:void 0}}componentDidMount(){var e=this;window.addEventListener("resize",this.handleResize),window.addEventListener("online",function(){e.handleOnline(!0)}),window.addEventListener("offline",function(){e.handleOnline(!1)}),window.addEventListener("hashchange",this.handleHashRoute),document.addEventListener("visibilitychange",this.handleVisibilityEvent),this.setState({viewportWidth:document.documentElement.clientWidth}),Tinode.enableLogging(!0,!0),Tinode.onConnect=this.handleConnected,Tinode.onDisconnect=this.handleDisconnect,TinodeWeb.tnSetup(this.state.serverAddress,this.state.transport);var t;if(localStorage.getObject("keep-logged-in")&&(t=localStorage.getObject("auth-token")),t){t.expires=new Date(t.expires),Tinode.setAuthToken(t),Tinode.connect().catch(function(t){e.handleError(t.message,"err")});var a=parseUrlHash(window.location.hash);delete a.params.info,delete a.params.tab,a.path[0]="",window.location.hash=composeUrlHash(a.path,a.params)}else window.location.hash="";this.readTimer=null,this.readTimerCallback=null}componentWillUnmount(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("hashchange",this.handleHashRoute),document.removeEventListener("visibilitychange",this.handleVisibilityEvent)}static tnSetup(e,t){Tinode.setup(APP_NAME,e,API_KEY,t)}handleResize(){var e=document.documentElement.clientWidth<=MEDIA_BREAKPOINT;this.setState({viewportWidth:document.documentElement.clientWidth}),this.state.displayMobile!=e&&this.setState({displayMobile:e})}handleHashRoute(){var e=parseUrlHash(window.location.hash);if(e.path&&0<e.path.length?["register","settings","edit","cred","newtpk","contacts",""].includes(e.path[0])?this.setState({sidePanelSelected:e.path[0]}):console.log("Unknown sidepanel view",e.path[0]):this.setState({sidePanelSelected:""}),1<e.path.length&&e.path[1]!=this.state.topicSelected){var t=Tinode.topicType(e.path[1]);t?this.setState({topicSelected:e.path[1],topicSelectedOnline:!1,topicSelectedAcs:null}):this.setState({topicSelected:null})}e.params.method&&this.setState({credMethod:e.params.method}),e.params.code&&this.setState({credCode:e.params.code}),this.setState({showInfoPanel:e.params.info,newTopicTabSelected:e.params.tab})}handleOnline(e){e?this.handleError("",null):this.handleError("No connection","warn"),this.setState({liveConnection:e})}handleAppVisibility(e,t){clearTimeout(this.readTimer),this.readTimerCallback=t,this.readTimer=e&&t?setTimeout(t,READ_DELAY):null}handleReadTimer(e){this.handleAppVisibility(!document.hidden,e)}handleVisibilityEvent(){this.handleAppVisibility(!document.hidden,this.readTimerCallback)}handleError(e,t){this.setState({errorText:e,errorLevel:t})}handleLoginRequest(e,t){this.setState({loginDisabled:!0,login:e,password:t}),this.handleError("",null),Tinode.isConnected()?this.doLogin(e,t,{meth:this.state.credMethod,resp:this.state.credCode}):Tinode.connect().catch(e=>{this.setState({loginDisabled:!1}),this.handleError(e.message,"err")})}handleConnected(){var e=Tinode.getServerInfo();this.setState({serverVersion:e.ver+" "+(e.build?e.build:"none")+"; "}),this.doLogin(this.state.login,this.state.password,{meth:this.state.credMethod,resp:this.state.credCode})}doLogin(e,t,a){if(Tinode.isAuthenticated())return void(window.location.hash="");a=a?Tinode.addCredential(null,a):void 0,a=a?a.cred:void 0;let n=null,s=Tinode.getAuthToken();e&&t?(this.setState({password:null}),n=Tinode.loginBasic(e,t,a)):s&&(n=Tinode.loginToken(s.token,a)),n?n.then(e=>{300<=e.code&&"validate credentials"===e.text?(a&&this.handleError("Code does not match","warn"),this.handleCredentialsRequest(e.params)):this.handleLoginSuccessful(this)}).catch(e=>{this.setState({loginDisabled:!1,credMethod:void 0,credCode:void 0}),this.handleError(e.message,"err"),localStorage.removeItem("auth-token"),window.location.hash=""}):(window.location.hash="",this.setState({loginDisabled:!1}))}handleCredentialsRequest(e){var t=parseUrlHash(window.location.hash);t.path[0]="cred",t.params.method=e.cred[0],window.location.hash=composeUrlHash(t.path,t.params)}handleLoginSuccessful(e){e.handleError("",null),localStorage.getObject("keep-logged-in")&&localStorage.setObject("auth-token",Tinode.getAuthToken());var t=Tinode.getMeTopic();t.onMetaDesc=e.tnMeMetaDesc,e.setState({connected:!0,credMethod:void 0,credCode:void 0,myUserId:Tinode.getCurrentUserID()}),t.subscribe(t.startMetaQuery().withLaterSub().withDesc().build()).catch(function(t){localStorage.removeItem("auth-token"),e.handleError(t.message,"err"),window.location.hash=""}),window.location.hash=setUrlSidePanel(window.location.hash,"contacts")}handleDisconnect(e){this.setState({connected:!1,topicSelectedOnline:!1,dialogSelected:null,errorText:e&&e.message?e.message:"Disconnected",errorLevel:e&&e.message?"err":"warn",loginDisabled:!1,contextMenuVisible:!1,serverVersion:"no connection"})}tnMeMetaDesc(e){e&&e.public&&this.setState({sidePanelTitle:e.public.fn,sidePanelAvatar:makeImageUrl(e.public.photo)})}tnData(e){let t=Tinode.getTopic(e.topic);t.msgStatus(e)>Tinode.MESSAGE_STATUS_SENDING&&(clearTimeout(this.receivedTimer),this.receivedTimer=setTimeout(()=>{this.receivedTimer=void 0,t.noteRecv(e.seq)},RECEIVED_DELAY))}tnInitFind(){var e=Tinode.getFndTopic();e.isSubscribed()?(this.setState({contactsSearchQuery:""}),this.tnFndSubsUpdated()):(e.onSubsUpdated=this.tnFndSubsUpdated,e.subscribe(e.startMetaQuery().withSub().withTags().build()).catch(e=>{this.handleError(e.message,"err")}))}tnFndSubsUpdated(){var e=[];Tinode.getFndTopic().contacts(function(t){e.push(t)}),this.setState({foundContacts:e})}handleSearchContacts(e){var t=Tinode.getFndTopic();this.setState({contactsSearchQuery:e==DEL_CHAR?"":e}),t.setMeta({desc:{public:e}}).then(()=>t.getMeta(t.startMetaQuery().withSub().build())).catch(e=>{this.handleError(e.message,"err")})}handleTopicSelected(e,t,a,n){e?(this.state.topicSelected!=e&&(window.location.hash=setUrlTopic(window.location.hash,e)),this.setState({errorText:"",errorLevel:null,mobilePanel:"topic-view",topicSelectedOnline:a,topicSelectedAcs:n,showInfoPanel:!1})):(this.state.topicSelected&&(window.location.hash=setUrlTopic(window.location.hash,null)),this.setState({errorText:"",errorLevel:null,mobilePanel:"sidepanel",topicSelectedOnline:!1,topicSelectedAcs:null,showInfoPanel:!1}))}handleTopicSelectedOnline(e){"boolean"==typeof e&&this.setState({topicSelectedOnline:e})}handleTopicSelectedAcs(e){this.setState({topicSelectedAcs:e})}handleHideMessagesView(){this.setState({mobilePanel:"sidepanel"}),window.location.hash=setUrlTopic(window.location.hash,null)}handleSendMessage(e,t,a){let n=Tinode.getTopic(this.state.topicSelected),s=Drafty.parse(e);s&&!Drafty.isPlainText(s)&&(e=s),e=n.createMessage(e),e._uploader=a,t&&t.catch(e=>{this.handleError(e.message,"err")}),n.isSubscribed()||(!t&&(t=Promise.resolve()),t=t.then(()=>n.subscribe())),n.publishDraft(e,t).catch(e=>{this.handleError(e.message,"err")})}handleNewAccount(){window.location.hash=setUrlSidePanel(window.location.hash,"register")}handleNewAccountRequest(e,t,a,n,s){Tinode.connect(this.state.serverAddress).then(function(){var o=Tinode.addCredential({public:a,tags:s},n);return Tinode.createAccountBasic(e,t,o)}).then(e=>{300<=e.code&&"validate credentials"===e.text?this.handleCredentialsRequest(e.params):this.handleLoginSuccessful(this)}).catch(e=>{this.handleError(e.message,"err")})}handleUpdateAccountRequest(e,t,a){var n=this;(t||a)&&Tinode.getMeTopic().setMeta({desc:{public:t,private:a}}).catch(function(e){n.handleError(e.message,"err")}),e&&Tinode.updateAccountBasic(null,Tinode.getCurrentLogin(),e).catch(function(e){n.handleError(e.message,"err")})}handleUpdateAccountTagsRequest(e){var t=this;Tinode.getFndTopic().setMeta({tags:e}).catch(function(e){t.handleError(e.message,"err")})}handleSettings(){window.location.hash=setUrlSidePanel(window.location.hash,this.state.myUserId?"edit":"settings")}handleGlobalSettings(e,t,a){t=t||this.state.transport,e=e||this.state.serverAddress,a="boolean"==typeof a?a:this.state.messageSounds,this.setState({serverAddress:e,transport:t,messageSounds:a,sidePanelSelected:"login"}),localStorage.setObject({serverAddress:e,messageSoundsOff:!a,transport:this.state.transport}),TinodeWeb.tnSetup(e,t)}handleSidepanelCancel(){var e=parseUrlHash(window.location.hash);e.path[0]=this.state.myUserId?"contacts":"",e.params&&(delete e.params.code,delete e.params.method,delete e.params.tab),window.location.hash=composeUrlHash(e.path,e.params),this.setState({errorText:"",errorLevel:null})}handleNewTopic(){window.location.hash=setUrlSidePanel(window.location.hash,"newtpk")}handleNewTopicRequest(e,t,a,n){var s,o=this,r=e?Tinode.newTopicWith(e):Tinode.newTopic(),i=r.startMetaQuery().withDesc().withSub().withData();e||(i=i.withTags(),s={desc:{public:t,private:a},tags:n}),r.subscribe(i.build(),s).then(function(){window.location.hash=setUrlSidePanel(window.location.hash,"contacts"),o.handleTopicSelected(r.name,void 0,Tinode.isTopicOnline(r.name),r.getAccessMode())}).catch(function(e){o.handleError(e.message,"err")})}handleTopicUpdateRequest(e,t,a,n){var s=this,o=Tinode.getTopic(e);if(o){var r={};t&&(r.public=t),a&&(r.private={comment:a}),n&&(r.defacs=n),o.setMeta({desc:r}).catch(function(e){s.handleError(e.message,"err")})}}handleChangePermissions(e,t,a){var n=this,s=Tinode.getTopic(e);if(s){var o=s.getAccessMode();a?(o.updateGiven(t),t=o.getGiven()):(o.updateWant(t),t=o.getWant()),s.setMeta({sub:{user:a,mode:t}}).catch(function(e){n.handleError(e.message,"err")})}}handleTagsUpdated(e,t){var a=Tinode.getTopic(e);if(a){var n=this;a.setMeta({tags:t}).catch(function(e){n.handleError(e.message,"err")})}}handleLogout(){localStorage.removeItem("auth-token"),this.setState(this.getBlankState()),TinodeWeb.tnSetup(this.state.serverAddress,this.state.transport),window.location.hash=""}handleLeaveUnsubRequest(e){var t=Tinode.getTopic(e);t&&t.leave(!0).then(()=>{window.location.hash=setUrlTopic(window.location.hash,"")}).catch(e=>{this.handleError(e.message,"err")})}handleDialogCancel(){this.setState({dialogSelected:null})}handleShowContextMenu(e,t){this.setState({contextMenuVisible:!0,contextMenuClickAt:{x:e.x,y:e.y},contextMenuParams:e,contextMenuItems:t||this.defaultTopicContextMenu(e.topicName),contextMenuBounds:ReactDOM.findDOMNode(this).getBoundingClientRect()})}defaultTopicContextMenu(e){var t=!1,a=!1,n=!1,s=!1,o=Tinode.getTopic(e);if(o&&o.isSubscribed()){n=!0;var r=o.getAccessMode();t=r&&r.isMuted(),a=r&&!r.isJoiner(),s=r&&r.isDeleter()}return[n?{title:"Info",handler:this.handleShowInfoView}:null,n?ContextMenuItems.messages_clear:null,n&&s?ContextMenuItems.messages_clear_hard:null,n?t?ContextMenuItems.topic_unmute:ContextMenuItems.topic_mute:null,n?a?ContextMenuItems.topic_unblock:ContextMenuItems.topic_block:null,ContextMenuItems.topic_delete]}handleHideContextMenu(){this.setState({contextMenuVisible:!1,contextMenuClickAt:null,contextMenuParams:null,contextMenuBounds:null})}handleShowInfoView(){window.location.hash=addUrlParam(window.location.hash,"info",!0),this.setState({showInfoPanel:!0})}handleHideInfoView(){window.location.hash=removeUrlParam(window.location.hash,"info"),this.setState({showInfoPanel:!1})}handleMemberUpdateRequest(e,t,a){if(e){var n=Tinode.getTopic(e);if(n){var s=this;t&&0<t.length&&t.map(function(e){n.invite(e,null).catch(function(e){s.handleError(e.message,"err")})}),a&&0<a.length&&a.map(function(e){n.delSubscription(e).catch(function(e){s.handleError(e.message,"err")})})}}}handleValidateCredentialsRequest(e,t){this.setState({credMethod:e,credCode:t}),this.doLogin(null,null,{meth:e,resp:t})}render(){return React.createElement("div",{id:"app-container"},React.createElement(ContextMenu,{bounds:this.state.contextMenuBounds,clickAt:this.state.contextMenuClickAt,visible:this.state.contextMenuVisible,params:this.state.contextMenuParams,items:this.state.contextMenuItems,hide:this.handleHideContextMenu,onAction:this.handleContextMenuAction,onError:this.handleError}),React.createElement(SidepanelView,{connected:this.state.connected,displayMobile:this.state.displayMobile,hideSelf:this.state.displayMobile&&"sidepanel"!==this.state.mobilePanel,state:this.state.sidePanelSelected,title:this.state.sidePanelTitle,avatar:this.state.sidePanelAvatar,login:this.state.login,myUserId:this.state.myUserId,loginDisabled:this.state.loginDisabled,errorText:this.state.errorText,errorLevel:this.state.errorLevel,topicSelected:this.state.topicSelected,credMethod:this.state.credMethod,credCode:this.state.credCode,transport:this.state.transport,messageSounds:this.state.messageSounds,serverAddress:this.state.serverAddress,onGlobalSettings:this.handleGlobalSettings,onSignUp:this.handleNewAccount,onSettings:this.handleSettings,onLoginRequest:this.handleLoginRequest,onCreateAccount:this.handleNewAccountRequest,onUpdateAccount:this.handleUpdateAccountRequest,onUpdateAccountTags:this.handleUpdateAccountTagsRequest,onTopicSelected:this.handleTopicSelected,onCreateTopic:this.handleNewTopicRequest,onNewTopic:this.handleNewTopic,onLogout:this.handleLogout,onCancel:this.handleSidepanelCancel,onOnlineChange:this.handleTopicSelectedOnline,onAcsChange:this.handleTopicSelectedAcs,onError:this.handleError,onValidateCredentials:this.handleValidateCredentialsRequest,onInitFind:this.tnInitFind,contactsSearchQuery:this.state.contactsSearchQuery,foundContacts:this.state.foundContacts,onSearchContacts:this.handleSearchContacts,showContextMenu:this.handleShowContextMenu}),React.createElement(MessagesView,{connected:this.state.connected,online:this.state.topicSelectedOnline,acs:this.state.topicSelectedAcs,displayMobile:this.state.displayMobile,viewportWidth:this.state.viewportWidth,hideSelf:this.state.displayMobile&&("topic-view"!==this.state.mobilePanel||this.state.showInfoPanel),topic:this.state.topicSelected,myUserId:this.state.myUserId,serverVersion:this.state.serverVersion,serverAddress:this.state.serverAddress,errorText:this.state.errorText,errorLevel:this.state.errorLevel,onHideMessagesView:this.handleHideMessagesView,onData:this.tnData,onError:this.handleError,readTimerHandler:this.handleReadTimer,showContextMenu:this.handleShowContextMenu,sendMessage:this.handleSendMessage}),this.state.showInfoPanel?React.createElement(InfoView,{connected:this.state.connected,displayMobile:this.state.displayMobile,topic:this.state.topicSelected,foundContacts:this.state.foundContacts,myUserId:this.state.myUserId,errorText:this.state.errorText,errorLevel:this.state.errorLevel,onTopicDescUpdate:this.handleTopicUpdateRequest,onCancel:this.handleHideInfoView,onChangePermissions:this.handleChangePermissions,onMemberUpdateRequest:this.handleMemberUpdateRequest,onLeaveTopic:this.handleLeaveUnsubRequest,onAddMember:this.handleManageGroupMembers,onTopicTagsUpdate:this.handleTagsUpdated,onInitFind:this.tnInitFind,onError:this.handleError,showContextMenu:this.handleShowContextMenu}):null)}}ReactDOM.render(React.createElement(TinodeWeb,null),document.getElementById("mountPoint"));
diff --git a/package.json b/package.json
index 6418e2ca..d76346df 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
   },
   "scripts": {
     "build": "npm run build:babel && npm run build:prod && npm run build:css",
-    "build:dev": "browserify ./src/index.js --standalone TinodeWeb > ./umd/webapp.dev.js",
-    "build:prod": "browserify ./src/index.js --standalone TinodeWeb --plugin tinyify > ./umd/webapp.prod.js",
+    "build:dev": "browserify ./src/index.js --standalone Webapp > ./umd/index.dev.js",
+    "build:prod": "browserify ./src/index.js --standalone Webapp --plugin tinyify > ./umd/index.prod.js",
     "build:babel": "babel ./src/webapp.js --presets react --out-file ./webapp.js",
     "build:css": "postcss css/base.css > css/base.min.css",
     "babel-version": "babel --version"
@@ -57,5 +57,11 @@
   },
   "homepage": "https://github.com/tinode/chat",
   "email": "gene@tinode.co",
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "dependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "tinode-sdk": "^0.15.5",
+    "tinyify": "^2.4.3"
+  }
 }
diff --git a/src/index.js b/src/index.js
index bd4669c9..f3353dd2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,12 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
-let Tinode = require('tinode-sdk');
-let TinodeWeb = require('webapp.js')
+// Put all packages together.
+// Used to generate umd/index.prod.js
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Tinode = require('tinode-sdk');
+var TinodeWeb = require('../webapp.js')
 
 ReactDOM.render(
-  <TinodeWeb />,
+  React.createElement(TinodeWeb, null),
   document.getElementById('mountPoint')
 );
diff --git a/src/webapp.js b/src/webapp.js
index b9440033..101cbde5 100644
--- a/src/webapp.js
+++ b/src/webapp.js
@@ -5192,7 +5192,6 @@ class TinodeWeb extends React.Component {
   }
 };
 
-ReactDOM.render(
-  <TinodeWeb />,
-  document.getElementById('mountPoint')
-);
+if (typeof module != 'undefined') {
+  module.exports = TinodeWeb;
+}