Use call link color in create, update, show

This commit is contained in:
ayumi-signal 2024-06-26 10:35:48 -07:00 committed by GitHub
parent f8af3fcdf6
commit 932e4c3343
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 33 additions and 20 deletions

View file

@ -8,6 +8,7 @@ import { Button, ButtonVariant } from './Button';
import { Avatar, AvatarSize } from './Avatar';
import { Input } from './Input';
import type { CallLinkType } from '../types/CallLink';
import { getColorForCallLink } from '../util/getColorForCallLink';
export type CallLinkAddNameModalProps = Readonly<{
i18n: LocalizerType;
@ -68,6 +69,7 @@ export function CallLinkAddNameModal({
<Avatar
i18n={i18n}
badge={undefined}
color={getColorForCallLink(callLink.rootKey)}
conversationType="callLink"
size={AvatarSize.SIXTY_FOUR}
acceptedMessageRequest

View file

@ -16,6 +16,7 @@ import { drop } from '../util/drop';
import { Avatar, AvatarSize } from './Avatar';
import { Button, ButtonSize, ButtonVariant } from './Button';
import { copyCallLink } from '../util/copyLinksWithToast';
import { getColorForCallLink } from '../util/getColorForCallLink';
function toUrlWithoutProtocol(url: URL): string {
return `${url.hostname}${url.pathname}${url.search}${url.hash}`;
@ -46,6 +47,7 @@ export function CallLinkDetails({
className="CallLinkDetails__HeaderAvatar"
i18n={i18n}
badge={undefined}
color={getColorForCallLink(callLink.rootKey)}
conversationType="callLink"
size={AvatarSize.SIXTY_FOUR}
acceptedMessageRequest

View file

@ -15,6 +15,7 @@ import { Select } from './Select';
import { linkCallRoute } from '../util/signalRoutes';
import { Button, ButtonSize, ButtonVariant } from './Button';
import { Avatar, AvatarSize } from './Avatar';
import { getColorForCallLink } from '../util/getColorForCallLink';
const CallLinkEditModalRowIconClasses = {
Edit: 'CallLinkEditModal__RowIcon--Edit',
@ -113,6 +114,7 @@ export function CallLinkEditModal({
<Avatar
i18n={i18n}
badge={undefined}
color={getColorForCallLink(callLink.rootKey)}
conversationType="callLink"
size={AvatarSize.SIXTY_FOUR}
acceptedMessageRequest

View file

@ -16,7 +16,7 @@ import type { ConversationType } from '../state/ducks/conversations';
import { ModalHost } from './ModalHost';
import { isInSystemContacts } from '../util/isInSystemContacts';
import type { RemoveClientType } from '../state/ducks/calling';
import { AvatarColors } from '../types/Colors';
import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
import { Button } from './Button';
import { Modal } from './Modal';
import { Theme } from '../util/theme';
@ -72,7 +72,7 @@ function UnknownContacts({
}) => {
const colorIndex = participant.serviceId
? (parseInt(participant.serviceId.slice(-4), 16) || 0) %
AvatarColors.length
AVATAR_COLOR_COUNT
: 0;
return (
<Avatar

View file

@ -90,6 +90,8 @@ export const AvatarColorMap = new Map([
export const AvatarColors = Array.from(AvatarColorMap.keys());
export const AVATAR_COLOR_COUNT = AvatarColors.length;
export const ConversationColors = [
'ultramarine',
'crimson',

View file

@ -30,7 +30,7 @@ import {
} from '../types/CallLink';
import type { LocalizerType } from '../types/Util';
import { isTestOrMockEnvironment } from '../environment';
import { AvatarColors } from '../types/Colors';
import { getColorForCallLink } from './getColorForCallLink';
export const CALL_LINK_DEFAULT_STATE = {
name: '',
@ -105,21 +105,6 @@ export function callLinkToConversation(
badges: [],
};
}
// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L8
const BASE_16_CONSONANT_ALPHABET = 'bcdfghkmnpqrstxz';
// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L127-L139
export function getColorForCallLink(rootKey: string): string {
const rootKeyStart = rootKey.slice(0, 2);
const upper = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[0]) || 0 * 16;
const lower = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[1]) || 0;
const firstByte = upper + lower;
const index = firstByte % 12;
return AvatarColors[index];
}
export function getPlaceholderCallLinkConversation(
roomId: string,

View file

@ -0,0 +1,20 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L8
const BASE_16_CONSONANT_ALPHABET = 'bcdfghkmnpqrstxz';
// See https://github.com/signalapp/ringrtc/blob/49b4b8a16f997c7fa9a429e96aa83f80b2065c63/src/rust/src/lite/call_links/base16.rs#L127-L139
export function getColorForCallLink(rootKey: string): string {
const rootKeyStart = rootKey.slice(0, 2);
const upper = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[0]) || 0 * 16;
const lower = BASE_16_CONSONANT_ALPHABET.indexOf(rootKeyStart[1]) || 0;
const firstByte = upper + lower;
const index = firstByte % AVATAR_COLOR_COUNT;
return AvatarColors[index];
}

View file

@ -3,7 +3,7 @@
import { sample } from 'lodash';
import { AvatarColors } from '../types/Colors';
import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
import type { ConversationAttributesType } from '../model-types';
import type { AvatarColorType, CustomColorType } from '../types/Colors';
import type { ServiceIdString } from '../types/ServiceId';
@ -22,7 +22,7 @@ export function migrateColor(
return sample(AvatarColors) || AvatarColors[0];
}
const index = (parseInt(serviceId.slice(-4), 16) || 0) % AvatarColors.length;
const index = (parseInt(serviceId.slice(-4), 16) || 0) % AVATAR_COLOR_COUNT;
return AvatarColors[index];
}