\n
\n );\n }\n};\n\nexport default injectIntl(GroupManager);\n","import QRCode from 'qrcodejs';\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { QRCODE_SIZE } from '../config';\n\nexport default class ShowQRCode extends React.PureComponent {\n constructor(props) {\n super(props);\n this.qrCodeRef = React.createRef();\n }\n\n componentDidMount() {\n new QRCode(this.qrCodeRef.current, {\n text: this.props.uri,\n width: QRCODE_SIZE,\n height: QRCODE_SIZE,\n });\n }\n\n render() {\n return (\n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n );\n }\n};\n","// Edit account parameters.\nimport React from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nconst messages = defineMessages({\n clear_messages: {\n id: 'action_clear_messages',\n defaultMessage: 'Clear Messages',\n description: 'Flat button [Clear Messages] (soft-delete messages)'\n },\n clear_messages_warning: {\n id: 'clear_messages_warning',\n defaultMessage: 'Are you sure you want to clear all messages? It cannot be undone.',\n description: 'Alert dialog warning when deleting all messages.'\n },\n delete_messages: {\n id: 'action_delete_messages',\n defaultMessage: 'Clear Messages for All',\n description: 'Flat button [Clear for All] (hard-delete all messages)'\n },\n delete_messages_warning: {\n id: 'delete_messages_warning',\n defaultMessage: 'Are you sure you want to delete all messages for everyone? It cannot be undone.',\n description: 'Alert dialog warning when hard-deleting all messages.'\n },\n topic_delete: {\n id: 'topic_delete',\n defaultMessage: 'Delete Conversation',\n description: 'Alert title when deleting the topic.'\n },\n topic_delete_warning: {\n id: 'topic_delete_warning',\n defaultMessage: 'Are you sure you want to delete this conversation? It cannot be undone.',\n description: 'Alert warning when deleting entire topic'\n },\n leave_chat: {\n id: 'action_leave_chat',\n defaultMessage: 'Leave Conversation',\n description: 'Flat button [Leave Conversation]'\n },\n leave_chat_warning: {\n id: 'leave_chat_warning',\n defaultMessage: 'Are you sure you want to leave this conversation?',\n description: 'Alert dialog warning when unsubscribing from a chat.'\n },\n block_contact: {\n id: 'action_block_contact',\n defaultMessage: \"Block Contact\",\n description: \"Flat button [Block Contact]\"\n },\n block_contact_warning: {\n id: 'block_contact_warning',\n defaultMessage: 'Are you sure you want to block this contact?',\n description: 'Alert dialog warning when blocking a contact.'\n },\n report_chat: {\n id: 'action_report_chat',\n defaultMessage: 'Report Conversation',\n description: 'Flat button [Report Group]'\n },\n report_chat_warning: {\n id: 'report_chat_warning',\n defaultMessage: 'Are you sure you want to block and report this conversation?',\n description: 'Alert dialog warning when reporting a conversation for abuse'\n },\n other_user: {\n id: 'label_other_user',\n defaultMessage: 'Other',\n description: 'Label for the other user when the user is unnamed'\n },\n});\n\nclass TopicSecurity extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleDeleteTopic = this.handleDeleteTopic.bind(this);\n this.handleDeleteMessages = this.handleDeleteMessages.bind(this);\n this.handleLeave = this.handleLeave.bind(this);\n this.handleBlock = this.handleBlock.bind(this);\n this.handleReport = this.handleReport.bind(this);\n }\n\n handleDeleteTopic(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(messages.topic_delete), // title\n formatMessage(messages.topic_delete_warning), // content\n _ => this.props.onDeleteTopic(this.props.topic), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n\n handleDeleteMessages(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages), // title\n formatMessage(this.props.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content\n _ => this.props.onDeleteMessages(this.props.topic), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n\n handleLeave(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(messages.leave_chat), // title\n formatMessage(messages.leave_chat_warning), // content\n _ => this.props.onLeaveTopic(this.props.topic), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n\n handleBlock(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(messages.block_contact), // title\n formatMessage(messages.block_contact_warning), // content\n _ => this.props.onBlockTopic(this.props.topic), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n\n handleReport(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(messages.report_chat), // title\n formatMessage(messages.report_chat_warning), // content\n (_ => { this.props.onReportTopic(this.props.topic); }), // onConfirm\n null, // \"OK\"\n true, // Show Reject button\n null // \"Cancel\"\n );\n }\n\n render() {\n const {formatMessage} = this.props.intl;\n return (\n \n \n
{this.props.uri}
\n \n \n
\n \n
\n );\n }\n};\n\nexport default injectIntl(TopicSecurity);\n","// InfoView: panel with topic/user info.\nimport React from 'react';\nimport { FormattedMessage, FormattedNumber, defineMessages, injectIntl } from 'react-intl';\n\nimport { AccessMode, Tinode, TheCard } from 'tinode-sdk';\n\nimport AvatarUpload from '../widgets/avatar-upload.jsx';\nimport BadgeList from '../widgets/badge-list.jsx';\nimport CheckBox from '../widgets/checkbox.jsx';\nimport ContactList from '../widgets/contact-list.jsx';\nimport ErrorPanel from '../widgets/error-panel.jsx';\nimport GroupManager from '../widgets/group-manager.jsx';\nimport MenuCancel from '../widgets/menu-cancel.jsx';\nimport PermissionsEditor from '../widgets/permissions-editor.jsx';\nimport ShowQRCode from '../widgets/show-qrcode.jsx';\nimport TopicCommonView from './topic-common-view.jsx';\nimport TopicSecurity from '../widgets/topic-security.jsx';\n\nimport { MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH,\n NO_ACCESS_MODE, TOAST_DURATION } from '../config.js';\n\nimport { makeImageUrl } from '../lib/blob-helpers.js';\nimport { truncateString } from '../lib/strformat.js';\n\nconst messages = defineMessages({\n info: {\n id: 'panel_title_info',\n description: 'Title for InfoView',\n defaultMessage: 'Info'\n },\n general: {\n id: 'panel_title_general',\n description: 'Title for TopicCommon.',\n defaultMessage: 'General'\n },\n security: {\n id: 'panel_title_security',\n description: 'Title for TopicSecirity and AccSecurity.',\n defaultMessage: 'Security'\n },\n members: {\n id: 'panel_title_members',\n description: 'Title for managing group members view.',\n defaultMessage: 'Members'\n },\n crop: {\n id: 'panel_title_crop',\n description: 'Title for AvatarCropView.',\n defaultMessage: 'Drag to Adjust'\n },\n perm_want: {\n id: 'requested_permissions',\n defaultMessage: 'Requested',\n description: 'Title for permissions'\n },\n perm_given: {\n id: 'granted_permissions',\n defaultMessage: 'Granted',\n description: 'Title for permissions'\n },\n perm_auth: {\n id: 'permissions_authenticated',\n defaultMessage: 'Authenticated',\n description: 'Title for editing default authenticated permissions'\n },\n perm_anon: {\n id: 'permissions_anonymous',\n defaultMessage: 'Anonymous',\n description: 'Title for editing default anonymous permissions'\n },\n perm_user: {\n id: 'permissions_user',\n defaultMessage: 'User\\'s Permissions',\n description: 'Title for editing user\\'s permissions'\n },\n edit_permissions: {\n id: 'menu_item_edit_permissions',\n defaultMessage: 'Edit permissions',\n description: 'Menu item [Edit permissions]'\n },\n qrcode: {\n id: 'scan_qr_code',\n defaultMessage: 'Scan QR Code',\n description: 'Title for scanning QR code'\n },\n text_copied: {\n id: 'text_copied',\n defaultMessage: 'Copied to clipboard',\n description: 'Notification that text has been copied to clipboard'\n },\n self_topic_name: {\n id: 'self_topic_name',\n defaultMessage: 'Saved messages',\n description: 'Name of self topic for UI',\n },\n self_topic_comment: {\n id: 'self_topic_comment',\n defaultMessage: 'Notes, messages, links, files saved for posterity',\n description: 'Comment for self topic for UI',\n },\n});\n\nclass InfoView extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n topic: null,\n owner: false,\n admin: false,\n sharer: false,\n deleter: false,\n muted: false,\n address: null,\n groupTopic: undefined,\n isSelf: false,\n channel: undefined,\n fullName: undefined,\n description: undefined,\n avatar: null,\n private: null,\n selectedContact: null,\n access: null,\n modeGiven: null,\n modeWant: null,\n modeGiven2: null, // P2P topic, the other user mode given\n modeWant2: null, // P2P topic, the other user mode want\n auth: null,\n anon: null,\n contactList: [],\n trustedBadges: [],\n previousMetaDesc: undefined,\n previousSubsUpdated: undefined,\n };\n\n this.propsUpdated = this.propsUpdated.bind(this);\n this.resetSubs = this.resetSubs.bind(this);\n this.resetDesc = this.resetDesc.bind(this);\n this.resetTags = this.resetTags.bind(this);\n this.onMetaDesc = this.onMetaDesc.bind(this);\n this.onSubsUpdated = this.onSubsUpdated.bind(this);\n this.handleImageChanged = this.handleImageChanged.bind(this);\n this.handleMuted = this.handleMuted.bind(this);\n this.handleUnarchive = this.handleUnarchive.bind(this);\n this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);\n this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);\n this.handleShowQRCode = this.handleShowQRCode.bind(this);\n this.handleCopyToClipboard = this.handleCopyToClipboard.bind(this);\n this.handleShare = this.handleShare.bind(this);\n this.handleShowAddMembers = this.handleShowAddMembers.bind(this);\n this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);\n this.handleMemberSelected = this.handleMemberSelected.bind(this);\n this.handleContextMenu = this.handleContextMenu.bind(this);\n this.handleBackNavigate = this.handleBackNavigate.bind(this);\n }\n\n propsUpdated(props) {\n const topic = this.props.tinode.getTopic(props.topic);\n if (!topic) {\n return;\n }\n\n if (this.onMetaDesc != topic.onMetaDesc) {\n this.previousMetaDesc = topic.onMetaDesc;\n topic.onMetaDesc = this.onMetaDesc;\n\n this.previousSubsUpdated = topic.onSubsUpdated;\n topic.onSubsUpdated = this.onSubsUpdated;\n }\n\n if (this.state.topic != props.topic) {\n this.setState({topic: props.topic});\n this.resetDesc(topic, props);\n this.resetSubs(topic, props);\n this.resetTags(topic);\n }\n }\n\n // Must provide this for lazy loaded components.\n componentDidMount() {\n this.propsUpdated(this.props);\n }\n\n componentDidUpdate(props) {\n this.propsUpdated(props);\n }\n\n componentWillUnmount() {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n this.setState({topic: null});\n topic.onMetaDesc = this.previousMetaDesc;\n topic.onSubsUpdated = this.previousSubsUpdated;\n }\n\n resetSubs(topic, props) {\n const newState = {contactList: []};\n if (topic.getType() == 'p2p') {\n // Fetch the other party in the p2p conversation.\n // Topic may not be ready yet, so check if user is found.\n const user2 = topic.subscriber(props.topic);\n if (user2) {\n newState.modeGiven2 = user2.acs.getGiven();\n newState.modeWant2 = user2.acs.getWant();\n } else {\n newState.modeGiven2 = NO_ACCESS_MODE;\n newState.modeWant2 = NO_ACCESS_MODE;\n }\n } else {\n topic.subscribers((sub) => {\n newState.contactList.push(sub);\n }, this);\n }\n\n this.setState(newState);\n }\n\n resetDesc(topic, props) {\n const defacs = topic.getDefaultAccess() || {};\n const acs = topic.getAccessMode();\n\n const badges = [];\n if (topic.trusted) {\n for (const [key, val] of Object.entries(topic.trusted)) {\n if (val) {\n badges.push(key);\n }\n }\n }\n\n const isSelf = topic.isSelfType();\n\n this.setState({\n owner: acs && acs.isOwner(),\n admin: acs && acs.isAdmin(),\n sharer: acs && acs.isSharer(),\n deleter: acs && acs.isDeleter(),\n muted: acs && acs.isMuted(),\n\n fullName: isSelf ?\n props.intl.formatMessage(messages.self_topic_name) :\n truncateString(topic.public && topic.public.fn, MAX_TITLE_LENGTH),\n description: isSelf ?\n props.intl.formatMessage(messages.self_topic_comment) :\n truncateString(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),\n avatar: makeImageUrl(topic.public ? topic.public.photo : null),\n trustedBadges: badges,\n private: truncateString(topic.private && topic.private.comment, MAX_TITLE_LENGTH),\n archived: topic.isArchived(),\n address: topic.name,\n groupTopic: topic.isGroupType(),\n isSelf: isSelf,\n channel: topic.isChannelType() || topic.chan,\n access: acs ? acs.getMode() : undefined,\n modeGiven: acs ? acs.getGiven() : undefined,\n modeWant: acs ? acs.getWant() : undefined,\n auth: defacs.auth,\n anon: defacs.anon\n });\n }\n\n resetTags(topic) {\n if (topic.getType() != 'grp') {\n return;\n }\n\n const acs = topic.getAccessMode();\n if (acs && acs.isOwner()) {\n // Requesting tags: owner is editing the topic.\n topic.getMeta(topic.startMetaQuery().withTags().build());\n }\n }\n\n onMetaDesc(desc) {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n this.resetDesc(topic, this.props);\n\n if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {\n this.previousMetaDesc(desc);\n }\n }\n\n onSubsUpdated(subs) {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n this.resetSubs(topic, this.props);\n\n if (this.previousSubsUpdated && this.previousSubsUpdated != this.onSubsUpdated) {\n this.previousSubsUpdated(subs);\n }\n }\n\n handleImageChanged(mime, img) {\n this.setState({avatar: img});\n this.props.onTopicDescUpdate(this.props.topic, new TheCard(null, img || Tinode.DEL_CHAR), null);\n }\n\n handleMuted(ignored, checked) {\n this.setState({muted: checked});\n this.props.onChangePermissions(this.props.topic, checked ? '-P' : '+P');\n }\n\n handleUnarchive(ignored, ignored2) {\n this.props.onTopicUnArchive(this.props.topic);\n }\n\n handlePermissionsChanged(which, perm) {\n switch (which) {\n case 'auth':\n this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {auth: perm});\n break;\n case 'anon':\n this.props.onTopicDescUpdateRequest(this.props.topic, null, null, {anon: perm});\n break;\n case 'mode':\n case 'want':\n this.props.onChangePermissions(this.props.topic, perm);\n break;\n case 'given':\n this.props.onChangePermissions(this.props.topic, perm, this.props.topic);\n break;\n case 'user':\n this.props.onChangePermissions(this.props.topic, perm, this.state.userPermissionsEdited);\n break;\n }\n\n this.handleBackNavigate();\n }\n\n handleLaunchPermissionsEditor(which, uid) {\n const {formatMessage} = this.props.intl;\n let toEdit, toCompare, toSkip, titleEdit, titleCompare, userTitle, userAvatar;\n switch (which) {\n case 'mode':\n toEdit = this.state.access;\n break;\n case 'want':\n toEdit = this.state.modeWant;\n toCompare = this.state.modeGiven;\n if (this.state.owner) {\n // Don't allow owner to unset 'O' permission. All other permissions are OK.\n toSkip = 'O';\n } else {\n // Allow accepting any of 'ASDO' permissions but don't allow asking for them.\n toSkip = AccessMode.encode(AccessMode.diff('ASDO', this.state.modeGiven));\n if (this.state.channel) {\n // Channels are read-only.\n toSkip += 'W';\n }\n }\n titleEdit = formatMessage(messages.perm_want);\n titleCompare = formatMessage(messages.perm_given);\n break;\n case 'given':\n toEdit = this.state.modeGiven2;\n toCompare = this.state.modeWant2;\n toSkip = this.state.groupTopic ? (this.state.owner ? '' : 'O') : 'ASDO';\n titleEdit = formatMessage(messages.perm_given);\n titleCompare = formatMessage(messages.perm_want);\n break;\n case 'auth':\n toEdit = this.state.auth;\n toSkip = 'O';\n break;\n case 'anon':\n toEdit = this.state.anon;\n toSkip = 'O';\n break;\n case 'user': {\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n const user = topic.subscriber(uid);\n if (!user || !user.acs) {\n return;\n }\n toEdit = user.acs.getGiven();\n toCompare = user.acs.getWant();\n toSkip = this.state.owner ? '' : 'O';\n titleEdit = formatMessage(messages.perm_given);\n titleCompare = formatMessage(messages.perm_want);\n if (user.public) {\n userTitle = user.public.fn;\n userAvatar = user.public.photo;\n }\n break;\n }\n default:\n console.error(\"Unknown permission editing mode '\" + which + \"'\");\n return;\n }\n this.setState({\n userPermissionsEdited: uid,\n userPermissionsTitle: userTitle,\n userPermissionsAvatar: userAvatar,\n editedPermissions: toEdit,\n immutablePermissions: toCompare,\n editedPermissionsTitle: titleEdit,\n immutablePermissionsTitle: titleCompare,\n editedPermissionsSkipped: toSkip,\n });\n this.props.onNavigate(`perm/${which}`);\n }\n\n handleShowQRCode(e) {\n e.preventDefault();\n this.props.onNavigate('qrcode');\n }\n\n handleCopyToClipboard(e, text) {\n e.preventDefault();\n navigator.clipboard.writeText(text).then(_ => {\n this.setState({toast: this.props.intl.formatMessage(messages.text_copied)});\n setTimeout(_ => { this.setState({toast: ''}); }, TOAST_DURATION);\n });\n }\n\n handleShare(e) {\n e.preventDefault();\n const card = new TheCard(this.state.fullName, this.state.avatar, null, this.state.description);\n TheCard.setTinodeID(card, Tinode.URI_TOPIC_ID_PREFIX + this.props.topic);\n this.props.onShareTheCard(card);\n }\n\n handleShowAddMembers(e) {\n e.preventDefault();\n this.props.onInitFind();\n this.props.onNavigate('members');\n }\n\n handleMemberUpdateRequest(members, added, removed) {\n this.props.onMemberUpdateRequest(this.props.topic, added, removed);\n this.props.onNavigate('info');\n }\n\n handleMemberSelected(uid) {\n this.setState({selectedContact: uid});\n }\n\n handleBackNavigate() {\n const args = (this.props.panel || 'info').split('/');\n if (args[0] == 'info') {\n this.props.onNavigate(null);\n } else if (args[0] == 'perm') {\n if (args[1] == 'user') {\n this.props.onNavigate('info');\n } else {\n this.props.onNavigate('security');\n }\n } else {\n this.props.onNavigate('info');\n }\n }\n\n handleContextMenu(params) {\n const {formatMessage} = this.props.intl;\n const topic = this.props.tinode.getTopic(this.props.topic);\n if (!topic) {\n return;\n }\n const user = topic.subscriber(params.topicName);\n if (!user || !user.acs) {\n return;\n }\n\n const isMe = this.props.tinode.isMe(params.topicName);\n const menuItems = [{\n title: formatMessage(messages.edit_permissions),\n handler: _ => this.handleLaunchPermissionsEditor(isMe ? 'want' : 'user', params.topicName)\n }];\n if (!isMe) {\n menuItems.push('member_delete');\n }\n menuItems.push(user.acs.isMuted() ? 'member_unmute' : 'member_mute');\n if (!isMe) {\n menuItems.push(user.acs.isJoiner() ? 'member_block' : 'member_unblock');\n }\n this.props.showContextMenu({\n topicName: this.props.topic,\n x: params.x,\n y: params.y,\n user: params.topicName}, menuItems);\n }\n\n render() {\n const args = (this.props.panel || 'info').split('/');\n const view = args[0];\n args.shift();\n\n const {formatMessage} = this.props.intl;\n const panelTitle = formatMessage((view == 'perm' ? messages['perm_' + args[0]] : messages[view])\n || messages['info']);\n\n const topic = this.props.tinode.getTopic(this.state.topic);\n const alias = topic && topic.alias();\n\n return (\n \n {!this.props.channel ?\n \n delete_outline {\n formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages)\n }\n \n :\n null\n }\n {this.props.owner ?\n \n delete {formatMessage(messages.topic_delete)}\n \n :\n \n exit_to_app {formatMessage(messages.leave_chat)}\n \n }\n {!this.props.groupTopic ?\n \n block {formatMessage(messages.block_contact)}\n \n :\n null\n }\n {!this.props.owner ?\n \n report {formatMessage(messages.report_chat)}\n \n :\n null\n }\n
\n \n \n {this.props.groupTopic ?\n <>\n
\n \n {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>\n {this.props.access}\n \n
\n {!this.props.channel ?\n \n
\n :\n null\n }\n \n :\n \n \n
\n \n
\n Auth: {\n e.preventDefault();\n if (this.props.owner) {\n this.props.onLaunchPermissionsEditor('auth');\n }\n }}>{this.props.auth}\n
\n Anon: {\n e.preventDefault();\n if (this.props.owner) {\n this.props.onLaunchPermissionsEditor('anon');\n }\n }}>{this.props.anon}\n
\n \n
\n }\n \n \n
\n \n
\n \n
\n {this.props.fullName ? this.props.fullName : formatMessage(messages.other_user)}:\n {e.preventDefault(); this.props.onLaunchPermissionsEditor('given')}}>\n {this.props.modeGiven2}\n \n
\n \n this.handlePermissionsChanged(args[0], mode)}\n onCancel={this.handleBackNavigate} />\n :\n view == 'general' ?\n
\n );\n }\n};\n\nexport default injectIntl(InfoView);\n","// PermissionsEditor: Component for editing permissions\n// {this.state.toast}
\n \n
\n {this.props.displayMobile ?\n {panelTitle}
\n \n
\n \n {\n (no_members) => \n \n :\n null\n }\n
\n }\n \n {!this.state.isSelf ?\n {e.preventDefault(); this.props.onNavigate('general');}}>\n edit \n \n \n
\n {!this.state.isSelf ?\n <>\n \n \n
\n {this.state.private ?\n {this.state.fullName} \n {this.state.channel ? podcasts : null}
\n \n \n
\n : null\n }\n {!this.state.isSelf ?\n <>\n {this.state.private}
\n \n
\n {alias ?\n \n \n {this.state.address}\n
\n \n \n
\n : null}\n \n : null\n }\n {this.state.trustedBadges.length > 0 ?\n \n \n {alias}\n
\n \n {this.handleCopyToClipboard(e, alias);}}>\n content_copy\n \n qr_code \n
\n \n
\n : null\n }\n {this.state.groupTopic && topic.subcnt > 0 ?\n \n \n
: null}\n {this.state.description}
\n \n \n
\n : null\n }\n {this.state.archived ?\n \n \n
\n :\n null\n }\n {!this.state.isSelf ?\n <>\n \n : null\n }\n {this.state.groupTopic && this.state.sharer ?\n <>\n \n \n \n
\n \n \n person_add
\n \n {this.props.userTitle ?\n \n {this.props.compare ?\n
\n
\n
\n );\n }\n};\n\nexport default injectIntl(PermissionsEditor);\n"],"names":["messages","external_ReactIntl_","defineMessages","no_contacts","id","defaultMessage","description","contacts_not_found_short","add_members_prompt","GroupManager","external_React_default","Component","constructor","props","super","this","state","members","index","indexMembers","staticMembers","keepInitialMembers","requiredMember","contactFilter","noContactsMessage","intl","formatMessage","selectedContacts","handleContactSelected","bind","handleMemberRemoved","handleContactFilter","handleSubmit","handleCancel","forEach","m","user","delta","present","keepInitial","stat","push","sel","userId","status","slice","contacts","i","setState","splice","val","msg","query","doContactFiltering","filter","values","length","indexOf","added","removed","Object","keys","k","onSubmit","onCancel","render","jsx_runtime","jsxs","children","jsx","className","FormattedMessage","chip_input","A","tinode","chips","prompt","filterFunc","onChipRemoved","contact_list","myUserId","topicSelected","emptyListMessage","showOnline","showUnread","onTopicSelected","onClick","group_manager","injectIntl","ShowQRCode","PureComponent","qrCodeRef","createRef","componentDidMount","external_QRCode_default","current","text","uri","width","height","ref","topic_security_messages","clear_messages","clear_messages_warning","delete_messages","delete_messages_warning","topic_delete","topic_delete_warning","leave_chat","leave_chat_warning","block_contact","block_contact_warning","report_chat","report_chat_warning","other_user","TopicSecurity","handleDeleteTopic","handleDeleteMessages","handleLeave","handleBlock","handleReport","e","preventDefault","onShowAlert","_","onDeleteTopic","topic","deleter","onDeleteMessages","onLeaveTopic","onBlockTopic","onReportTopic","channel","href","owner","groupTopic","Fragment","onLaunchPermissionsEditor","access","auth","anon","fullName","modeGiven2","topic_security","info_view_messages","info","general","security","crop","perm_want","perm_given","perm_auth","perm_anon","perm_user","edit_permissions","qrcode","text_copied","self_topic_name","self_topic_comment","InfoView","admin","sharer","muted","address","undefined","isSelf","avatar","private","selectedContact","modeGiven","modeWant","modeWant2","contactList","trustedBadges","previousMetaDesc","previousSubsUpdated","propsUpdated","resetSubs","resetDesc","resetTags","onMetaDesc","onSubsUpdated","handleImageChanged","handleMuted","handleUnarchive","handlePermissionsChanged","handleLaunchPermissionsEditor","handleShowQRCode","handleCopyToClipboard","handleShare","handleShowAddMembers","handleMemberUpdateRequest","handleMemberSelected","handleContextMenu","handleBackNavigate","getTopic","componentDidUpdate","componentWillUnmount","newState","getType","user2","subscriber","acs","getGiven","getWant","subscribers","sub","defacs","getDefaultAccess","getAccessMode","badges","trusted","key","entries","isSelfType","isOwner","isAdmin","isSharer","isDeleter","isMuted","strformat","W5","public","fn","note","blob_helpers","to","photo","comment","archived","isArchived","name","isGroupType","isChannelType","chan","getMode","getMeta","startMetaQuery","withTags","build","desc","subs","mime","img","onTopicDescUpdate","external_tinode_","TheCard","Tinode","DEL_CHAR","ignored","checked","onChangePermissions","ignored2","onTopicUnArchive","which","perm","onTopicDescUpdateRequest","userPermissionsEdited","uid","toEdit","toCompare","toSkip","titleEdit","titleCompare","userTitle","userAvatar","AccessMode","encode","diff","console","error","userPermissionsTitle","userPermissionsAvatar","editedPermissions","immutablePermissions","editedPermissionsTitle","immutablePermissionsTitle","editedPermissionsSkipped","onNavigate","navigator","clipboard","writeText","then","toast","setTimeout","card","setTinodeID","URI_TOPIC_ID_PREFIX","onShareTheCard","onInitFind","onMemberUpdateRequest","args","panel","split","params","topicName","isMe","menuItems","title","handler","isJoiner","showContextMenu","x","y","view","shift","panelTitle","alias","menu_cancel","displayMobile","error_panel","level","errorLevel","errorText","onClearError","onError","searchableContacts","permissions_editor","mode","compare","skip","modeTitle","compareTitle","item","topic_common_view","reqCredMethod","onCredAdd","onUpdateTagsRequest","onTopicTagsUpdateRequest","onCredConfirm","onCredDelete","onUpdateTopicDesc","avatar_upload","readOnly","style","marginLeft","opacity","badge_list","subcnt","FormattedNumber","value","widgets_checkbox","onChange","no_members","showMode","noScroll","info_view","react_intl__WEBPACK_IMPORTED_MODULE_1__","joiner","reader","writer","preser","approver","PermissionsEditor","react__WEBPACK_IMPORTED_MODULE_0___default","replace","handleChange","sort","join","names","J","R","W","P","S","D","O","items","all","c","charAt","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__","_checkbox_jsx__WEBPACK_IMPORTED_MODULE_2__","_contact_jsx__WEBPACK_IMPORTED_MODULE_3__","small","_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__","__webpack_exports__"],"sourceRoot":""}
\ No newline at end of file
diff --git a/umd/331.prod.js b/umd/331.prod.js
new file mode 100644
index 00000000..bae688fd
--- /dev/null
+++ b/umd/331.prod.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[331],{6331:function(e,s,i){i.r(s);var t=i(1594),n=i.n(t),a=i(8181),o=i(3207),d=i(2514),l=i(9022),r=i(4848);const c=(0,a.defineMessages)({delete_account:{id:"delete_account",defaultMessage:"Delete account",description:"Title for delete account warning"},delete_account_warning:{id:"delete_account_warning",defaultMessage:"Are you sure you want to delete your account? It cannot be undone.",description:"Warning message when deleting an account"}});class h extends n().Component{constructor(e){super(e);const s=this.props.tinode.getMeTopic();let i=0;s.contacts(e=>{e.acs&&!e.acs.isJoiner()&&i++});const t=s.getDefaultAccess();this.state={auth:t?t.auth:null,anon:t?t.anon:null,showPermissionEditorFor:void 0,blockedCount:i},this.handlePasswordUpdate=this.handlePasswordUpdate.bind(this),this.handleLaunchPermissionsEditor=this.handleLaunchPermissionsEditor.bind(this),this.handleHidePermissionsEditor=this.handleHidePermissionsEditor.bind(this),this.handlePermissionsChanged=this.handlePermissionsChanged.bind(this),this.handleDeleteAccount=this.handleDeleteAccount.bind(this),this.handleCheckboxClick=this.handleCheckboxClick.bind(this)}handlePasswordUpdate(e){this.setState({password:e}),this.props.onUpdatePassword(e)}handleLaunchPermissionsEditor(e){this.setState({showPermissionEditorFor:e,editedPermissions:this.state[e]})}handleHidePermissionsEditor(){this.setState({showPermissionEditorFor:void 0})}handlePermissionsChanged(e){let s={};s[this.state.showPermissionEditorFor]=e,this.props.onUpdateAccountDesc("me",void 0,void 0,s);let i={showPermissionEditorFor:void 0};i[this.state.showPermissionEditorFor]=e,this.setState(i)}handleCheckboxClick(e,s){this.props.onToggleIncognitoMode(s)}handleDeleteAccount(e){e.preventDefault();const{formatMessage:s}=this.props.intl;this.props.onShowAlert(s(c.delete_account),s(c.delete_account_warning),e=>this.props.onDeleteAccount(),null,!0,null)}render(){return(0,r.jsx)(r.Fragment,{children:this.state.showPermissionEditorFor?(0,r.jsx)(l.A,{mode:this.state.editedPermissions,skip:"O",onSubmit:this.handlePermissionsChanged,onCancel:this.handleHidePermissionsEditor}):(0,r.jsxs)("div",{className:"scrollable-panel",children:[(0,r.jsxs)("div",{className:"panel-form-column",children:[(0,r.jsx)("label",{className:"small",children:(0,r.jsx)(a.FormattedMessage,{id:"label_password",defaultMessage:"Password",description:"Label for password editing"})}),(0,r.jsx)("div",{children:(0,r.jsx)(a.FormattedMessage,{id:"password_unchanged_prompt",defaultMessage:"Unchanged",description:"Message in editor while password is unchanged",children:e=>(0,r.jsx)(d.A,{placeholder:e,type:"password",onFinished:this.handlePasswordUpdate})})})]}),(0,r.jsx)("div",{className:"hr"}),(0,r.jsxs)("div",{className:"panel-form-row",children:[(0,r.jsx)("label",{htmlFor:"incognito-mode",children:(0,r.jsx)(a.FormattedMessage,{id:"label_incognito_mode",defaultMessage:"Incognito mode:",description:"Label for incognito mode toggle"})}),(0,r.jsx)(o.A,{name:"incognito",id:"incognito-mode",checked:this.props.incognitoMode,onChange:this.handleCheckboxClick})]}),(0,r.jsx)("div",{className:"panel-form-row",children:(0,r.jsx)("span",{className:"small gray",children:(0,r.jsx)(a.FormattedMessage,{id:"incognito_mode_description",defaultMessage:"Hide your online status and typing indicators.",description:"Description for incognito mode toggle"})})}),(0,r.jsx)("div",{className:"hr"}),(0,r.jsxs)("div",{className:"panel-form-column",children:[(0,r.jsxs)("a",{href:"#",className:"danger flat-button",onClick:e=>{e.preventDefault(),this.props.onLogout()},children:[(0,r.jsx)("i",{className:"material-icons",children:"exit_to_app"})," ",(0,r.jsx)(a.FormattedMessage,{id:"button_logout",defaultMessage:"Logout",description:"Button [Logout]"})]}),(0,r.jsxs)("a",{href:"#",className:"danger flat-button",onClick:e=>{this.handleDeleteAccount(e)},children:[(0,r.jsx)("i",{className:"material-icons",children:"delete"})," ",(0,r.jsx)(a.FormattedMessage,{id:"button_delete_account",defaultMessage:"Delete account",description:"Button [Delete account]"})]})]}),(0,r.jsx)("div",{className:"hr"}),(0,r.jsxs)("div",{className:"panel-form-column",children:[(0,r.jsx)("div",{children:(0,r.jsx)("label",{className:"small",children:(0,r.jsx)(a.FormattedMessage,{id:"label_default_access_mode",defaultMessage:"Default access mode:",description:"Label for default access mode"})})}),(0,r.jsxs)("div",{className:"quoted",children:[(0,r.jsxs)("div",{children:["Auth: ",(0,r.jsx)("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"auth"),children:this.state.auth})]}),(0,r.jsxs)("div",{children:["Anon: ",(0,r.jsx)("tt",{className:"clickable",onClick:this.handleLaunchPermissionsEditor.bind(this,"anon"),children:this.state.anon})]})]})]}),this.state.blockedCount>0?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"hr"}),(0,r.jsxs)("div",{className:"panel-form-row",children:[(0,r.jsx)("i",{className:"material-icons",children:"block"})," ",(0,r.jsx)("a",{href:"#",className:"gray",onClick:e=>{e.preventDefault(),this.props.onShowBlocked()},children:(0,r.jsx)(a.FormattedMessage,{id:"blocked_contacts_link",defaultMessage:"Blocked contacts ({count})",values:{count:this.state.blockedCount},description:"Blocked contacts link"})})]})]}):null]})})}}s.default=(0,a.injectIntl)(h)},9022:function(e,s,i){var t=i(1594),n=i.n(t),a=i(8181),o=i(3207),d=i(1974),l=i(7981),r=i(4848);const c=(0,a.defineMessages)({joiner:{id:"permission_join",defaultMessage:"Join ({val})",description:"Name of J permission"},reader:{id:"permission_read",defaultMessage:"Read ({val})",description:"Name of R permission"},writer:{id:"permission_write",defaultMessage:"Write ({val})",description:"Name of W permission"},preser:{id:"permission_pres",defaultMessage:"Get notified ({val})",description:"Name of P permission"},approver:{id:"permission_admin",defaultMessage:"Approve ({val})",description:"Name of A permission"},sharer:{id:"permission_share",defaultMessage:"Share ({val})",description:"Name of S permission"},deleter:{id:"permission_delete",defaultMessage:"Delete ({val})",description:"Name of D permission"},owner:{id:"permission_owner",defaultMessage:"Owner ({val})",description:"Name of O permission"}});class h extends n().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){let s=this.state.mode;-1==s.indexOf(e)?s+=e:s=s.replace(e,""),this.setState({mode:s})}handleSubmit(){const e=(this.state.mode||"N").split("").sort().join("");e!==(this.props.mode||"N").split("").sort().join("")?this.props.onSubmit(e):this.props.onCancel()}handleCancel(){this.props.onCancel()}render(){const{formatMessage:e}=this.props.intl,s={J:e(c.joiner,{val:"J"}),R:e(c.reader,{val:"R"}),W:e(c.writer,{val:"W"}),P:e(c.preser,{val:"P"}),A:e(c.approver,{val:"A"}),S:e(c.sharer,{val:"S"}),D:e(c.deleter,{val:"D"}),O:e(c.owner,{val:"O"})};let i=this.props.skip||"",t=this.state.mode,n=(this.props.compare||"").replace("N",""),h=[];for(let e=0;e<8;e++){let a="JRWPASDO".charAt(e);i.indexOf(a)>=0&&t.indexOf(a)<0||h.push((0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:s[a]}),(0,r.jsx)("td",{className:"checkbox",children:i.indexOf(a)<0?(0,r.jsx)(o.A,{name:a,checked:t.indexOf(a)>=0,onChange:this.handleChange}):(0,r.jsx)(o.A,{name:a,checked:t.indexOf(a)>=0})}),this.props.compare?(0,r.jsx)("td",{className:"checkbox",children:(0,r.jsx)(o.A,{name:a,checked:n.indexOf(a)>=0})}):null]},a))}return(0,r.jsxs)("div",{className:"panel-form-column",children:[this.props.userTitle?(0,r.jsx)("ul",{className:"contact-box small",children:(0,r.jsx)(d.A,{tinode:this.props.tinode,item:this.props.item,title:this.props.userTitle,small:!0,avatar:(0,l.to)(this.props.userAvatar?this.props.userAvatar:null)})}):null,(0,r.jsx)("label",{className:"small",children:(0,r.jsx)(a.FormattedMessage,{id:"title_permissions",defaultMessage:"Permissions",description:"Section title"})}),(0,r.jsxs)("table",{className:"permission-editor",children:[this.props.compare?(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{children:[(0,r.jsx)("th",{}),(0,r.jsx)("th",{children:this.props.modeTitle}),(0,r.jsx)("th",{children:this.props.compareTitle})]})}):null,(0,r.jsx)("tbody",{children:h})]}),(0,r.jsx)("br",{}),(0,r.jsxs)("div",{className:"dialog-buttons",children:[(0,r.jsx)("button",{className:"outline",onClick:this.handleCancel,children:(0,r.jsx)(a.FormattedMessage,{id:"button_cancel",defaultMessage:"Cancel",description:"Button [Cancel]"})}),(0,r.jsx)("button",{className:"primary",onClick:this.handleSubmit,children:(0,r.jsx)(a.FormattedMessage,{id:"button_ok",defaultMessage:"OK",description:"Button [OK]"})})]})]})}}s.A=(0,a.injectIntl)(h)}}]);
+//# sourceMappingURL=331.prod.js.map
\ No newline at end of file
diff --git a/umd/331.prod.js.map b/umd/331.prod.js.map
new file mode 100644
index 00000000..1f9b1f9c
--- /dev/null
+++ b/umd/331.prod.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"331.prod.js","mappings":"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","sources":["webpack://tinode-webapp/./src/views/acc-security-view.jsx","webpack://tinode-webapp/./src/widgets/permissions-editor.jsx"],"sourcesContent":["// Edit account parameters.\nimport React from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nimport CheckBox from '../widgets/checkbox.jsx';\nimport InPlaceEdit from '../widgets/in-place-edit.jsx';\nimport PermissionsEditor from '../widgets/permissions-editor.jsx';\n\nconst messages = defineMessages({\n delete_account: {\n id: 'delete_account',\n defaultMessage: 'Delete account',\n description: 'Title for delete account warning'\n },\n delete_account_warning: {\n id: 'delete_account_warning',\n defaultMessage: 'Are you sure you want to delete your account? It cannot be undone.',\n description: 'Warning message when deleting an account'\n }\n});\n\nclass AccSecurityView extends React.Component {\n constructor(props) {\n super(props);\n\n const me = this.props.tinode.getMeTopic();\n let blockedCount = 0;\n me.contacts((c) => {\n if (c.acs && !c.acs.isJoiner()) {\n blockedCount ++;\n }\n });\n const defacs = me.getDefaultAccess();\n this.state = {\n auth: defacs ? defacs.auth : null,\n anon: defacs ? defacs.anon : null,\n showPermissionEditorFor: undefined,\n blockedCount: blockedCount,\n };\n\n this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);\n this.handleLaunchPermissionsEditor = this.handleLaunchPermissionsEditor.bind(this);\n this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);\n this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);\n this.handleDeleteAccount = this.handleDeleteAccount.bind(this);\n this.handleCheckboxClick = this.handleCheckboxClick.bind(this);\n }\n\n handlePasswordUpdate(pwd) {\n this.setState({password: pwd});\n this.props.onUpdatePassword(pwd);\n }\n\n handleLaunchPermissionsEditor(which) {\n this.setState({\n showPermissionEditorFor: which,\n editedPermissions: this.state[which]\n });\n }\n\n handleHidePermissionsEditor() {\n this.setState({showPermissionEditorFor: undefined});\n }\n\n handlePermissionsChanged(perm) {\n let defacs = {};\n defacs[this.state.showPermissionEditorFor] = perm;\n this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);\n\n let newState = {showPermissionEditorFor: undefined};\n newState[this.state.showPermissionEditorFor] = perm;\n this.setState(newState);\n }\n\n handleCheckboxClick(what, checked) {\n this.props.onToggleIncognitoMode(checked);\n }\n\n handleDeleteAccount(e) {\n e.preventDefault();\n const {formatMessage} = this.props.intl;\n this.props.onShowAlert(\n formatMessage(messages.delete_account), // title\n formatMessage(messages.delete_account_warning), // content\n (_ => this.props.onDeleteAccount()), // onConfirm\n null, // use default text \"OK\"\n true, // Show Reject button\n null // use default text \"Cancel\"\n );\n }\n\n render() {\n return (\n <>{this.state.showPermissionEditorFor ?\n | {this.props.modeTitle} | \n{this.props.compareTitle} | \n
|---|
\n
\n \n \n
\n \n
\n }\n );\n }\n};\n\nexport default injectIntl(AccSecurityView);\n","// PermissionsEditor: Component for editing permissions\n// \n \n
\n \n \n {\n (password_unchanged) => \n
\n \n \n
\n \n \n
\n \n \n {e.preventDefault(); this.props.onLogout();}}>\n exit_to_app
\n \n \n
\n {this.state.blockedCount > 0 ?\n <>\n \n \n \n
\n \n
\n Auth: {this.state.auth}
\n Anon: {this.state.anon}
\n \n block \n {e.preventDefault(); this.props.onShowBlocked();}}>\n
\n \n : null }\n \n {this.props.userTitle ?\n \n {this.props.compare ?\n
\n
\n
\n );\n }\n};\n\nexport default injectIntl(PermissionsEditor);\n"],"names":["messages","react_intl__WEBPACK_IMPORTED_MODULE_1__","defineMessages","delete_account","id","defaultMessage","description","delete_account_warning","AccSecurityView","react__WEBPACK_IMPORTED_MODULE_0___default","constructor","props","super","me","this","tinode","getMeTopic","blockedCount","contacts","c","acs","isJoiner","defacs","getDefaultAccess","state","auth","anon","showPermissionEditorFor","undefined","handlePasswordUpdate","bind","handleLaunchPermissionsEditor","handleHidePermissionsEditor","handlePermissionsChanged","handleDeleteAccount","handleCheckboxClick","pwd","setState","password","onUpdatePassword","which","editedPermissions","perm","onUpdateAccountDesc","newState","what","checked","onToggleIncognitoMode","e","preventDefault","formatMessage","intl","onShowAlert","_","onDeleteAccount","render","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__","jsx","Fragment","children","_widgets_permissions_editor_jsx__WEBPACK_IMPORTED_MODULE_4__","A","mode","skip","onSubmit","onCancel","jsxs","className","FormattedMessage","password_unchanged","_widgets_in_place_edit_jsx__WEBPACK_IMPORTED_MODULE_3__","placeholder","type","onFinished","htmlFor","_widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_2__","name","incognitoMode","onChange","href","onClick","onLogout","onShowBlocked","values","count","__webpack_exports__","injectIntl","joiner","reader","writer","preser","approver","sharer","deleter","owner","PermissionsEditor","replace","handleChange","handleSubmit","handleCancel","val","indexOf","split","sort","join","names","J","R","W","P","S","D","O","compare","items","i","all","charAt","push","_checkbox_jsx__WEBPACK_IMPORTED_MODULE_2__","userTitle","_contact_jsx__WEBPACK_IMPORTED_MODULE_3__","item","title","small","avatar","_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__","to","userAvatar","modeTitle","compareTitle"],"sourceRoot":""}
\ No newline at end of file
diff --git a/umd/523.prod.js b/umd/523.prod.js
new file mode 100644
index 00000000..eea7dad0
--- /dev/null
+++ b/umd/523.prod.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[523],{7523:function(e,t,s){s.r(t),s.d(t,{default:function(){return Q}});var i=s(1594),a=s.n(i),n=s(8181),o=s(4532),r=s(4752),l=s(7256),d=s(7849),h=s(4848);class c extends a().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,s){if(!e)return void this.props.onError("Invalid download URL '"+e+"'");const i=this.props.tinode.getLargeFileHelper();this.setState({downloader:i}),i.download(e,t,s,e=>this.setState({progress:e/this.props.size}),e=>this.props.onError(e,"err")).then(e=>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.uploading?this.props.onCancelUpload():this.state.downloader&&this.state.downloader.cancel()}render(){let e=this.props.filename||"file_attachment";e.length>36&&(e=e.substr(0,16)+"..."+e.substr(-16));let t,s,i=this.props.size>0?(0,h.jsxs)("span",{className:"small gray",children:["(",(0,l.lX)(this.props.size),")"]}):null;this.props.uploading||this.state.downloader||!(0,d.YO)(this.props.downloadUrl)?(t=(0,d.Jf)(this.props.downloadUrl),s=null):(t="#",s=e=>{e.preventDefault(),this.downloadFile(this.props.downloadUrl,this.props.filename,this.props.mimetype)});const a=(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("i",{className:"material-icons",children:"file_download"})," ",(0,h.jsx)(n.FormattedMessage,{id:"save_attachment",defaultMessage:"save",description:"Call to save an attachment"})]});return(0,h.jsxs)("div",{className:"attachment",children:[(0,h.jsx)("div",{children:(0,h.jsx)("i",{className:"material-icons big gray",children:"insert_drive_file"})}),(0,h.jsxs)("div",{className:"flex-column",children:[(0,h.jsxs)("div",{children:[e," ",i]}),this.props.uploading||this.state.downloader?(0,h.jsx)(r.A,{progress:this.props.uploading?this.props.progress:this.state.progress,onCancel:this.handleCancel}):(0,h.jsx)("div",{children:t?(0,h.jsx)("a",{href:t,download:this.props.filename,onClick:s,children:a}):(0,h.jsx)("span",{className:"light-gray",children:a})})]})]})}}var p=s(5247);const u=(0,n.defineMessages)({message_sending:{id:"message_sending",defaultMessage:"sending...",description:"Message being sent, in place of time stamp"},message_sending_failed:{id:"message_sending_failed",defaultMessage:"failed",description:"Failed to send message, in place of time stamp"},message_edited_marker:{id:"message_edited_marker",defaultMessage:", edited",description:"Marker indicating that the message was edited"}});class g extends a().PureComponent{render(){const{formatMessage:e}=this.props.intl;let t;t=this.props.received<=o.Tinode.MESSAGE_STATUS_SENDING?e(u.message_sending):this.props.received==o.Tinode.MESSAGE_STATUS_FAILED||this.props.received==o.Tinode.MESSAGE_STATUS_FATAL?e(u.message_sending_failed):this.props.timestamp.toLocaleTimeString(this.props.intl.locale,{timeStyle:"short"});const s=(0,d.LO)(this.props.received),i=s?(0,h.jsx)("i",{className:"material-icons small "+s.color,children:s.name}):null,a=this.props.edited?e(u.message_edited_marker):null;return(0,h.jsxs)("span",{className:"timestamp",children:[t,a," ",i]})}}var m=(0,n.injectIntl)(g),f=s(2067),v=s(184);class b extends a().PureComponent{constructor(e){super(e),this.state={progress:0},e.uploader&&(e.uploader.onProgress=this.handleProgress.bind(this)),this.handleExpandImage=this.handleExpandImage.bind(this),this.handlePlayVideo=this.handlePlayVideo.bind(this),this.handleFormButtonClick=this.handleFormButtonClick.bind(this),this.handleQuoteClick=this.handleQuoteClick.bind(this),this.handleContextClick=this.handleContextClick.bind(this),this.handleCancelUpload=this.handleCancelUpload.bind(this),this.handleDraftyClick=this.handleDraftyClick.bind(this),this.formatterContext={formatMessage:e.intl.formatMessage.bind(e.intl),viewportWidth:e.viewportWidth,authorizeURL:e.tinode.authorizeURL.bind(e.tinode),onHandleClick:this.handleDraftyClick}}handleDraftyClick=(e,t)=>{switch(t){case"image":this.handleExpandImage(e);break;case"video":this.handlePlayVideo(e);break;case"form_button":this.handleFormButtonClick(e);break;case"quote":this.handleQuoteClick(e);break;case"contact_chat":e.preventDefault();try{const t=new URL(e.target.dataset.val)?.pathname,s=t.split("/").filter(Boolean);v.A.navigateTo(v.A.setUrlTopic("",s.pop()||""))}catch(e){console.error("Invalid URL:",e)}break;case"contact_find":e.preventDefault();let s=v.A.setUrlSidePanel(window.location.hash,"newtpk");s=v.A.addUrlParam(s,"q",e.target.dataset.val),s=v.A.addUrlParam(s,"tab","find"),v.A.navigateTo(s);break;default:console.info("Unhandled drafty action.",t,e.target.dataset)}};handleExpandImage(e){e.preventDefault(),this.props.onExpandMedia({url:e.target.src,filename:e.target.dataset.name,width:e.target.dataset.width,height:e.target.dataset.height,size:e.target.dataset.size,type:e.target.dataset.mime})}handlePlayVideo(e){e.preventDefault(),this.props.onExpandMedia({video:!0,url:e.target.dataset.src,preview:e.target.src,filename:e.target.dataset.name,width:e.target.dataset.width,height:e.target.dataset.height,duration:e.target.dataset.duration,size:e.target.dataset.size,type:e.target.dataset.mime})}handleFormButtonClick(e){e.preventDefault();const t={seq:this.props.seq,resp:{}};e.target.dataset.name&&(t.resp[e.target.dataset.name]=e.target.dataset.val?e.target.dataset.val:void 0===e.target.dataset.val?1:""+e.target.dataset.val),"url"==e.target.dataset.act&&(t.ref=(0,d.Jf)(e.target.dataset.ref)||"about:blank");const s=e.target.dataset.title||"unknown";this.props.onFormResponse(e.target.dataset.act,s,t)}handleContextClick(e){e.preventDefault(),e.stopPropagation();const t=[];if(this.props.received==o.Tinode.MESSAGE_STATUS_FAILED&&t.push("menu_item_send_retry"),this.props.received>o.Tinode.MESSAGE_STATUS_FATAL){if(this.props.userIsWriter&&(t.push("menu_item_reply"),!this.props.response)){let e=!1;o.Drafty.entities(this.props.content,(t,s,i)=>(e=["AU","EX","FM","IM","TC","VC","VD"].includes(i),e)),e||o.Drafty.styles(this.props.content,t=>(e=["QQ"].includes(t),e)),e||t.push("menu_item_edit")}this.props.userIsAdmin&&t.push(this.props.pinned?"menu_item_unpin":"menu_item_pin")}t.push("menu_item_forward"),this.props.showContextMenu({seq:this.props.seq,replace:this.props.edited?parseInt(this.props.edited.split(":")[1]):0,content:this.props.content,userFrom:this.props.userFrom,userName:this.props.userName,y:e.pageY,x:e.pageX,pickReply:this.props.pickReply,editMessage:this.props.editMessage,timestamp:this.props.timestamp},t)}handleProgress(e){this.setState({progress:e})}handleCancelUpload(){this.props.onCancelUpload(this.props.seq,this.props.uploader)}handleQuoteClick(e){e.preventDefault(),e.stopPropagation();const t=this.props.replyToSeq;t&&this.props.onQuoteClick(t)}render(){const e=this.props.sequence+" "+(this.props.response?"left":"right"),t="single"==this.props.sequence||"last"==this.props.sequence?"bubble tip":"bubble",s=this.props.userAvatar||!0;let i="message-content";const r=this.props.isGroup&&this.props.response&&("single"==this.props.sequence||"last"==this.props.sequence);let l=this.props.content;const d=[];if(this.props.mimeType==o.Drafty.getContentType()&&o.Drafty.isValid(l)){o.Drafty.attachments(l,(e,t)=>{o.Drafty.isFormResponseType(e.mime)||d.push((0,h.jsx)(c,{tinode:this.props.tinode,downloadUrl:o.Drafty.getDownloadUrl(e),filename:e.name,uploading:o.Drafty.isProcessing(e),mimetype:e.mime,size:o.Drafty.getEntitySize(e),progress:this.state.progress,onCancelUpload:this.handleCancelUpload,onError:this.props.onError},t))},this);const e=o.Drafty.format(l,f.e3,this.formatterContext);l=a().createElement(a().Fragment,null,e)}else"string"==typeof l?new RegExp("^\\p{RGI_Emoji}{1,5}$","v").test(l||"")&&(i+=" emoji-"+(l||"").match(/(?:👨🏻❤️💋👨🏻|👨🏻❤️💋👨🏼|👨🏻❤️💋👨🏽|👨🏻❤️💋👨🏾|👨🏻❤️💋👨🏿|👨🏼❤️💋👨🏻|👨🏼❤️💋👨🏼|👨🏼❤️💋👨🏽|👨🏼❤️💋👨🏾|👨🏼❤️💋👨🏿|👨🏽❤️💋👨🏻|👨🏽❤️💋👨🏼|👨🏽❤️💋👨🏽|👨🏽❤️💋👨🏾|👨🏽❤️💋👨🏿|👨🏾❤️💋👨🏻|👨🏾❤️💋👨🏼|👨🏾❤️💋👨🏽|👨🏾❤️💋👨🏾|👨🏾❤️💋👨🏿|👨🏿❤️💋👨🏻|👨🏿❤️💋👨🏼|👨🏿❤️💋👨🏽|👨🏿❤️💋👨🏾|👨🏿❤️💋👨🏿|👩🏻❤️💋👨🏻|👩🏻❤️💋👨🏼|👩🏻❤️💋👨🏽|👩🏻❤️💋👨🏾|👩🏻❤️💋👨🏿|👩🏻❤️💋👩🏻|👩🏻❤️💋👩🏼|👩🏻❤️💋👩🏽|👩🏻❤️💋👩🏾|👩🏻❤️💋👩🏿|👩🏼❤️💋👨🏻|👩🏼❤️💋👨🏼|👩🏼❤️💋👨🏽|👩🏼❤️💋👨🏾|👩🏼❤️💋👨🏿|👩🏼❤️💋👩🏻|👩🏼❤️💋👩🏼|👩🏼❤️💋👩🏽|👩🏼❤️💋👩🏾|👩🏼❤️💋👩🏿|👩🏽❤️💋👨🏻|👩🏽❤️💋👨🏼|👩🏽❤️💋👨🏽|👩🏽❤️💋👨🏾|👩🏽❤️💋👨🏿|👩🏽❤️💋👩🏻|👩🏽❤️💋👩🏼|👩🏽❤️💋👩🏽|👩🏽❤️💋👩🏾|👩🏽❤️💋👩🏿|👩🏾❤️💋👨🏻|👩🏾❤️💋👨🏼|👩🏾❤️💋👨🏽|👩🏾❤️💋👨🏾|👩🏾❤️💋👨🏿|👩🏾❤️💋👩🏻|👩🏾❤️💋👩🏼|👩🏾❤️💋👩🏽|👩🏾❤️💋👩🏾|👩🏾❤️💋👩🏿|👩🏿❤️💋👨🏻|👩🏿❤️💋👨🏼|👩🏿❤️💋👨🏽|👩🏿❤️💋👨🏾|👩🏿❤️💋👨🏿|👩🏿❤️💋👩🏻|👩🏿❤️💋👩🏼|👩🏿❤️💋👩🏽|👩🏿❤️💋👩🏾|👩🏿❤️💋👩🏿|🧑🏻❤️💋🧑🏼|🧑🏻❤️💋🧑🏽|🧑🏻❤️💋🧑🏾|🧑🏻❤️💋🧑🏿|🧑🏼❤️💋🧑🏻|🧑🏼❤️💋🧑🏽|🧑🏼❤️💋🧑🏾|🧑🏼❤️💋🧑🏿|🧑🏽❤️💋🧑🏻|🧑🏽❤️💋🧑🏼|🧑🏽❤️💋🧑🏾|🧑🏽❤️💋🧑🏿|🧑🏾❤️💋🧑🏻|🧑🏾❤️💋🧑🏼|🧑🏾❤️💋🧑🏽|🧑🏾❤️💋🧑🏿|🧑🏿❤️💋🧑🏻|🧑🏿❤️💋🧑🏼|🧑🏿❤️💋🧑🏽|🧑🏿❤️💋🧑🏾|🏴|🏴|🏴|👨🏻❤️👨🏻|👨🏻❤️👨🏼|👨🏻❤️👨🏽|👨🏻❤️👨🏾|👨🏻❤️👨🏿|👨🏻🐰👨🏼|👨🏻🐰👨🏽|👨🏻🐰👨🏾|👨🏻🐰👨🏿|👨🏻🤝👨🏼|👨🏻🤝👨🏽|👨🏻🤝👨🏾|👨🏻🤝👨🏿|👨🏻👨🏼|👨🏻👨🏽|👨🏻👨🏾|👨🏻👨🏿|👨🏼❤️👨🏻|👨🏼❤️👨🏼|👨🏼❤️👨🏽|👨🏼❤️👨🏾|👨🏼❤️👨🏿|👨🏼🐰👨🏻|👨🏼🐰👨🏽|👨🏼🐰👨🏾|👨🏼🐰👨🏿|👨🏼🤝👨🏻|👨🏼🤝👨🏽|👨🏼🤝👨🏾|👨🏼🤝👨🏿|👨🏼👨🏻|👨🏼👨🏽|👨🏼👨🏾|👨🏼👨🏿|👨🏽❤️👨🏻|👨🏽❤️👨🏼|👨🏽❤️👨🏽|👨🏽❤️👨🏾|👨🏽❤️👨🏿|👨🏽🐰👨🏻|👨🏽🐰👨🏼|👨🏽🐰👨🏾|👨🏽🐰👨🏿|👨🏽🤝👨🏻|👨🏽🤝👨🏼|👨🏽🤝👨🏾|👨🏽🤝👨🏿|👨🏽👨🏻|👨🏽👨🏼|👨🏽👨🏾|👨🏽👨🏿|👨🏾❤️👨🏻|👨🏾❤️👨🏼|👨🏾❤️👨🏽|👨🏾❤️👨🏾|👨🏾❤️👨🏿|👨🏾🐰👨🏻|👨🏾🐰👨🏼|👨🏾🐰👨🏽|👨🏾🐰👨🏿|👨🏾🤝👨🏻|👨🏾🤝👨🏼|👨🏾🤝👨🏽|👨🏾🤝👨🏿|👨🏾👨🏻|👨🏾👨🏼|👨🏾👨🏽|👨🏾👨🏿|👨🏿❤️👨🏻|👨🏿❤️👨🏼|👨🏿❤️👨🏽|👨🏿❤️👨🏾|👨🏿❤️👨🏿|👨🏿🐰👨🏻|👨🏿🐰👨🏼|👨🏿🐰👨🏽|👨🏿🐰👨🏾|👨🏿🤝👨🏻|👨🏿🤝👨🏼|👨🏿🤝👨🏽|👨🏿🤝👨🏾|👨🏿👨🏻|👨🏿👨🏼|👨🏿👨🏽|👨🏿👨🏾|👩🏻❤️👨🏻|👩🏻❤️👨🏼|👩🏻❤️👨🏽|👩🏻❤️👨🏾|👩🏻❤️👨🏿|👩🏻❤️👩🏻|👩🏻❤️👩🏼|👩🏻❤️👩🏽|👩🏻❤️👩🏾|👩🏻❤️👩🏿|👩🏻🐰👩🏼|👩🏻🐰👩🏽|👩🏻🐰👩🏾|👩🏻🐰👩🏿|👩🏻🤝👨🏼|👩🏻🤝👨🏽|👩🏻🤝👨🏾|👩🏻🤝👨🏿|👩🏻🤝👩🏼|👩🏻🤝👩🏽|👩🏻🤝👩🏾|👩🏻🤝👩🏿|👩🏻👩🏼|👩🏻👩🏽|👩🏻👩🏾|👩🏻👩🏿|👩🏼❤️👨🏻|👩🏼❤️👨🏼|👩🏼❤️👨🏽|👩🏼❤️👨🏾|👩🏼❤️👨🏿|👩🏼❤️👩🏻|👩🏼❤️👩🏼|👩🏼❤️👩🏽|👩🏼❤️👩🏾|👩🏼❤️👩🏿|👩🏼🐰👩🏻|👩🏼🐰👩🏽|👩🏼🐰👩🏾|👩🏼🐰👩🏿|👩🏼🤝👨🏻|👩🏼🤝👨🏽|👩🏼🤝👨🏾|👩🏼🤝👨🏿|👩🏼🤝👩🏻|👩🏼🤝👩🏽|👩🏼🤝👩🏾|👩🏼🤝👩🏿|👩🏼👩🏻|👩🏼👩🏽|👩🏼👩🏾|👩🏼👩🏿|👩🏽❤️👨🏻|👩🏽❤️👨🏼|👩🏽❤️👨🏽|👩🏽❤️👨🏾|👩🏽❤️👨🏿|👩🏽❤️👩🏻|👩🏽❤️👩🏼|👩🏽❤️👩🏽|👩🏽❤️👩🏾|👩🏽❤️👩🏿|👩🏽🐰👩🏻|👩🏽🐰👩🏼|👩🏽🐰👩🏾|👩🏽🐰👩🏿|👩🏽🤝👨🏻|👩🏽🤝👨🏼|👩🏽🤝👨🏾|👩🏽🤝👨🏿|👩🏽🤝👩🏻|👩🏽🤝👩🏼|👩🏽🤝👩🏾|👩🏽🤝👩🏿|👩🏽👩🏻|👩🏽👩🏼|👩🏽👩🏾|👩🏽👩🏿|👩🏾❤️👨🏻|👩🏾❤️👨🏼|👩🏾❤️👨🏽|👩🏾❤️👨🏾|👩🏾❤️👨🏿|👩🏾❤️👩🏻|👩🏾❤️👩🏼|👩🏾❤️👩🏽|👩🏾❤️👩🏾|👩🏾❤️👩🏿|👩🏾🐰👩🏻|👩🏾🐰👩🏼|👩🏾🐰👩🏽|👩🏾🐰👩🏿|👩🏾🤝👨🏻|👩🏾🤝👨🏼|👩🏾🤝👨🏽|👩🏾🤝👨🏿|👩🏾🤝👩🏻|👩🏾🤝👩🏼|👩🏾🤝👩🏽|👩🏾🤝👩🏿|👩🏾👩🏻|👩🏾👩🏼|👩🏾👩🏽|👩🏾👩🏿|👩🏿❤️👨🏻|👩🏿❤️👨🏼|👩🏿❤️👨🏽|👩🏿❤️👨🏾|👩🏿❤️👨🏿|👩🏿❤️👩🏻|👩🏿❤️👩🏼|👩🏿❤️👩🏽|👩🏿❤️👩🏾|👩🏿❤️👩🏿|👩🏿🐰👩🏻|👩🏿🐰👩🏼|👩🏿🐰👩🏽|👩🏿🐰👩🏾|👩🏿🤝👨🏻|👩🏿🤝👨🏼|👩🏿🤝👨🏽|👩🏿🤝👨🏾|👩🏿🤝👩🏻|👩🏿🤝👩🏼|👩🏿🤝👩🏽|👩🏿🤝👩🏾|👩🏿👩🏻|👩🏿👩🏼|👩🏿👩🏽|👩🏿👩🏾|🧑🏻❤️🧑🏼|🧑🏻❤️🧑🏽|🧑🏻❤️🧑🏾|🧑🏻❤️🧑🏿|🧑🏻🐰🧑🏼|🧑🏻🐰🧑🏽|🧑🏻🐰🧑🏾|🧑🏻🐰🧑🏿|🧑🏻🤝🧑🏻|🧑🏻🤝🧑🏼|🧑🏻🤝🧑🏽|🧑🏻🤝🧑🏾|🧑🏻🤝🧑🏿|🧑🏻🧑🏼|🧑🏻🧑🏽|🧑🏻🧑🏾|🧑🏻🧑🏿|🧑🏼❤️🧑🏻|🧑🏼❤️🧑🏽|🧑🏼❤️🧑🏾|🧑🏼❤️🧑🏿|🧑🏼🐰🧑🏻|🧑🏼🐰🧑🏽|🧑🏼🐰🧑🏾|🧑🏼🐰🧑🏿|🧑🏼🤝🧑🏻|🧑🏼🤝🧑🏼|🧑🏼🤝🧑🏽|🧑🏼🤝🧑🏾|🧑🏼🤝🧑🏿|🧑🏼🧑🏻|🧑🏼🧑🏽|🧑🏼🧑🏾|🧑🏼🧑🏿|🧑🏽❤️🧑🏻|🧑🏽❤️🧑🏼|🧑🏽❤️🧑🏾|🧑🏽❤️🧑🏿|🧑🏽🐰🧑🏻|🧑🏽🐰🧑🏼|🧑🏽🐰🧑🏾|🧑🏽🐰🧑🏿|🧑🏽🤝🧑🏻|🧑🏽🤝🧑🏼|🧑🏽🤝🧑🏽|🧑🏽🤝🧑🏾|🧑🏽🤝🧑🏿|🧑🏽🧑🏻|🧑🏽🧑🏼|🧑🏽🧑🏾|🧑🏽🧑🏿|🧑🏾❤️🧑🏻|🧑🏾❤️🧑🏼|🧑🏾❤️🧑🏽|🧑🏾❤️🧑🏿|🧑🏾🐰🧑🏻|🧑🏾🐰🧑🏼|🧑🏾🐰🧑🏽|🧑🏾🐰🧑🏿|🧑🏾🤝🧑🏻|🧑🏾🤝🧑🏼|🧑🏾🤝🧑🏽|🧑🏾🤝🧑🏾|🧑🏾🤝🧑🏿|🧑🏾🧑🏻|🧑🏾🧑🏼|🧑🏾🧑🏽|🧑🏾🧑🏿|🧑🏿❤️🧑🏻|🧑🏿❤️🧑🏼|🧑🏿❤️🧑🏽|🧑🏿❤️🧑🏾|🧑🏿🐰🧑🏻|🧑🏿🐰🧑🏼|🧑🏿🐰🧑🏽|🧑🏿🐰🧑🏾|🧑🏿🤝🧑🏻|🧑🏿🤝🧑🏼|🧑🏿🤝🧑🏽|🧑🏿🤝🧑🏾|🧑🏿🤝🧑🏿|🧑🏿🧑🏻|🧑🏿🧑🏼|🧑🏿🧑🏽|🧑🏿🧑🏾|👨❤️💋👨|👨👨👦👦|👨👨👧👦|👨👨👧👧|👨👩👦👦|👨👩👧👦|👨👩👧👧|👩❤️💋👨|👩❤️💋👩|👩👩👦👦|👩👩👧👦|👩👩👧👧|🧑🧑🧒🧒|🏃🏻♀️➡️|🏃🏻♂️➡️|🏃🏼♀️➡️|🏃🏼♂️➡️|🏃🏽♀️➡️|🏃🏽♂️➡️|🏃🏾♀️➡️|🏃🏾♂️➡️|🏃🏿♀️➡️|🏃🏿♂️➡️|👨🏻🦯➡️|👨🏻🦼➡️|👨🏻🦽➡️|👨🏼🦯➡️|👨🏼🦼➡️|👨🏼🦽➡️|👨🏽🦯➡️|👨🏽🦼➡️|👨🏽🦽➡️|👨🏾🦯➡️|👨🏾🦼➡️|👨🏾🦽➡️|👨🏿🦯➡️|👨🏿🦼➡️|👨🏿🦽➡️|👩🏻🦯➡️|👩🏻🦼➡️|👩🏻🦽➡️|👩🏼🦯➡️|👩🏼🦼➡️|👩🏼🦽➡️|👩🏽🦯➡️|👩🏽🦼➡️|👩🏽🦽➡️|👩🏾🦯➡️|👩🏾🦼➡️|👩🏾🦽➡️|👩🏿🦯➡️|👩🏿🦼➡️|👩🏿🦽➡️|🚶🏻♀️➡️|🚶🏻♂️➡️|🚶🏼♀️➡️|🚶🏼♂️➡️|🚶🏽♀️➡️|🚶🏽♂️➡️|🚶🏾♀️➡️|🚶🏾♂️➡️|🚶🏿♀️➡️|🚶🏿♂️➡️|🧎🏻♀️➡️|🧎🏻♂️➡️|🧎🏼♀️➡️|🧎🏼♂️➡️|🧎🏽♀️➡️|🧎🏽♂️➡️|🧎🏾♀️➡️|🧎🏾♂️➡️|🧎🏿♀️➡️|🧎🏿♂️➡️|🧑🏻🦯➡️|🧑🏻🦼➡️|🧑🏻🦽➡️|🧑🏼🦯➡️|🧑🏼🦼➡️|🧑🏼🦽➡️|🧑🏽🦯➡️|🧑🏽🦼➡️|🧑🏽🦽➡️|🧑🏾🦯➡️|🧑🏾🦼➡️|🧑🏾🦽➡️|🧑🏿🦯➡️|🧑🏿🦼➡️|🧑🏿🦽➡️|🫱🏻🫲🏼|🫱🏻🫲🏽|🫱🏻🫲🏾|🫱🏻🫲🏿|🫱🏼🫲🏻|🫱🏼🫲🏽|🫱🏼🫲🏾|🫱🏼🫲🏿|🫱🏽🫲🏻|🫱🏽🫲🏼|🫱🏽🫲🏾|🫱🏽🫲🏿|🫱🏾🫲🏻|🫱🏾🫲🏼|🫱🏾🫲🏽|🫱🏾🫲🏿|🫱🏿🫲🏻|🫱🏿🫲🏼|🫱🏿🫲🏽|🫱🏿🫲🏾|🏃♀️➡️|🏃♂️➡️|👨❤️👨|👨👦👦|👨👧👦|👨👧👧|👨👨👦|👨👨👧|👨👩👦|👨👩👧|👨🦯➡️|👨🦼➡️|👨🦽➡️|👩❤️👨|👩❤️👩|👩👦👦|👩👧👦|👩👧👧|👩👩👦|👩👩👧|👩🦯➡️|👩🦼➡️|👩🦽➡️|🚶♀️➡️|🚶♂️➡️|🧎♀️➡️|🧎♂️➡️|🧑🤝🧑|🧑🦯➡️|🧑🦼➡️|🧑🦽➡️|🧑🧑🧒|🧑🧒🧒|🏃🏻♀️|🏃🏻♂️|🏃🏻➡️|🏃🏼♀️|🏃🏼♂️|🏃🏼➡️|🏃🏽♀️|🏃🏽♂️|🏃🏽➡️|🏃🏾♀️|🏃🏾♂️|🏃🏾➡️|🏃🏿♀️|🏃🏿♂️|🏃🏿➡️|🏄🏻♀️|🏄🏻♂️|🏄🏼♀️|🏄🏼♂️|🏄🏽♀️|🏄🏽♂️|🏄🏾♀️|🏄🏾♂️|🏄🏿♀️|🏄🏿♂️|🏊🏻♀️|🏊🏻♂️|🏊🏼♀️|🏊🏼♂️|🏊🏽♀️|🏊🏽♂️|🏊🏾♀️|🏊🏾♂️|🏊🏿♀️|🏊🏿♂️|🏋🏻♀️|🏋🏻♂️|🏋🏼♀️|🏋🏼♂️|🏋🏽♀️|🏋🏽♂️|🏋🏾♀️|🏋🏾♂️|🏋🏿♀️|🏋🏿♂️|🏌🏻♀️|🏌🏻♂️|🏌🏼♀️|🏌🏼♂️|🏌🏽♀️|🏌🏽♂️|🏌🏾♀️|🏌🏾♂️|🏌🏿♀️|🏌🏿♂️|👁️🗨️|👨🏻⚕️|👨🏻⚖️|👨🏻✈️|👨🏻🌾|👨🏻🍳|👨🏻🍼|👨🏻🎓|👨🏻🎤|👨🏻🎨|👨🏻🏫|👨🏻🏭|👨🏻💻|👨🏻💼|👨🏻🔧|👨🏻🔬|👨🏻🚀|👨🏻🚒|👨🏻🦯|👨🏻🦰|👨🏻🦱|👨🏻🦲|👨🏻🦳|👨🏻🦼|👨🏻🦽|👨🏼⚕️|👨🏼⚖️|👨🏼✈️|👨🏼🌾|👨🏼🍳|👨🏼🍼|👨🏼🎓|👨🏼🎤|👨🏼🎨|👨🏼🏫|👨🏼🏭|👨🏼💻|👨🏼💼|👨🏼🔧|👨🏼🔬|👨🏼🚀|👨🏼🚒|👨🏼🦯|👨🏼🦰|👨🏼🦱|👨🏼🦲|👨🏼🦳|👨🏼🦼|👨🏼🦽|👨🏽⚕️|👨🏽⚖️|👨🏽✈️|👨🏽🌾|👨🏽🍳|👨🏽🍼|👨🏽🎓|👨🏽🎤|👨🏽🎨|👨🏽🏫|👨🏽🏭|👨🏽💻|👨🏽💼|👨🏽🔧|👨🏽🔬|👨🏽🚀|👨🏽🚒|👨🏽🦯|👨🏽🦰|👨🏽🦱|👨🏽🦲|👨🏽🦳|👨🏽🦼|👨🏽🦽|👨🏾⚕️|👨🏾⚖️|👨🏾✈️|👨🏾🌾|👨🏾🍳|👨🏾🍼|👨🏾🎓|👨🏾🎤|👨🏾🎨|👨🏾🏫|👨🏾🏭|👨🏾💻|👨🏾💼|👨🏾🔧|👨🏾🔬|👨🏾🚀|👨🏾🚒|👨🏾🦯|👨🏾🦰|👨🏾🦱|👨🏾🦲|👨🏾🦳|👨🏾🦼|👨🏾🦽|👨🏿⚕️|👨🏿⚖️|👨🏿✈️|👨🏿🌾|👨🏿🍳|👨🏿🍼|👨🏿🎓|👨🏿🎤|👨🏿🎨|👨🏿🏫|👨🏿🏭|👨🏿💻|👨🏿💼|👨🏿🔧|👨🏿🔬|👨🏿🚀|👨🏿🚒|👨🏿🦯|👨🏿🦰|👨🏿🦱|👨🏿🦲|👨🏿🦳|👨🏿🦼|👨🏿🦽|👩🏻⚕️|👩🏻⚖️|👩🏻✈️|👩🏻🌾|👩🏻🍳|👩🏻🍼|👩🏻🎓|👩🏻🎤|👩🏻🎨|👩🏻🏫|👩🏻🏭|👩🏻💻|👩🏻💼|👩🏻🔧|👩🏻🔬|👩🏻🚀|👩🏻🚒|👩🏻🦯|👩🏻🦰|👩🏻🦱|👩🏻🦲|👩🏻🦳|👩🏻🦼|👩🏻🦽|👩🏼⚕️|👩🏼⚖️|👩🏼✈️|👩🏼🌾|👩🏼🍳|👩🏼🍼|👩🏼🎓|👩🏼🎤|👩🏼🎨|👩🏼🏫|👩🏼🏭|👩🏼💻|👩🏼💼|👩🏼🔧|👩🏼🔬|👩🏼🚀|👩🏼🚒|👩🏼🦯|👩🏼🦰|👩🏼🦱|👩🏼🦲|👩🏼🦳|👩🏼🦼|👩🏼🦽|👩🏽⚕️|👩🏽⚖️|👩🏽✈️|👩🏽🌾|👩🏽🍳|👩🏽🍼|👩🏽🎓|👩🏽🎤|👩🏽🎨|👩🏽🏫|👩🏽🏭|👩🏽💻|👩🏽💼|👩🏽🔧|👩🏽🔬|👩🏽🚀|👩🏽🚒|👩🏽🦯|👩🏽🦰|👩🏽🦱|👩🏽🦲|👩🏽🦳|👩🏽🦼|👩🏽🦽|👩🏾⚕️|👩🏾⚖️|👩🏾✈️|👩🏾🌾|👩🏾🍳|👩🏾🍼|👩🏾🎓|👩🏾🎤|👩🏾🎨|👩🏾🏫|👩🏾🏭|👩🏾💻|👩🏾💼|👩🏾🔧|👩🏾🔬|👩🏾🚀|👩🏾🚒|👩🏾🦯|👩🏾🦰|👩🏾🦱|👩🏾🦲|👩🏾🦳|👩🏾🦼|👩🏾🦽|👩🏿⚕️|👩🏿⚖️|👩🏿✈️|👩🏿🌾|👩🏿🍳|👩🏿🍼|👩🏿🎓|👩🏿🎤|👩🏿🎨|👩🏿🏫|👩🏿🏭|👩🏿💻|👩🏿💼|👩🏿🔧|👩🏿🔬|👩🏿🚀|👩🏿🚒|👩🏿🦯|👩🏿🦰|👩🏿🦱|👩🏿🦲|👩🏿🦳|👩🏿🦼|👩🏿🦽|👮🏻♀️|👮🏻♂️|👮🏼♀️|👮🏼♂️|👮🏽♀️|👮🏽♂️|👮🏾♀️|👮🏾♂️|👮🏿♀️|👮🏿♂️|👯🏻♀️|👯🏻♂️|👯🏼♀️|👯🏼♂️|👯🏽♀️|👯🏽♂️|👯🏾♀️|👯🏾♂️|👯🏿♀️|👯🏿♂️|👰🏻♀️|👰🏻♂️|👰🏼♀️|👰🏼♂️|👰🏽♀️|👰🏽♂️|👰🏾♀️|👰🏾♂️|👰🏿♀️|👰🏿♂️|👱🏻♀️|👱🏻♂️|👱🏼♀️|👱🏼♂️|👱🏽♀️|👱🏽♂️|👱🏾♀️|👱🏾♂️|👱🏿♀️|👱🏿♂️|👳🏻♀️|👳🏻♂️|👳🏼♀️|👳🏼♂️|👳🏽♀️|👳🏽♂️|👳🏾♀️|👳🏾♂️|👳🏿♀️|👳🏿♂️|👷🏻♀️|👷🏻♂️|👷🏼♀️|👷🏼♂️|👷🏽♀️|👷🏽♂️|👷🏾♀️|👷🏾♂️|👷🏿♀️|👷🏿♂️|💁🏻♀️|💁🏻♂️|💁🏼♀️|💁🏼♂️|💁🏽♀️|💁🏽♂️|💁🏾♀️|💁🏾♂️|💁🏿♀️|💁🏿♂️|💂🏻♀️|💂🏻♂️|💂🏼♀️|💂🏼♂️|💂🏽♀️|💂🏽♂️|💂🏾♀️|💂🏾♂️|💂🏿♀️|💂🏿♂️|💆🏻♀️|💆🏻♂️|💆🏼♀️|💆🏼♂️|💆🏽♀️|💆🏽♂️|💆🏾♀️|💆🏾♂️|💆🏿♀️|💆🏿♂️|💇🏻♀️|💇🏻♂️|💇🏼♀️|💇🏼♂️|💇🏽♀️|💇🏽♂️|💇🏾♀️|💇🏾♂️|💇🏿♀️|💇🏿♂️|🕵🏻♀️|🕵🏻♂️|🕵🏼♀️|🕵🏼♂️|🕵🏽♀️|🕵🏽♂️|🕵🏾♀️|🕵🏾♂️|🕵🏿♀️|🕵🏿♂️|🙅🏻♀️|🙅🏻♂️|🙅🏼♀️|🙅🏼♂️|🙅🏽♀️|🙅🏽♂️|🙅🏾♀️|🙅🏾♂️|🙅🏿♀️|🙅🏿♂️|🙆🏻♀️|🙆🏻♂️|🙆🏼♀️|🙆🏼♂️|🙆🏽♀️|🙆🏽♂️|🙆🏾♀️|🙆🏾♂️|🙆🏿♀️|🙆🏿♂️|🙇🏻♀️|🙇🏻♂️|🙇🏼♀️|🙇🏼♂️|🙇🏽♀️|🙇🏽♂️|🙇🏾♀️|🙇🏾♂️|🙇🏿♀️|🙇🏿♂️|🙋🏻♀️|🙋🏻♂️|🙋🏼♀️|🙋🏼♂️|🙋🏽♀️|🙋🏽♂️|🙋🏾♀️|🙋🏾♂️|🙋🏿♀️|🙋🏿♂️|🙍🏻♀️|🙍🏻♂️|🙍🏼♀️|🙍🏼♂️|🙍🏽♀️|🙍🏽♂️|🙍🏾♀️|🙍🏾♂️|🙍🏿♀️|🙍🏿♂️|🙎🏻♀️|🙎🏻♂️|🙎🏼♀️|🙎🏼♂️|🙎🏽♀️|🙎🏽♂️|🙎🏾♀️|🙎🏾♂️|🙎🏿♀️|🙎🏿♂️|🚣🏻♀️|🚣🏻♂️|🚣🏼♀️|🚣🏼♂️|🚣🏽♀️|🚣🏽♂️|🚣🏾♀️|🚣🏾♂️|🚣🏿♀️|🚣🏿♂️|🚴🏻♀️|🚴🏻♂️|🚴🏼♀️|🚴🏼♂️|🚴🏽♀️|🚴🏽♂️|🚴🏾♀️|🚴🏾♂️|🚴🏿♀️|🚴🏿♂️|🚵🏻♀️|🚵🏻♂️|🚵🏼♀️|🚵🏼♂️|🚵🏽♀️|🚵🏽♂️|🚵🏾♀️|🚵🏾♂️|🚵🏿♀️|🚵🏿♂️|🚶🏻♀️|🚶🏻♂️|🚶🏻➡️|🚶🏼♀️|🚶🏼♂️|🚶🏼➡️|🚶🏽♀️|🚶🏽♂️|🚶🏽➡️|🚶🏾♀️|🚶🏾♂️|🚶🏾➡️|🚶🏿♀️|🚶🏿♂️|🚶🏿➡️|🤦🏻♀️|🤦🏻♂️|🤦🏼♀️|🤦🏼♂️|🤦🏽♀️|🤦🏽♂️|🤦🏾♀️|🤦🏾♂️|🤦🏿♀️|🤦🏿♂️|🤵🏻♀️|🤵🏻♂️|🤵🏼♀️|🤵🏼♂️|🤵🏽♀️|🤵🏽♂️|🤵🏾♀️|🤵🏾♂️|🤵🏿♀️|🤵🏿♂️|🤷🏻♀️|🤷🏻♂️|🤷🏼♀️|🤷🏼♂️|🤷🏽♀️|🤷🏽♂️|🤷🏾♀️|🤷🏾♂️|🤷🏿♀️|🤷🏿♂️|🤸🏻♀️|🤸🏻♂️|🤸🏼♀️|🤸🏼♂️|🤸🏽♀️|🤸🏽♂️|🤸🏾♀️|🤸🏾♂️|🤸🏿♀️|🤸🏿♂️|🤹🏻♀️|🤹🏻♂️|🤹🏼♀️|🤹🏼♂️|🤹🏽♀️|🤹🏽♂️|🤹🏾♀️|🤹🏾♂️|🤹🏿♀️|🤹🏿♂️|🤼🏻♀️|🤼🏻♂️|🤼🏼♀️|🤼🏼♂️|🤼🏽♀️|🤼🏽♂️|🤼🏾♀️|🤼🏾♂️|🤼🏿♀️|🤼🏿♂️|🤽🏻♀️|🤽🏻♂️|🤽🏼♀️|🤽🏼♂️|🤽🏽♀️|🤽🏽♂️|🤽🏾♀️|🤽🏾♂️|🤽🏿♀️|🤽🏿♂️|🤾🏻♀️|🤾🏻♂️|🤾🏼♀️|🤾🏼♂️|🤾🏽♀️|🤾🏽♂️|🤾🏾♀️|🤾🏾♂️|🤾🏿♀️|🤾🏿♂️|🦸🏻♀️|🦸🏻♂️|🦸🏼♀️|🦸🏼♂️|🦸🏽♀️|🦸🏽♂️|🦸🏾♀️|🦸🏾♂️|🦸🏿♀️|🦸🏿♂️|🦹🏻♀️|🦹🏻♂️|🦹🏼♀️|🦹🏼♂️|🦹🏽♀️|🦹🏽♂️|🦹🏾♀️|🦹🏾♂️|🦹🏿♀️|🦹🏿♂️|🧍🏻♀️|🧍🏻♂️|🧍🏼♀️|🧍🏼♂️|🧍🏽♀️|🧍🏽♂️|🧍🏾♀️|🧍🏾♂️|🧍🏿♀️|🧍🏿♂️|🧎🏻♀️|🧎🏻♂️|🧎🏻➡️|🧎🏼♀️|🧎🏼♂️|🧎🏼➡️|🧎🏽♀️|🧎🏽♂️|🧎🏽➡️|🧎🏾♀️|🧎🏾♂️|🧎🏾➡️|🧎🏿♀️|🧎🏿♂️|🧎🏿➡️|🧏🏻♀️|🧏🏻♂️|🧏🏼♀️|🧏🏼♂️|🧏🏽♀️|🧏🏽♂️|🧏🏾♀️|🧏🏾♂️|🧏🏿♀️|🧏🏿♂️|🧑🏻⚕️|🧑🏻⚖️|🧑🏻✈️|🧑🏻🌾|🧑🏻🍳|🧑🏻🍼|🧑🏻🎄|🧑🏻🎓|🧑🏻🎤|🧑🏻🎨|🧑🏻🏫|🧑🏻🏭|🧑🏻💻|🧑🏻💼|🧑🏻🔧|🧑🏻🔬|🧑🏻🚀|🧑🏻🚒|🧑🏻🦯|🧑🏻🦰|🧑🏻🦱|🧑🏻🦲|🧑🏻🦳|🧑🏻🦼|🧑🏻🦽|🧑🏻🩰|🧑🏼⚕️|🧑🏼⚖️|🧑🏼✈️|🧑🏼🌾|🧑🏼🍳|🧑🏼🍼|🧑🏼🎄|🧑🏼🎓|🧑🏼🎤|🧑🏼🎨|🧑🏼🏫|🧑🏼🏭|🧑🏼💻|🧑🏼💼|🧑🏼🔧|🧑🏼🔬|🧑🏼🚀|🧑🏼🚒|🧑🏼🦯|🧑🏼🦰|🧑🏼🦱|🧑🏼🦲|🧑🏼🦳|🧑🏼🦼|🧑🏼🦽|🧑🏼🩰|🧑🏽⚕️|🧑🏽⚖️|🧑🏽✈️|🧑🏽🌾|🧑🏽🍳|🧑🏽🍼|🧑🏽🎄|🧑🏽🎓|🧑🏽🎤|🧑🏽🎨|🧑🏽🏫|🧑🏽🏭|🧑🏽💻|🧑🏽💼|🧑🏽🔧|🧑🏽🔬|🧑🏽🚀|🧑🏽🚒|🧑🏽🦯|🧑🏽🦰|🧑🏽🦱|🧑🏽🦲|🧑🏽🦳|🧑🏽🦼|🧑🏽🦽|🧑🏽🩰|🧑🏾⚕️|🧑🏾⚖️|🧑🏾✈️|🧑🏾🌾|🧑🏾🍳|🧑🏾🍼|🧑🏾🎄|🧑🏾🎓|🧑🏾🎤|🧑🏾🎨|🧑🏾🏫|🧑🏾🏭|🧑🏾💻|🧑🏾💼|🧑🏾🔧|🧑🏾🔬|🧑🏾🚀|🧑🏾🚒|🧑🏾🦯|🧑🏾🦰|🧑🏾🦱|🧑🏾🦲|🧑🏾🦳|🧑🏾🦼|🧑🏾🦽|🧑🏾🩰|🧑🏿⚕️|🧑🏿⚖️|🧑🏿✈️|🧑🏿🌾|🧑🏿🍳|🧑🏿🍼|🧑🏿🎄|🧑🏿🎓|🧑🏿🎤|🧑🏿🎨|🧑🏿🏫|🧑🏿🏭|🧑🏿💻|🧑🏿💼|🧑🏿🔧|🧑🏿🔬|🧑🏿🚀|🧑🏿🚒|🧑🏿🦯|🧑🏿🦰|🧑🏿🦱|🧑🏿🦲|🧑🏿🦳|🧑🏿🦼|🧑🏿🦽|🧑🏿🩰|🧔🏻♀️|🧔🏻♂️|🧔🏼♀️|🧔🏼♂️|🧔🏽♀️|🧔🏽♂️|🧔🏾♀️|🧔🏾♂️|🧔🏿♀️|🧔🏿♂️|🧖🏻♀️|🧖🏻♂️|🧖🏼♀️|🧖🏼♂️|🧖🏽♀️|🧖🏽♂️|🧖🏾♀️|🧖🏾♂️|🧖🏿♀️|🧖🏿♂️|🧗🏻♀️|🧗🏻♂️|🧗🏼♀️|🧗🏼♂️|🧗🏽♀️|🧗🏽♂️|🧗🏾♀️|🧗🏾♂️|🧗🏿♀️|🧗🏿♂️|🧘🏻♀️|🧘🏻♂️|🧘🏼♀️|🧘🏼♂️|🧘🏽♀️|🧘🏽♂️|🧘🏾♀️|🧘🏾♂️|🧘🏿♀️|🧘🏿♂️|🧙🏻♀️|🧙🏻♂️|🧙🏼♀️|🧙🏼♂️|🧙🏽♀️|🧙🏽♂️|🧙🏾♀️|🧙🏾♂️|🧙🏿♀️|🧙🏿♂️|🧚🏻♀️|🧚🏻♂️|🧚🏼♀️|🧚🏼♂️|🧚🏽♀️|🧚🏽♂️|🧚🏾♀️|🧚🏾♂️|🧚🏿♀️|🧚🏿♂️|🧛🏻♀️|🧛🏻♂️|🧛🏼♀️|🧛🏼♂️|🧛🏽♀️|🧛🏽♂️|🧛🏾♀️|🧛🏾♂️|🧛🏿♀️|🧛🏿♂️|🧜🏻♀️|🧜🏻♂️|🧜🏼♀️|🧜🏼♂️|🧜🏽♀️|🧜🏽♂️|🧜🏾♀️|🧜🏾♂️|🧜🏿♀️|🧜🏿♂️|🧝🏻♀️|🧝🏻♂️|🧝🏼♀️|🧝🏼♂️|🧝🏽♀️|🧝🏽♂️|🧝🏾♀️|🧝🏾♂️|🧝🏿♀️|🧝🏿♂️|⛹🏻♀️|⛹🏻♂️|⛹🏼♀️|⛹🏼♂️|⛹🏽♀️|⛹🏽♂️|⛹🏾♀️|⛹🏾♂️|⛹🏿♀️|⛹🏿♂️|🏋️♀️|🏋️♂️|🏌️♀️|🏌️♂️|🏳️⚧️|🏳️🌈|🕵️♀️|🕵️♂️|😶🌫️|⛓️💥|⛹️♀️|⛹️♂️|❤️🔥|❤️🩹|🍄🟫|🍋🟩|🏃♀️|🏃♂️|🏃➡️|🏄♀️|🏄♂️|🏊♀️|🏊♂️|🏴☠️|🐕🦺|🐦🔥|🐻❄️|👨⚕️|👨⚖️|👨✈️|👨🌾|👨🍳|👨🍼|👨🎓|👨🎤|👨🎨|👨🏫|👨🏭|👨👦|👨👧|👨💻|👨💼|👨🔧|👨🔬|👨🚀|👨🚒|👨🦯|👨🦰|👨🦱|👨🦲|👨🦳|👨🦼|👨🦽|👩⚕️|👩⚖️|👩✈️|👩🌾|👩🍳|👩🍼|👩🎓|👩🎤|👩🎨|👩🏫|👩🏭|👩👦|👩👧|👩💻|👩💼|👩🔧|👩🔬|👩🚀|👩🚒|👩🦯|👩🦰|👩🦱|👩🦲|👩🦳|👩🦼|👩🦽|👮♀️|👮♂️|👯♀️|👯♂️|👰♀️|👰♂️|👱♀️|👱♂️|👳♀️|👳♂️|👷♀️|👷♂️|💁♀️|💁♂️|💂♀️|💂♂️|💆♀️|💆♂️|💇♀️|💇♂️|😮💨|😵💫|🙂↔️|🙂↕️|🙅♀️|🙅♂️|🙆♀️|🙆♂️|🙇♀️|🙇♂️|🙋♀️|🙋♂️|🙍♀️|🙍♂️|🙎♀️|🙎♂️|🚣♀️|🚣♂️|🚴♀️|🚴♂️|🚵♀️|🚵♂️|🚶♀️|🚶♂️|🚶➡️|🤦♀️|🤦♂️|🤵♀️|🤵♂️|🤷♀️|🤷♂️|🤸♀️|🤸♂️|🤹♀️|🤹♂️|🤼♀️|🤼♂️|🤽♀️|🤽♂️|🤾♀️|🤾♂️|🦸♀️|🦸♂️|🦹♀️|🦹♂️|🧍♀️|🧍♂️|🧎♀️|🧎♂️|🧎➡️|🧏♀️|🧏♂️|🧑⚕️|🧑⚖️|🧑✈️|🧑🌾|🧑🍳|🧑🍼|🧑🎄|🧑🎓|🧑🎤|🧑🎨|🧑🏫|🧑🏭|🧑💻|🧑💼|🧑🔧|🧑🔬|🧑🚀|🧑🚒|🧑🦯|🧑🦰|🧑🦱|🧑🦲|🧑🦳|🧑🦼|🧑🦽|🧑🧒|🧑🩰|🧔♀️|🧔♂️|🧖♀️|🧖♂️|🧗♀️|🧗♂️|🧘♀️|🧘♂️|🧙♀️|🧙♂️|🧚♀️|🧚♂️|🧛♀️|🧛♂️|🧜♀️|🧜♂️|🧝♀️|🧝♂️|🧞♀️|🧞♂️|🧟♀️|🧟♂️|\*️⃣|🇦🇨|🇦🇩|🇦🇪|🇦🇫|🇦🇬|🇦🇮|🇦🇱|🇦🇲|🇦🇴|🇦🇶|🇦🇷|🇦🇸|🇦🇹|🇦🇺|🇦🇼|🇦🇽|🇦🇿|🇧🇦|🇧🇧|🇧🇩|🇧🇪|🇧🇫|🇧🇬|🇧🇭|🇧🇮|🇧🇯|🇧🇱|🇧🇲|🇧🇳|🇧🇴|🇧🇶|🇧🇷|🇧🇸|🇧🇹|🇧🇻|🇧🇼|🇧🇾|🇧🇿|🇨🇦|🇨🇨|🇨🇩|🇨🇫|🇨🇬|🇨🇭|🇨🇮|🇨🇰|🇨🇱|🇨🇲|🇨🇳|🇨🇴|🇨🇵|🇨🇶|🇨🇷|🇨🇺|🇨🇻|🇨🇼|🇨🇽|🇨🇾|🇨🇿|🇩🇪|🇩🇬|🇩🇯|🇩🇰|🇩🇲|🇩🇴|🇩🇿|🇪🇦|🇪🇨|🇪🇪|🇪🇬|🇪🇭|🇪🇷|🇪🇸|🇪🇹|🇪🇺|🇫🇮|🇫🇯|🇫🇰|🇫🇲|🇫🇴|🇫🇷|🇬🇦|🇬🇧|🇬🇩|🇬🇪|🇬🇫|🇬🇬|🇬🇭|🇬🇮|🇬🇱|🇬🇲|🇬🇳|🇬🇵|🇬🇶|🇬🇷|🇬🇸|🇬🇹|🇬🇺|🇬🇼|🇬🇾|🇭🇰|🇭🇲|🇭🇳|🇭🇷|🇭🇹|🇭🇺|🇮🇨|🇮🇩|🇮🇪|🇮🇱|🇮🇲|🇮🇳|🇮🇴|🇮🇶|🇮🇷|🇮🇸|🇮🇹|🇯🇪|🇯🇲|🇯🇴|🇯🇵|🇰🇪|🇰🇬|🇰🇭|🇰🇮|🇰🇲|🇰🇳|🇰🇵|🇰🇷|🇰🇼|🇰🇾|🇰🇿|🇱🇦|🇱🇧|🇱🇨|🇱🇮|🇱🇰|🇱🇷|🇱🇸|🇱🇹|🇱🇺|🇱🇻|🇱🇾|🇲🇦|🇲🇨|🇲🇩|🇲🇪|🇲🇫|🇲🇬|🇲🇭|🇲🇰|🇲🇱|🇲🇲|🇲🇳|🇲🇴|🇲🇵|🇲🇶|🇲🇷|🇲🇸|🇲🇹|🇲🇺|🇲🇻|🇲🇼|🇲🇽|🇲🇾|🇲🇿|🇳🇦|🇳🇨|🇳🇪|🇳🇫|🇳🇬|🇳🇮|🇳🇱|🇳🇴|🇳🇵|🇳🇷|🇳🇺|🇳🇿|🇴🇲|🇵🇦|🇵🇪|🇵🇫|🇵🇬|🇵🇭|🇵🇰|🇵🇱|🇵🇲|🇵🇳|🇵🇷|🇵🇸|🇵🇹|🇵🇼|🇵🇾|🇶🇦|🇷🇪|🇷🇴|🇷🇸|🇷🇺|🇷🇼|🇸🇦|🇸🇧|🇸🇨|🇸🇩|🇸🇪|🇸🇬|🇸🇭|🇸🇮|🇸🇯|🇸🇰|🇸🇱|🇸🇲|🇸🇳|🇸🇴|🇸🇷|🇸🇸|🇸🇹|🇸🇻|🇸🇽|🇸🇾|🇸🇿|🇹🇦|🇹🇨|🇹🇩|🇹🇫|🇹🇬|🇹🇭|🇹🇯|🇹🇰|🇹🇱|🇹🇲|🇹🇳|🇹🇴|🇹🇷|🇹🇹|🇹🇻|🇹🇼|🇹🇿|🇺🇦|🇺🇬|🇺🇲|🇺🇳|🇺🇸|🇺🇾|🇺🇿|🇻🇦|🇻🇨|🇻🇪|🇻🇬|🇻🇮|🇻🇳|🇻🇺|🇼🇫|🇼🇸|🇽🇰|🇾🇪|🇾🇹|🇿🇦|🇿🇲|🇿🇼|🎅🏻|🎅🏼|🎅🏽|🎅🏾|🎅🏿|🏂🏻|🏂🏼|🏂🏽|🏂🏾|🏂🏿|🏃🏻|🏃🏼|🏃🏽|🏃🏾|🏃🏿|🏄🏻|🏄🏼|🏄🏽|🏄🏾|🏄🏿|🏇🏻|🏇🏼|🏇🏽|🏇🏾|🏇🏿|🏊🏻|🏊🏼|🏊🏽|🏊🏾|🏊🏿|🏋🏻|🏋🏼|🏋🏽|🏋🏾|🏋🏿|🏌🏻|🏌🏼|🏌🏽|🏌🏾|🏌🏿|🐈⬛|🐦⬛|👂🏻|👂🏼|👂🏽|👂🏾|👂🏿|👃🏻|👃🏼|👃🏽|👃🏾|👃🏿|👆🏻|👆🏼|👆🏽|👆🏾|👆🏿|👇🏻|👇🏼|👇🏽|👇🏾|👇🏿|👈🏻|👈🏼|👈🏽|👈🏾|👈🏿|👉🏻|👉🏼|👉🏽|👉🏾|👉🏿|👊🏻|👊🏼|👊🏽|👊🏾|👊🏿|👋🏻|👋🏼|👋🏽|👋🏾|👋🏿|👌🏻|👌🏼|👌🏽|👌🏾|👌🏿|👍🏻|👍🏼|👍🏽|👍🏾|👍🏿|👎🏻|👎🏼|👎🏽|👎🏾|👎🏿|👏🏻|👏🏼|👏🏽|👏🏾|👏🏿|👐🏻|👐🏼|👐🏽|👐🏾|👐🏿|👦🏻|👦🏼|👦🏽|👦🏾|👦🏿|👧🏻|👧🏼|👧🏽|👧🏾|👧🏿|👨🏻|👨🏼|👨🏽|👨🏾|👨🏿|👩🏻|👩🏼|👩🏽|👩🏾|👩🏿|👫🏻|👫🏼|👫🏽|👫🏾|👫🏿|👬🏻|👬🏼|👬🏽|👬🏾|👬🏿|👭🏻|👭🏼|👭🏽|👭🏾|👭🏿|👮🏻|👮🏼|👮🏽|👮🏾|👮🏿|👯🏻|👯🏼|👯🏽|👯🏾|👯🏿|👰🏻|👰🏼|👰🏽|👰🏾|👰🏿|👱🏻|👱🏼|👱🏽|👱🏾|👱🏿|👲🏻|👲🏼|👲🏽|👲🏾|👲🏿|👳🏻|👳🏼|👳🏽|👳🏾|👳🏿|👴🏻|👴🏼|👴🏽|👴🏾|👴🏿|👵🏻|👵🏼|👵🏽|👵🏾|👵🏿|👶🏻|👶🏼|👶🏽|👶🏾|👶🏿|👷🏻|👷🏼|👷🏽|👷🏾|👷🏿|👸🏻|👸🏼|👸🏽|👸🏾|👸🏿|👼🏻|👼🏼|👼🏽|👼🏾|👼🏿|💁🏻|💁🏼|💁🏽|💁🏾|💁🏿|💂🏻|💂🏼|💂🏽|💂🏾|💂🏿|💃🏻|💃🏼|💃🏽|💃🏾|💃🏿|💅🏻|💅🏼|💅🏽|💅🏾|💅🏿|💆🏻|💆🏼|💆🏽|💆🏾|💆🏿|💇🏻|💇🏼|💇🏽|💇🏾|💇🏿|💏🏻|💏🏼|💏🏽|💏🏾|💏🏿|💑🏻|💑🏼|💑🏽|💑🏾|💑🏿|💪🏻|💪🏼|💪🏽|💪🏾|💪🏿|🕴🏻|🕴🏼|🕴🏽|🕴🏾|🕴🏿|🕵🏻|🕵🏼|🕵🏽|🕵🏾|🕵🏿|🕺🏻|🕺🏼|🕺🏽|🕺🏾|🕺🏿|🖐🏻|🖐🏼|🖐🏽|🖐🏾|🖐🏿|🖕🏻|🖕🏼|🖕🏽|🖕🏾|🖕🏿|🖖🏻|🖖🏼|🖖🏽|🖖🏾|🖖🏿|🙅🏻|🙅🏼|🙅🏽|🙅🏾|🙅🏿|🙆🏻|🙆🏼|🙆🏽|🙆🏾|🙆🏿|🙇🏻|🙇🏼|🙇🏽|🙇🏾|🙇🏿|🙋🏻|🙋🏼|🙋🏽|🙋🏾|🙋🏿|🙌🏻|🙌🏼|🙌🏽|🙌🏾|🙌🏿|🙍🏻|🙍🏼|🙍🏽|🙍🏾|🙍🏿|🙎🏻|🙎🏼|🙎🏽|🙎🏾|🙎🏿|🙏🏻|🙏🏼|🙏🏽|🙏🏾|🙏🏿|🚣🏻|🚣🏼|🚣🏽|🚣🏾|🚣🏿|🚴🏻|🚴🏼|🚴🏽|🚴🏾|🚴🏿|🚵🏻|🚵🏼|🚵🏽|🚵🏾|🚵🏿|🚶🏻|🚶🏼|🚶🏽|🚶🏾|🚶🏿|🛀🏻|🛀🏼|🛀🏽|🛀🏾|🛀🏿|🛌🏻|🛌🏼|🛌🏽|🛌🏾|🛌🏿|🤌🏻|🤌🏼|🤌🏽|🤌🏾|🤌🏿|🤏🏻|🤏🏼|🤏🏽|🤏🏾|🤏🏿|🤘🏻|🤘🏼|🤘🏽|🤘🏾|🤘🏿|🤙🏻|🤙🏼|🤙🏽|🤙🏾|🤙🏿|🤚🏻|🤚🏼|🤚🏽|🤚🏾|🤚🏿|🤛🏻|🤛🏼|🤛🏽|🤛🏾|🤛🏿|🤜🏻|🤜🏼|🤜🏽|🤜🏾|🤜🏿|🤝🏻|🤝🏼|🤝🏽|🤝🏾|🤝🏿|🤞🏻|🤞🏼|🤞🏽|🤞🏾|🤞🏿|🤟🏻|🤟🏼|🤟🏽|🤟🏾|🤟🏿|🤦🏻|🤦🏼|🤦🏽|🤦🏾|🤦🏿|🤰🏻|🤰🏼|🤰🏽|🤰🏾|🤰🏿|🤱🏻|🤱🏼|🤱🏽|🤱🏾|🤱🏿|🤲🏻|🤲🏼|🤲🏽|🤲🏾|🤲🏿|🤳🏻|🤳🏼|🤳🏽|🤳🏾|🤳🏿|🤴🏻|🤴🏼|🤴🏽|🤴🏾|🤴🏿|🤵🏻|🤵🏼|🤵🏽|🤵🏾|🤵🏿|🤶🏻|🤶🏼|🤶🏽|🤶🏾|🤶🏿|🤷🏻|🤷🏼|🤷🏽|🤷🏾|🤷🏿|🤸🏻|🤸🏼|🤸🏽|🤸🏾|🤸🏿|🤹🏻|🤹🏼|🤹🏽|🤹🏾|🤹🏿|🤼🏻|🤼🏼|🤼🏽|🤼🏾|🤼🏿|🤽🏻|🤽🏼|🤽🏽|🤽🏾|🤽🏿|🤾🏻|🤾🏼|🤾🏽|🤾🏾|🤾🏿|🥷🏻|🥷🏼|🥷🏽|🥷🏾|🥷🏿|🦵🏻|🦵🏼|🦵🏽|🦵🏾|🦵🏿|🦶🏻|🦶🏼|🦶🏽|🦶🏾|🦶🏿|🦸🏻|🦸🏼|🦸🏽|🦸🏾|🦸🏿|🦹🏻|🦹🏼|🦹🏽|🦹🏾|🦹🏿|🦻🏻|🦻🏼|🦻🏽|🦻🏾|🦻🏿|🧍🏻|🧍🏼|🧍🏽|🧍🏾|🧍🏿|🧎🏻|🧎🏼|🧎🏽|🧎🏾|🧎🏿|🧏🏻|🧏🏼|🧏🏽|🧏🏾|🧏🏿|🧑🏻|🧑🏼|🧑🏽|🧑🏾|🧑🏿|🧒🏻|🧒🏼|🧒🏽|🧒🏾|🧒🏿|🧓🏻|🧓🏼|🧓🏽|🧓🏾|🧓🏿|🧔🏻|🧔🏼|🧔🏽|🧔🏾|🧔🏿|🧕🏻|🧕🏼|🧕🏽|🧕🏾|🧕🏿|🧖🏻|🧖🏼|🧖🏽|🧖🏾|🧖🏿|🧗🏻|🧗🏼|🧗🏽|🧗🏾|🧗🏿|🧘🏻|🧘🏼|🧘🏽|🧘🏾|🧘🏿|🧙🏻|🧙🏼|🧙🏽|🧙🏾|🧙🏿|🧚🏻|🧚🏼|🧚🏽|🧚🏾|🧚🏿|🧛🏻|🧛🏼|🧛🏽|🧛🏾|🧛🏿|🧜🏻|🧜🏼|🧜🏽|🧜🏾|🧜🏿|🧝🏻|🧝🏼|🧝🏽|🧝🏾|🧝🏿|🫃🏻|🫃🏼|🫃🏽|🫃🏾|🫃🏿|🫄🏻|🫄🏼|🫄🏽|🫄🏾|🫄🏿|🫅🏻|🫅🏼|🫅🏽|🫅🏾|🫅🏿|🫰🏻|🫰🏼|🫰🏽|🫰🏾|🫰🏿|🫱🏻|🫱🏼|🫱🏽|🫱🏾|🫱🏿|🫲🏻|🫲🏼|🫲🏽|🫲🏾|🫲🏿|🫳🏻|🫳🏼|🫳🏽|🫳🏾|🫳🏿|🫴🏻|🫴🏼|🫴🏽|🫴🏾|🫴🏿|🫵🏻|🫵🏼|🫵🏽|🫵🏾|🫵🏿|🫶🏻|🫶🏼|🫶🏽|🫶🏾|🫶🏿|🫷🏻|🫷🏼|🫷🏽|🫷🏾|🫷🏿|🫸🏻|🫸🏼|🫸🏽|🫸🏾|🫸🏿|#️⃣|0️⃣|1️⃣|2️⃣|3️⃣|4️⃣|5️⃣|6️⃣|7️⃣|8️⃣|9️⃣|☝🏻|☝🏼|☝🏽|☝🏾|☝🏿|⛹🏻|⛹🏼|⛹🏽|⛹🏾|⛹🏿|✊🏻|✊🏼|✊🏽|✊🏾|✊🏿|✋🏻|✋🏼|✋🏽|✋🏾|✋🏿|✌🏻|✌🏼|✌🏽|✌🏾|✌🏿|✍🏻|✍🏼|✍🏽|✍🏾|✍🏿|🅰️|🅱️|🅾️|🅿️|🈂️|🈷️|🌡️|🌤️|🌥️|🌦️|🌧️|🌨️|🌩️|🌪️|🌫️|🌬️|🌶️|🍽️|🎖️|🎗️|🎙️|🎚️|🎛️|🎞️|🎟️|🏋️|🏌️|🏍️|🏎️|🏔️|🏕️|🏖️|🏗️|🏘️|🏙️|🏚️|🏛️|🏜️|🏝️|🏞️|🏟️|🏳️|🏵️|🏷️|🐿️|👁️|📽️|🕉️|🕊️|🕯️|🕰️|🕳️|🕴️|🕵️|🕶️|🕷️|🕸️|🕹️|🖇️|🖊️|🖋️|🖌️|🖍️|🖐️|🖥️|🖨️|🖱️|🖲️|🖼️|🗂️|🗃️|🗄️|🗑️|🗒️|🗓️|🗜️|🗝️|🗞️|🗡️|🗣️|🗨️|🗯️|🗳️|🗺️|🛋️|🛍️|🛎️|🛏️|🛠️|🛡️|🛢️|🛣️|🛤️|🛥️|🛩️|🛰️|🛳️|©️|®️|‼️|⁉️|™️|ℹ️|↔️|↕️|↖️|↗️|↘️|↙️|↩️|↪️|⌨️|⏏️|⏭️|⏮️|⏯️|⏱️|⏲️|⏸️|⏹️|⏺️|Ⓜ️|▪️|▫️|▶️|◀️|◻️|◼️|☀️|☁️|☂️|☃️|☄️|☎️|☑️|☘️|☝️|☠️|☢️|☣️|☦️|☪️|☮️|☯️|☸️|☹️|☺️|♀️|♂️|♟️|♠️|♣️|♥️|♦️|♨️|♻️|♾️|⚒️|⚔️|⚕️|⚖️|⚗️|⚙️|⚛️|⚜️|⚠️|⚧️|⚰️|⚱️|⛈️|⛏️|⛑️|⛓️|⛩️|⛰️|⛱️|⛴️|⛷️|⛸️|⛹️|✂️|✈️|✉️|✌️|✍️|✏️|✒️|✔️|✖️|✝️|✡️|✳️|✴️|❄️|❇️|❣️|❤️|➡️|⤴️|⤵️|⬅️|⬆️|⬇️|〰️|〽️|㊗️|㊙️|[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55\u{1F004}\u{1F0CF}\u{1F18E}\u{1F191}-\u{1F19A}\u{1F201}\u{1F21A}\u{1F22F}\u{1F232}-\u{1F236}\u{1F238}-\u{1F23A}\u{1F250}\u{1F251}\u{1F300}-\u{1F320}\u{1F32D}-\u{1F335}\u{1F337}-\u{1F37C}\u{1F37E}-\u{1F393}\u{1F3A0}-\u{1F3CA}\u{1F3CF}-\u{1F3D3}\u{1F3E0}-\u{1F3F0}\u{1F3F4}\u{1F3F8}-\u{1F43E}\u{1F440}\u{1F442}-\u{1F4FC}\u{1F4FF}-\u{1F53D}\u{1F54B}-\u{1F54E}\u{1F550}-\u{1F567}\u{1F57A}\u{1F595}\u{1F596}\u{1F5A4}\u{1F5FB}-\u{1F64F}\u{1F680}-\u{1F6C5}\u{1F6CC}\u{1F6D0}-\u{1F6D2}\u{1F6D5}-\u{1F6D8}\u{1F6DC}-\u{1F6DF}\u{1F6EB}\u{1F6EC}\u{1F6F4}-\u{1F6FC}\u{1F7E0}-\u{1F7EB}\u{1F7F0}\u{1F90C}-\u{1F93A}\u{1F93C}-\u{1F945}\u{1F947}-\u{1F9FF}\u{1FA70}-\u{1FA7C}\u{1FA80}-\u{1FA8A}\u{1FA8E}-\u{1FAC6}\u{1FAC8}\u{1FACD}-\u{1FADC}\u{1FADF}-\u{1FAEA}\u{1FAEF}-\u{1FAF8}])/gu).length):l=(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("i",{className:"material-icons gray",children:"warning_amber"})," ",(0,h.jsx)("i",{className:"gray",children:(0,h.jsx)(n.FormattedMessage,{id:"invalid_content",defaultMessage:"invalid content",description:"Shown when the message is unreadable"})})]});return(0,h.jsxs)("li",{ref:this.props.innerRef,className:e,children:[this.props.isGroup&&this.props.response?(0,h.jsx)("div",{className:"avatar-box",children:r?(0,h.jsx)(p.A,{authorizeURL:this.props.tinode.authorizeURL,topic:this.props.userFrom,title:this.props.userName,avatar:s}):null}):null,(0,h.jsxs)("div",{children:[(0,h.jsxs)("div",{className:t,children:[(0,h.jsxs)("div",{className:"content-meta",children:[(0,h.jsxs)("div",{className:i,children:[l,d]}),this.props.timestamp?(0,h.jsx)(m,{edited:this.props.edited,timestamp:this.props.timestamp,received:this.props.received}):null]}),this.props.showContextMenu?(0,h.jsx)("span",{className:"menuTrigger",children:(0,h.jsx)("a",{href:"#",onClick:this.handleContextClick,children:(0,h.jsx)("i",{className:"material-icons",children:"expand_more"})})}):null]}),r?(0,h.jsx)("div",{className:"author",children:this.props.userName||(0,h.jsx)("i",{children:(0,h.jsx)(n.FormattedMessage,{id:"user_not_found",defaultMessage:"Not found",description:"In place of a user's full name when the user is not found."})})}):null]})]})}}const M=(0,n.injectIntl)(b);var S=a().forwardRef((e,t)=>(0,h.jsx)(M,{innerRef:t,...e})),y=s(6565),x=s(3405),w=s(3272),C=s(7981);class _ extends a().Component{constructor(e){super(e)}render(){const e=[],t=(this.props.subscribers||[]).length,s=Math.min(4,t);return(this.props.subscribers||[]).some(t=>(e.push((0,h.jsx)("div",{className:"avatar-box",children:(0,h.jsx)(p.A,{authorizeURL:this.props.tinode.authorizeURL,topic:t.user,avatar:(0,C.to)(t.public?t.public.photo:null)||!0,title:t.public?t.public.fn:null})},t.user)),e.length==s)),0==e.length?null:(0,h.jsxs)("div",{id:"topic-users",children:[e," ",t>s?(0,h.jsx)("span",{children:(0,h.jsx)(n.FormattedMessage,{id:"more_online_members",defaultMessage:"+{overflow} more",description:"Shown in MessagesView title bar when the number of online subscribers exceeds MAX_ONLINE_IN_TOPIC",values:{overflow:t-s}})}):null]})}}class A extends a().PureComponent{constructor(e){super(e),this.handleButtonAction=this.handleButtonAction.bind(this)}handleButtonAction(e,t){e.preventDefault(),this.props.onAction(t)}render(){return(0,h.jsxs)("div",{className:"accept-invite-panel",children:[(0,h.jsx)("div",{className:"title",children:(0,h.jsx)(n.FormattedMessage,{id:"chat_invitation",defaultMessage:"You are invited to start a new chat. What would you like to do?",description:"New chat invitation message: [Accept] [Ignore] [Block]."})}),(0,h.jsxs)("div",{className:"footer",children:[(0,h.jsx)("button",{className:"primary",onClick:e=>{this.handleButtonAction(e,"accept")},children:(0,h.jsx)(n.FormattedMessage,{id:"chat_invitation_accept",defaultMessage:"Accept",description:"Action [Accept] for chat invitation."})}),(0,h.jsx)("button",{className:"secondary",onClick:e=>{this.handleButtonAction(e,"delete")},children:(0,h.jsx)(n.FormattedMessage,{id:"chat_invitation_ignore",defaultMessage:"Ignore",description:"Action [Ignore] for chat invitation."})}),(0,h.jsx)("button",{className:"secondary",onClick:e=>{this.handleButtonAction(e,"block")},children:(0,h.jsx)(n.FormattedMessage,{id:"chat_invitation_block",defaultMessage:"Block",description:"Action [Block] for chat invitation."})})]})]})}}var F=s(9304);class P extends a().PureComponent{render(){const e=w.C3+" ("+o.Tinode.getLibrary()+")";return(0,h.jsx)("div",{id:"dummy-view",children:(0,h.jsxs)("div",{children:[(0,h.jsxs)("a",{href:"https://github.com/tinode/chat/",children:[(0,h.jsx)("img",{id:"logo",alt:"logo",src:"img/logo.svg"}),(0,h.jsx)("h2",{children:"Tinode Web"})]}),(0,h.jsxs)("p",{children:[(0,h.jsx)(n.FormattedMessage,{id:"label_client",defaultMessage:"Client:",description:"Label for a client version"})," ",e]}),(0,h.jsxs)("p",{children:[(0,h.jsx)(n.FormattedMessage,{id:"label_server",defaultMessage:"Server:",description:"Label for a server version"})," ",this.props.serverVersion," (",this.props.serverAddress,")"]})]})})}}class D extends a().PureComponent{constructor(e){super(e)}render(){let e=null,t="bubble";return this.props.date&&(e=(0,h.jsx)(h.Fragment,{children:this.props.date}),t+=" date"),e?(0,h.jsx)("li",{className:"meta",children:(0,h.jsx)("div",{className:t,children:(0,h.jsx)("div",{className:"message-content",children:e})})}):(0,h.jsx)(h.Fragment,{children:null})}}const j=(0,n.defineMessages)({message_not_found:{id:"message_not_found",defaultMessage:"message not found",description:"Pinned message is not found"},message_deleted:{id:"message_deleted",defaultMessage:"message deleted",description:"Pinned message is deleted"}});class E extends a().PureComponent{constructor(e){super(e),this.touchX=null,this.touchY=null,this.touchSurface=a().createRef(),this.getSelectedIndex=this.getSelectedIndex.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleSelected=this.handleSelected.bind(this),this.handleMoveNext=this.handleMoveNext.bind(this),this.handleMovePrev=this.handleMovePrev.bind(this),this.handleTouchEventStart=this.handleTouchEventStart.bind(this),this.handleTouchEventEnd=this.handleTouchEventEnd.bind(this),this.handleTouchCancel=this.handleTouchCancel.bind(this)}componentDidMount(){this.touchSurface.current.addEventListener("touchstart",this.handleTouchEventStart,{passive:!0}),this.touchSurface.current.addEventListener("touchend",this.handleTouchEventEnd,{passive:!0}),this.touchSurface.current.addEventListener("touchcancel",this.handleTouchCancel,{passive:!0})}componentWillUnmount(){this.touchSurface.current.removeEventListener("touchstart",this.handleTouchEventStart),this.touchSurface.current.removeEventListener("touchend",this.handleTouchEventEnd),this.touchSurface.current.removeEventListener("touchcancel",this.handleTouchCancel)}getSelectedIndex(){return(this.props.pins||[]).length-this.props.selected-1}handleCancel(e){e.preventDefault(),this.props.onCancel(this.props.pins[this.getSelectedIndex()])}handleSelected(e){e.preventDefault(),this.props.onSelected(this.props.pins[this.getSelectedIndex()])}handleMoveNext(e,t){t||e.preventDefault(),e.stopPropagation();const s=Math.max(this.props.selected-1,0);s!=this.props.selected&&this.props.setSelected(s)}handleMovePrev(e,t){t||e.preventDefault(),e.stopPropagation();const s=Math.min(this.props.selected+1,(this.props.pins||[]).length-1);s!=this.props.selected&&this.props.setSelected(s)}handleTouchEventStart(e){1==e.touches.length&&(this.touchX=e.touches[0].clientX,this.touchY=e.touches[0].clientY)}handleTouchEventEnd(e){if(null===this.touchX||1!=e.changedTouches.length)return void(this.touchX=null);const t=this.touchX-e.changedTouches[0].clientX,s=this.touchY-e.changedTouches[0].clientY;this.touchX=null,Math.abs(t)>Math.abs(s)||Math.abs(s)<39||(s>0?this.handleMovePrev(e,!0):this.handleMoveNext(e,!0))}handleTouchCancel(){this.touchX=null}render(){const e=this.getSelectedIndex();let t=(this.props.messages||[])[e];t=t?t._deleted?(0,h.jsx)("i",{className:"gray",children:this.props.intl.formatMessage(j.message_deleted)}):o.Drafty.format(t.content,f.TU,{formatMessage:this.props.intl.formatMessage.bind(this.props.intl),authorizeURL:this.props.tinode.authorizeURL.bind(this.props.tinode)}):(0,h.jsx)("i",{className:"gray",children:this.props.intl.formatMessage(j.message_not_found)});const s=[];return this.props.pins.forEach(t=>{const i=s.length==e?"adot":"dot";s.push((0,h.jsx)("div",{className:i},t))}),(0,h.jsxs)("div",{id:"pinned-wrapper",ref:this.touchSurface,children:[this.props.isAdmin?(0,h.jsx)("div",{className:"cancel",children:(0,h.jsx)("a",{href:"#",onClick:this.handleCancel,children:(0,h.jsx)("i",{className:"material-icons gray",children:"close"})})}):(0,h.jsx)("div",{children:(0,h.jsx)("i",{className:"material-icons gray",children:"push_pin"})}),(0,h.jsx)("div",{className:"pinned-scroll",children:s}),(0,h.jsx)("div",{className:"pinned",onClick:this.handleSelected,children:(0,h.jsx)("p",{children:t})}),(0,h.jsxs)("div",{className:"pinned-menu",children:[(0,h.jsx)("span",{className:"menuTrigger upper",children:e>0?(0,h.jsx)("a",{href:"#",onClick:this.handleMovePrev,children:(0,h.jsx)("i",{className:"material-icons",children:"expand_less"})}):null}),(0,h.jsx)("span",{className:"menuTrigger lower",children:this.props.selected>0?(0,h.jsx)("a",{href:"#",onClick:this.handleMoveNext,children:(0,h.jsx)("i",{className:"material-icons",children:"expand_more"})}):null})]})]})}}var T=(0,n.injectIntl)(E),R=s(5372);const k=a().lazy(e=>s.e(821).then(s.bind(s,7821))),N=a().lazy(e=>s.e(623).then(s.bind(s,1623))),I=a().lazy(e=>s.e(534).then(s.bind(s,8534))),L=a().lazy(e=>Promise.all([s.e(892),s.e(803)]).then(s.bind(s,4803))),U=a().lazy(e=>s.e(592).then(s.bind(s,4592))),z=(0,n.defineMessages)({online_now:{id:"online_now",defaultMessage:"online now",description:"Indicator that the user or topic is currently online"},last_seen:{id:"last_seen_timestamp",defaultMessage:"Last seen: {timestamp}",description:"Label for the timestamp of when the user or topic was last online"},not_found:{id:"title_not_found",defaultMessage:"Not found",description:"Title shown when topic is not found"},channel:{id:"channel",defaultMessage:"channel",description:"Subtitle shown for channels in MessagesView instead of last seen"},file_attachment_too_large:{id:"file_attachment_too_large",defaultMessage:"The file size {size} exceeds the {limit} limit.",description:"Error message when attachment is too large"},invalid_content:{id:"invalid_content",defaultMessage:"invalid content",description:"Shown when the message is unreadable"},editing_message:{id:"editing_message",defaultMessage:"Editing",description:"Title over message editing preview"},drag_file:{id:"drag_file",defaultMessage:"Drag file here",description:"Prompt on the file drag-n-drop overlay banner"},self_topic_name:{id:"self_topic_name",defaultMessage:"Saved messages",description:"Name of self topic for UI"},subscriber_count:{id:"subscriber_count",defaultMessage:"{count, plural, one {{count, number} subscriber} two {{count, number} subscribers} three {{count, number} subscribers} few {{count, number} subscribers} many {{count, number} subscribers} other {{count, number} subscribers}}",description:"Count of channel subscribers"},member_count:{id:"member_count",defaultMessage:"{count, plural, one {{count, number} member} two {{count, number} members} three {{count, number} members} few {{count, number} members} many {{count, number} members} other {{count, number} members}}",description:"Count of group topic members"},cannot_parse_vcard:{id:"cannot_parse_vcard",defaultMessage:"Cannot parse vCard file.",description:"Error message when vCard file cannot be parsed"}});function q(e){if(e){const t=e.getExcessive()||"";return e.isJoiner("given")&&(t.includes("R")||t.includes("W"))}return!1}function B(e){if(e){const t=e.getMissing()||"";return e.isJoiner("want")&&(t.includes("R")||t.includes("W"))}return!1}function O(e){return 1==e||3==e}class V extends a().Component{constructor(e){super(e),this.state=V.getDerivedStateFromProps(e,{}),this.componentSetup=this.componentSetup.bind(this),this.leave=this.leave.bind(this),this.sendMessage=this.sendMessage.bind(this),this.retrySend=this.retrySend.bind(this),this.sendImageAttachment=this.sendImageAttachment.bind(this),this.sendVideoAttachment=this.sendVideoAttachment.bind(this),this.sendFileAttachment=this.sendFileAttachment.bind(this),this.sendAudioAttachment=this.sendAudioAttachment.bind(this),this.sendTheCardAttachment=this.sendTheCardAttachment.bind(this),this.sendKeyPress=this.sendKeyPress.bind(this),this.subscribe=this.subscribe.bind(this),this.handleScrollReference=this.handleScrollReference.bind(this),this.mountDnDEvents=this.mountDnDEvents.bind(this),this.handleScrollEvent=this.handleScrollEvent.bind(this),this.handleDescChange=this.handleDescChange.bind(this),this.handleSubsUpdated=this.handleSubsUpdated.bind(this),this.handleMessageUpdate=this.handleMessageUpdate.bind(this),this.handleAuxUpdate=this.handleAuxUpdate.bind(this),this.handleAllMessagesReceived=this.handleAllMessagesReceived.bind(this),this.handleInfoReceipt=this.handleInfoReceipt.bind(this),this.handleExpandMedia=this.handleExpandMedia.bind(this),this.handleClosePreview=this.handleClosePreview.bind(this),this.handleCallPanelToggle=this.handleCallPanelToggle.bind(this),this.handleFormResponse=this.handleFormResponse.bind(this),this.handleContextClick=this.handleContextClick.bind(this),this.handleShowMessageContextMenu=this.handleShowMessageContextMenu.bind(this),this.handleNewChatAcceptance=this.handleNewChatAcceptance.bind(this),this.handleEnablePeer=this.handleEnablePeer.bind(this),this.handleAttachFile=this.handleAttachFile.bind(this),this.handleAttachImageOrVideo=this.handleAttachImageOrVideo.bind(this),this.handleCancelUpload=this.handleCancelUpload.bind(this),this.postReadNotification=this.postReadNotification.bind(this),this.clearNotificationQueue=this.clearNotificationQueue.bind(this),this.goToLatestMessage=this.goToLatestMessage.bind(this),this.handleFileDrop=this.handleFileDrop.bind(this),this.handlePickReply=this.handlePickReply.bind(this),this.handleEditMessage=this.handleEditMessage.bind(this),this.handleCancelReply=this.handleCancelReply.bind(this),this.handleQuoteClick=this.handleQuoteClick.bind(this),this.handleUnpinMessage=this.handleUnpinMessage.bind(this),this.handleCallHangup=this.handleCallHangup.bind(this),this.isDragEnabled=this.isDragEnabled.bind(this),this.handleDragStart=this.handleDragStart.bind(this),this.handleDragIn=this.handleDragIn.bind(this),this.handleDragOut=this.handleDragOut.bind(this),this.handleDrag=this.handleDrag.bind(this),this.handleDrop=this.handleDrop.bind(this),this.chatMessageRefs=[],this.getOrCreateMessageRef=this.getOrCreateMessageRef.bind(this),this.getVisibleMessageRange=this.getVisibleMessageRange.bind(this),this.dragCounter=0,this.dndRef=null,this.readNotificationQueue=[],this.readNotificationTimer=null,this.keyPressTimer=null}getOrCreateMessageRef(e){if(this.chatMessageRefs[e])return this.chatMessageRefs[e];const t=a().createRef();return this.chatMessageRefs[e]=t,t}getVisibleMessageRange(e){let t=Number.MAX_SAFE_INTEGER,s=-1,i=!1;return this.chatMessageRefs.every((a,n)=>{if(a.current){const{top:o,bottom:r,height:l}=a.current.getBoundingClientRect();if(o<=e.top?e.top-o<=l:r-e.bottom<=l)i=!0,t=Math.min(t,n),s=Math.max(s,n);else if(i)return!1}return!0}),s>=t?{min:t,max:s}:{min:0,max:0}}componentDidMount(){this.messagesScroller&&this.messagesScroller.addEventListener("scroll",this.handleScrollEvent),this.mountDnDEvents(this.dndRef),this.componentSetup({},{})}componentWillUnmount(){this.messagesScroller&&this.messagesScroller.removeEventListener("scroll",this.handleScrollEvent),this.clearNotificationQueue(),this.dndRef&&(this.dndRef.removeEventListener("dragstart",this.handleDragStart),this.dndRef.removeEventListener("dragenter",this.handleDragIn),this.dndRef.removeEventListener("dragleave",this.handleDragOut),this.dndRef.removeEventListener("dragover",this.handleDrag),this.dndRef.removeEventListener("drop",this.handleDrop))}componentDidUpdate(e,t){!this.messagesScroller||t.topic==this.state.topic&&t.maxSeqId==this.state.maxSeqId&&t.minSeqId==this.state.minSeqId||this.state.scrollPosition<100&&(this.messagesScroller.scrollTop=this.messagesScroller.scrollHeight-this.state.scrollPosition-this.messagesScroller.offsetHeight),this.props.applicationVisible?this.postReadNotification(0):this.clearNotificationQueue(),this.componentSetup(e,t)}componentSetup(e,t){const s=this.props.tinode?this.props.tinode.getTopic(this.state.topic):void 0;if(this.state.topic!=t.topic&&(t.topic&&!o.Tinode.isNewGroupTopicName(t.topic)&&(this.leave(t.topic),t.rtcPanel&&this.handleCallHangup(t.topic,e.callSeq)),s&&(s.onData=this.handleMessageUpdate,s.onAllMessagesReceived=this.handleAllMessagesReceived,s.onInfo=this.handleInfoReceipt,s.onMetaDesc=this.handleDescChange,s.onSubsUpdated=this.handleSubsUpdated,s.onPres=this.handleSubsUpdated,s.onAuxUpdated=this.handleAuxUpdate)),s)if(this.state.topic!=t.topic||this.props.myUserId&&!e.myUserId){const e=this.props.newTopicParams&&this.props.newTopicParams._topicName==this.props.topic;s.isP2PType()&&e?s.getMeta(s.startMetaQuery().withDesc().build()):this.props.myUserId&&this.subscribe(s)}else s.isSubscribed()&&this.state.isReader&&!t.isReader?s.getMeta(s.startMetaQuery().withLaterData().build()):s.isSubscribed()||!this.props.ready||e.ready||this.subscribe(s)}static getDerivedStateFromProps(e,t){let s={};if(e.topic)if(e.topic!=t.topic){const i=e.tinode.getTopic(e.topic);if(s={topic:e.topic,deleted:i._deleted,docPreview:null,imagePreview:null,imagePostview:null,videoPreview:null,videoPostview:null,rtcPanel:null,minimizedCallPanel:!1,typingIndicator:!1,scrollPosition:0,fetchingMessages:!1,showGoToLastButton:!1,contentToEdit:null,dragging:!1,selectedPin:0},e.forwardMessage)if(e.forwardMessage.content){const t=e.forwardMessage.content,i=t?.length||t?.size||0;s.docPreview={object:t,type:e.forwardMessage.type,size:i}}else s.reply={content:e.forwardMessage.preview,seq:null};else s.reply=null;if(i){const a=[];e.connected&&i.subscribers(t=>{t.online&&t.user!=e.myUserId&&a.push(t)}),Object.assign(s,{onlineSubs:a}),i.isSelfType()?Object.assign(s,{title:e.intl.formatMessage(z.self_topic_name),avatar:!0}):i.public?Object.assign(s,{title:i.public.fn,avatar:(0,C.to)(i.public.photo)}):Object.assign(s,{title:"",avatar:null});const n=i.p2pPeerDesc();n?Object.assign(s,{peerMessagingDisabled:B(n.acs)}):t.peerMessagingDisabled&&Object.assign(s,{peerMessagingDisabled:!1}),Object.assign(s,{minSeqId:i.minMsgSeq(),maxSeqId:i.maxMsgSeq(),latestClearId:i.maxClearId(),channel:i.isChannelType(),pins:(i.aux("pins")||[]).slice(),pinsLoaded:!1}),e.callTopic==i.name&&O(e.callState)&&(s.rtcPanel=e.callTopic)}else Object.assign(s,{minSeqId:-1,maxSeqId:-1,latestClearId:-1,onlineSubs:[],title:"",avatar:null,peerMessagingDisabled:!1,channel:!1,pins:[],pinsLoaded:!1})}else e.callTopic==t.topic&&!t.rtcPanel&&O(e.callState)&&(s.rtcPanel=e.callTopic);else s={minSeqId:-1,maxSeqId:-1,latestClearId:-1,onlineSubs:[],topic:null,title:"",avatar:null,isVerified:!1,isStaff:!1,isDangerous:!1,deleted:!1,docPreview:null,imagePreview:null,imagePostview:null,videoPreview:null,videoPostview:null,rtcPanel:null,minimizedCallPanel:!1,typingIndicator:!1,scrollPosition:0,fetchingMessages:!1,peerMessagingDisabled:!1,channel:!1,reply:null,contentToEdit:null,showGoToLastButton:!1,dragging:!1,pins:[],pinsLoaded:!1,selectedPin:0,subsVersion:0};return e.acs?(e.acs.isWriter()!=t.isWriter&&(s.isWriter=!t.isWriter),e.acs.isReader()!=t.isReader&&(s.isReader=!t.isReader),e.acs.isAdmin()!=t.isAdmin&&(s.isAdmin=!t.isAdmin),!e.acs.isReader("given")!=t.readingBlocked&&(s.readingBlocked=!t.readingBlocked),e.acs.isSharer()!=t.isSharer&&(s.isSharer=!t.isSharer)):(t.isWriter&&(s.isWriter=!1),t.isReader&&(s.isReader=!1),t.isAdmin&&(s.isAdmin=!1),t.readingBlocked||(t.readingBlocked=!0),t.isSharer&&(s.isSharer=!1)),q(e.acs)==!t.unconformed&&(s.unconfirmed=!t.unconformed),!e.connected&&t.onlineSubs&&t.onlineSubs.length>0&&(s.onlineSubs=[]),s}subscribe(e){if(e.isSubscribed()||!this.props.ready)return;const t=this.props.newTopicParams&&this.props.newTopicParams._topicName==this.props.topic;let s=e.startMetaQuery().withLaterDesc().withLaterSub().withAux();(this.state.isReader||t)&&(s=s.withLaterData(24),this.state.isReader&&(s=s.withLaterDel()),this.setState({fetchingMessages:!0}));const i=t?this.props.newTopicParams:void 0;e.subscribe(s.build(),i).then(t=>{if(303==t.code)return void v.A.navigateTo(v.A.setUrlTopic("",t.params.topic));this.state.topic!=t.topic&&this.setState({topic:t.topic}),this.state.deleted&&this.setState({deleted:!1}),this.props.onNewTopicCreated(this.props.topic,t.topic);let s=[];e.queuedMessages(t=>{t._sending||(t._fatal||t.head&&t.head.webrtc?s.push(t.seq):e.isSubscribed()&&this.retrySend(t))}),s.length>0&&e.delMessagesList(s,!0)}).catch(e=>{console.error("Failed subscription to",this.state.topic,e),this.props.onError(e.message,"err");const t=V.getDerivedStateFromProps({},{});t.title=this.props.intl.formatMessage(z.not_found),this.setState(t)})}leave(e){if(!e||!this.props.tinode.isTopicCached(e))return;const t=this.props.tinode.getTopic(e);t&&t.isSubscribed()&&t.leave(!1).catch(e=>{}).finally(e=>{this.setState({fetchingMessages:!1}),t.onData=void 0,t.onAllMessagesReceived=void 0,t.onInfo=void 0,t.onMetaDesc=void 0,t.onSubsUpdated=void 0,t.onPres=void 0,t.onAuxUpdated=void 0})}handleScrollReference(e){e&&(e.addEventListener("scroll",this.handleScrollEvent),this.messagesScroller=e,this.messagesScroller.scrollTop=this.messagesScroller.scrollHeight-this.state.scrollPosition-this.messagesScroller.offsetHeight)}handleScrollEvent(e){const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;if(this.setState({scrollPosition:t,showGoToLastButton:t>100&&t| {this.props.modeTitle} | \n{this.props.compareTitle} | \n
|---|
\n
\n \n \n
\n \n
\n );\n }\n};\n","// Received/read indicator.\nimport React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nimport { Tinode } from 'tinode-sdk';\n\nimport { deliveryMarker } from '../lib/utils.js';\n\nconst messages = defineMessages({\n message_sending: {\n id: 'message_sending',\n defaultMessage: 'sending...',\n description: 'Message being sent, in place of time stamp'\n },\n message_sending_failed: {\n id: 'message_sending_failed',\n defaultMessage: 'failed',\n description: 'Failed to send message, in place of time stamp'\n },\n message_edited_marker: {\n id: 'message_edited_marker',\n defaultMessage: ', edited',\n description: 'Marker indicating that the message was edited'\n }\n});\n\nclass ReceivedMarker extends React.PureComponent {\n render() {\n const {formatMessage} = this.props.intl;\n let timestamp;\n if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {\n timestamp = formatMessage(messages.message_sending);\n } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED ||\n this.props.received == Tinode.MESSAGE_STATUS_FATAL) {\n timestamp = formatMessage(messages.message_sending_failed);\n } else {\n timestamp = this.props.timestamp.toLocaleTimeString(this.props.intl.locale, { timeStyle: 'short' });\n }\n\n const icon = deliveryMarker(this.props.received);\n const marker = icon ? {icon.name} : null;\n const edited = this.props.edited ? formatMessage(messages.message_edited_marker) : null;\n\n return (\n \n {timestamp}{edited}{'\\u00a0'}{marker}\n \n );\n }\n};\n\nexport default injectIntl(ReceivedMarker);\n","// Single chat message bubble, sent or received.\n\nimport React from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport { Drafty, Tinode, TheCard } from 'tinode-sdk';\n\nimport Attachment from './attachment.jsx';\nimport LetterTile from './letter-tile.jsx';\nimport ReceivedMarker from './received-marker.jsx'\n\nimport { fullFormatter } from '../lib/formatters.js';\nimport { sanitizeUrl } from '../lib/utils.js';\nimport HashNavigation from '../lib/navigation.js';\n\nclass BaseChatMessage extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n progress: 0\n };\n\n if (props.uploader) {\n props.uploader.onProgress = this.handleProgress.bind(this);\n }\n\n this.handleExpandImage = this.handleExpandImage.bind(this);\n this.handlePlayVideo = this.handlePlayVideo.bind(this);\n this.handleFormButtonClick = this.handleFormButtonClick.bind(this);\n this.handleQuoteClick = this.handleQuoteClick.bind(this);\n this.handleContextClick = this.handleContextClick.bind(this);\n this.handleCancelUpload = this.handleCancelUpload.bind(this);\n this.handleDraftyClick = this.handleDraftyClick.bind(this);\n\n this.formatterContext = {\n formatMessage: props.intl.formatMessage.bind(props.intl),\n viewportWidth: props.viewportWidth,\n authorizeURL: props.tinode.authorizeURL.bind(props.tinode),\n\n onHandleClick: this.handleDraftyClick\n };\n }\n\n handleDraftyClick = (e, action) => {\n switch (action) {\n case 'image':\n this.handleExpandImage(e);\n break;\n case 'video':\n this.handlePlayVideo(e);\n break;\n case 'form_button':\n this.handleFormButtonClick(e);\n break;\n case 'quote':\n this.handleQuoteClick(e);\n break;\n case 'contact_chat':\n e.preventDefault();\n try {\n // tinode:topic/usr123abc -> usr123abc\n const pathname = new URL(e.target.dataset.val)?.pathname;\n const parts = pathname.split('/').filter(Boolean);\n HashNavigation.navigateTo(HashNavigation.setUrlTopic('', parts.pop() || ''));\n } catch (error) {\n console.error(\"Invalid URL:\", error);\n }\n break;\n case 'contact_find':\n e.preventDefault();\n let hashUrl = HashNavigation.setUrlSidePanel(window.location.hash, 'newtpk');\n hashUrl = HashNavigation.addUrlParam(hashUrl, 'q', e.target.dataset.val);\n hashUrl = HashNavigation.addUrlParam(hashUrl, 'tab', 'find');\n HashNavigation.navigateTo(hashUrl);\n break;\n default:\n // No special handling; let the browser deal with it.\n console.info('Unhandled drafty action.', action, e.target.dataset);\n break;\n }\n }\n\n handleExpandImage(e) {\n e.preventDefault();\n this.props.onExpandMedia({\n url: e.target.src,\n filename: e.target.dataset.name,\n width: e.target.dataset.width,\n height: e.target.dataset.height,\n size: e.target.dataset.size,\n type: e.target.dataset.mime\n });\n }\n\n handlePlayVideo(e) {\n e.preventDefault();\n this.props.onExpandMedia({\n video: true,\n url: e.target.dataset.src,\n preview: e.target.src,\n filename: e.target.dataset.name,\n width: e.target.dataset.width,\n height: e.target.dataset.height,\n duration: e.target.dataset.duration,\n size: e.target.dataset.size,\n type: e.target.dataset.mime\n });\n }\n\n handleFormButtonClick(e) {\n e.preventDefault();\n const data = {\n seq: this.props.seq\n };\n data.resp = {};\n if (e.target.dataset.name) {\n data.resp[e.target.dataset.name] = e.target.dataset.val ? e.target.dataset.val :\n e.target.dataset.val === undefined ? 1 : '' + e.target.dataset.val;\n }\n if (e.target.dataset.act == 'url') {\n data.ref = sanitizeUrl(e.target.dataset.ref) || 'about:blank';\n }\n const text = e.target.dataset.title || 'unknown';\n this.props.onFormResponse(e.target.dataset.act, text, data);\n }\n\n handleContextClick(e) {\n e.preventDefault();\n e.stopPropagation();\n const menuItems = [];\n if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {\n menuItems.push('menu_item_send_retry');\n }\n if (this.props.received > Tinode.MESSAGE_STATUS_FATAL) {\n if (this.props.userIsWriter) {\n menuItems.push('menu_item_reply');\n if (!this.props.response) {\n let immutable = false;\n Drafty.entities(this.props.content, (_0, _1, tp) => {\n immutable = ['AU', 'EX', 'FM', 'IM', 'TC', 'VC', 'VD'].includes(tp);\n return immutable;\n });\n if (!immutable) {\n Drafty.styles(this.props.content, tp => {\n immutable = ['QQ'].includes(tp);\n return immutable;\n });\n }\n if (!immutable) {\n menuItems.push('menu_item_edit');\n }\n }\n }\n if (this.props.userIsAdmin) {\n menuItems.push(this.props.pinned ? 'menu_item_unpin' : 'menu_item_pin');\n }\n }\n menuItems.push('menu_item_forward');\n\n this.props.showContextMenu({\n seq: this.props.seq,\n replace: this.props.edited ? parseInt(this.props.edited.split(':')[1]) : 0,\n content: this.props.content,\n userFrom: this.props.userFrom,\n userName: this.props.userName,\n y: e.pageY,\n x: e.pageX,\n pickReply: this.props.pickReply,\n editMessage: this.props.editMessage,\n timestamp: this.props.timestamp,\n }, menuItems);\n }\n\n handleProgress(ratio) {\n this.setState({progress: ratio});\n }\n\n handleCancelUpload() {\n this.props.onCancelUpload(this.props.seq, this.props.uploader);\n }\n\n handleQuoteClick(e) {\n e.preventDefault();\n e.stopPropagation();\n const replyToSeq = this.props.replyToSeq;\n if (replyToSeq) {\n this.props.onQuoteClick(replyToSeq);\n }\n }\n\n render() {\n const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');\n const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';\n const avatar = this.props.userAvatar || true;\n let textSizeClass = 'message-content';\n const fullDisplay = (this.props.isGroup && this.props.response &&\n (this.props.sequence == 'single' || this.props.sequence == 'last'));\n\n let content = this.props.content;\n const attachments = [];\n if (this.props.mimeType == Drafty.getContentType() && Drafty.isValid(content)) {\n Drafty.attachments(content, (att, i) => {\n if (Drafty.isFormResponseType(att.mime)) {\n // Don't show json drafty form response objects as attachments.\n // They are not meant for users.\n return;\n }\n attachments.push(insert_drive_file
\n \n
\n {filename} {size}
\n {this.props.uploading || this.state.downloader ?\n {url ?\n {downloadWidget}\n :\n {downloadWidget}\n }
\n }\n \n {fullDisplay ?\n
:\n null}\n \n
\n \n
\n {fullDisplay ?\n \n
\n {this.props.showContextMenu ?\n \n \n expand_more\n \n : null\n }\n \n {content}\n {attachments}\n
\n {this.props.timestamp ?\n \n {this.props.userName ||\n
\n : null\n }\n \n
\n );\n return usersOnline.length == countToShow;\n });\n if (usersOnline.length == 0) {\n return null;\n }\n return (\n {usersOnline} {totalCount > countToShow ?\n \n
\n );\n }\n};\n","// A single topic or user.\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nexport default class Invitation extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.handleButtonAction = this.handleButtonAction.bind(this);\n }\n\n handleButtonAction(evt, data) {\n evt.preventDefault();\n this.props.onAction(data);\n }\n\n render() {\n return (\n \n
\n );\n }\n};\n","/* This is just a static page to display when no conversation is selected. */\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Tinode } from 'tinode-sdk';\n\nimport { APP_NAME } from '../config.js';\n\nexport default class LogoView extends React.PureComponent {\n render() {\n const version = APP_NAME + ' (' + Tinode.getLibrary() + ')';\n return (\n \n
\n \n \n \n \n
\n \n \n
\n );\n }\n};\n","// Message bubble with non-payload content, such as an indicator of deleted content or a date stamp.\n\nimport React from 'react';\n\nexport default class MetaMessage extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n\n render() {\n let content = null;\n let bubbleClass = 'bubble';\n if (this.props.date) {\n // A date badge.\n content = <>{this.props.date}\n bubbleClass += ' date';\n }\n\n if (!content) {\n return <>{null}\n }\n\n return (\n ![\"logo\"](\"img/logo.svg\"){kind=logo}
\n \n
\n \n {content}\n
\n \n {this.props.isAdmin ?\n \n
\n );\n }\n}\n\nexport default injectIntl(PinnedMessages);\n","// Panel with a chat.\n\nimport React, { Suspense } from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\n\nimport { Drafty, Tinode, TheCard } from 'tinode-sdk';\n\nconst CallPanel = React.lazy(_ => import('../widgets/call-panel.jsx'));\nimport ChatMessage from '../widgets/chat-message.jsx';\nimport ContactBadges from '../widgets/contact-badges.jsx';\nconst DocPreview = React.lazy(_ => import('../widgets/doc-preview.jsx'));\nimport ErrorPanel from '../widgets/error-panel.jsx';\nimport GroupSubs from '../widgets/group-subs.jsx';\nconst ImagePreview = React.lazy(_ => import('../widgets/image-preview.jsx'));\nimport Invitation from '../widgets/invitation.jsx';\nimport LetterTile from '../widgets/letter-tile.jsx';\nimport LoadSpinner from '../widgets/load-spinner.jsx';\nimport LogoView from './logo-view.jsx';\nimport MetaMessage from '../widgets/meta-message.jsx';\nimport PinnedMessages from '../widgets/pinned-messages.jsx';\nimport SendMessage from '../widgets/send-message.jsx';\nconst TheCardPreview = React.lazy(_ => import('../widgets/the-card-preview.jsx'));\nconst VideoPreview = React.lazy(_ => import('../widgets/video-preview.jsx'));\n\nimport { DEFAULT_P2P_ACCESS_MODE, EDIT_PREVIEW_LENGTH, IMAGE_PREVIEW_DIM, IMMEDIATE_P2P_SUBSCRIPTION,\n DRAFTY_FR_MIME_TYPE_LEGACY, KEYPRESS_DELAY, MESSAGES_PAGE, MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM,\n MAX_INBAND_ATTACHMENT_SIZE, READ_DELAY, QUOTED_REPLY_LENGTH, VIDEO_PREVIEW_DIM } from '../config.js';\nimport { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';\nimport { blobToBase64, fileToBase64, imageScaled, importVCard, makeImageUrl } from '../lib/blob-helpers.js';\nimport HashNavigation from '../lib/navigation.js';\nimport { bytesToHumanSize, relativeDateFormat, shortDateFormat } from '../lib/strformat.js';\n\n// Run timer with this frequency (ms) for checking notification queue.\nconst NOTIFICATION_EXEC_INTERVAL = 300;\n// Scroll distance before [go to latest message] button is shown.\nconst SHOW_GO_TO_LAST_DIST = 100;\n// Sctoll distance from the top when fetching the page of earlier messages is triggered.\nconst FETCH_PAGE_TRIGGER = 40;\n\nconst messages = defineMessages({\n online_now: {\n id: 'online_now',\n defaultMessage: 'online now',\n description: 'Indicator that the user or topic is currently online',\n },\n last_seen: {\n id: 'last_seen_timestamp',\n defaultMessage: 'Last seen: {timestamp}',\n description: 'Label for the timestamp of when the user or topic was last online'\n },\n not_found: {\n id: 'title_not_found',\n defaultMessage: 'Not found',\n description: 'Title shown when topic is not found'\n },\n channel: {\n id: 'channel',\n defaultMessage: 'channel',\n description: 'Subtitle shown for channels in MessagesView instead of last seen'\n },\n file_attachment_too_large: {\n id: 'file_attachment_too_large',\n defaultMessage: 'The file size {size} exceeds the {limit} limit.',\n description: 'Error message when attachment is too large'\n },\n invalid_content: {\n id: 'invalid_content',\n defaultMessage: 'invalid content',\n description: 'Shown when the message is unreadable'\n },\n editing_message: {\n id: 'editing_message',\n defaultMessage: 'Editing',\n description: 'Title over message editing preview'\n },\n drag_file: {\n id: 'drag_file',\n defaultMessage: 'Drag file here',\n description: 'Prompt on the file drag-n-drop overlay banner'\n },\n self_topic_name: {\n id: 'self_topic_name',\n defaultMessage: 'Saved messages',\n description: 'Name of self topic for UI'\n },\n subscriber_count: {\n id: 'subscriber_count',\n defaultMessage: '{count, plural, ' +\n 'one {{count, number} subscriber} ' +\n 'two {{count, number} subscribers} ' +\n 'three {{count, number} subscribers} ' +\n 'few {{count, number} subscribers} ' +\n 'many {{count, number} subscribers} ' +\n 'other {{count, number} subscribers}}',\n description: 'Count of channel subscribers'\n },\n member_count: {\n id: 'member_count',\n defaultMessage: '{count, plural, ' +\n 'one {{count, number} member} ' +\n 'two {{count, number} members} ' +\n 'three {{count, number} members} ' +\n 'few {{count, number} members} ' +\n 'many {{count, number} members} ' +\n 'other {{count, number} members}}',\n description: 'Count of group topic members'\n },\n cannot_parse_vcard: {\n id: 'cannot_parse_vcard',\n defaultMessage: 'Cannot parse vCard file.',\n description: 'Error message when vCard file cannot be parsed'\n }\n});\n\n// Checks if the access permissions are granted but not yet accepted.\nfunction isUnconfirmed(acs) {\n if (acs) {\n const ex = acs.getExcessive() || '';\n return acs.isJoiner('given') && (ex.includes('R') || ex.includes('W'));\n }\n return false;\n}\n\nfunction isPeerRestricted(acs) {\n if (acs) {\n const ms = acs.getMissing() || '';\n return acs.isJoiner('want') && (ms.includes('R') || ms.includes('W'));\n }\n return false;\n}\n\nfunction shouldPresentCallPanel(callState) {\n // Show call panel if either:\n // - call is outgoing (and the client is waiting for the other side to pick up) or,\n // - call is already in progress.\n return callState == CALL_STATE_OUTGOING_INITATED || callState == CALL_STATE_IN_PROGRESS;\n}\n\nclass MessagesView extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = MessagesView.getDerivedStateFromProps(props, {});\n\n this.componentSetup = this.componentSetup.bind(this);\n this.leave = this.leave.bind(this);\n this.sendMessage = this.sendMessage.bind(this);\n this.retrySend = this.retrySend.bind(this);\n this.sendImageAttachment = this.sendImageAttachment.bind(this);\n this.sendVideoAttachment = this.sendVideoAttachment.bind(this);\n this.sendFileAttachment = this.sendFileAttachment.bind(this);\n this.sendAudioAttachment = this.sendAudioAttachment.bind(this);\n this.sendTheCardAttachment = this.sendTheCardAttachment.bind(this);\n this.sendKeyPress = this.sendKeyPress.bind(this);\n this.subscribe = this.subscribe.bind(this);\n this.handleScrollReference = this.handleScrollReference.bind(this);\n this.mountDnDEvents = this.mountDnDEvents.bind(this);\n this.handleScrollEvent = this.handleScrollEvent.bind(this);\n this.handleDescChange = this.handleDescChange.bind(this);\n this.handleSubsUpdated = this.handleSubsUpdated.bind(this);\n this.handleMessageUpdate = this.handleMessageUpdate.bind(this);\n this.handleAuxUpdate = this.handleAuxUpdate.bind(this);\n this.handleAllMessagesReceived = this.handleAllMessagesReceived.bind(this);\n this.handleInfoReceipt = this.handleInfoReceipt.bind(this);\n this.handleExpandMedia = this.handleExpandMedia.bind(this);\n this.handleClosePreview = this.handleClosePreview.bind(this);\n this.handleCallPanelToggle = this.handleCallPanelToggle.bind(this);\n this.handleFormResponse = this.handleFormResponse.bind(this);\n this.handleContextClick = this.handleContextClick.bind(this);\n this.handleShowMessageContextMenu = this.handleShowMessageContextMenu.bind(this);\n this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);\n this.handleEnablePeer = this.handleEnablePeer.bind(this);\n this.handleAttachFile = this.handleAttachFile.bind(this);\n this.handleAttachImageOrVideo = this.handleAttachImageOrVideo.bind(this);\n this.handleCancelUpload = this.handleCancelUpload.bind(this);\n this.postReadNotification = this.postReadNotification.bind(this);\n this.clearNotificationQueue = this.clearNotificationQueue.bind(this);\n this.goToLatestMessage = this.goToLatestMessage.bind(this);\n this.handleFileDrop = this.handleFileDrop.bind(this);\n\n this.handlePickReply = this.handlePickReply.bind(this);\n this.handleEditMessage = this.handleEditMessage.bind(this);\n this.handleCancelReply = this.handleCancelReply.bind(this);\n this.handleQuoteClick = this.handleQuoteClick.bind(this);\n this.handleUnpinMessage = this.handleUnpinMessage.bind(this);\n this.handleCallHangup = this.handleCallHangup.bind(this);\n\n this.isDragEnabled = this.isDragEnabled.bind(this);\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragIn = this.handleDragIn.bind(this);\n this.handleDragOut = this.handleDragOut.bind(this);\n this.handleDrag = this.handleDrag.bind(this);\n this.handleDrop = this.handleDrop.bind(this);\n\n this.chatMessageRefs = [];\n this.getOrCreateMessageRef = this.getOrCreateMessageRef.bind(this);\n this.getVisibleMessageRange = this.getVisibleMessageRange.bind(this);\n\n // Keeps track of the drag event.\n // Need a counter b/c the browser's 'drag' events may fire multiple times\n // when the user takes the mouse pointer over the container:\n // for the component itself and for all nested/child elements.\n this.dragCounter = 0;\n this.dndRef = null;\n\n this.readNotificationQueue = [];\n this.readNotificationTimer = null;\n\n this.keyPressTimer = null;\n }\n\n getOrCreateMessageRef(seqId) {\n if (this.chatMessageRefs[seqId]) {\n return this.chatMessageRefs[seqId];\n }\n const ref = React.createRef();\n this.chatMessageRefs[seqId] = ref;\n return ref;\n }\n\n getVisibleMessageRange(holderRect) {\n let min = Number.MAX_SAFE_INTEGER, max = -1;\n let visibilityStatus = false;\n this.chatMessageRefs.every((ref, seq) => {\n if (ref.current) {\n const { top, bottom, height } = ref.current.getBoundingClientRect();\n const visible = top <= holderRect.top ? holderRect.top - top <= height : bottom - holderRect.bottom <= height;\n if (visible) {\n visibilityStatus = true;\n min = Math.min(min, seq);\n max = Math.max(max, seq);\n } else if (visibilityStatus) {\n // The remaining elements are no longer visible, no need to iterate them.\n return false;\n }\n }\n return true;\n });\n\n return max >= min ? {min: min, max: max} : {min: 0, max: 0};\n }\n\n componentDidMount() {\n if (this.messagesScroller) {\n this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);\n }\n\n // Drag and drop events\n this.mountDnDEvents(this.dndRef);\n\n this.componentSetup({}, {});\n }\n\n componentWillUnmount() {\n if (this.messagesScroller) {\n this.messagesScroller.removeEventListener('scroll', this.handleScrollEvent);\n }\n\n // Flush all notifications.\n this.clearNotificationQueue();\n\n // Drag and drop events\n if (this.dndRef) {\n this.dndRef.removeEventListener('dragstart', this.handleDragStart);\n this.dndRef.removeEventListener('dragenter', this.handleDragIn);\n this.dndRef.removeEventListener('dragleave', this.handleDragOut);\n this.dndRef.removeEventListener('dragover', this.handleDrag);\n this.dndRef.removeEventListener('drop', this.handleDrop);\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n // Scroll last message into view on component update e.g. on message received\n // or vertical shrinking.\n if (this.messagesScroller &&\n (prevState.topic != this.state.topic || prevState.maxSeqId != this.state.maxSeqId ||\n prevState.minSeqId != this.state.minSeqId)) {\n // New message.\n if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) {\n this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -\n this.state.scrollPosition - this.messagesScroller.offsetHeight;\n }\n }\n\n if (!this.props.applicationVisible) {\n // If application is not visible, flush all unsent 'read' notifications.\n this.clearNotificationQueue();\n } else {\n // Otherwise assume there are unread messages.\n this.postReadNotification(0);\n }\n\n this.componentSetup(prevProps, prevState);\n }\n\n componentSetup(prevProps, prevState) {\n const topic = this.props.tinode ? this.props.tinode.getTopic(this.state.topic) : undefined;\n if (this.state.topic != prevState.topic) {\n if (prevState.topic && !Tinode.isNewGroupTopicName(prevState.topic)) {\n this.leave(prevState.topic);\n if (prevState.rtcPanel) {\n this.handleCallHangup(prevState.topic, prevProps.callSeq);\n }\n }\n\n if (topic) {\n topic.onData = this.handleMessageUpdate;\n topic.onAllMessagesReceived = this.handleAllMessagesReceived;\n topic.onInfo = this.handleInfoReceipt;\n topic.onMetaDesc = this.handleDescChange;\n topic.onSubsUpdated = this.handleSubsUpdated;\n topic.onPres = this.handleSubsUpdated;\n topic.onAuxUpdated = this.handleAuxUpdate;\n }\n }\n\n if (topic) {\n if ((this.state.topic != prevState.topic) || (this.props.myUserId && !prevProps.myUserId)) {\n // Don't immediately subscribe to a new p2p topic, wait for the first message.\n const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);\n if (topic.isP2PType() && newTopic && !IMMEDIATE_P2P_SUBSCRIPTION) {\n topic.getMeta(topic.startMetaQuery().withDesc().build());\n } else if (this.props.myUserId) {\n this.subscribe(topic);\n }\n } else if (topic.isSubscribed() && this.state.isReader && !prevState.isReader) {\n // If reader status has changed and data became available.\n topic.getMeta(topic.startMetaQuery().withLaterData().build());\n } else if (!topic.isSubscribed() && this.props.ready && !prevProps.ready) {\n // Connection restored (e.g. wake from sleep): resubscribe to the currently open topic.\n this.subscribe(topic);\n }\n }\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n let nextState = {};\n if (!nextProps.topic) {\n // Default state: no topic.\n nextState = {\n minSeqId: -1,\n maxSeqId: -1,\n latestClearId: -1,\n onlineSubs: [],\n topic: null,\n title: '',\n avatar: null,\n isVerified: false,\n isStaff: false,\n isDangerous: false,\n deleted: false,\n docPreview: null,\n imagePreview: null,\n imagePostview: null,\n videoPreview: null,\n videoPostview: null,\n rtcPanel: null,\n minimizedCallPanel: false,\n typingIndicator: false,\n scrollPosition: 0,\n fetchingMessages: false,\n peerMessagingDisabled: false,\n channel: false,\n reply: null,\n contentToEdit: null,\n showGoToLastButton: false,\n dragging: false,\n pins: [],\n pinsLoaded: false,\n selectedPin: 0,\n subsVersion: 0\n };\n } else if (nextProps.topic != prevState.topic) {\n const topic = nextProps.tinode.getTopic(nextProps.topic);\n\n nextState = {\n topic: nextProps.topic,\n deleted: topic._deleted,\n docPreview: null,\n imagePreview: null,\n imagePostview: null,\n videoPreview: null,\n videoPostview: null,\n rtcPanel: null,\n minimizedCallPanel: false,\n typingIndicator: false,\n scrollPosition: 0,\n fetchingMessages: false,\n showGoToLastButton: false,\n contentToEdit: null,\n dragging: false,\n selectedPin: 0\n };\n\n if (nextProps.forwardMessage) {\n if (nextProps.forwardMessage.content) {\n const content = nextProps.forwardMessage.content;\n const size = content?.length || (content?.size || 0);\n nextState.docPreview = {\n object: content,\n type: nextProps.forwardMessage.type,\n size: size\n };\n } else {\n // We are forwarding a message. Show preview.\n nextState.reply = {\n content: nextProps.forwardMessage.preview,\n seq: null\n };\n }\n } else {\n nextState.reply = null;\n }\n\n if (topic) {\n // Topic exists.\n const subs = [];\n\n if (nextProps.connected) {\n topic.subscribers((sub) => {\n if (sub.online && sub.user != nextProps.myUserId) {\n subs.push(sub);\n }\n });\n }\n\n Object.assign(nextState, {\n onlineSubs: subs\n });\n\n if (topic.isSelfType()) {\n Object.assign(nextState, {\n title: nextProps.intl.formatMessage(messages.self_topic_name),\n avatar: true\n });\n } else if (topic.public) {\n Object.assign(nextState, {\n title: topic.public.fn,\n avatar: makeImageUrl(topic.public.photo)\n });\n } else {\n Object.assign(nextState, {\n title: '',\n avatar: null\n });\n }\n\n const peer = topic.p2pPeerDesc();\n if (peer) {\n Object.assign(nextState, {\n peerMessagingDisabled: isPeerRestricted(peer.acs)\n });\n } else if (prevState.peerMessagingDisabled) {\n Object.assign(nextState, {\n peerMessagingDisabled: false\n });\n }\n Object.assign(nextState, {\n minSeqId: topic.minMsgSeq(),\n maxSeqId: topic.maxMsgSeq(),\n latestClearId: topic.maxClearId(),\n channel: topic.isChannelType(),\n pins: (topic.aux('pins') || []).slice(),\n pinsLoaded: false\n });\n\n if (nextProps.callTopic == topic.name && shouldPresentCallPanel(nextProps.callState)) {\n nextState.rtcPanel = nextProps.callTopic;\n }\n } else {\n // Invalid topic.\n Object.assign(nextState, {\n minSeqId: -1,\n maxSeqId: -1,\n latestClearId: -1,\n onlineSubs: [],\n title: '',\n avatar: null,\n peerMessagingDisabled: false,\n channel: false,\n pins: [],\n pinsLoaded: false\n });\n }\n } else {\n // We are still in same topic. Show the call panel if necessary.\n if (nextProps.callTopic == prevState.topic && !prevState.rtcPanel &&\n shouldPresentCallPanel(nextProps.callState)) {\n nextState.rtcPanel = nextProps.callTopic;\n }\n }\n\n if (nextProps.acs) {\n if (nextProps.acs.isWriter() != prevState.isWriter) {\n nextState.isWriter = !prevState.isWriter;\n }\n if (nextProps.acs.isReader() != prevState.isReader) {\n nextState.isReader = !prevState.isReader;\n }\n if (nextProps.acs.isAdmin() != prevState.isAdmin) {\n nextState.isAdmin = !prevState.isAdmin;\n }\n if (!nextProps.acs.isReader('given') != prevState.readingBlocked) {\n nextState.readingBlocked = !prevState.readingBlocked;\n }\n if (nextProps.acs.isSharer() != prevState.isSharer) {\n nextState.isSharer = !prevState.isSharer;\n }\n } else {\n if (prevState.isWriter) {\n nextState.isWriter = false;\n }\n if (prevState.isReader) {\n nextState.isReader = false;\n }\n if (prevState.isAdmin) {\n nextState.isAdmin = false;\n }\n if (!prevState.readingBlocked) {\n prevState.readingBlocked = true;\n }\n if (prevState.isSharer) {\n nextState.isSharer = false;\n }\n }\n\n if (isUnconfirmed(nextProps.acs) == !prevState.unconformed) {\n nextState.unconfirmed = !prevState.unconformed;\n }\n\n // Clear subscribers online when there is no connection.\n if (!nextProps.connected && prevState.onlineSubs && prevState.onlineSubs.length > 0) {\n nextState.onlineSubs = [];\n }\n\n return nextState;\n }\n\n subscribe(topic) {\n if (topic.isSubscribed() || !this.props.ready) {\n return;\n }\n\n // Is this a new topic?\n const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);\n // Don't request the tags. They are useless unless the user\n // is the owner and is editing the topic.\n let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub().withAux();\n if (this.state.isReader || newTopic) {\n // Reading is either permitted or we don't know because it's a new topic. Ask for messages.\n getQuery = getQuery.withLaterData(MESSAGES_PAGE);\n if (this.state.isReader) {\n getQuery = getQuery.withLaterDel();\n }\n // And show \"loading\" spinner.\n this.setState({ fetchingMessages: true });\n }\n\n const setQuery = newTopic ? this.props.newTopicParams : undefined;\n topic.subscribe(getQuery.build(), setQuery)\n .then(ctrl => {\n if (ctrl.code == 303) {\n // Redirect to another topic requested.\n HashNavigation.navigateTo(HashNavigation.setUrlTopic('', ctrl.params.topic));\n return;\n }\n if (this.state.topic != ctrl.topic) {\n this.setState({topic: ctrl.topic});\n }\n if (this.state.deleted) {\n this.setState({deleted: false});\n }\n this.props.onNewTopicCreated(this.props.topic, ctrl.topic);\n // If there are unsent messages (except hard-failed and video call messages),\n // try sending them now. Hard-failed and unsent video call messages will be dropped.\n let discard = [];\n topic.queuedMessages(pub => {\n if (pub._sending) {\n return;\n }\n if (pub._fatal || (pub.head && pub.head.webrtc)) {\n // Filter out unsent failed & video call messages.\n discard.push(pub.seq);\n return;\n }\n if (topic.isSubscribed()) {\n this.retrySend(pub);\n }\n });\n if (discard.length > 0) {\n topic.delMessagesList(discard, true);\n }\n })\n .catch(err => {\n console.error(\"Failed subscription to\", this.state.topic, err);\n this.props.onError(err.message, 'err');\n const blankState = MessagesView.getDerivedStateFromProps({}, {});\n blankState.title = this.props.intl.formatMessage(messages.not_found);\n this.setState(blankState);\n });\n }\n\n leave(oldTopicName) {\n if (!oldTopicName || !this.props.tinode.isTopicCached(oldTopicName)) {\n return;\n }\n\n const oldTopic = this.props.tinode.getTopic(oldTopicName);\n if (oldTopic && oldTopic.isSubscribed()) {\n oldTopic.leave(false)\n .catch(_ => { /* do nothing here */ })\n .finally(_ => {\n // We don't care if the request succeeded or failed.\n // The topic is dead regardless.\n this.setState({fetchingMessages: false});\n oldTopic.onData = undefined;\n oldTopic.onAllMessagesReceived = undefined;\n oldTopic.onInfo = undefined;\n oldTopic.onMetaDesc = undefined;\n oldTopic.onSubsUpdated = undefined;\n oldTopic.onPres = undefined;\n oldTopic.onAuxUpdated = undefined;\n });\n }\n }\n\n // Don't use React.createRef as the ref.current is not available in componentDidMount in this component.\n handleScrollReference(node) {\n if (node) {\n node.addEventListener('scroll', this.handleScrollEvent);\n this.messagesScroller = node;\n this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -\n this.state.scrollPosition - this.messagesScroller.offsetHeight;\n }\n }\n\n // Get older messages and show/hide [go to latest message] button.\n handleScrollEvent(event) {\n const pos = event.target.scrollHeight - event.target.scrollTop - event.target.offsetHeight;\n this.setState({\n scrollPosition: pos,\n // Show [go to latest message] if far enough from bottom and scrolling down.\n showGoToLastButton: (pos > SHOW_GO_TO_LAST_DIST) && (pos < this.state.scrollPosition),\n });\n\n if (this.state.fetchingMessages || this.processingScrollEvent) {\n return;\n }\n\n if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {\n const topic = this.props.tinode.getTopic(this.state.topic);\n if (topic && topic.isSubscribed()) {\n this.processingScrollEvent = true;\n const {min, max} = this.getVisibleMessageRange(event.target.getBoundingClientRect());\n const gaps = topic.msgHasMoreMessages(min, max, false);\n if (gaps.length > 0) {\n this.setState({fetchingMessages: true}, _ => {\n topic.getMessagesPage(MESSAGES_PAGE, gaps, min, max)\n .catch(err => this.props.onError(err.message, 'err'))\n .finally(_ => this.setState({fetchingMessages: false}));\n });\n }\n }\n }\n this.processingScrollEvent = false;\n }\n\n /* Mount drag and drop events */\n mountDnDEvents(dnd) {\n if (dnd) {\n dnd.addEventListener('dragstart', this.handleDragStart);\n dnd.addEventListener('dragenter', this.handleDragIn);\n dnd.addEventListener('dragleave', this.handleDragOut);\n dnd.addEventListener('dragover', this.handleDrag);\n dnd.addEventListener('drop', this.handleDrop);\n this.dndRef = dnd;\n }\n }\n\n goToLatestMessage() {\n this.setState({scrollPosition: 0});\n if (this.messagesScroller) {\n this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.offsetHeight;\n }\n }\n\n handleDescChange(desc) {\n if (Tinode.isSelfTopicName(this.props.topic)) {\n this.setState({\n title: this.props.intl.formatMessage(messages.self_topic_name),\n avatar: true\n });\n } else if (desc.public) {\n this.setState({\n title: desc.public.fn,\n avatar: makeImageUrl(desc.public.photo)\n });\n } else {\n this.setState({\n title: '',\n avatar: null\n });\n }\n\n if (desc.acs) {\n this.setState({\n isWriter: desc.acs.isWriter(),\n isReader: desc.acs.isReader(),\n isAdmin: desc.acs.isAdmin(),\n readingBlocked: !desc.acs.isReader('given'),\n unconfirmed: isUnconfirmed(desc.acs),\n });\n }\n }\n\n postReadNotification(seq) {\n // Ignore notifications if the app is invisible or topic is not yet available.\n if (!this.props.applicationVisible || !this.state.topic) {\n return;\n }\n\n // Set up the timer if it's not running already.\n if (!this.readNotificationTimer) {\n this.readNotificationTimer = setInterval(_ => {\n if (this.readNotificationQueue.length == 0) {\n // Shut down the timer if the queue is empty.\n clearInterval(this.readNotificationTimer);\n this.readNotificationTimer = null;\n return;\n }\n\n let seq = -1;\n while (this.readNotificationQueue.length > 0) {\n const n = this.readNotificationQueue[0];\n if (n.topicName != this.state.topic) {\n // Topic has changed. Drop the notification.\n this.readNotificationQueue.shift();\n continue;\n }\n\n const now = new Date();\n if (n.sendAt <= now) {\n // Remove expired notification from queue.\n this.readNotificationQueue.shift();\n if (n.seq == 0 || Tinode.isServerAssignedSeq(n.seq)) {\n seq = Math.max(seq, n.seq);\n }\n } else {\n break;\n }\n }\n\n // Send only one notification for the whole batch of messages.\n if (seq >= 0) {\n const topic = this.props.tinode.getTopic(this.state.topic);\n if (topic) {\n try {\n topic.noteRead(seq);\n } catch (err) {\n console.error(\"Failed to send read notification\", err);\n }\n }\n }\n }, NOTIFICATION_EXEC_INTERVAL);\n }\n\n const now = new Date();\n this.readNotificationQueue.push({\n topicName: this.state.topic,\n seq: seq,\n sendAt: now.setMilliseconds(now.getMilliseconds() + READ_DELAY)\n });\n }\n\n // Clear notification queue and timer.\n clearNotificationQueue() {\n this.readNotificationQueue = [];\n if (this.readNotificationTimer) {\n clearInterval(this.readNotificationTimer);\n this.readNotificationTimer = null;\n }\n }\n\n handleSubsUpdated() {\n if (this.state.topic) {\n const subs = [];\n const topic = this.props.tinode.getTopic(this.state.topic);\n topic.subscribers(sub => {\n if (sub.online && sub.user != this.props.myUserId) {\n subs.push(sub);\n }\n });\n const newState = {onlineSubs: subs, subsVersion: this.state.subsVersion + 1};\n const peer = topic.p2pPeerDesc();\n if (peer) {\n Object.assign(newState, {\n peerMessagingDisabled: isPeerRestricted(peer.acs)\n });\n } else if (this.state.peerMessagingDisabled) {\n Object.assign(newState, {\n peerMessagingDisabled: false\n });\n }\n this.setState(newState);\n }\n }\n\n // The 'msg' could be false-ish if some message ranges were deleted.\n handleMessageUpdate(msg) {\n if (!this.state.topic) {\n return;\n }\n const topic = this.props.tinode.getTopic(this.state.topic);\n if (!msg) {\n // msg could be null if one or more messages were deleted.\n // Updating state to force redraw.\n this.setState({latestClearId: topic.maxClearId()});\n return;\n }\n\n clearTimeout(this.keyPressTimer)\n this.setState({maxSeqId: topic.maxMsgSeq(), minSeqId: topic.minMsgSeq(), typingIndicator: false}, _ => {\n // Scroll to the bottom if the message is added to the end of the message\n // list if already at the bottom, otherwise show [go to latest] button.\n // Implemented as a callback to be sure the scroll height has been updated.\n if (topic.isNewMessage(msg.seq)) {\n if (this.state.scrollPosition > SHOW_GO_TO_LAST_DIST) {\n this.setState({showGoToLastButton: true});\n } else {\n this.goToLatestMessage();\n }\n } else {\n if (this.messagesScroller) {\n this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition -\n this.messagesScroller.offsetHeight;\n }\n }\n });\n\n // Aknowledge messages except own messages. They are\n // automatically assumed to be read and recived.\n const status = topic.msgStatus(msg, true);\n if (status >= Tinode.MESSAGE_STATUS_SENT && msg.from != this.props.myUserId) {\n this.postReadNotification(msg.seq);\n }\n }\n\n handleAllMessagesReceived(count) {\n this.setState({fetchingMessages: false});\n if (!count) {\n // All messages received. Nothing left to receive.\n const topic = this.props.tinode.getTopic(this.state.topic);\n if (topic) {\n // Send read notification for the absolute last message.\n this.postReadNotification(topic.seq);\n }\n return;\n }\n\n // Load pinned message too (if any);\n if (!this.state.pinsLoaded) {\n // This needs to be guarded to avoid an infinite loop.\n // The loop may happen if some pinned messages are deleted.\n const topic = this.props.tinode.getTopic(this.state.topic);\n this.setState({pinsLoaded: true}, _ => {\n topic.getPinnedMessages();\n });\n } else {\n this.setState({pinsLoaded: false});\n }\n }\n\n handleAuxUpdate(aux) {\n const pins = (aux['pins'] || []).slice();\n let selectedPin = this.state.selectedPin;\n if (pins.length > this.state.pins.length) {\n // New pins added, show the latest.\n selectedPin = 0;\n } else if (selectedPin >= pins.length) {\n selectedPin = Math.max(0, pins.length - 1);\n }\n this.setState({pins: pins, selectedPin: selectedPin});\n }\n\n handleInfoReceipt(info) {\n switch (info.what) {\n case 'kp': {\n clearTimeout(this.keyPressTimer);\n this.keyPressTimer = setTimeout(_ => this.setState({typingIndicator: false}), KEYPRESS_DELAY + 1000);\n if (!this.state.typingIndicator) {\n this.setState({typingIndicator: true});\n }\n break;\n }\n case 'read':\n case 'recv':\n // Redraw due to changed recv/read status.\n this.forceUpdate();\n break;\n default:\n console.info(\"Other change in topic: \", info.what);\n }\n }\n\n handleExpandMedia(content) {\n if (!content) {\n return;\n }\n\n if (content.video) {\n this.setState({videoPostview: content});\n } else {\n this.setState({imagePostview: content});\n }\n }\n\n handleClosePreview() {\n if (this.state.imagePreview && this.state.imagePreview.url) {\n URL.revokeObjectURL(this.state.imagePreview.url);\n }\n if (this.state.videoPreview && this.state.videoPreview.url) {\n URL.revokeObjectURL(this.state.videoPreview.url);\n }\n this.setState({\n imagePostview: null,\n imagePreview: null,\n docPreview: null,\n videoPreview: null,\n videoPostview: null,\n });\n this.props.onCancelForwardMessage();\n }\n\n handleFormResponse(action, text, data) {\n if (action == 'pub') {\n this.sendMessage(Drafty.attachJSON(Drafty.parse(text), data));\n } else if (action == 'url') {\n const url = new URL(data.ref);\n const params = url.searchParams;\n for (let key in data.resp) {\n if (data.resp.hasOwnProperty(key)) {\n params.set(key, data.resp[key]);\n }\n }\n ['name', 'seq'].forEach(key => {\n if (data[key]) {\n params.set(key, data[key]);\n }\n });\n params.set('uid', this.props.myUserId);\n params.set('topic', this.state.topic);\n url.search = params;\n window.open(url, '_blank');\n } else {\n console.info(\"Unknown action in form\", action);\n }\n }\n\n handleContextClick(e) {\n e.preventDefault();\n e.stopPropagation();\n this.props.showContextMenu({ topicName: this.state.topic, y: e.pageY, x: e.pageX });\n }\n\n handleShowMessageContextMenu(params, messageSpecificMenuItems) {\n if (params.userFrom == 'chan') {\n params.userFrom = this.state.topic;\n params.userName = this.state.title;\n }\n params.topicName = this.state.topic;\n const menuItems = messageSpecificMenuItems || [];\n const topic = this.props.tinode.getTopic(params.topicName);\n if (topic) {\n // Self -> (1) always hard-delete with [Delete] title.\n // P2P -> (1) hard-delete if allowed and not too old, (2) always soft-delete.\n // Group -> (1) hard-delete if allowed and not too old or owner, (2) always soft-delete.\n if (topic.isSelfType()) {\n // Hard-delete with plain [Delete] title.\n menuItems.push('message_delete_generic');\n } else {\n if (!topic.isChannelType()) {\n // P2P or normal group: always allow to soft-delete.\n menuItems.push('message_delete');\n }\n\n const acs = topic.getAccessMode();\n if (acs && acs.isDeleter()) {\n // Owner can always hard-delete regardless of age.\n let canDelete = acs.isOwner();\n if (!canDelete) {\n // Not owner: check message age if configured on the server.\n const maxDelAge = this.props.tinode.getServerParam(Tinode.MSG_DELETE_AGE, 0) | 0;\n // Make sure the message is not too old. This check is here just to make the UI\n // more user-friendly. The server will enforce the limit regardless of this.\n canDelete = maxDelAge == 0 || (maxDelAge > 0 && params.timestamp ?\n params.timestamp.getTime() > (new Date().getTime() - maxDelAge * 1000) : false);\n }\n if (canDelete) {\n // [Delete for All] title.\n menuItems.push('message_delete_hard');\n }\n }\n }\n }\n this.props.showContextMenu(params, menuItems);\n }\n\n handleNewChatAcceptance(action) {\n this.props.onNewChat(this.state.topic, action);\n }\n\n handleEnablePeer(e) {\n e.preventDefault();\n this.props.onChangePermissions(this.state.topic, DEFAULT_P2P_ACCESS_MODE, this.state.topic);\n }\n\n sendKeyPress(audio) {\n const topic = this.props.tinode.getTopic(this.state.topic);\n if (topic.isSubscribed()) {\n if (audio) {\n topic.noteRecording(true);\n } else {\n topic.noteKeyPress();\n }\n }\n }\n\n // sendMessage sends the message with an optional subscription to topic first.\n sendMessage(msg, uploadCompletionPromise, uploader) {\n let head;\n if (!msg && this.props.forwardMessage) {\n // We are forwarding a message.\n msg = this.props.forwardMessage.msg;\n head = this.props.forwardMessage.head;\n this.handleCancelReply();\n } else if (this.state.reply) {\n if (this.state.reply.editing) {\n if (msg == this.state.contentToEdit) {\n // Message unchanged.\n this.handleCancelReply();\n return;\n }\n // Editing an existing message.\n head = {replace: ':' + this.state.reply.seq};\n } else if (this.state.reply.content) {\n // Replying to a message in this topic.\n // Turn it into Drafty so we can make a quoted Drafty object later.\n head = {reply: '' + this.state.reply.seq};\n if (typeof msg == 'string') {\n msg = Drafty.parse(msg);\n }\n msg = Drafty.append(Drafty.sanitizeEntities(this.state.reply.content), msg);\n }\n this.handleCancelReply();\n }\n this.props.sendMessage(msg, uploadCompletionPromise, uploader, head);\n }\n\n // Retry sending a message.\n retrySend(pub) {\n this.props.sendMessage(pub.content, undefined, undefined, pub.head)\n .then(_ => {\n // All good. Remove the original message draft from the cache.\n const topic = this.props.tinode.getTopic(this.state.topic);\n topic.delMessagesList([pub.seq], true);\n });\n }\n\n // sendFileAttachment sends the file as Drafty message:\n // - if file is too large, upload it and send a s link.\n // - if file is small enough, just send it in-band.\n sendFileAttachment(file) {\n // Server-provided limit reduced for base64 encoding and overhead.\n const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',\n MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;\n\n if (TheCard.isFileSupported(file.type, file.name) || file.type == TheCard.contentType) {\n // This is a vCard file, try to convert and send as TheCard.\n if (this.sendTheCardAttachment(file, maxInbandAttachmentSize)) {\n // Successfully sent as TheCard.\n return;\n }\n // Sending as TheCard failed, fall through to sending as generic file attachment.\n }\n\n // If the attachment is a JSON file, then use 'application/octet-stream' instead of 'application/json'.\n // This is a temporary workaround for the collision with the 'application/json' MIME type of form responses.\n // Remove this code in 2026 or so.\n const jsonMimeConverter = (fileType) => fileType === DRAFTY_FR_MIME_TYPE_LEGACY ? 'application/octet-stream' : fileType;\n\n if (file.size > maxInbandAttachmentSize) {\n // Too large to send inband - uploading out of band and sending as a link.\n const uploader = this.props.tinode.getLargeFileHelper();\n if (!uploader) {\n this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));\n return;\n }\n const uploadCompletionPromise = uploader.upload(file);\n const msg = Drafty.attachFile(null, {\n mime: jsonMimeConverter(file.type),\n filename: file.name,\n size: file.size,\n urlPromise: uploadCompletionPromise\n });\n // Pass data and the uploader to the TinodeWeb.\n this.sendMessage(msg, uploadCompletionPromise, uploader);\n } else {\n // Small enough to send inband.\n fileToBase64(file)\n .then(b64 => this.sendMessage(Drafty.attachFile(null, {\n mime: jsonMimeConverter(b64.mime),\n data: b64.bits,\n filename: b64.name,\n size: file.size\n })))\n .catch(err => this.props.onError(err.message, 'err'));\n }\n }\n\n // Convert attached vCard to TheCard and send.\n sendTheCardAttachment(file, maxInbandAttachmentSize) {\n if (file.size > maxInbandAttachmentSize) {\n // Cannot convert to TheCard, send as a generic file attachment instead.\n return false;\n }\n\n if (file.type == TheCard.contentType) {\n // Already TheCard, no need to convert.\n this.sendMessage(Drafty.appendTheCard(null, file.object));\n return true;\n }\n\n importVCard(file)\n .then(card => {\n this.sendMessage(Drafty.appendTheCard(null, card));\n })\n .catch(err => {\n this.props.onError(this.props.intl.formatMessage(messages.cannot_parse_vcard, {error: err.message}), 'err');\n });\n return true;\n }\n\n // handleAttachFile method is called when [Attach file] button is clicked: launch attachment preview.\n handleAttachFile(file) {\n const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', MAX_EXTERN_ATTACHMENT_SIZE);\n\n if (file.size > maxExternAttachmentSize) {\n // Too large.\n this.props.onError(this.props.intl.formatMessage(messages.file_attachment_too_large,\n {size: bytesToHumanSize(file.size), limit: bytesToHumanSize(maxExternAttachmentSize)}), 'err');\n } else {\n this.setState({\n docPreview: {\n file: file,\n name: file.name,\n size: file.size,\n type: file.type\n }\n });\n }\n }\n\n handleCallHangup(topic, seq) {\n this.props.onVideoCallClosed();\n this.setState({\n rtcPanel: null\n });\n this.props.onCallHangup(topic, seq);\n }\n\n handleCallPanelToggle() {\n this.setState({minimizedCallPanel: !this.state.minimizedCallPanel});\n }\n\n // sendImageAttachment sends the image bits as Drafty message.\n sendImageAttachment(caption, blob) {\n const mime = this.state.imagePreview.mime;\n const width = this.state.imagePreview.width;\n const height = this.state.imagePreview.height;\n const fname = this.state.imagePreview.filename;\n\n // Server-provided limit reduced for base64 encoding and overhead.\n const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',\n MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;\n\n if (blob.size > maxInbandAttachmentSize) {\n // Too large to send inband - uploading out of band and sending as a link.\n const uploader = this.props.tinode.getLargeFileHelper();\n if (!uploader) {\n this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));\n return;\n }\n const uploadCompletionPromise = uploader.upload(blob);\n\n // Make small preview to show while uploading.\n imageScaled(blob, IMAGE_PREVIEW_DIM, IMAGE_PREVIEW_DIM, -1, false)\n // Convert tiny image into base64 for serialization and previewing.\n .then(scaled => blobToBase64(scaled.blob))\n .then(b64 => {\n let msg = Drafty.insertImage(null, 0, {\n mime: mime,\n _tempPreview: b64.bits, // This preview will not be serialized.\n bits: b64.bits, // Image thumbnail.\n width: width,\n height: height,\n filename: fname,\n size: blob.size,\n urlPromise: uploadCompletionPromise\n });\n if (caption) {\n msg = Drafty.appendLineBreak(msg);\n msg = Drafty.append(msg, Drafty.parse(caption));\n }\n // Pass data and the uploader to the TinodeWeb.\n this.sendMessage(msg, uploadCompletionPromise, uploader);\n })\n .catch(err => this.props.onError(err, 'err'));\n return;\n }\n\n // Send the image inband if it's not too big. The image has been scaled already\n // in image preview.\n blobToBase64(blob)\n .then(b64 => {\n let msg = Drafty.insertImage(null, 0, {\n mime: b64.mime,\n bits: b64.bits,\n width: width,\n height: height,\n filename: fname,\n size: blob.size\n });\n if (caption) {\n msg = Drafty.appendLineBreak(msg);\n msg = Drafty.append(msg, Drafty.parse(caption));\n }\n this.sendMessage(msg);\n });\n }\n\n // sendVideoAttachment sends the video bits as Drafty message.\n sendVideoAttachment(caption, videoBlob, previewBlob, params) {\n const width = params.width;\n const height = params.height;\n\n // Server-provided limit reduced for base64 encoding and overhead.\n const maxInbandAttachmentSize = (this.props.tinode.getServerParam('maxMessageSize',\n MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;\n\n const uploads = [];\n let uploader;\n if ((videoBlob.size + previewBlob.size) > maxInbandAttachmentSize) {\n // One or both are too large to send inband. Uploading out of band and sending as a link.\n uploader = this.props.tinode.getLargeFileHelper();\n if (!uploader) {\n this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));\n return;\n }\n\n uploads[0] = videoBlob.size > maxInbandAttachmentSize * 0.675 ? uploader.upload(videoBlob) : null;\n uploads[1] = previewBlob.size > maxInbandAttachmentSize * 0.275 ? uploader.upload(previewBlob) : null;\n }\n\n if (uploads.length == 0) {\n // Both video and preview are small enough to send inband.\n Promise.all([blobToBase64(videoBlob), blobToBase64(previewBlob)])\n .then(b64s => {\n const [v64, i64] = b64s;\n let msg = Drafty.insertVideo(null, 0, {\n mime: v64.mime,\n bits: v64.bits,\n preview: i64.bits,\n premime: i64.mime,\n width: width,\n height: height,\n duration: params.duration,\n filename: params.name,\n size: videoBlob.size\n });\n if (caption) {\n msg = Drafty.appendLineBreak(msg);\n msg = Drafty.append(msg, Drafty.parse(caption));\n }\n this.sendMessage(msg);\n });\n return;\n }\n\n const uploadCompletionPromise = Promise.all(uploads);\n\n const b64conv = [];\n // Small video converted to base64.\n b64conv[0] = uploads[0] ? null : blobToBase64(videoBlob);\n // Full-size preview fits inline.\n b64conv[1] = uploads[1] ? null : imageScaled(previewBlob, MAX_IMAGE_DIM, MAX_IMAGE_DIM, -1, false)\n .then(scaled => blobToBase64(scaled.blob));\n // Small preview to show while uploading.\n b64conv[2] = imageScaled(previewBlob, VIDEO_PREVIEW_DIM, VIDEO_PREVIEW_DIM, -1, false)\n .then(scaled => blobToBase64(scaled.blob));\n // Convert tiny image into base64 for serialization and previewing.\n Promise.all(b64conv)\n .then(b64s => {\n const [video, img, preview] = b64s;\n let msg = Drafty.insertVideo(null, 0, {\n mime: params.mime,\n bits: video ? video.bits : null,\n _tempPreview: preview.bits,\n preview: img ? img.bits : preview.bits,\n premime: img ? img.mime : preview.mime,\n width: width,\n height: height,\n duration: params.duration,\n filename: params.name,\n size: videoBlob.size,\n urlPromise: uploadCompletionPromise\n });\n\n if (caption) {\n msg = Drafty.appendLineBreak(msg);\n msg = Drafty.append(msg, Drafty.parse(caption));\n }\n // Pass data and the uploader to the TinodeWeb.\n this.sendMessage(msg, uploadCompletionPromise, uploader);\n })\n .catch(err => this.props.onError(err.message, 'err'));\n }\n\n // handleAttachImageOrVideo method is called when [Attach image or video] button is clicked: launch image or video preview.\n handleAttachImageOrVideo(file) {\n const maxExternAttachmentSize = this.props.tinode.getServerParam('maxFileUploadSize', MAX_EXTERN_ATTACHMENT_SIZE);\n\n if (file.type.startsWith('video/')) {\n this.setState({videoPreview: {\n url: URL.createObjectURL(file),\n blob: file,\n filename: file.name,\n size: file.size,\n mime: file.type\n }});\n return;\n }\n\n // Get image dimensions and size, optionally scale it down.\n imageScaled(file, MAX_IMAGE_DIM, MAX_IMAGE_DIM, maxExternAttachmentSize, false)\n .then(scaled => {\n this.setState({imagePreview: {\n url: URL.createObjectURL(scaled.blob),\n blob: scaled.blob,\n filename: scaled.name,\n width: scaled.width,\n height: scaled.height,\n size: scaled.blob.size,\n mime: scaled.mime\n }});\n }).catch(err => {\n this.props.onError(err.message, 'err');\n });\n }\n\n // handleFileDrop is called when the user drags & drops a file upon the message view.\n handleFileDrop(files) {\n if (!files || files.length == 0) {\n return;\n }\n const file = files[0];\n if (file.type && file.type.startsWith('image/')) {\n this.handleAttachImageOrVideo(file);\n } else {\n this.handleAttachFile(file);\n }\n }\n\n // sendAudioAttachment sends audio bits inband as Drafty message (no preview).\n sendAudioAttachment(url, preview, duration) {\n fetch(url)\n .then(result => result.blob())\n .then(blob => {\n // Server-provided limit reduced for base64 encoding and overhead.\n const maxInbandAttachmentSize = this.props.tinode.getServerParam('maxMessageSize', MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024;\n if (blob.size > maxInbandAttachmentSize) {\n // Too large to send inband - uploading out of band and sending as a link.\n const uploader = this.props.tinode.getLargeFileHelper();\n if (!uploader) {\n this.props.onError(this.props.intl.formatMessage(messages.cannot_initiate_upload));\n return;\n }\n const uploadCompletionPromise = uploader.upload(blob);\n const msg = Drafty.appendAudio(null, {\n mime: blob.type,\n size: blob.size,\n duration: duration,\n preview: preview,\n urlPromise: uploadCompletionPromise\n });\n // Pass data and the uploader to the TinodeWeb.\n this.sendMessage(msg, uploadCompletionPromise, uploader);\n } else {\n // Small enough to send inband.\n blobToBase64(blob)\n .then(b64 => {\n this.sendMessage(Drafty.appendAudio(null, {\n mime: b64.mime,\n bits: b64.bits,\n size: blob.size,\n duration: duration,\n preview: preview,\n }))\n })\n }\n })\n .catch(err => {this.props.onError(err.message, 'err')});;\n }\n\n handleCancelUpload(seq, uploader) {\n const topic = this.props.tinode.getTopic(this.state.topic);\n const found = topic.findMessage(seq);\n if (found) {\n found._cancelled = true;\n }\n uploader.cancel();\n }\n\n // seq: seq ID of the source message\n // context: message content.\n // senderId: UID of the sender of the source message.\n // senderName: full name of the sender of the original message.\n handlePickReply(seq, content, senderId, senderName) {\n if (!seq || !content) {\n this.setState({reply: null});\n return;\n }\n\n content = typeof content == 'string' ? Drafty.init(content) : content;\n if (Drafty.isValid(content)) {\n content = Drafty.replyContent(content, QUOTED_REPLY_LENGTH);\n } else {\n // /!\\ invalid content.\n content = Drafty.append(Drafty.init('\\u26A0 '),\n Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));\n }\n\n this.setState({\n reply: {\n content: Drafty.quote(senderName, senderId, content),\n seq: seq\n }\n });\n this.props.onCancelForwardMessage();\n }\n\n // seq: seq ID of the message to edit.\n // context: message content.\n handleEditMessage(seq, content) {\n if (!seq || !content) {\n this.setState({reply: null});\n return;\n }\n\n content = typeof content == 'string' ? Drafty.init(content) : content;\n const editable = Drafty.toMarkdown(content);\n if (Drafty.isValid(content)) {\n content = Drafty.replyContent(content, EDIT_PREVIEW_LENGTH);\n } else {\n // /!\\ invalid content.\n content = Drafty.append(Drafty.init('\\u26A0 '),\n Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));\n }\n\n this.setState({\n reply: {\n content: Drafty.quote(this.props.intl.formatMessage(messages.editing_message), null, content),\n seq: seq,\n editing: true\n },\n contentToEdit: editable\n });\n this.props.onCancelForwardMessage();\n }\n\n\n handleCancelReply() {\n this.setState({reply: null, contentToEdit: null});\n this.props.onCancelForwardMessage();\n }\n\n handleQuoteClick(replyToSeq) {\n const ref = this.getOrCreateMessageRef(replyToSeq);\n if (ref && ref.current) {\n ref.current.scrollIntoView({block: \"center\", behavior: \"smooth\"});\n ref.current.classList.add('flash');\n setTimeout(_ => {ref.current.classList.remove('flash')} , 1000);\n } else {\n console.error(\"Unresolved message ref\", replyToSeq);\n }\n }\n\n handleUnpinMessage(seq) {\n const topic = this.props.tinode.getTopic(this.state.topic);\n topic.pinMessage(seq, false);\n }\n\n isDragEnabled() {\n return this.state.isWriter && !this.state.unconfirmed && !this.props.forwardMessage && !this.state.peerMessagingDisabled;\n }\n\n handleDragStart(e) {\n e.preventDefault();\n e.stopPropagation();\n e.dataTransfer.clearData();\n }\n\n handleDragIn(e) {\n e.preventDefault();\n e.stopPropagation();\n this.dragCounter++;\n if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {\n this.setState({dragging: true});\n }\n }\n\n handleDragOut(e) {\n e.preventDefault();\n e.stopPropagation();\n this.dragCounter--;\n if (this.dragCounter <= 0) {\n this.setState({dragging: false});\n }\n }\n\n handleDrag(e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n handleDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n this.setState({dragging: false});\n if (this.isDragEnabled() && e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n this.handleFileDrop(e.dataTransfer.files);\n this.dragCounter = 0;\n }\n }\n\n render() {\n const {formatMessage} = this.props.intl;\n\n // P2P call is an overlay, not a separate component because it cannot be\n // re-mounted between full screen/minimized.\n const overlay = this.state.rtcPanel &&\n \n close\n
:\n push_pin
\n }\n {dots}
\n {messageShown}
\n \n {selected > 0 ?\n \n expand_less\n \n : null\n }\n \n \n {this.props.selected > 0 ?\n \n expand_more\n \n : null\n }\n \n
\n \n \n
\n {this.state.peerMessagingDisabled && !this.state.unconfirmed ?\n : null}\n {this.state.unconfirmed ?\n \n
\n {!this.state.isReader ?\n - \n {messageNodes}\n
\n {this.state.readingBlocked ?\n
\n : null }\n \n
\n : null }\n \n {this.props.displayMobile ?\n {e.preventDefault(); this.leave(this.state.topic); this.props.onHideMessagesView();}}>\n arrow_back\n \n :\n null}\n this.setState({selectedPin: index})}\n onSelected={this.handleQuoteClick}\n onCancel={this.handleUnpinMessage} />\n : null}\n {groupTopic ?\n
\n {this.props.displayMobile ?\n <>\n {this.state.pins.length > 0 ?\n \n
\n \n
\n \n {!this.props.displayMobile && this.state.pins.length > 0 ?\n {\n this.state.title ||\n
\n {lastSeen}
\n \n \n more_vert\n \n
\n {formatMessage(messages.drag_file)}
\n : null}\n \n );\n }\n component = {component2}{overlay}
\n }\n return component;\n }\n};\n\nexport default injectIntl(MessagesView);\n","// Send message form.\nimport React, { Suspense } from 'react';\nimport { FormattedMessage, defineMessages, injectIntl } from 'react-intl';\nimport { Drafty } from 'tinode-sdk';\n\n// Lazy-loading AudioRecorder because it's quite large due to\n// a dependency on webm-duration-fix.\nconst AudioRecorder = React.lazy(_ => import('./audio-recorder.jsx'));\n\nimport { KEYPRESS_DELAY } from '../config.js';\nimport { filePasted } from '../lib/blob-helpers.js';\nimport { replyFormatter } from '../lib/formatters.js';\n\nconst messages = defineMessages({\n messaging_disabled: {\n id: 'messaging_disabled_prompt',\n defaultMessage: 'Messaging disabled',\n description: 'Prompt in SendMessage in read-only topic'\n },\n type_new_message: {\n id: 'new_message_prompt',\n defaultMessage: 'New message',\n description: 'Prompt in send message field'\n },\n add_image_caption: {\n id: 'image_caption_prompt',\n defaultMessage: 'Image caption',\n description: 'Prompt in SendMessage for attached image'\n },\n file_attachment_too_large: {\n id: 'file_attachment_too_large',\n defaultMessage: 'The file size {size} exceeds the {limit} limit.',\n description: 'Error message when attachment is too large'\n },\n cannot_initiate_upload: {\n id: 'cannot_initiate_file_upload',\n defaultMessage: 'Cannot initiate file upload.',\n description: 'Generic error messagewhen attachment fails'\n },\n icon_title_record_voice: {\n id: 'icon_title_record_voice',\n defaultMessage: 'Record voice message',\n description: 'Icon tool tip for recording a voice message'\n },\n icon_title_attach_file: {\n id: 'icon_title_attach_file',\n defaultMessage: 'Attach file',\n description: 'Icon tool tip for attaching a file'\n },\n icon_title_add_image: {\n id: 'icon_title_add_image',\n defaultMessage: 'Add image',\n description: 'Icon tool tip for attaching an image'\n },\n icon_title_send: {\n id: 'icon_title_send',\n defaultMessage: 'Send message',\n description: 'Icon tool tip for sending a message'\n },\n});\n\nclass SendMessage extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n quote: null,\n message: '',\n audioRec: false,\n audioAvailable: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),\n };\n\n // Timestamp when the previous key press was sent to the server.\n this.keypressTimestamp = 0;\n\n this.handlePasteEvent = this.handlePasteEvent.bind(this);\n this.handleAttachImage = this.handleAttachImage.bind(this);\n this.handleAttachFile = this.handleAttachFile.bind(this);\n this.handleAttachAudio = this.handleAttachAudio.bind(this);\n this.handleSend = this.handleSend.bind(this);\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.handleMessageTyping = this.handleMessageTyping.bind(this);\n this.handleDropAttach = this.handleDropAttach.bind(this);\n\n this.handleQuoteClick = this.handleQuoteClick.bind(this);\n\n this.formatReply = this.formatReply.bind(this);\n }\n\n componentDidMount() {\n if (this.messageEditArea) {\n this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);\n if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {\n // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.\n this.messageEditArea.focus();\n }\n }\n\n this.setState({quote: this.formatReply()});\n }\n\n componentWillUnmount() {\n if (this.messageEditArea) {\n this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.messageEditArea) {\n if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {\n // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.\n this.messageEditArea.focus();\n }\n\n // Adjust height of the message area for the amount of text.\n this.messageEditArea.style.height = '0px';\n this.messageEditArea.style.height = this.messageEditArea.scrollHeight + 'px';\n }\n\n if (prevProps.topicName != this.props.topicName) {\n this.setState({message: this.props.initMessage || '', audioRec: false, quote: null});\n } else if (prevProps.initMessage != this.props.initMessage) {\n const msg = this.props.initMessage || '';\n this.setState({message: msg}, _ => {\n // If there is text, scroll to bottom and set caret to the end.\n this.messageEditArea.scrollTop = this.messageEditArea.scrollHeight;\n this.messageEditArea.setSelectionRange(msg.length, msg.length);\n });\n }\n if (prevProps.reply != this.props.reply) {\n this.setState({quote: this.formatReply()});\n }\n }\n\n formatReply() {\n return this.props.reply ?\n Drafty.format(this.props.reply.content, replyFormatter, {\n formatMessage: this.props.intl.formatMessage.bind(this.props.intl),\n authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)\n }) : null;\n }\n\n handlePasteEvent(e) {\n if (this.props.disabled) {\n return;\n }\n // FIXME: handle large files too.\n if (filePasted(e,\n file => { this.props.onAttachImage(file); },\n file => { this.props.onAttachFile(file); },\n this.props.onError)) {\n\n // If a file was pasted, don't paste base64 data into input field.\n e.preventDefault();\n }\n }\n\n handleAttachImage(e) {\n if (e.target.files && e.target.files.length > 0) {\n this.props.onAttachImage(e.target.files[0]);\n }\n // Clear the value so the same file can be uploaded again.\n e.target.value = '';\n }\n\n handleAttachFile(e) {\n if (e.target.files && e.target.files.length > 0) {\n this.props.onAttachFile(e.target.files[0]);\n }\n // Clear the value so the same file can be uploaded again.\n e.target.value = '';\n }\n\n handleDropAttach(files) {\n if (files && files.length > 0) {\n this.props.onAttachFile(files[0]);\n }\n }\n\n handleAttachAudio(url, preview, duration) {\n this.setState({audioRec: false});\n this.props.onAttachAudio(url, preview, duration);\n }\n\n handleSend(e) {\n e.preventDefault();\n const message = this.state.message.trim();\n if (message || this.props.acceptBlank || this.props.noInput) {\n this.props.onSendMessage(message);\n this.setState({message: ''});\n }\n }\n\n /* Send on Enter key */\n handleKeyPress(e) {\n if (this.state.audioRec) {\n // Ignore key presses while audio is being recorded.\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Enter pressed: either send, or enter a new line.\n if (e.key === 'Enter') {\n if (this.props.sendOnEnter == 'plain') {\n // Have Shift-Enter insert a line break instead\n if (!e.shiftKey) {\n e.preventDefault();\n e.stopPropagation();\n\n this.handleSend(e);\n }\n } else {\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n e.stopPropagation();\n\n this.handleSend(e);\n }\n }\n }\n }\n\n handleMessageTyping(e) {\n this.setState({message: e.target.value});\n if (this.props.onKeyPress) {\n const now = new Date().getTime();\n if (now - this.keypressTimestamp > KEYPRESS_DELAY) {\n this.props.onKeyPress();\n this.keypressTimestamp = now;\n }\n }\n }\n\n handleQuoteClick(e) {\n e.preventDefault();\n e.stopPropagation();\n if (this.props.reply && this.props.onQuoteClick) {\n const replyToSeq = this.props.reply.seq;\n this.props.onQuoteClick(replyToSeq);\n }\n }\n\n render() {\n const { formatMessage } = this.props.intl;\n const prompt = this.props.disabled ?\n formatMessage(messages.messaging_disabled) :\n (this.props.messagePrompt ?\n formatMessage(messages[this.props.messagePrompt]) :\n formatMessage(messages.type_new_message));\n\n const sendIcon = (this.props.reply && this.props.reply.editing) ?\n 'check_circle' : 'send';\n\n const quote = this.state.quote ?\n (\n \n {this.state.quote}\n
) : null;\n const audioEnabled = this.state.audioAvailable && this.props.onAttachAudio;\n return (\n \n {!this.props.noInput ? quote : null}\n this.props.onKeyPress(true)}\n onDeleted={_ => this.setState({audioRec: false})}\n onFinished={this.handleAttachAudio}/>\n ) :\n
\n {!this.props.disabled ?\n <>\n {this.props.onAttachFile && !this.state.audioRec ?\n <>\n {e.preventDefault(); this.attachImage.click();}} title={formatMessage(messages.icon_title_add_image)}>\n photo\n \n {e.preventDefault(); this.attachFile.click();}} title={formatMessage(messages.icon_title_attach_file)}>\n attach_file\n \n \n :\n null}\n {this.props.noInput ?\n (quote || ) :\n (this.state.audioRec ?\n (
}>\n