Call Reactions fixes and emoji consistency

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;
+}

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 |

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 {
+import { CallScreen as UnwrappedCallScreen } from './CallScreen';
-  CALL_REACTION_EMOJI,
+import { DEFAULT_PREFERRED_REACTION_EMOJI } from '../reactions/constants';
-  CallScreen as UnwrappedCallScreen,
-} from './CallScreen';
 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,
           },
         ];
 

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,
                 })}
               </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

ts/components/CallingLobby.tsx

@@ -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"

ts/components/CustomizingPreferredReactionsModal.stories.tsx

@@ -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'),

ts/components/StoryViewer.stories.tsx

@@ -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'),

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -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: [],

ts/components/conversation/ReactionPicker.stories.tsx

@@ -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>

ts/components/conversation/ReactionPicker.tsx

@@ -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,

ts/reactions/constants.ts

@@ -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 = [
+  '❤️',
+  '👍',
+  '👎',
+  '😂',
+  '😮',
+  '😢',
+];

ts/state/smart/ReactionPicker.tsx

@@ -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<
+  const preferredReactionEmoji = useSelector<StateType, ReadonlyArray<string>>(
-    StateType,
+    getPreferredReactionEmoji
-    ReadonlyArray<string>
+  );
-  >(getPreferredReactionEmoji);
 
   return (
     <ReactionPicker
@@ -50,11 +46,9 @@ export const SmartReactionPicker = React.forwardRef<
       openCustomizePreferredReactionsModal={
         openCustomizePreferredReactionsModal
       }
+      preferredReactionEmoji={preferredReactionEmoji}
       ref={ref}
       {...props}
-      preferredReactionEmoji={
-        preferredReactionEmoji ?? statePreferredReactionEmoji
-      }
     />
   );
 });