From 32e5ac128b3499993c66e5274f7ff7b1d0864efd Mon Sep 17 00:00:00 2001 From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com> Date: Fri, 17 Nov 2023 12:40:41 -0800 Subject: [PATCH] Call Reactions fixes and emoji consistency --- stylesheets/components/CallControls.scss | 4 ++++ .../components/CallingReactionsToasts.scss | 4 ---- ts/components/CallScreen.stories.tsx | 13 ++++++----- ts/components/CallScreen.tsx | 22 ++++++++----------- ts/components/CallingLobby.tsx | 2 +- ...omizingPreferredReactionsModal.stories.tsx | 3 ++- ts/components/StoryViewer.stories.tsx | 3 ++- .../StoryViewsNRepliesModal.stories.tsx | 3 ++- .../conversation/ReactionPicker.stories.tsx | 7 +++--- ts/components/conversation/ReactionPicker.tsx | 7 +----- ts/reactions/constants.ts | 12 ++++++++++ ts/state/smart/ReactionPicker.tsx | 16 +++++--------- 12 files changed, 48 insertions(+), 48 deletions(-) diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss index d1ac36f53d..d689f64ac9 100644 --- a/stylesheets/components/CallControls.scss +++ b/stylesheets/components/CallControls.scss @@ -135,3 +135,7 @@ margin-bottom: auto; max-width: calc(var(--window-width) / 2 + 20px); } + +.CallControls__MoreOptionsButtonContainer--menu-shown .module-tooltip { + opacity: 0; +} diff --git a/stylesheets/components/CallingReactionsToasts.scss b/stylesheets/components/CallingReactionsToasts.scss index 408bb2e99e..1db31675f9 100644 --- a/stylesheets/components/CallingReactionsToasts.scss +++ b/stylesheets/components/CallingReactionsToasts.scss @@ -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 | diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx index 000526819d..8d9b018cad 100644 --- a/ts/components/CallScreen.stories.tsx +++ b/ts/components/CallScreen.stories.tsx @@ -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, }, ]; diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx index 055125d259..c70d1ff4cc 100644 --- a/ts/components/CallScreen.tsx +++ b/ts/components/CallScreen.tsx @@ -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, })} @@ -678,7 +668,13 @@ export function CallScreen({ /> {isMoreOptionsButtonEnabled && (