2015-11-26 13:45:04 +00:00
|
|
|
|
/*
|
2016-01-07 04:06:39 +00:00
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-26 13:45:04 +00: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.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
'use strict';
|
2019-12-20 21:13:46 +00:00
|
|
|
|
import {MatrixClientPeg} from './MatrixClientPeg';
|
2019-05-20 13:33:26 +00:00
|
|
|
|
import DMRoomMap from './utils/DMRoomMap';
|
2020-01-03 19:29:22 +00:00
|
|
|
|
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
|
2015-11-26 13:45:04 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
export function avatarUrlForMember(member, width, height, resizeMethod) {
|
2020-01-13 20:28:33 +00:00
|
|
|
|
let url;
|
2020-01-13 18:19:41 +00:00
|
|
|
|
if (member && member.getAvatarUrl) {
|
|
|
|
|
url = member.getAvatarUrl(
|
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
2017-04-27 10:38:03 +00:00
|
|
|
|
Math.floor(width * window.devicePixelRatio),
|
|
|
|
|
Math.floor(height * window.devicePixelRatio),
|
2017-07-01 13:13:32 +00:00
|
|
|
|
resizeMethod,
|
2020-01-13 18:19:41 +00:00
|
|
|
|
false,
|
|
|
|
|
false,
|
2016-01-15 17:31:32 +00:00
|
|
|
|
);
|
2020-01-13 18:19:41 +00:00
|
|
|
|
}
|
2019-12-20 00:45:24 +00:00
|
|
|
|
if (!url) {
|
|
|
|
|
// member can be null here currently since on invites, the JS SDK
|
|
|
|
|
// does not have enough info to build a RoomMember object for
|
|
|
|
|
// the inviter.
|
2020-01-13 20:28:33 +00:00
|
|
|
|
url = defaultAvatarUrlForString(member ? member.userId : '');
|
2019-12-20 00:45:24 +00:00
|
|
|
|
}
|
|
|
|
|
return url;
|
|
|
|
|
}
|
2015-11-26 13:45:04 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
export function avatarUrlForUser(user, width, height, resizeMethod) {
|
2020-01-03 19:29:22 +00:00
|
|
|
|
const url = getHttpUriForMxc(
|
2019-12-20 00:45:24 +00:00
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
|
|
|
|
|
Math.floor(width * window.devicePixelRatio),
|
|
|
|
|
Math.floor(height * window.devicePixelRatio),
|
|
|
|
|
resizeMethod,
|
|
|
|
|
);
|
|
|
|
|
if (!url || url.length === 0) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
return url;
|
|
|
|
|
}
|
2016-01-15 17:31:32 +00:00
|
|
|
|
|
2020-04-27 17:35:38 +00:00
|
|
|
|
function urlForColor(color) {
|
|
|
|
|
const size = 40;
|
|
|
|
|
const canvas = document.createElement("canvas");
|
|
|
|
|
canvas.width = size;
|
|
|
|
|
canvas.height = size;
|
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
ctx.fillStyle = color;
|
|
|
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
|
return canvas.toDataURL();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// XXX: Ideally we'd clear this cache when the theme changes
|
|
|
|
|
// but since this function is at global scope, it's a bit
|
|
|
|
|
// hard to install a listener here, even if there were a clear event to listen to
|
|
|
|
|
const colorToDataURLCache = new Map();
|
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
export function defaultAvatarUrlForString(s) {
|
2020-04-27 17:35:38 +00:00
|
|
|
|
const defaultColors = ['#03b381', '#368bd6', '#ac3ba8'];
|
2019-12-20 00:45:24 +00:00
|
|
|
|
let total = 0;
|
|
|
|
|
for (let i = 0; i < s.length; ++i) {
|
|
|
|
|
total += s.charCodeAt(i);
|
|
|
|
|
}
|
2020-04-27 17:35:38 +00:00
|
|
|
|
const colorIndex = total % defaultColors.length;
|
|
|
|
|
// overwritten color value in custom themes
|
|
|
|
|
const color = defaultColors[colorIndex];
|
|
|
|
|
let dataUrl = colorToDataURLCache.get(color);
|
|
|
|
|
if (!dataUrl) {
|
|
|
|
|
dataUrl = urlForColor(color);
|
|
|
|
|
colorToDataURLCache.set(color, dataUrl);
|
|
|
|
|
}
|
|
|
|
|
return dataUrl;
|
2019-12-20 00:45:24 +00:00
|
|
|
|
}
|
2019-05-20 12:20:36 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
/**
|
|
|
|
|
* returns the first (non-sigil) character of 'name',
|
|
|
|
|
* converted to uppercase
|
|
|
|
|
* @param {string} name
|
|
|
|
|
* @return {string} the first letter
|
|
|
|
|
*/
|
|
|
|
|
export function getInitialLetter(name) {
|
|
|
|
|
if (!name) {
|
|
|
|
|
// XXX: We should find out what causes the name to sometimes be falsy.
|
|
|
|
|
console.trace("`name` argument to `getInitialLetter` not supplied");
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
if (name.length < 1) {
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
2019-05-20 12:20:36 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
let idx = 0;
|
|
|
|
|
const initial = name[0];
|
|
|
|
|
if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
|
|
|
|
|
idx++;
|
|
|
|
|
}
|
2019-05-20 12:20:36 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
// string.codePointAt(0) would do this, but that isn't supported by
|
|
|
|
|
// some browsers (notably PhantomJS).
|
|
|
|
|
let chars = 1;
|
|
|
|
|
const first = name.charCodeAt(idx);
|
2019-05-20 12:20:36 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
// check if it’s the start of a surrogate pair
|
|
|
|
|
if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
|
|
|
|
|
const second = name.charCodeAt(idx+1);
|
|
|
|
|
if (second >= 0xDC00 && second <= 0xDFFF) {
|
|
|
|
|
chars++;
|
2019-05-20 12:20:36 +00:00
|
|
|
|
}
|
2019-12-20 00:45:24 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const firstChar = name.substring(idx, idx+chars);
|
|
|
|
|
return firstChar.toUpperCase();
|
|
|
|
|
}
|
2019-05-20 12:20:36 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
export function avatarUrlForRoom(room, width, height, resizeMethod) {
|
2020-02-21 14:14:24 +00:00
|
|
|
|
if (!room) return null; // null-guard
|
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
const explicitRoomAvatar = room.getAvatarUrl(
|
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
resizeMethod,
|
|
|
|
|
false,
|
|
|
|
|
);
|
|
|
|
|
if (explicitRoomAvatar) {
|
|
|
|
|
return explicitRoomAvatar;
|
|
|
|
|
}
|
2019-05-20 13:33:26 +00:00
|
|
|
|
|
2019-12-20 00:45:24 +00:00
|
|
|
|
let otherMember = null;
|
|
|
|
|
const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
|
|
|
|
|
if (otherUserId) {
|
|
|
|
|
otherMember = room.getMember(otherUserId);
|
|
|
|
|
} else {
|
|
|
|
|
// if the room is not marked as a 1:1, but only has max 2 members
|
|
|
|
|
// then still try to show any avatar (pref. other member)
|
|
|
|
|
otherMember = room.getAvatarFallbackMember();
|
|
|
|
|
}
|
|
|
|
|
if (otherMember) {
|
|
|
|
|
return otherMember.getAvatarUrl(
|
2019-05-20 13:33:26 +00:00
|
|
|
|
MatrixClientPeg.get().getHomeserverUrl(),
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
resizeMethod,
|
|
|
|
|
false,
|
|
|
|
|
);
|
2019-12-20 00:45:24 +00:00
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|