Use call link color in create, update, show
This commit is contained in:
parent
f8af3fcdf6
commit
932e4c3343
8 changed files with 33 additions and 20 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
20
ts/util/getColorForCallLink.ts
Normal file
20
ts/util/getColorForCallLink.ts
Normal 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];
|
||||
}
|
|
@ -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];
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue