mattermost-mobile/app/products/calls/utils.ts
Mattermost Build a68b1560a5
MM-51228 - Calls: UX redesign & theming support (#7283) (#7328)
* UX redesign

* fix call bar profile on Android

* update @mattermost/calls; use common color utils

* collapseIcon and time colour fixes (not correct yet on Onyx or Quartz)

* fix time and collapseIcon colors; fix unavailable wrapper

* center users, scroll when full; statusBar bg and styling

* better spacing; better screenshare; no reaction bar when no reactions

* remove margins from bottom; speaker/react buttonOn colour is now callsBg

* update calls-common; update raised hand button colors

* i18n

* cleaning up style sheets

* fix package-lock

* fix vertical alignment of phone icon

* add a noBorder prop to UserAvatarsStack

* typography, icon sizing, spacing changes

* add rounded header; UI improvements; refactor observables

* updating phone icon, join call margins

* join call text; color theming

* remove unneeded container

* phone-outline -> phone

* split CallsChannelState into boolean components

* use sidebar bg to generate calls bg

* fix hand icon, button texts

(cherry picked from commit f8f6839945)

Co-authored-by: Christopher Poile <cpoile@gmail.com>
2023-05-04 14:23:26 -04:00

153 lines
4.8 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {makeCallsBaseAndBadgeRGB, rgbToCSS} from '@mattermost/calls/lib/utils';
import {Alert} from 'react-native';
import {Post} from '@constants';
import Calls from '@constants/calls';
import {isMinimumServerVersion} from '@utils/helpers';
import {displayUsername} from '@utils/user';
import type {CallParticipant, CallsTheme} from '@calls/types/calls';
import type {CallsConfig} from '@mattermost/calls/lib/types';
import type PostModel from '@typings/database/models/servers/post';
import type {IntlShape} from 'react-intl';
import type {RTCIceServer} from 'react-native-webrtc';
export function sortParticipants(locale: string, teammateNameDisplay: string, participants?: Dictionary<CallParticipant>, presenterID?: string): CallParticipant[] {
if (!participants) {
return [];
}
const users = Object.values(participants);
return users.sort(sortByName(locale, teammateNameDisplay)).sort(sortByState(presenterID));
}
const sortByName = (locale: string, teammateNameDisplay: string) => {
return (a: CallParticipant, b: CallParticipant) => {
const nameA = displayUsername(a.userModel, locale, teammateNameDisplay);
const nameB = displayUsername(b.userModel, locale, teammateNameDisplay);
return nameA.localeCompare(nameB);
};
};
const sortByState = (presenterID?: string) => {
return (a: CallParticipant, b: CallParticipant) => {
if (a.id === presenterID) {
return -1;
} else if (b.id === presenterID) {
return 1;
}
if (a.raisedHand && !b.raisedHand) {
return -1;
} else if (b.raisedHand && !a.raisedHand) {
return 1;
} else if (a.raisedHand && b.raisedHand) {
return a.raisedHand - b.raisedHand;
}
if (!a.muted && b.muted) {
return -1;
} else if (!b.muted && a.muted) {
return 1;
}
return 0;
};
};
export function getHandsRaised(participants: Dictionary<CallParticipant>) {
return Object.values(participants).filter((p) => p.raisedHand);
}
export function getHandsRaisedNames(participants: CallParticipant[], currentUserId: string, locale: string, teammateNameDisplay: string, intl: IntlShape) {
return participants.sort((a, b) => a.raisedHand - b.raisedHand).map((p) => {
if (p.id === currentUserId) {
return intl.formatMessage({id: 'mobile.calls_you_2', defaultMessage: 'You'});
}
return displayUsername(p.userModel, locale, teammateNameDisplay);
});
}
export function isSupportedServerCalls(serverVersion?: string) {
if (serverVersion) {
return isMinimumServerVersion(
serverVersion,
Calls.RequiredServer.MAJOR_VERSION,
Calls.RequiredServer.MIN_VERSION,
Calls.RequiredServer.PATCH_VERSION,
);
}
return false;
}
export function isCallsCustomMessage(post: PostModel | Post): boolean {
return Boolean(post.type && post.type === Post.POST_TYPES.CUSTOM_CALLS);
}
export function idsAreEqual(a: string[], b: string[]) {
if (a.length !== b.length) {
return false;
}
// We can assume ids are unique
// Doing a quick search indicated objects are tuned better than Map or Set
const obj = a.reduce((prev, cur) => {
prev[cur] = true;
return prev;
}, {} as Record<string, boolean>);
for (let i = 0; i < b.length; i++) {
if (!obj.hasOwnProperty(b[i])) {
return false;
}
}
return true;
}
export function errorAlert(error: string, intl: IntlShape) {
Alert.alert(
intl.formatMessage({
id: 'mobile.calls_error_title',
defaultMessage: 'Error',
}),
intl.formatMessage({
id: 'mobile.calls_error_message',
defaultMessage: 'Error: {error}',
}, {error}),
);
}
export function getICEServersConfigs(config: CallsConfig): RTCIceServer[] {
// if ICEServersConfigs is set, we can trust this to be complete and
// coming from an updated API.
if (config.ICEServersConfigs && config.ICEServersConfigs.length > 0) {
return config.ICEServersConfigs;
}
// otherwise we revert to using the now deprecated field.
if (config.ICEServers && config.ICEServers.length > 0) {
return [
{
urls: config.ICEServers,
},
];
}
return [];
}
export function makeCallsTheme(theme: Theme): CallsTheme {
const {baseColorRGB, badgeBgRGB} = makeCallsBaseAndBadgeRGB(theme.sidebarBg);
const newTheme = {...theme} as CallsTheme;
newTheme.callsBg = rgbToCSS(baseColorRGB);
newTheme.callsBgRgb = `${baseColorRGB.r},${baseColorRGB.g},${baseColorRGB.b}`;
newTheme.callsBadgeBg = rgbToCSS(badgeBgRGB);
return newTheme;
}