fix: alignment for sender name and time (#1761)

100mslive · Aug 30, 2023 · b26cd07 · b26cd07
2 parents af90eed + c9b2bbb
commit b26cd07
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 56 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js
@@ -9,7 +9,6 @@ export const QUERY_PARAM_NAME = 'name';
 export const QUERY_PARAM_VIEW_MODE = 'ui_mode';
 export const QUERY_PARAM_AUTH_TOKEN = 'auth_token';
 export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
-export const UI_MODE_ACTIVE_SPEAKER = 'activespeaker';
 export const UI_MODE_GRID = 'grid';
 export const MAX_TOASTS = 5;
 export const RTMP_RECORD_RESOLUTION_MIN = 480;

diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { useSearchParam } from 'react-use';
 import {
   HMSRoomState,
   selectAvailableRoleNames,
@@ -24,9 +23,7 @@ import {
   DEFAULT_HLS_ROLE_KEY,
   DEFAULT_HLS_VIEWER_ROLE,
   DEFAULT_WAITING_VIEWER_ROLE,
-  QUERY_PARAM_VIEW_MODE,
   SIDE_PANE_OPTIONS,
-  UI_MODE_ACTIVE_SPEAKER,
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
@@ -83,7 +80,6 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;
 
   useEffect(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
@@ -104,12 +100,10 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
     const uiSettings = preferences || {};
     const updatedSettings = {
       ...uiSettings,
-      [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker
-        ? UI_MODE_ACTIVE_SPEAKER
-        : uiSettings.uiViewMode || UI_MODE_GRID,
+      [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
     };
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);
+  }, [preferences, hmsActions]);
 
   useEffect(() => {
     const appData = {

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx
@@ -257,7 +257,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
           }}
           as="div"
         >
-          <Flex align="center">
+          <Flex align="baseline">
             {message.senderName === 'You' || !message.senderName ? (
               <SenderName as="span" variant="sm">
                 {message.senderName || 'Anonymous'}

diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/LayoutSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/LayoutSettings.jsx
@@ -4,13 +4,13 @@ import { Box, Flex, Slider, Text } from '../../../';
 import SwitchWithLabel from './SwitchWithLabel';
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { settingOverflow } from './common.js';
-import { UI_MODE_ACTIVE_SPEAKER, UI_MODE_GRID, UI_SETTINGS } from '../../common/constants';
+import { UI_SETTINGS } from '../../common/constants';
 
 export const LayoutSettings = () => {
   const hmsActions = useHMSActions();
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
-  const [{ isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
+  const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback(
     async isAudioOnlyModeOn => {
       if (isAudioOnlyModeOn) {
@@ -25,16 +25,6 @@ export const LayoutSettings = () => {
 
   return (
     <Box className={settingOverflow()}>
-      <SwitchWithLabel
-        checked={uiViewMode === UI_MODE_ACTIVE_SPEAKER}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.uiViewMode]: value ? UI_MODE_ACTIVE_SPEAKER : UI_MODE_GRID,
-          });
-        }}
-        id="activeSpeakerMode"
-        label="Active Speaker Mode"
-      />
       <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
       <SwitchWithLabel
         label="Mirror Local Video"

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/ActiveSpeakerView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/ActiveSpeakerView.jsx