Fix emoji and other related bugs (#1504)

* make system-emoji default & twitter emoji optional

* add mozilla twemoji-colr credit

* fix wrong audio duration

* set locales to empty in member count millify

* render system emoji as same size of custom emoji

src/app/organisms/room/MembersDrawer.tsx

@@ -271,7 +271,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H5" truncate>
-              {`${millify(room.getJoinedMemberCount(), { precision: 1 })} Members`}
+              {`${millify(room.getJoinedMemberCount(), { precision: 1, locales: [] })} Members`}
             </Text>
           </Box>
           <Box shrink="No" alignItems="Center">

src/app/organisms/room/RoomTimeline.tsx

@@ -44,7 +44,6 @@ import {
   toRem,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
-import Linkify from 'linkify-react';
 import {
   decryptFile,
   eventWithShortcode,
@@ -76,7 +75,10 @@ import {
   MessageBadEncryptedContent,
   MessageNotDecryptedContent,
 } from '../../components/message';
-import { LINKIFY_OPTS, getReactCustomHtmlParser } from '../../plugins/react-custom-html-parser';
+import {
+  emojifyAndLinkify,
+  getReactCustomHtmlParser,
+} from '../../plugins/react-custom-html-parser';
 import {
   canEditEvent,
   decryptAllTimelineEvent,
@@ -978,7 +980,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       if (customBody === '') <MessageEmptyContent />;
       return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
     }
-    return <Linkify options={LINKIFY_OPTS}>{body}</Linkify>;
+    return emojifyAndLinkify(body, true);
   };
 
   const renderRoomMsgContent = useRoomMsgContentRenderer<[EventTimelineSet]>({

src/app/organisms/room/message/AudioContent.tsx

@@ -44,7 +44,8 @@ export const AudioContent = as<'div', AudioContentProps>(
     const audioRef = useRef<HTMLAudioElement | null>(null);
 
     const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(info.duration ?? 0);
+    // duration in seconds. (NOTE: info.duration is in milliseconds)
+    const [duration, setDuration] = useState((info.duration ?? 0) / 1000);
 
     const getAudioRef = useCallback(() => audioRef.current, []);
     const { loading } = useMediaLoading(getAudioRef);

src/app/organisms/settings/Settings.jsx

@@ -54,7 +54,7 @@ function AppearanceSection() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
+  const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
@@ -96,14 +96,14 @@ function AppearanceSection() {
         )}
         />
         <SettingTile
-          title="Use System Emoji"
+          title="Use Twitter Emoji"
           options={(
             <Toggle
-              isActive={useSystemEmoji}
-              onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
+              isActive={twitterEmoji}
+              onToggle={() => setTwitterEmoji(!twitterEmoji)}
             />
           )}
-          content={<Text variant="b3">Use system emoji instead of Twitter emojis.</Text>}
+          content={<Text variant="b3">Use Twitter emoji instead of system emoji.</Text>}
         />
       </div>
       <div className="settings-appearance__card">
@@ -339,6 +339,10 @@ function AboutSection() {
               {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
               <Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
             </li>
+            <li>
+              {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+              <Text>The <a href="https://github.com/mozilla/twemoji-colr" target="_blank" rel="noreferrer noopener">twemoji-colr</a> font is © <a href="https://mozilla.org/" target="_blank" rel="noreferrer noopener">Mozilla Foundation</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer noopener">Apache 2.0</a>.</Text>
+            </li>
             <li>
               {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
               <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>