pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge next

Browse Source
This commit is contained in:
or-else
2021-08-19 16:22:33 -07:00
parent 34afdcac1a c522b90150
commit 29e3bd4f9f
17 changed files with 788 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/chat-message.jsx
+9 -6
View File
@@ -7,6 +7,7 @@ import Attachment from './attachment.jsx';
import LetterTile from './letter-tile.jsx';
import ReceivedMarker from './received-marker.jsx'
import UploadingImage from './uploading-image.jsx'
import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
class ChatMessage extends React.PureComponent {
@@ -106,8 +107,10 @@ class ChatMessage extends React.PureComponent {
attachments.push(<Attachment
tinode={this.props.tinode}
downloadUrl={Drafty.getDownloadUrl(att)}
filename={att.name} uploading={Drafty.isProcessing(att)}
mimetype={att.mime} size={Drafty.getEntitySize(att)}
filename={att.name}
uploading={Drafty.isProcessing(att)}
mimetype={att.mime}
size={Drafty.getEntitySize(att)}
progress={this.state.progress}
onCancelUpload={this.handleCancelUpload}
onError={this.props.onError}
@@ -175,10 +178,10 @@ class ChatMessage extends React.PureComponent {
</div>
{fullDisplay ?
<div className="author">
<FormattedMessage id="user_not_found" defaultMessage="Not found"
description="In place of a user's full name when the user is not found.">{
(notFound) => {return this.props.userName || <i>{notFound}</i>}
}</FormattedMessage>
{this.props.userName ||
<i><FormattedMessage id="user_not_found" defaultMessage="Not found"
description="In place of a user's full name when the user is not found." /></i>
}
</div>
: null
}
src/widgets/letter-tile.jsx
+2 -3
View File
@@ -2,7 +2,7 @@ import React from 'react';
import Tinode from 'tinode-sdk';
import { stringHash } from '../lib/strformat.js';
import { idToColorClass } from '../lib/strformat.js';
import { sanitizeImageUrl } from '../lib/utils.js';
export default class LetterTile extends React.PureComponent {
@@ -10,8 +10,7 @@ export default class LetterTile extends React.PureComponent {
let avatar;
if (this.props.avatar === true) {
const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
const iconColor = (isGroup ? 'light-color' : 'dark-color')
+ (Math.abs(stringHash(this.props.topic)) % 16);
const iconColor = idToColorClass(this.props.topic, isGroup);
if (this.props.topic && this.props.title && this.props.title.trim()) {
const letter = this.props.title.trim().charAt(0);
const className = 'lettertile ' + iconColor;
src/widgets/topic-common.jsx
+8 -5
View File
@@ -21,10 +21,11 @@ export default class TopicCommon extends React.Component {
addCredActive: false,
addCredInvalid: false,
newCred: '',
tags: [],
previousTagsUpdated: undefined
tags: []
};
this.previousTagsUpdated = undefined;
this.onTagsUpdated = this.onTagsUpdated.bind(this);
this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
@@ -105,17 +106,19 @@ export default class TopicCommon extends React.Component {
}
}
// Server informs that the tags have been updated.
onTagsUpdated(tags) {
this.setState({tags: tags});
if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
this.previousTagsUpdated();
this.previousTagsUpdated(tags);
}
}
// Request server to change tags.
handleTagsUpdated(tags) {
if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
this.props.onTopicTagsUpdate(this.props.topic, tags);
this.props.onTopicTagsUpdateRequest(this.props.topic, tags);
}
}
@@ -143,7 +146,7 @@ export default class TopicCommon extends React.Component {
tinode={this.props.tinode}
topic={this.props.topic}
onUpdateTopicDesc={this.props.onUpdateTopicDesc}
onUpdateTags={this.props.onUpdateTags}
onUpdateTags={this.handleTagsUpdated}
onError={this.props.onError} />
{this.state.isMe ?
<>
src/widgets/topic-desc-edit.jsx
+6 -4
View File
@@ -28,12 +28,13 @@ export default class TopicDescEdit extends React.Component {
private: topic.private ? topic.private.comment : null,
description: topic.public ? topic.public.note : undefined,
avatar: makeImageUrl(topic.public ? topic.public.photo : null),
tags: topic.tags(),
tags: topic.tags() || [],
newAvatar: null,
newAvatarMime: null,
previousOnTags: topic.onTagsUpdated
newAvatarMime: null
};
this.previousOnTags = null;
this.tnNewTags = this.tnNewTags.bind(this);
this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
this.handleImageUpdated = this.handleImageUpdated.bind(this);
@@ -47,12 +48,13 @@ export default class TopicDescEdit extends React.Component {
componentDidMount() {
const topic = this.props.tinode.getTopic(this.props.topic);
this.previousOnTags = topic.onTagsUpdated;
topic.onTagsUpdated = this.tnNewTags;
}
componentWillUnmount() {
const topic = this.props.tinode.getTopic(this.props.topic);
topic.onTagsUpdated = this.state.previousOnTags;
topic.onTagsUpdated = this.previousOnTags;
}
tnNewTags(tags) {
src/widgets/topic-security.jsx
+15 -53
View File
@@ -74,48 +74,10 @@ const messages = defineMessages({
},
});
class TopicSecurity extends React.Component {
class TopicSecurity extends React.PureComponent {
constructor(props) {
super(props);
const topic = this.props.tinode.getTopic(this.props.topic);
if (!topic) {
return;
}
const defacs = topic.getDefaultAccess() || {};
const acs = topic.getAccessMode();
let modeGiven2 = NO_ACCESS_MODE;
let modeWant2 = NO_ACCESS_MODE;
if (topic.getType() == 'p2p') {
// Fetch the other party in the p2p conversation.
// Topic may not be ready yet, so check if user is found.
const user2 = topic.subscriber(props.topic);
if (user2 && user2.acs) {
modeGiven2 = user2.acs.getGiven();
modeWant2 = user2.acs.getWant();
}
}
this.state = {
owner: acs && acs.isOwner(),
admin: acs && acs.isAdmin(),
sharer: acs && acs.isSharer(),
deleter: acs && acs.isDeleter(),
muted: acs && acs.isMuted(),
groupTopic: topic.isGroupType(),
channel: topic.isChannelType(),
access: acs ? acs.getMode() : undefined,
modeGiven: acs ? acs.getGiven() : undefined,
modeWant: acs ? acs.getWant() : undefined,
modeGiven2: modeGiven2, // P2P topic, the other user mode given
modeWant2: modeWant2, // P2P topic, the other user mode want
auth: defacs ? defacs.auth : null,
anon: defacs ? defacs.anon : null,
};
this.handleDeleteTopic = this.handleDeleteTopic.bind(this);
this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
this.handleLeave = this.handleLeave.bind(this);
@@ -140,8 +102,8 @@ class TopicSecurity extends React.Component {
e.preventDefault();
const {formatMessage} = this.props.intl;
this.props.onShowAlert(
formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages), // title
formatMessage(this.state.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages), // title
formatMessage(this.props.deleter ? messages.delete_messages_warning : messages.clear_messages_warning), // content
(() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
null, // "OK"
true, // Show Reject button
@@ -193,16 +155,16 @@ class TopicSecurity extends React.Component {
return (
<div className="scrollable-panel">
<div className="panel-form-column">
{!this.state.channel ?
{!this.props.channel ?
<a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
<i className="material-icons">delete_outline</i> &nbsp;{
formatMessage(this.state.deleter ? messages.delete_messages : messages.clear_messages)
formatMessage(this.props.deleter ? messages.delete_messages : messages.clear_messages)
}
</a>
:
null
}
{this.state.owner ?
{this.props.owner ?
<a href="#" className="danger flat-button" onClick={this.handleDeleteTopic}>
<i className="material-icons">delete</i> &nbsp;{formatMessage(messages.topic_delete)}
</a>
@@ -211,14 +173,14 @@ class TopicSecurity extends React.Component {
<i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
</a>
}
{!this.state.groupTopic ?
{!this.props.groupTopic ?
<a href="#" className="danger flat-button" onClick={this.handleBlock}>
<i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
</a>
:
null
}
{!this.state.owner ?
{!this.props.owner ?
<a href="#" className="danger flat-button" onClick={this.handleReport}>
<i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
</a>
@@ -228,7 +190,7 @@ class TopicSecurity extends React.Component {
</div>
<div className="hr" />
<div className="panel-form-column">
{this.state.groupTopic ?
{this.props.groupTopic ?
<>
<div className="group">
<label>
@@ -236,7 +198,7 @@ class TopicSecurity extends React.Component {
description="Label for current user permissions" />
</label> <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
{this.state.access}
{this.props.access}
</tt>
</div>
<div className="group">
@@ -248,10 +210,10 @@ class TopicSecurity extends React.Component {
</div>
<div className="quoted">
<div>Auth: <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('auth')}}>{this.state.auth}</tt>
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('auth')}}>{this.props.auth}</tt>
</div>
<div>Anon: <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('anon')}}>{this.state.anon}</tt>
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('anon')}}>{this.props.anon}</tt>
</div>
</div>
</div>
@@ -269,13 +231,13 @@ class TopicSecurity extends React.Component {
<FormattedMessage id="label_you" defaultMessage="You:"
description="Label for the current user" /> <tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('want')}}>
{this.state.access}
{this.props.access}
</tt>
</div>
<div>{this.state.fullName ? this.state.fullName : formatMessage(messages.other_user)}:
<div>{this.props.fullName ? this.props.fullName : formatMessage(messages.other_user)}:
&nbsp;<tt className="clickable"
onClick={(e) => {e.preventDefault(); this.props.onLaunchPermissionsEditor('given')}}>
{this.state.modeGiven2}
{this.props.modeGiven2}
</tt>
</div>
</div>