mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

pass avatar sizes from view to view model rather than repeating there

Browse source 
and risk a mismatch resulting in too large/small image
This commit is contained in:
Bruno Windels 2021-04-28 14:10:54 +02:00
parent b35b6ec496
commit e1d4c75d18
6 changed files with 28 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/domain/avatar.js
View file

@ -47,3 +47,11 @@ function hashCode(str) {
export function getIdentifierColorNumber(id) {
return (hashCode(id) % 8) + 1;
}
export function getAvatarHttpUrl(avatarUrl, cssSize, platform, mediaRepository) {
if (avatarUrl) {
const imageSize = cssSize * platform.devicePixelRatio;
return mediaRepository.mxcUrlThumbnail(avatarUrl, imageSize, imageSize, "crop");
}
return null;
}

10
src/domain/session/leftpanel/BaseTileViewModel.js
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {avatarInitials, getIdentifierColorNumber} from "../../avatar.js";
import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
import {ViewModel} from "../../ViewModel.js";
const KIND_ORDER = ["invite", "room"];
@ -75,12 +75,8 @@ export class BaseTileViewModel extends ViewModel {
return getIdentifierColorNumber(this._avatarSource.id);
}
get avatarUrl() {
if (this._avatarSource.avatarUrl) {
const size = 32 * this.platform.devicePixelRatio;
return this._avatarSource.mediaRepository.mxcUrlThumbnail(this._avatarSource.avatarUrl, size, size, "crop");
}
return null;
avatarUrl(size) {
return getAvatarHttpUrl(this._avatarSource.avatarUrl, size, this.platform, this._avatarSource.mediaRepository);
}
get avatarTitle() {

18
src/domain/session/room/InviteViewModel.js
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {avatarInitials, getIdentifierColorNumber} from "../../avatar.js";
import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
import {ViewModel} from "../../ViewModel.js";
export class InviteViewModel extends ViewModel {
@ -60,12 +60,8 @@ export class InviteViewModel extends ViewModel {
return getIdentifierColorNumber(this._invite.id)
}
get avatarUrl() {
if (this._invite.avatarUrl) {
const size = 128 * this.platform.devicePixelRatio;
return this._mediaRepository.mxcUrlThumbnail(this._invite.avatarUrl, size, size, "crop");
}
return null;
avatarUrl(size) {
return getAvatarHttpUrl(this._invite.avatarUrl, size, this.platform, this._mediaRepository);
}
_createRoomDescription() {
@ -153,12 +149,8 @@ class RoomMemberViewModel {
return getIdentifierColorNumber(this._member.userId);
}
get avatarUrl() {
if (this._member.avatarUrl) {
const size = 24 * this._platform.devicePixelRatio;
return this._mediaRepository.mxcUrlThumbnail(this._member.avatarUrl, size, size, "crop");
}
return null;
avatarUrl(size) {
return getAvatarHttpUrl(this._member.avatarUrl, size, this._platform, this._mediaRepository);
}
get avatarTitle() {

10
src/domain/session/room/RoomViewModel.js
View file

@ -16,7 +16,7 @@ limitations under the License.
*/
import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
import {avatarInitials, getIdentifierColorNumber} from "../../avatar.js";
import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
import {ViewModel} from "../../ViewModel.js";
export class RoomViewModel extends ViewModel {
@ -120,12 +120,8 @@ export class RoomViewModel extends ViewModel {
return getIdentifierColorNumber(this._room.id)
}
get avatarUrl() {
if (this._room.avatarUrl) {
const size = 32 * this.platform.devicePixelRatio;
return this._room.mediaRepository.mxcUrlThumbnail(this._room.avatarUrl, size, size, "crop");
}
return null;
avatarUrl(size) {
return getAvatarHttpUrl(this._room.avatarUrl, size, this.platform, this._room.mediaRepository);
}
get avatarTitle() {

9
src/domain/session/room/timeline/tiles/MessageTile.js
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import {SimpleTile} from "./SimpleTile.js";
import {getIdentifierColorNumber, avatarInitials} from "../../../../avatar.js";
import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar.js";
export class MessageTile extends SimpleTile {
constructor(options) {
@ -50,11 +50,8 @@ export class MessageTile extends SimpleTile {
return getIdentifierColorNumber(this._entry.sender);
}
get avatarUrl() {
if (this._entry.avatarUrl) {
return this._mediaRepository.mxcUrlThumbnail(this._entry.avatarUrl, 30, 30, "crop");
}
return null;
avatarUrl(size) {
return getAvatarHttpUrl(this._entry.avatarUrl, size, this.platform, this._mediaRepository);
}
get avatarLetter() {

12
src/platform/web/ui/avatar.js
View file

@ -37,8 +37,8 @@ export class AvatarView extends BaseUpdateView {
}
_avatarUrlChanged() {
if (this.value.avatarUrl !== this._avatarUrl) {
this._avatarUrl = this.value.avatarUrl;
if (this.value.avatarUrl(this._size) !== this._avatarUrl) {
this._avatarUrl = this.value.avatarUrl(this._size);
return true;
}
return false;
@ -79,7 +79,7 @@ export class AvatarView extends BaseUpdateView {
if (this._avatarUrlChanged()) {
// avatarColorNumber won't change, it's based on room/user id
const bgColorClass = `usercolor${vm.avatarColorNumber}`;
if (vm.avatarUrl) {
if (vm.avatarUrl(this._size)) {
this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild);
this._root.classList.remove(bgColorClass);
} else {
@ -87,7 +87,7 @@ export class AvatarView extends BaseUpdateView {
this._root.classList.add(bgColorClass);
}
}
const hasAvatar = !!vm.avatarUrl;
const hasAvatar = !!vm.avatarUrl(this._size);
if (this._avatarTitleChanged() && hasAvatar) {
const img = this._root.firstChild;
img.setAttribute("title", vm.avatarTitle);
@ -104,7 +104,7 @@ export class AvatarView extends BaseUpdateView {
* @return {Element}
*/
export function renderStaticAvatar(vm, size, extraClasses = undefined) {
const hasAvatar = !!vm.avatarUrl;
const hasAvatar = !!vm.avatarUrl(size);
let avatarClasses = classNames({
avatar: true,
[`size-${size}`]: true,
@ -119,5 +119,5 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
function renderImg(vm, size) {
const sizeStr = size.toString();
return tag.img({src: vm.avatarUrl, width: sizeStr, height: sizeStr, title: vm.avatarTitle});
return tag.img({src: vm.avatarUrl(size), width: sizeStr, height: sizeStr, title: vm.avatarTitle});
}