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);