Call Reactions fixes and emoji consistency

This commit is contained in:
ayumi-signal 2023-11-17 12:40:41 -08:00 committed by GitHub
parent b7ab1d7207
commit 32e5ac128b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 48 additions and 48 deletions

View file

@ -135,3 +135,7 @@
margin-bottom: auto;
max-width: calc(var(--window-width) / 2 + 20px);
}
.CallControls__MoreOptionsButtonContainer--menu-shown .module-tooltip {
opacity: 0;
}

View file

@ -8,10 +8,6 @@
width: 100%;
}
.module-ongoing-call__container--controls-faded-out .CallingReactionsToasts {
inset-block-end: 16px;
}
// Normally the newest toasts are appended on top, like this:
// | Second |
// | First | -> | First |

View file

@ -22,10 +22,8 @@ import { generateAci } from '../types/ServiceId';
import type { ConversationType } from '../state/ducks/conversations';
import { AvatarColors } from '../types/Colors';
import type { PropsType } from './CallScreen';
import {
CALL_REACTION_EMOJI,
CallScreen as UnwrappedCallScreen,
} from './CallScreen';
import { CallScreen as UnwrappedCallScreen } from './CallScreen';
import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../reactions/constants';
import { setupI18n } from '../util/setupI18n';
import { missingCaseError } from '../util/missingCaseError';
import {
@ -612,7 +610,10 @@ export function GroupCallReactionsBurstInOrder(): JSX.Element {
const remoteParticipants = allRemoteParticipants.slice(0, 5);
const reactions = remoteParticipants.map((participant, i) => {
const { demuxId } = participant;
const value = CALL_REACTION_EMOJI[i % CALL_REACTION_EMOJI.length];
const value =
DEFAULT_PREFERRED_REACTION_EMOJI[
i % DEFAULT_PREFERRED_REACTION_EMOJI.length
];
return { timestamp, demuxId, value };
});
const [props] = React.useState(
@ -651,7 +652,7 @@ function useReactionsEmitter(
{
timestamp: timeNow,
demuxId,
value: sample(CALL_REACTION_EMOJI) as string,
value: sample(DEFAULT_PREFERRED_REACTION_EMOJI) as string,
},
];

View file

@ -117,15 +117,6 @@ export const isInSpeakerView = (
);
};
export const CALL_REACTION_EMOJI = [
'❤️',
'👍',
'👋',
'👏',
'🎉',
'😂',
] as const;
const REACTIONS_TOASTS_TRANSITION_FROM = {
opacity: 0,
};
@ -534,7 +525,8 @@ export function CallScreen({
{
'module-ongoing-call__container--controls-faded-out':
controlsFadedOut,
}
},
'dark-theme'
)}
onFocus={() => {
setShowControls(true);
@ -643,8 +635,6 @@ export function CallScreen({
value: emoji,
});
},
isCustomizePreferredReactionsHidden: true,
preferredReactionEmoji: CALL_REACTION_EMOJI,
renderEmojiPicker,
})}
</div>
@ -678,7 +668,13 @@ export function CallScreen({
/>
{isMoreOptionsButtonEnabled && (
<div
className="CallControls__MoreOptionsButtonContainer"
className={classNames(
'CallControls__MoreOptionsButtonContainer',
{
'CallControls__MoreOptionsButtonContainer--menu-shown':
showMoreOptions,
}
)}
ref={moreOptionsButtonRef}
>
<CallingButton

View file

@ -232,7 +232,7 @@ export function CallingLobby({
return (
<FocusTrap>
<div className="module-calling__container">
<div className="module-calling__container dark-theme">
{shouldShowLocalVideo ? (
<video
className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-on"

View file

@ -7,6 +7,7 @@ import React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta } from '@storybook/react';
import { setupI18n } from '../util/setupI18n';
import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../reactions/constants';
import enMessages from '../../_locales/en/messages.json';
import type { PropsType } from './CustomizingPreferredReactionsModal';
@ -29,7 +30,7 @@ const defaultProps: ComponentProps<typeof CustomizingPreferredReactionsModal> =
i18n,
isSaving: false,
onSetSkinTone: action('onSetSkinTone'),
originalPreferredReactions: ['❤️', '👍', '👎', '😂', '😮', '😢'],
originalPreferredReactions: DEFAULT_PREFERRED_REACTION_EMOJI,
recentEmojis: ['cake'],
replaceSelectedDraftEmoji: action('replaceSelectedDraftEmoji'),
resetDraftEmoji: action('resetDraftEmoji'),

View file

@ -15,6 +15,7 @@ import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
import { setupI18n } from '../util/setupI18n';
import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../reactions/constants';
const i18n = setupI18n('en', enMessages);
@ -48,7 +49,7 @@ export default {
onTextTooLong: action('onTextTooLong'),
onUseEmoji: action('onUseEmoji'),
onMediaPlaybackStart: action('onMediaPlaybackStart'),
preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
preferredReactionEmoji: DEFAULT_PREFERRED_REACTION_EMOJI,
queueStoryDownload: action('queueStoryDownload'),
renderEmojiPicker: () => <>EmojiPicker</>,
retryMessageSend: action('retryMessageSend'),

View file

@ -15,6 +15,7 @@ import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../util/setupI18n';
import { StoryViewTargetType } from '../types/Stories';
import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../reactions/constants';
const i18n = setupI18n('en', enMessages);
@ -43,7 +44,7 @@ export default {
onReply: action('onReply'),
onTextTooLong: action('onTextTooLong'),
onUseEmoji: action('onUseEmoji'),
preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
preferredReactionEmoji: DEFAULT_PREFERRED_REACTION_EMOJI,
renderEmojiPicker: () => <>EmojiPicker</>,
replies: [],
views: [],

View file

@ -9,11 +9,10 @@ import enMessages from '../../../_locales/en/messages.json';
import type { Props as ReactionPickerProps } from './ReactionPicker';
import { ReactionPicker } from './ReactionPicker';
import { EmojiPicker } from '../emoji/EmojiPicker';
import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../../reactions/constants';
const i18n = setupI18n('en', enMessages);
const preferredReactionEmoji = ['❤️', '👍', '👎', '😂', '😮', '😢'];
const renderEmojiPicker: ReactionPickerProps['renderEmojiPicker'] = ({
onClose,
onPickEmoji,
@ -43,7 +42,7 @@ export function Base(): JSX.Element {
openCustomizePreferredReactionsModal={action(
'openCustomizePreferredReactionsModal'
)}
preferredReactionEmoji={preferredReactionEmoji}
preferredReactionEmoji={DEFAULT_PREFERRED_REACTION_EMOJI}
renderEmojiPicker={renderEmojiPicker}
/>
);
@ -62,7 +61,7 @@ export function SelectedReaction(): JSX.Element {
openCustomizePreferredReactionsModal={action(
'openCustomizePreferredReactionsModal'
)}
preferredReactionEmoji={preferredReactionEmoji}
preferredReactionEmoji={DEFAULT_PREFERRED_REACTION_EMOJI}
renderEmojiPicker={renderEmojiPicker}
/>
</div>

View file

@ -27,7 +27,6 @@ export type OwnProps = {
onClose?: () => unknown;
onPick: (emoji: string) => unknown;
onSetSkinTone: (tone: number) => unknown;
isCustomizePreferredReactionsHidden?: boolean;
openCustomizePreferredReactionsModal?: () => unknown;
preferredReactionEmoji: ReadonlyArray<string>;
renderEmojiPicker: (props: RenderEmojiPickerProps) => React.ReactElement;
@ -42,7 +41,6 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
onClose,
onPick,
onSetSkinTone,
isCustomizePreferredReactionsHidden,
openCustomizePreferredReactionsModal,
preferredReactionEmoji,
renderEmojiPicker,
@ -80,11 +78,8 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
const [focusRef] = useDelayedRestoreFocus();
if (pickingOther) {
const onClickSettings = isCustomizePreferredReactionsHidden
? undefined
: openCustomizePreferredReactionsModal;
return renderEmojiPicker({
onClickSettings,
onClickSettings: openCustomizePreferredReactionsModal,
onClose,
onPickEmoji,
onSetSkinTone,

View file

@ -9,3 +9,15 @@ export const DEFAULT_PREFERRED_REACTION_EMOJI_SHORT_NAMES = [
'open_mouth',
'cry',
];
// This is used in storybook for simplicity. Normally we prefer to convert emoji short
// names to actual emoji using convertShortNameToData from components/emoji/lib
// because it takes skin tone into consideration.
export const DEFAULT_PREFERRED_REACTION_EMOJI = [
'❤️',
'👍',
'👎',
'😂',
'😮',
'😢',
];

View file

@ -22,15 +22,12 @@ type ExternalProps = Omit<
| 'preferredReactionEmoji'
| 'selectionStyle'
| 'skinTone'
> & {
preferredReactionEmoji?: ReadonlyArray<string>;
};
>;
export const SmartReactionPicker = React.forwardRef<
HTMLDivElement,
ExternalProps
>(function SmartReactionPickerInner(props, ref) {
const { preferredReactionEmoji } = props;
const { openCustomizePreferredReactionsModal } =
usePreferredReactionsActions();
@ -38,10 +35,9 @@ export const SmartReactionPicker = React.forwardRef<
const i18n = useSelector<StateType, LocalizerType>(getIntl);
const statePreferredReactionEmoji = useSelector<
StateType,
ReadonlyArray<string>
>(getPreferredReactionEmoji);
const preferredReactionEmoji = useSelector<StateType, ReadonlyArray<string>>(
getPreferredReactionEmoji
);
return (
<ReactionPicker
@ -50,11 +46,9 @@ export const SmartReactionPicker = React.forwardRef<
openCustomizePreferredReactionsModal={
openCustomizePreferredReactionsModal
}
preferredReactionEmoji={preferredReactionEmoji}
ref={ref}
{...props}
preferredReactionEmoji={
preferredReactionEmoji ?? statePreferredReactionEmoji
}
/>
);
});