2016-01-15 15:02:28 +03:00
|
|
|
|
/*
|
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2018-03-12 18:24:32 +03:00
|
|
|
|
Copyright 2018 New Vector Ltd
|
2016-01-15 15:02:28 +03:00
|
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
2017-07-25 17:56:16 +03:00
|
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
|
import PropTypes from 'prop-types';
|
2018-02-06 20:50:53 +03:00
|
|
|
|
import { MatrixClient } from 'matrix-js-sdk';
|
2017-07-25 17:56:16 +03:00
|
|
|
|
import AvatarLogic from '../../../Avatar';
|
2016-08-11 05:25:12 +03:00
|
|
|
|
import sdk from '../../../index';
|
2017-01-25 01:41:52 +03:00
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2016-01-15 15:02:28 +03:00
|
|
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
|
displayName: 'BaseAvatar',
|
|
|
|
|
|
|
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
|
name: PropTypes.string.isRequired, // The name (first initial used as default)
|
|
|
|
|
idName: PropTypes.string, // ID for generating hash colours
|
|
|
|
|
title: PropTypes.string, // onHover title text
|
|
|
|
|
url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
|
|
|
|
|
urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
|
|
|
|
|
width: PropTypes.number,
|
|
|
|
|
height: PropTypes.number,
|
2017-06-01 16:16:25 +03:00
|
|
|
|
// XXX resizeMethod not actually used.
|
2017-12-26 04:03:18 +03:00
|
|
|
|
resizeMethod: PropTypes.string,
|
|
|
|
|
defaultToInitialLetter: PropTypes.bool, // true to add default url
|
2016-01-15 15:02:28 +03:00
|
|
|
|
},
|
|
|
|
|
|
2018-02-06 20:50:53 +03:00
|
|
|
|
contextTypes: {
|
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-15 15:02:28 +03:00
|
|
|
|
getDefaultProps: function() {
|
|
|
|
|
return {
|
|
|
|
|
width: 40,
|
|
|
|
|
height: 40,
|
|
|
|
|
resizeMethod: 'crop',
|
2017-10-11 19:56:17 +03:00
|
|
|
|
defaultToInitialLetter: true,
|
2017-01-20 17:22:27 +03:00
|
|
|
|
};
|
2016-01-15 15:02:28 +03:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getInitialState: function() {
|
2016-01-15 20:05:05 +03:00
|
|
|
|
return this._getState(this.props);
|
|
|
|
|
},
|
|
|
|
|
|
2018-02-06 20:50:53 +03:00
|
|
|
|
componentWillMount() {
|
|
|
|
|
this.unmounted = false;
|
|
|
|
|
this.context.matrixClient.on('sync', this.onClientSync);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
this.unmounted = true;
|
|
|
|
|
this.context.matrixClient.removeListener('sync', this.onClientSync);
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
|
componentWillReceiveProps: function(nextProps) {
|
|
|
|
|
// work out if we need to call setState (if the image URLs array has changed)
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const newState = this._getState(nextProps);
|
|
|
|
|
const newImageUrls = newState.imageUrls;
|
|
|
|
|
const oldImageUrls = this.state.imageUrls;
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (newImageUrls.length !== oldImageUrls.length) {
|
|
|
|
|
this.setState(newState); // detected a new entry
|
2017-10-11 19:56:17 +03:00
|
|
|
|
} else {
|
2016-01-15 20:05:05 +03:00
|
|
|
|
// check each one to see if they are the same
|
2017-10-11 19:56:17 +03:00
|
|
|
|
for (let i = 0; i < newImageUrls.length; i++) {
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (oldImageUrls[i] !== newImageUrls[i]) {
|
|
|
|
|
this.setState(newState); // detected a diff
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2018-03-12 18:23:22 +03:00
|
|
|
|
onClientSync: function(syncState, prevState) {
|
2018-02-06 20:50:53 +03:00
|
|
|
|
if (this.unmounted) return;
|
|
|
|
|
|
|
|
|
|
// Consider the client reconnected if there is no error with syncing.
|
2018-08-30 16:39:48 +03:00
|
|
|
|
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
|
2018-02-06 20:50:53 +03:00
|
|
|
|
const reconnected = syncState !== "ERROR" && prevState !== syncState;
|
|
|
|
|
if (reconnected &&
|
|
|
|
|
// Did we fall back?
|
|
|
|
|
this.state.urlsIndex > 0
|
|
|
|
|
) {
|
|
|
|
|
// Start from the highest priority URL again
|
|
|
|
|
this.setState({
|
|
|
|
|
urlsIndex: 0,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
|
_getState: function(props) {
|
|
|
|
|
// work out the full set of urls to try to load. This is formed like so:
|
|
|
|
|
// imageUrls: [ props.url, props.urls, default image ]
|
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const urls = props.urls || [];
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (props.url) {
|
|
|
|
|
urls.unshift(props.url); // put in urls[0]
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
|
let defaultImageUrl = null;
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (props.defaultToInitialLetter) {
|
2016-01-15 15:02:28 +03:00
|
|
|
|
defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
|
2017-10-11 19:56:17 +03:00
|
|
|
|
props.idName || props.name,
|
2016-01-15 15:02:28 +03:00
|
|
|
|
);
|
2016-01-15 20:05:05 +03:00
|
|
|
|
urls.push(defaultImageUrl); // lowest priority
|
2016-01-15 15:02:28 +03:00
|
|
|
|
}
|
|
|
|
|
return {
|
2016-01-15 20:05:05 +03:00
|
|
|
|
imageUrls: urls,
|
2016-01-15 15:02:28 +03:00
|
|
|
|
defaultImageUrl: defaultImageUrl,
|
2017-10-11 19:56:17 +03:00
|
|
|
|
urlsIndex: 0,
|
2016-01-15 15:02:28 +03:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
|
onError: function(ev) {
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const nextIndex = this.state.urlsIndex + 1;
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (nextIndex < this.state.imageUrls.length) {
|
|
|
|
|
// try the next one
|
2016-01-15 15:02:28 +03:00
|
|
|
|
this.setState({
|
2017-10-11 19:56:17 +03:00
|
|
|
|
urlsIndex: nextIndex,
|
2016-01-15 15:02:28 +03:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-04-13 12:19:16 +03:00
|
|
|
|
/**
|
|
|
|
|
* returns the first (non-sigil) character of 'name',
|
|
|
|
|
* converted to uppercase
|
|
|
|
|
*/
|
|
|
|
|
_getInitialLetter: function(name) {
|
|
|
|
|
if (name.length < 1) {
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
|
let idx = 0;
|
|
|
|
|
const initial = name[0];
|
2017-10-19 17:47:52 +03:00
|
|
|
|
if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
|
2016-04-13 12:19:16 +03:00
|
|
|
|
idx++;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// string.codePointAt(0) would do this, but that isn't supported by
|
|
|
|
|
// some browsers (notably PhantomJS).
|
2017-10-11 19:56:17 +03:00
|
|
|
|
let chars = 1;
|
|
|
|
|
const first = name.charCodeAt(idx);
|
2016-04-13 12:19:16 +03:00
|
|
|
|
|
|
|
|
|
// check if it’s the start of a surrogate pair
|
|
|
|
|
if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const second = name.charCodeAt(idx+1);
|
2016-04-13 12:19:16 +03:00
|
|
|
|
if (second >= 0xDC00 && second <= 0xDFFF) {
|
|
|
|
|
chars++;
|
|
|
|
|
}
|
2016-01-15 15:02:28 +03:00
|
|
|
|
}
|
2016-04-13 12:19:16 +03:00
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const firstChar = name.substring(idx, idx+chars);
|
2016-04-13 12:19:16 +03:00
|
|
|
|
return firstChar.toUpperCase();
|
2016-01-15 15:02:28 +03:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render: function() {
|
2016-08-11 05:25:12 +03:00
|
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
2017-10-11 19:56:17 +03:00
|
|
|
|
const imageUrl = this.state.imageUrls[this.state.urlsIndex];
|
2016-01-15 20:05:05 +03:00
|
|
|
|
|
2016-07-27 17:41:24 +03:00
|
|
|
|
const {
|
|
|
|
|
name, idName, title, url, urls, width, height, resizeMethod,
|
2017-01-06 23:01:37 +03:00
|
|
|
|
defaultToInitialLetter, onClick,
|
2016-07-27 17:41:24 +03:00
|
|
|
|
...otherProps
|
|
|
|
|
} = this.props;
|
2016-07-27 13:38:04 +03:00
|
|
|
|
|
2016-01-15 20:05:05 +03:00
|
|
|
|
if (imageUrl === this.state.defaultImageUrl) {
|
2016-08-09 22:01:51 +03:00
|
|
|
|
const initialLetter = this._getInitialLetter(name);
|
2017-02-02 21:47:24 +03:00
|
|
|
|
const textNode = (
|
|
|
|
|
<EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
|
|
|
|
|
style={{ fontSize: (width * 0.65) + "px",
|
|
|
|
|
width: width + "px",
|
|
|
|
|
lineHeight: height + "px" }}
|
|
|
|
|
>
|
2017-10-11 19:56:17 +03:00
|
|
|
|
{ initialLetter }
|
2017-02-02 21:47:24 +03:00
|
|
|
|
</EmojiText>
|
|
|
|
|
);
|
|
|
|
|
const imgNode = (
|
|
|
|
|
<img className="mx_BaseAvatar_image" src={imageUrl}
|
2017-02-02 21:41:50 +03:00
|
|
|
|
alt="" title={title} onError={this.onError}
|
2017-02-02 21:47:24 +03:00
|
|
|
|
width={width} height={height} />
|
|
|
|
|
);
|
2017-02-02 21:29:33 +03:00
|
|
|
|
if (onClick != null) {
|
|
|
|
|
return (
|
|
|
|
|
<AccessibleButton element='span' className="mx_BaseAvatar"
|
|
|
|
|
onClick={onClick} {...otherProps}
|
|
|
|
|
>
|
2017-10-11 19:56:17 +03:00
|
|
|
|
{ textNode }
|
|
|
|
|
{ imgNode }
|
2017-02-02 21:29:33 +03:00
|
|
|
|
</AccessibleButton>
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<span className="mx_BaseAvatar" {...otherProps}>
|
2017-10-11 19:56:17 +03:00
|
|
|
|
{ textNode }
|
|
|
|
|
{ imgNode }
|
2017-02-02 21:29:33 +03:00
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
}
|
2016-01-15 15:02:28 +03:00
|
|
|
|
}
|
2017-01-06 23:01:37 +03:00
|
|
|
|
if (onClick != null) {
|
|
|
|
|
return (
|
2017-02-02 20:36:26 +03:00
|
|
|
|
<AccessibleButton className="mx_BaseAvatar mx_BaseAvatar_image"
|
|
|
|
|
element='img'
|
|
|
|
|
src={imageUrl}
|
|
|
|
|
onClick={onClick}
|
|
|
|
|
onError={this.onError}
|
|
|
|
|
width={width} height={height}
|
|
|
|
|
title={title} alt=""
|
|
|
|
|
{...otherProps} />
|
2017-01-06 23:01:37 +03:00
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
|
|
|
|
|
onError={this.onError}
|
|
|
|
|
width={width} height={height}
|
|
|
|
|
title={title} alt=""
|
|
|
|
|
{...otherProps} />
|
|
|
|
|
);
|
|
|
|
|
}
|
2017-10-11 19:56:17 +03:00
|
|
|
|
},
|
2016-01-15 15:02:28 +03:00
|
|
|
|
});
|