From 67af0c1f9b3f828e5bb9ce9487a0c043d7f9dd47 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Tue, 22 Aug 2023 15:15:50 +0530 Subject: [PATCH 01/52] fix: 2 peer layout --- .../roomkit-react/src/Prebuilt/components/EqualProminence.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx b/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx index 70927f7f73..ab132621f3 100644 --- a/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx @@ -174,7 +174,7 @@ export function EqualProminence() { })} {pagesWithTiles.length > 1 && } - {isInsetEnabled && sortedPeers.length > 1 && } + {isInsetEnabled && sortedPeers.length > 0 && } ); } From eb017d7322d01ffef5900fec3abb8c6ef1c8785f Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Tue, 22 Aug 2023 17:22:25 +0530 Subject: [PATCH 02/52] fix: don't show inset for no publish permissions --- .../src/Prebuilt/layouts/InsetView.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx index 42ad5e825c..38878f6100 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx @@ -1,7 +1,13 @@ import React, { Fragment, useEffect, useRef } from 'react'; import Draggable from 'react-draggable'; import { useMedia } from 'react-use'; -import { selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore } from '@100mslive/react-sdk'; +import { + selectIsAllowedToPublish, + selectLocalPeer, + selectRemotePeers, + selectRolesMap, + useHMSStore, +} from '@100mslive/react-sdk'; import { ExpandIcon } from '@100mslive/react-icons'; import { AudioVideoToggle } from '../components/AudioVideoToggle'; import { FirstPersonDisplay } from '../components/FirstPersonDisplay'; @@ -173,6 +179,7 @@ export const InsetTile = () => { const isMobile = useMedia(cssConfig.media.md); const isLandscape = useMedia(cssConfig.media.ls); const localPeer = useHMSStore(selectLocalPeer); + const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish); const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset); const aspectRatio = isMobile ? 9 / 16 : 16 / 9; let height = 180; @@ -204,6 +211,10 @@ export const InsetTile = () => { }; }, []); + if (!isAllowedToPublish.audio && !isAllowedToPublish.video) { + return null; + } + return ( Date: Wed, 23 Aug 2023 10:31:52 +0530 Subject: [PATCH 03/52] fix: sidepane size becoming smaller --- packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx index c461b83539..8aa0d7b607 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx @@ -28,6 +28,7 @@ const SidePane = ({ css = {} }) => { bg: '$surface_default', r: '$1', ml: '$8', + flexShrink: 0, position: 'relative', ...css, '@lg': { From 639113e265ba124b4789040858f433263d1cf7ca Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 10:36:26 +0530 Subject: [PATCH 04/52] fix: z index for label --- .../src/Prebuilt/components/Connection/TileConnection.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx b/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx index c84344bf85..3c559f747a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Connection/TileConnection.jsx @@ -31,7 +31,6 @@ const Wrapper = styled('div', { backgroundColor: '$background_dim', borderRadius: '$1', maxWidth: '85%', - zIndex: 1, '& p,span': { p: '$2 $3', }, From 029cf01f64674ded61bcd286a1a27a69d687f80f Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Wed, 23 Aug 2023 12:08:47 +0530 Subject: [PATCH 05/52] fix: add spacing in mweb grid layout --- packages/roomkit-react/src/Prebuilt/components/conference.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx index 195523160b..d1f157ce33 100644 --- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx @@ -148,7 +148,7 @@ const Conference = () => { px: '$10', paddingBottom: 'env(safe-area-inset-bottom)', '@lg': { - px: 0, + px: '$4', }, }} id="conferencing" From 60785ede6319844eef8e1a803bf6ab2d9622943b Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 14:03:58 +0530 Subject: [PATCH 06/52] fix: hide embed url, change my role --- .../MoreSettings/ChangeSelfRole.jsx | 67 ------------------- .../SplitComponents/DesktopOptions.jsx | 14 ++-- 2 files changed, 4 insertions(+), 77 deletions(-) delete mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx deleted file mode 100644 index 8ba04910d5..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useMemo } from 'react'; -import { useMedia } from 'react-use'; -import { - selectLocalPeerID, - selectLocalPeerRoleName, - selectPermissions, - useHMSActions, - useHMSStore, -} from '@100mslive/react-sdk'; -import { ArrowRightIcon, CheckIcon, PersonIcon } from '@100mslive/react-icons'; -import { config, Dropdown, Text } from '../../../'; -import { ToastManager } from '../Toast/ToastManager'; -import { useAppLayout } from '../AppData/useAppLayout'; -import { useFilteredRoles } from '../../common/hooks'; -import { arrayIntersection } from '../../common/utils'; - -export const ChangeSelfRole = ({ onClick }) => { - const roles = useFilteredRoles(); - const permissions = useHMSStore(selectPermissions); - const localPeerId = useHMSStore(selectLocalPeerID); - const localPeerRole = useHMSStore(selectLocalPeerRoleName); - const hmsActions = useHMSActions(); - const hideTriggerItem = useMedia(config.media.sm); - const selfRoleChangeTo = useAppLayout('selfRoleChangeTo'); - const availableSelfChangeRoles = useMemo(() => arrayIntersection(selfRoleChangeTo, roles), [roles, selfRoleChangeTo]); - - if (!permissions.changeRole) { - return null; - } - return hideTriggerItem ? ( - - - - Change My Role - - - ) : ( - - - - - Change My Role - - - - - {availableSelfChangeRoles.map(role => ( - { - try { - await hmsActions.changeRole(localPeerId, role, true); - } catch (error) { - ToastManager.addToast({ title: error.message }); - } - }} - data-testid={'change_to_role_' + role} - > - {role} - {localPeerRole === role && } - - ))} - - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx index aeef9a6b59..1585d13d5f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx @@ -2,7 +2,6 @@ import React, { Fragment, useState } from 'react'; import { HMSHLSPlayer } from '@100mslive/hls-player'; import { selectAppData, - selectIsAllowedToPublish, selectLocalPeerID, selectLocalPeerRoleName, useHMSActions, @@ -17,8 +16,6 @@ import SettingsModal from '../../Settings/SettingsModal'; import StartRecording from '../../Settings/StartRecording'; import { StatsForNerds } from '../../StatsForNerds'; import { BulkRoleChangeModal } from '.././BulkRoleChangeModal'; -import { ChangeSelfRole } from '.././ChangeSelfRole'; -import { EmbedUrl, EmbedUrlModal } from '.././EmbedUrl'; import { FullScreenItem } from '.././FullScreenItem'; import { MuteAllModal } from '.././MuteAllModal'; import { useHLSViewerRole } from '../../AppData/useUISettings'; @@ -42,12 +39,10 @@ const MODALS = { }; export const DesktopOptions = () => { - const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish); const localPeerId = useHMSStore(selectLocalPeerID); const localPeerRole = useHMSStore(selectLocalPeerRoleName); const hmsActions = useHMSActions(); const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats)); - const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL); const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS); const [openModals, setOpenModals] = useState(new Set()); const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata(); @@ -144,11 +139,10 @@ export const DesktopOptions = () => { ) : null} - updateState(MODALS.SELF_ROLE_CHANGE, true)} /> - {isAllowedToPublish.screen && isEmbedEnabled && ( + {/* {isAllowedToPublish.screen && isEmbedEnabled && ( updateState(MODALS.EMBED_URL, true)} /> - )} + )} */} @@ -217,9 +211,9 @@ export const DesktopOptions = () => { {openModals.has(MODALS.SELF_ROLE_CHANGE) && ( updateState(MODALS.SELF_ROLE_CHANGE, value)} /> )} - {openModals.has(MODALS.EMBED_URL) && ( + {/* {openModals.has(MODALS.EMBED_URL) && ( updateState(MODALS.EMBED_URL, value)} /> - )} + )} */} ); }; From 09737e410513e9f901c94b080b26d2445874ab35 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 14:05:49 +0530 Subject: [PATCH 07/52] fix: leave for viewers, common footer --- .../src/Prebuilt/components/Footer.jsx | 9 --- .../components/Footer/ConferencingFooter.jsx | 57 ------------------- .../{StreamingFooter.jsx => Footer.jsx} | 6 +- .../SplitComponents/DesktopLeaveRoom.jsx | 12 ++-- .../SplitComponents/MwebLeaveRoom.jsx | 14 +++-- .../src/Prebuilt/components/conference.jsx | 2 +- 6 files changed, 21 insertions(+), 79 deletions(-) delete mode 100644 packages/roomkit-react/src/Prebuilt/components/Footer.jsx delete mode 100644 packages/roomkit-react/src/Prebuilt/components/Footer/ConferencingFooter.jsx rename packages/roomkit-react/src/Prebuilt/components/Footer/{StreamingFooter.jsx => Footer.jsx} (96%) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer.jsx deleted file mode 100644 index c205d31b12..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/Footer.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { ConferencingFooter } from './Footer/ConferencingFooter'; -import { StreamingFooter } from './Footer/StreamingFooter'; -import { useShowStreamingUI } from '../common/hooks'; - -export const Footer = () => { - const showStreamingUI = useShowStreamingUI(); - return showStreamingUI ? : ; -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ConferencingFooter.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ConferencingFooter.jsx deleted file mode 100644 index 51c3d28cf4..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ConferencingFooter.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Suspense } from 'react'; -import { useMedia } from 'react-use'; -import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk'; -import { config as cssConfig, Footer as AppFooter } from '../../../'; -import { AudioVideoToggle } from '../AudioVideoToggle'; -import { EmojiReaction } from '../EmojiReaction'; -import { LeaveRoom } from '../LeaveRoom'; -import { MoreSettings } from '../MoreSettings/MoreSettings'; -import { ScreenshareToggle } from '../ScreenShare'; -import { ChatToggle } from './ChatToggle'; -import { ParticipantCount } from './ParticipantList'; -import { FeatureFlags } from '../../services/FeatureFlags'; - -const TranscriptionButton = React.lazy(() => import('../../plugins/transcription')); -const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground')); - -export const ConferencingFooter = () => { - const isMobile = useMedia(cssConfig.media.md); - const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); - - return ( - - {isMobile ? ( - <> - - - - - - - - ) : ( - <> - - {isVideoOn ? ( - - - - ) : null} - {FeatureFlags.enableTranscription ? : null} - - - - - - - - - - - - - - )} - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/StreamingFooter.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx similarity index 96% rename from packages/roomkit-react/src/Prebuilt/components/Footer/StreamingFooter.jsx rename to packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx index 2b0498f8c0..02214c5ba4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/StreamingFooter.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useMedia } from 'react-use'; import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk'; import { HandIcon } from '@100mslive/react-icons'; -import { config as cssConfig, Footer as AppFooter, Tooltip } from '../../../'; +import { config as cssConfig, Footer as AppFooter, Tooltip } from '../../..'; import IconButton from '../../IconButton'; import { AudioVideoToggle } from '../AudioVideoToggle'; import { EmojiReaction } from '../EmojiReaction'; @@ -16,7 +16,7 @@ import { useIsFeatureEnabled } from '../hooks/useFeatures'; import { useMyMetadata } from '../hooks/useMetadata'; import { FEATURE_LIST } from '../../common/constants'; -export const StreamingFooter = () => { +export const Footer = () => { const isMobile = useMedia(cssConfig.media.md); const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); const localPeerRole = useHMSStore(selectLocalPeerRoleName); @@ -44,7 +44,7 @@ export const StreamingFooter = () => { }} > {isMobile ? : null} - + - {showStreamingUI ? : } + + + @@ -73,7 +75,7 @@ export const DesktopLeaveRoom = ({ bg="" titleColor="$on_surface_high" subtitleColor="$on_surface_low" - icon={} + icon={} onClick={leaveRoom} css={{ p: 0 }} /> @@ -101,7 +103,9 @@ export const DesktopLeaveRoom = ({ ) : ( - {showStream ? : } + + {' '} + )} diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx index 099aecd617..44116fed61 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx @@ -1,6 +1,6 @@ import React, { Fragment, useState } from 'react'; import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk'; -import { ExitIcon, HangUpIcon, StopIcon } from '@100mslive/react-icons'; +import { ExitIcon, StopIcon } from '@100mslive/react-icons'; import { Box } from '../../../../Layout'; import { Sheet } from '../../../../Sheet'; import { Tooltip } from '../../../../Tooltip'; @@ -40,7 +40,9 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leave }} > - {showStream ? : } + + + @@ -53,7 +55,7 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leave bg="$surface_default" titleColor="$on_surface_high" subtitleColor="$on_surface_low" - icon={} + icon={} onClick={leaveRoom} css={{ pt: 0, mt: '$10' }} /> @@ -74,9 +76,11 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leave ) : ( - + - {showStream ? : } + + + )} diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx index d1f157ce33..f301e03241 100644 --- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx @@ -9,13 +9,13 @@ import { useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; +import { Footer } from './Footer/Footer'; import { HLSFailureModal } from './Notifications/HLSFailureModal'; import { ActivatedPIP } from './PIP/PIPComponent'; import { PictureInPicture } from './PIP/PIPManager'; import { Box, Flex } from '../../Layout'; import { useHMSPrebuiltContext } from '../AppContext'; import { ConferenceMainView } from '../layouts/mainView'; -import { Footer } from './Footer'; import FullPageProgress from './FullPageProgress'; import { Header } from './Header'; import { RoleChangeRequestModal } from './RoleChangeRequestModal'; From 5f618d1d92abead603650bdd969badaf1f6b4a77 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 14:11:24 +0530 Subject: [PATCH 08/52] fix: device settings getting clipped in mweb --- .../src/Prebuilt/components/Settings/DeviceSettings.jsx | 2 +- .../src/Prebuilt/components/Settings/SettingsModal.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx index 2f6ec91a17..2c81a581c1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Settings/DeviceSettings.jsx @@ -146,7 +146,7 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children = open={open} /> - + {devices.map(device => { return ( @@ -120,8 +121,8 @@ const MobileSettingModal = ({ direction="column" css={{ px: '$8', - maxHeight: '80vh', - overflowY: 'scroll', + pb: '$8', + overflowY: 'auto', }} > {settingsList From bbdb2603f9156e42394c46966a0d4ba34ac1c62e Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 15:07:02 +0530 Subject: [PATCH 09/52] fix: primary_dim token name --- apps/100ms-web/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/100ms-web/src/App.js b/apps/100ms-web/src/App.js index 474e7c28e8..45e477a443 100644 --- a/apps/100ms-web/src/App.js +++ b/apps/100ms-web/src/App.js @@ -87,7 +87,7 @@ export function EdtechComponent({ colors: { ...palette[theme], primary_default: color, - primary_dark: shadeColor(color, -30), + primary_dim: shadeColor(color, -30), primary_bright: shadeColor(color, 30), primary_disabled: shadeColor(color, 10), }, From b3075968120fd208db0285c8994db052351b788f Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 15:08:46 +0530 Subject: [PATCH 10/52] fix: leave room flow --- .../Prebuilt/components/EndSessionContent.jsx | 21 +++++--- .../src/Prebuilt/components/Footer/Footer.jsx | 19 ++----- .../src/Prebuilt/components/LeaveRoom.jsx | 24 ++++++--- .../components/LeaveSessionContent.jsx | 45 ++++++++++++++++ .../SplitComponents/DesktopLeaveRoom.jsx | 54 ++++++++++--------- .../SplitComponents/MwebLeaveRoom.jsx | 44 ++++++++------- .../src/Prebuilt/components/RaiseHand.jsx | 27 ++++++++++ 7 files changed, 163 insertions(+), 71 deletions(-) create mode 100644 packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx diff --git a/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx b/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx index 865c79104b..b06e95a29a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/EndSessionContent.jsx @@ -5,7 +5,7 @@ import { Box, Flex } from '../../Layout'; import { Text } from '../../Text'; import { useShowStreamingUI } from '../common/hooks'; -export const EndSessionContent = ({ setShowEndRoomAlert, endRoom, isModal = false }) => { +export const EndSessionContent = ({ setShowEndStreamAlert, stopStream, leaveRoom, isModal = false }) => { const showStreamingUI = useShowStreamingUI(); return ( @@ -21,25 +21,34 @@ export const EndSessionContent = ({ setShowEndRoomAlert, endRoom, isModal = fals End {showStreamingUI ? 'Stream' : 'Session'} {isModal ? null : ( - setShowEndRoomAlert(false)}> + setShowEndStreamAlert(false)}> )} - The {showStreamingUI ? 'stream' : 'session'} will end for everyone and all the activities will stop. You can't - undo this action. + The {showStreamingUI ? 'stream' : 'session'} will end for everyone. You can't undo this action. - diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx index 02214c5ba4..3f84ed07e0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.jsx @@ -1,28 +1,22 @@ import React from 'react'; import { useMedia } from 'react-use'; import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk'; -import { HandIcon } from '@100mslive/react-icons'; -import { config as cssConfig, Footer as AppFooter, Tooltip } from '../../..'; -import IconButton from '../../IconButton'; +import { config as cssConfig, Footer as AppFooter } from '../../..'; import { AudioVideoToggle } from '../AudioVideoToggle'; import { EmojiReaction } from '../EmojiReaction'; import { LeaveRoom } from '../LeaveRoom'; import { MoreSettings } from '../MoreSettings/MoreSettings'; +import { RaiseHand } from '../RaiseHand'; import { ScreenshareToggle } from '../ScreenShare'; import { ChatToggle } from './ChatToggle'; import { ParticipantCount } from './ParticipantList'; import { useHLSViewerRole } from '../AppData/useUISettings'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; -import { useMyMetadata } from '../hooks/useMetadata'; -import { FEATURE_LIST } from '../../common/constants'; export const Footer = () => { const isMobile = useMedia(cssConfig.media.md); - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); const localPeerRole = useHMSStore(selectLocalPeerRoleName); const hlsViewerRole = useHLSViewerRole(); const isHlsViewer = hlsViewerRole === localPeerRole; - const { isHandRaised, toggleHandRaise } = useMyMetadata(); return ( { > {isMobile ? ( <> + {isHlsViewer ? : null} ) : ( <> - {isHandRaiseEnabled && isHlsViewer ? ( - - - - - - ) : null} + {isHlsViewer ? : null} diff --git a/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx index 1fea29b68b..923c895227 100644 --- a/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx @@ -17,10 +17,20 @@ export const LeaveRoom = () => { const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const isMobile = useMedia(cssConfig.media.md); - const hmsActions = useHMSActions(); const { showLeave, onLeave } = useHMSPrebuiltContext(); + const stopStream = async () => { + try { + console.log('Stopping HLS stream'); + await hmsActions.stopHLSStreaming(); + ToastManager.addToast({ title: 'Stopping the stream' }); + } catch (e) { + console.error('Error stopping stream', e); + ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' }); + } + }; + const redirectToLeavePage = () => { if (showLeave) { if (params.role) { @@ -39,22 +49,22 @@ export const LeaveRoom = () => { redirectToLeavePage(); }; - const endRoom = () => { - hmsActions.endRoom(false, 'End Room'); - redirectToLeavePage(); - }; + // const endRoom = () => { + // hmsActions.endRoom(false, 'End Room'); + // redirectToLeavePage(); + // }; if (!permissions || !isConnected) { return null; } return isMobile ? ( - + ) : ( ); }; diff --git a/packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx b/packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx new file mode 100644 index 0000000000..ce7e853639 --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/LeaveSessionContent.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons'; +import { Button } from '../../Button'; +import { Box, Flex } from '../../Layout'; +import { Text } from '../../Text'; + +export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal = false }) => { + return ( + + + + + Leave + + {isModal ? null : ( + setShowLeaveRoomAlert(false)}> + + + )} + + + Others will continue after you leave. You can join the session again. + + + + + + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx index 45baec43d0..b94f081855 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx @@ -14,14 +14,13 @@ export const DesktopLeaveRoom = ({ menuTriggerButton: MenuTriggerButton, leaveIconButton: LeaveIconButton, leaveRoom, - endRoom, + stopStream, }) => { const [open, setOpen] = useState(false); - const [showEndRoomAlert, setShowEndRoomAlert] = useState(false); + const [showEndStreamAlert, setShowEndStreamAlert] = useState(false); const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); - const showStreamingUI = useShowStreamingUI(); const showStream = showStreamingUI && isStreamingOn; @@ -34,7 +33,7 @@ export const DesktopLeaveRoom = ({ return ( - {permissions.endRoom ? ( + {permissions.hlsStreaming ? ( - - } - onClick={() => { - setOpen(false); - setShowEndRoomAlert(true); - }} - css={{ p: 0 }} - /> - + {isStreamingOn && permissions?.hlsStreaming ? ( + + } + onClick={() => { + setOpen(false); + setShowEndStreamAlert(true); + }} + css={{ p: 0 }} + /> + + ) : null} @@ -104,17 +105,22 @@ export const DesktopLeaveRoom = ({ - {' '} + )} - + - + diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx index 44116fed61..15c6e3076d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx @@ -9,9 +9,9 @@ import { LeaveCard } from '../../LeaveCard'; import { useDropdownList } from '../../hooks/useDropdownList'; import { useShowStreamingUI } from '../../../common/hooks'; -export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leaveRoom }) => { +export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, stopStream }) => { const [open, setOpen] = useState(false); - const [showEndRoomAlert, setShowEndRoomAlert] = useState(false); + const [showEndStreamAlert, setShowEndStreamAlert] = useState(false); const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); @@ -27,7 +27,7 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leave return ( - {permissions.endRoom ? ( + {permissions?.hlsStreaming ? ( - } - onClick={() => { - setOpen(false); - setShowEndRoomAlert(true); - }} - /> + {isStreamingOn && permissions?.hlsStreaming ? ( + } + onClick={() => { + setOpen(false); + setShowEndStreamAlert(true); + }} + /> + ) : null} ) : ( @@ -84,9 +86,13 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, endRoom, leave )} - + - + diff --git a/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx b/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx new file mode 100644 index 0000000000..6927c5087e --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/react-sdk'; +import { HandIcon } from '@100mslive/react-icons'; +import { Tooltip } from '../../Tooltip'; +import IconButton from '../IconButton'; +import { useIsFeatureEnabled } from './hooks/useFeatures'; +import { useMyMetadata } from './hooks/useMetadata'; +import { FEATURE_LIST } from '../common/constants'; + +export const RaiseHand = () => { + const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); + const { toggleHandRaise } = useMyMetadata(); + const localPeer = useHMSStore(selectLocalPeer); + const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false; + + if (!isHandRaiseEnabled) { + return null; + } + + return ( + + + + + + ); +}; From 171263c596c0750882ddb9aa30c76a4458a19716 Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Wed, 23 Aug 2023 15:13:52 +0530 Subject: [PATCH 11/52] fix: tile menu on mweb inset --- .../src/Prebuilt/components/TileMenu/TileMenu.jsx | 1 + packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx | 3 ++- packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx index 074ad5b7f2..bd3677e20b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx @@ -78,6 +78,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c data-testid="participant_menu_btn" css={{ bg: `${theme.colors.background_dim.value}A3` }} onClick={e => e.stopPropagation()} + className={isMobile ? '__cancel-drag-event' : ''} > diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx index 7fa1cdeb07..19844d9e77 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx @@ -29,6 +29,7 @@ const Tile = ({ height, objectFit = 'cover', canMinimise = false, + isDragabble = false, rootCSS = {}, containerCSS = {}, }) => { @@ -132,7 +133,7 @@ const Tile = ({ ) : null} - {isMouseHovered && !isHeadless ? ( + {(isMouseHovered || isDragabble) && !isHeadless ? ( { } return ( - + { }} width={width} height={height} + isDragabble={isMobile} canMinimise /> )} From 0fd7d4575236653bcd3ee8c1288f6211caba7bc8 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Aug 2023 16:24:57 +0530 Subject: [PATCH 12/52] fix: hide name in mweb hls, remove options --- .../SplitComponents/MwebOptions.jsx | 45 +------------------ .../src/Prebuilt/components/VideoTile.jsx | 9 +++- 2 files changed, 10 insertions(+), 44 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx index d7406183bc..6533ef36c0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx @@ -9,16 +9,7 @@ import { useHMSStore, useRecordingStreaming, } from '@100mslive/react-sdk'; -import { - BrbIcon, - CrossIcon, - DragHandleIcon, - EmojiIcon, - HandIcon, - PeopleIcon, - RecordIcon, - SettingsIcon, -} from '@100mslive/react-icons'; +import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons'; import { Box, Tooltip } from '../../../../'; import { Sheet } from '../../../../Sheet'; import IconButton from '../../../IconButton'; @@ -31,10 +22,8 @@ import { ChangeNameModal } from '.././ChangeNameModal'; import { MuteAllModal } from '.././MuteAllModal'; import { useSidepaneToggle } from '../../AppData/useSidepane'; import { useDropdownList } from '../../hooks/useDropdownList'; -import { useIsFeatureEnabled } from '../../hooks/useFeatures'; -import { useMyMetadata } from '../../hooks/useMetadata'; import { getFormattedCount } from '../../../common/utils'; -import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants'; +import { SIDE_PANE_OPTIONS } from '../../../common/constants'; const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground')); @@ -57,9 +46,6 @@ export const MwebOptions = () => { const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming(); const [openModals, setOpenModals] = useState(new Set()); - const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata(); - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); - const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB); const [openOptionsSheet, setOpenOptionsSheet] = useState(false); const [openSettingsSheet, setOpenSettingsSheet] = useState(false); @@ -67,7 +53,6 @@ export const MwebOptions = () => { const [showRecordingOn, setShowRecordingOn] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); const peerCount = useHMSStore(selectPeerCount); - const emojiCardRef = useRef(null); const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); @@ -141,32 +126,6 @@ export const MwebOptions = () => { Participants - {isHandRaiseEnabled ? ( - { - toggleHandRaise(); - setOpenOptionsSheet(false); - }} - > - - Raise Hand - - ) : null} - - {isBRBEnabled ? ( - { - toggleBRB(); - setOpenOptionsSheet(false); - }} - > - - Be Right Back - - ) : null} - {isVideoOn ? ( setOpenOptionsSheet(false)} /> diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx index 19844d9e77..8f24bda3e8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx @@ -1,4 +1,5 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react'; +import { useMedia } from 'react-use'; import { selectAudioTrackByPeerID, selectIsPeerAudioEnabled, @@ -15,11 +16,13 @@ import TileMenu from './TileMenu/TileMenu'; import { useBorderAudioLevel } from '../../AudioLevel'; import { Avatar } from '../../Avatar'; import { VideoTileStats } from '../../Stats'; +import { config as cssConfig } from '../../Theme'; import { Video } from '../../Video'; import { StyledVideoTile } from '../../VideoTile'; import { getVideoTileLabel } from './peerTileUtils'; import { useAppConfig } from './AppData/useAppConfig'; import { useIsHeadless, useUISettings } from './AppData/useUISettings'; +import { useShowStreamingUI } from '../common/hooks'; import { UI_SETTINGS } from '../common/constants'; const Tile = ({ @@ -48,6 +51,8 @@ const Tile = ({ const borderAudioRef = useBorderAudioLevel(audioTrack?.id); const isVideoDegraded = track?.degraded; const isLocal = localPeerID === peerId; + const isMobile = useMedia(cssConfig.media.md); + const showStreamingUI = useShowStreamingUI(); const label = getVideoTileLabel({ peerName, track, @@ -142,7 +147,9 @@ const Tile = ({ /> ) : null} - + {showStreamingUI && isMobile ? null : ( + + )} ) : null} From 53cd7afb610f9ccea42aaa5bab42799d546a0a2e Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Wed, 23 Aug 2023 17:29:45 +0530 Subject: [PATCH 13/52] fix: design parity of recording --- .../components/Header/StreamActions.jsx | 4 +++- .../SplitComponents/MwebOptions.jsx | 22 +++++++++++++++---- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx index ca6faeb784..a06e8b715b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx @@ -250,7 +250,9 @@ export const StopRecordingInSheet = ({ onStopRecording, onClose }) => { - Stop Recording + + Stop Recording + diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx index 6533ef36c0..59330aec6f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx @@ -10,7 +10,7 @@ import { useRecordingStreaming, } from '@100mslive/react-sdk'; import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons'; -import { Box, Tooltip } from '../../../../'; +import { Box, Loading, Tooltip } from '../../../../'; import { Sheet } from '../../../../Sheet'; import IconButton from '../../../IconButton'; import { EmojiCard } from '../../Footer/EmojiCard'; @@ -51,6 +51,7 @@ export const MwebOptions = () => { const [openSettingsSheet, setOpenSettingsSheet] = useState(false); const [showEmojiCard, setShowEmojiCard] = useState(false); const [showRecordingOn, setShowRecordingOn] = useState(false); + const [isRecordingLoading, setIsRecordingLoading] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); const peerCount = useHMSStore(selectPeerCount); const emojiCardRef = useRef(null); @@ -156,15 +157,21 @@ export const MwebOptions = () => { { + if (isRecordingLoading) { + return; + } if (isBrowserRecordingOn || isStreamingOn) { + setOpenOptionsSheet(false); setShowRecordingOn(true); } else { // start recording - setOpenOptionsSheet(false); + setIsRecordingLoading(true); try { await hmsActions.startRTMPOrRecording({ record: true, }); + setOpenOptionsSheet(false); + setIsRecordingLoading(false); } catch (error) { if (error.message.includes('stream already running')) { ToastManager.addToast({ @@ -177,6 +184,7 @@ export const MwebOptions = () => { variant: 'error', }); } + setIsRecordingLoading(false); } } if (isHLSRunning) { @@ -184,8 +192,14 @@ export const MwebOptions = () => { } }} > - - {isBrowserRecordingOn ? 'Recording On' : 'Start Recording'} + {isRecordingLoading ? : } + + {isBrowserRecordingOn + ? 'Recording On' + : isRecordingLoading + ? 'Starting Recording' + : 'Start Recording'} + ) : null} From 1c3892d90c7192648433efe07627ff4e45dc2f9a Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Thu, 24 Aug 2023 11:00:57 +0530 Subject: [PATCH 14/52] fix: minimised inset tile unresponsive in mobile --- .../src/Prebuilt/components/AudioVideoToggle.jsx | 16 ++++++++++++++-- .../MoreSettings/ChangeNameContent.jsx | 2 +- .../Prebuilt/components/Preview/PreviewForm.jsx | 2 +- .../Prebuilt/components/TileMenu/TileMenu.jsx | 2 +- .../components/TileMenu/TileMenuContent.jsx | 4 +++- .../src/Prebuilt/layouts/InsetView.jsx | 6 +++++- 6 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx index 958b5cd699..16778c5742 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx @@ -70,7 +70,13 @@ export const AudioVideoToggle = ({ hideOptions = false }) => { {toggleAudio ? ( hideOptions ? ( - + {!isLocalAudioEnabled ? ( ) : ( @@ -99,7 +105,13 @@ export const AudioVideoToggle = ({ hideOptions = false }) => { {toggleVideo ? ( hideOptions ? ( - + {!isLocalVideoEnabled ? ( ) : ( diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx index 4c604adf16..0ecae97fb8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx @@ -50,7 +50,7 @@ export const ChangeNameContent = ({ required data-testid="change_name_field" onKeyDown={async e => { - if (e.key === 'Enter') { + if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) { e.preventDefault(); changeName(); } diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx index cf366c43cb..0523276bcb 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewForm.jsx @@ -43,7 +43,7 @@ const PreviewForm = ({ autoFocus autoComplete="name" onKeyDown={e => { - if (e.key === 'Enter') { + if (e.key === 'Enter' && name.trim().length > 0) { e.preventDefault(); onJoin(); } diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx index bd3677e20b..c4be6e6f05 100644 --- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx @@ -114,7 +114,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c - + setOpen(false)} /> diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx index 718ce6beff..f7ea116511 100644 --- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx @@ -220,7 +220,9 @@ export const TileMenuContent = props => { }} > - Change Name + + Change Name + ) : null} diff --git a/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx index e8b0ab1971..e0944a2e03 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/InsetView.jsx @@ -168,7 +168,11 @@ const MinimisedTile = ({ setMinimised }) => { You - setMinimised(false)} css={{ bg: 'transparent', border: 'transparent' }}> + setMinimised(false)} + css={{ bg: 'transparent', border: 'transparent' }} + className="__cancel-drag-event" + > From 8889072903a39be553d6e13997c235132087c47a Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Thu, 24 Aug 2023 12:05:27 +0530 Subject: [PATCH 15/52] fix: flip cam showing twice --- .../src/Prebuilt/components/AudioVideoToggle.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx index 16778c5742..e2318947ee 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.jsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { DeviceType, + HMSRoomState, selectLocalVideoTrackID, + selectRoomState, selectVideoTrackByID, useAVToggle, useDevices, @@ -64,6 +66,7 @@ export const AudioVideoToggle = ({ hideOptions = false }) => { const actions = useHMSActions(); const videoTrackId = useHMSStore(selectLocalVideoTrackID); const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId)); + const roomState = useHMSStore(selectRoomState); return ( @@ -137,7 +140,7 @@ export const AudioVideoToggle = ({ hideOptions = false }) => { ) ) : null} - {localVideoTrack?.facingMode && !hideOptions ? ( + {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? ( { From a545bf04356bdc9c665e184e2b3413a3d14c2f6c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 24 Aug 2023 12:32:04 +0530 Subject: [PATCH 16/52] build: update versions for release --- apps/100ms-custom-app/package.json | 4 ++-- apps/100ms-web/package.json | 10 +++++----- packages/hls-player/package.json | 4 ++-- packages/hls-stats/package.json | 2 +- packages/hms-noise-suppression/package.json | 4 ++-- packages/hms-video-store/package.json | 4 ++-- packages/hms-video-web/package.json | 2 +- packages/hms-virtual-background/package.json | 4 ++-- packages/react-icons/package.json | 2 +- packages/react-sdk/package.json | 4 ++-- packages/roomkit-react/package.json | 10 +++++----- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/apps/100ms-custom-app/package.json b/apps/100ms-custom-app/package.json index 39e9ab9d39..64b029f590 100644 --- a/apps/100ms-custom-app/package.json +++ b/apps/100ms-custom-app/package.json @@ -4,8 +4,8 @@ "private": true, "dependencies": { "100ms_edtech_template": "0.1.4", - "@100mslive/react-icons": "0.8.12", - "@100mslive/roomkit-react": "0.1.3", + "@100mslive/react-icons": "0.8.13", + "@100mslive/roomkit-react": "0.1.4", "axios": "^0.21.1", "js-cookies": "^1.0.4", "lodash.merge": "^4.6.2", diff --git a/apps/100ms-web/package.json b/apps/100ms-web/package.json index 716d6ec8d1..57aecd4ff1 100644 --- a/apps/100ms-web/package.json +++ b/apps/100ms-web/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/hls-player": "0.1.12", - "@100mslive/hms-virtual-background": "1.11.12", - "@100mslive/react-icons": "0.8.12", - "@100mslive/react-sdk": "0.8.12", - "@100mslive/roomkit-react": "0.1.3", + "@100mslive/hls-player": "0.1.13", + "@100mslive/hms-virtual-background": "1.11.13", + "@100mslive/react-icons": "0.8.13", + "@100mslive/react-sdk": "0.8.13", + "@100mslive/roomkit-react": "0.1.4", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@tldraw/tldraw": "^1.18.4", diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index f877204696..552c6db207 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.1.12", + "version": "0.1.13", "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -31,7 +31,7 @@ "author": "100ms", "license": "MIT", "dependencies": { - "@100mslive/hls-stats": "0.2.12", + "@100mslive/hls-stats": "0.2.13", "eventemitter2": "^6.4.7", "hls.js": "^1.3.0" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index b5467da406..0e3b41b461 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.2.12", + "version": "0.2.13", "description": "A simple library that provides stats for your hls stream", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/hms-noise-suppression/package.json b/packages/hms-noise-suppression/package.json index 7f2ddd9ea4..7ff2927e29 100644 --- a/packages/hms-noise-suppression/package.json +++ b/packages/hms-noise-suppression/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.12", + "version": "0.9.13", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -37,6 +37,6 @@ "author": "vishaldhull09", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.12" + "@100mslive/hms-video": "0.9.13" } } diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json index 255fd194c5..38887caf71 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.10.12", + "version": "0.10.13", "license": "MIT", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -41,7 +41,7 @@ "author": "100ms", "sideEffects": false, "dependencies": { - "@100mslive/hms-video": "0.9.12", + "@100mslive/hms-video": "0.9.13", "eventemitter2": "^6.4.7", "immer": "^9.0.6", "reselect": "4.0.0", diff --git a/packages/hms-video-web/package.json b/packages/hms-video-web/package.json index 9f7192f618..f48f32660e 100644 --- a/packages/hms-video-web/package.json +++ b/packages/hms-video-web/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hms-video", - "version": "0.9.12", + "version": "0.9.13", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json index 9e1e6a8ee0..ebdc82877b 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.11.12", + "version": "1.11.13", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -30,7 +30,7 @@ "author": "ashish17", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.12" + "@100mslive/hms-video": "0.9.13" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 9bd0c7c208..193926a967 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.12", + "version": "0.8.13", "author": "100ms", "license": "MIT", "files": [ diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 44a072c984..b25c16c323 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.12", + "version": "0.8.13", "author": "100ms", "license": "MIT", "files": [ @@ -43,7 +43,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.10.12", + "@100mslive/hms-video-store": "0.10.13", "react-resize-detector": "^7.0.0", "zustand": "^3.6.2" } diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json index 636d84f777..543a265d35 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.1.3", + "version": "0.1.4", "author": "100ms", "license": "MIT", "files": [ @@ -75,10 +75,10 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.1.12", - "@100mslive/hms-virtual-background": "1.11.12", - "@100mslive/react-icons": "0.8.12", - "@100mslive/react-sdk": "0.8.12", + "@100mslive/hls-player": "0.1.13", + "@100mslive/hms-virtual-background": "1.11.13", + "@100mslive/react-icons": "0.8.13", + "@100mslive/react-sdk": "0.8.13", "@100mslive/types-prebuilt": "0.10.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", From 298fc7acc686d981aa8e176feadb297b2f622902 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Fri, 25 Aug 2023 11:52:59 +0530 Subject: [PATCH 17/52] fix: audio issue on role change --- .../managers/TrackManager.ts | 17 ++++++++++++++--- .../managers/onDemandTrackManager.ts | 5 +++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/hms-video-web/src/notification-manager/managers/TrackManager.ts b/packages/hms-video-web/src/notification-manager/managers/TrackManager.ts index 7d42508f11..4043d14fd4 100644 --- a/packages/hms-video-web/src/notification-manager/managers/TrackManager.ts +++ b/packages/hms-video-web/src/notification-manager/managers/TrackManager.ts @@ -85,7 +85,7 @@ export class TrackManager { /** * Sets the track of corresponding peer to null and returns the peer */ - handleTrackRemove(track: HMSRemoteTrack) { + handleTrackRemove(track: HMSRemoteTrack, remove = true) { HMSLogger.d(this.TAG, `ONTRACKREMOVE`, `${track}`); const trackStateEntry = this.store.getTrackState(track.trackId); @@ -100,8 +100,19 @@ export class TrackManager { return; } - // emit this event here as peer will already be removed(if left the room) by the time this event is received - track.type === HMSTrackType.AUDIO && this.eventBus.audioTrackRemoved.publish(track as HMSRemoteAudioTrack); + // remove tracks only when onDemandTracks flag is false + if (remove) { + this.store.removeTrack(track); + const hmsPeer = this.store.getPeerById(trackStateEntry.peerId); + if (!hmsPeer) { + return; + } + this.removePeerTracks(hmsPeer, track); + this.listener?.onTrackUpdate(HMSTrackUpdate.TRACK_REMOVED, track, hmsPeer); + + // emit this event here as peer will already be removed(if left the room) by the time this event is received + track.type === HMSTrackType.AUDIO && this.eventBus.audioTrackRemoved.publish(track as HMSRemoteAudioTrack); + } } handleTrackLayerUpdate = (params: OnTrackLayerUpdateNotification) => { diff --git a/packages/hms-video-web/src/notification-manager/managers/onDemandTrackManager.ts b/packages/hms-video-web/src/notification-manager/managers/onDemandTrackManager.ts index cfcd2c64e3..ce6c423c6a 100644 --- a/packages/hms-video-web/src/notification-manager/managers/onDemandTrackManager.ts +++ b/packages/hms-video-web/src/notification-manager/managers/onDemandTrackManager.ts @@ -27,8 +27,9 @@ export class OnDemandTrackManager extends TrackManager { } handleTrackRemove(track: HMSRemoteTrack) { - super.handleTrackRemove(track); - if (track.type === 'video' && track.source === 'regular') { + const isRegularVideo = track.type === 'video' && track.source === 'regular'; + super.handleTrackRemove(track, !isRegularVideo); + if (isRegularVideo) { this.processTrackInfo( { track_id: track.trackId, From d93341f90d2fde19d31afc0e1982da0767bb079b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 25 Aug 2023 12:39:39 +0530 Subject: [PATCH 18/52] build: update versions for release --- apps/100ms-custom-app/package.json | 4 ++-- apps/100ms-web/package.json | 10 +++++----- packages/hls-player/package.json | 4 ++-- packages/hls-stats/package.json | 2 +- packages/hms-noise-suppression/package.json | 4 ++-- packages/hms-video-store/package.json | 4 ++-- packages/hms-video-web/package.json | 2 +- packages/hms-virtual-background/package.json | 4 ++-- packages/react-icons/package.json | 2 +- packages/react-sdk/package.json | 4 ++-- packages/roomkit-react/package.json | 10 +++++----- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/apps/100ms-custom-app/package.json b/apps/100ms-custom-app/package.json index 64b029f590..aa4929cb85 100644 --- a/apps/100ms-custom-app/package.json +++ b/apps/100ms-custom-app/package.json @@ -4,8 +4,8 @@ "private": true, "dependencies": { "100ms_edtech_template": "0.1.4", - "@100mslive/react-icons": "0.8.13", - "@100mslive/roomkit-react": "0.1.4", + "@100mslive/react-icons": "0.8.14", + "@100mslive/roomkit-react": "0.1.5", "axios": "^0.21.1", "js-cookies": "^1.0.4", "lodash.merge": "^4.6.2", diff --git a/apps/100ms-web/package.json b/apps/100ms-web/package.json index 57aecd4ff1..74bcf71318 100644 --- a/apps/100ms-web/package.json +++ b/apps/100ms-web/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/hls-player": "0.1.13", - "@100mslive/hms-virtual-background": "1.11.13", - "@100mslive/react-icons": "0.8.13", - "@100mslive/react-sdk": "0.8.13", - "@100mslive/roomkit-react": "0.1.4", + "@100mslive/hls-player": "0.1.14", + "@100mslive/hms-virtual-background": "1.11.14", + "@100mslive/react-icons": "0.8.14", + "@100mslive/react-sdk": "0.8.14", + "@100mslive/roomkit-react": "0.1.5", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@tldraw/tldraw": "^1.18.4", diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index 552c6db207..dd8c15b110 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.1.13", + "version": "0.1.14", "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -31,7 +31,7 @@ "author": "100ms", "license": "MIT", "dependencies": { - "@100mslive/hls-stats": "0.2.13", + "@100mslive/hls-stats": "0.2.14", "eventemitter2": "^6.4.7", "hls.js": "^1.3.0" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index 0e3b41b461..86d62d20d5 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.2.13", + "version": "0.2.14", "description": "A simple library that provides stats for your hls stream", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/hms-noise-suppression/package.json b/packages/hms-noise-suppression/package.json index 7ff2927e29..6dbf4ab7ff 100644 --- a/packages/hms-noise-suppression/package.json +++ b/packages/hms-noise-suppression/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.13", + "version": "0.9.14", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -37,6 +37,6 @@ "author": "vishaldhull09", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.13" + "@100mslive/hms-video": "0.9.14" } } diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json index 38887caf71..d81bc4962e 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.10.13", + "version": "0.10.14", "license": "MIT", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -41,7 +41,7 @@ "author": "100ms", "sideEffects": false, "dependencies": { - "@100mslive/hms-video": "0.9.13", + "@100mslive/hms-video": "0.9.14", "eventemitter2": "^6.4.7", "immer": "^9.0.6", "reselect": "4.0.0", diff --git a/packages/hms-video-web/package.json b/packages/hms-video-web/package.json index f48f32660e..cf81374253 100644 --- a/packages/hms-video-web/package.json +++ b/packages/hms-video-web/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hms-video", - "version": "0.9.13", + "version": "0.9.14", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json index ebdc82877b..b6d2d7dd47 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.11.13", + "version": "1.11.14", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -30,7 +30,7 @@ "author": "ashish17", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.13" + "@100mslive/hms-video": "0.9.14" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 193926a967..0fec0462fd 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.13", + "version": "0.8.14", "author": "100ms", "license": "MIT", "files": [ diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index b25c16c323..861efbf2cd 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.13", + "version": "0.8.14", "author": "100ms", "license": "MIT", "files": [ @@ -43,7 +43,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.10.13", + "@100mslive/hms-video-store": "0.10.14", "react-resize-detector": "^7.0.0", "zustand": "^3.6.2" } diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json index 543a265d35..59a48e337b 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.1.4", + "version": "0.1.5", "author": "100ms", "license": "MIT", "files": [ @@ -75,10 +75,10 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.1.13", - "@100mslive/hms-virtual-background": "1.11.13", - "@100mslive/react-icons": "0.8.13", - "@100mslive/react-sdk": "0.8.13", + "@100mslive/hls-player": "0.1.14", + "@100mslive/hms-virtual-background": "1.11.14", + "@100mslive/react-icons": "0.8.14", + "@100mslive/react-sdk": "0.8.14", "@100mslive/types-prebuilt": "0.10.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", From e71ca0fbd3ff7d9095c37499852b6bb0e8a6324e Mon Sep 17 00:00:00 2001 From: Saikat Mitra Date: Fri, 25 Aug 2023 17:01:33 +0530 Subject: [PATCH 19/52] Dev to main (#1721) * fix: header design parity and bugs * feat: minimise inset tile * fix: remove screen share and pdf share icons from react-icons (#1624) * fix: max depth error in equal prominence * fix: header design parity and bugs * fix: remove screen share and pdf share icons from react-icons * fix: image and style of screen share options component --------- Co-authored-by: Ravi theja * fix: remove hls.js dependency from web app and roomkit (#1622) * fix: max depth error in equal prominence * fix: header design parity and bugs * fix: web-1934: remove hls.js dependency from web app and roomkit * fix: lint error * fix: lint errors --------- Co-authored-by: Ravi theja * fix: show end session proper info * fix: hide logo if broken * fix: tile design parity * feat: redesign chat UI * feat: hls player controls design update * feat: hls chat ui * fix: remove resolution popup (#1659) * fix: participants list * feat: gradient chat, remove name tags for mweb hls, fix chat for mweb hls-viewer * feat: prompt for leave * fix: leave room prompt for hls-viewer * fix: lint * fix: 2 peer layout * fix: tooltip covered by peername * feat: update toast content, actions for notifications * fix: set input type to search * fix: spacing * fix: update spacing * fix: update spacing * fix: paroty * fix: emoji reaction for mweb * fix: preview notifications * fix: css for participant count * fix: max height for menu * fix: lint errors --------- Co-authored-by: amar-1995 <110378139+amar-1995@users.noreply.github.com> Co-authored-by: Ravi theja Co-authored-by: Kaustubh Kumar Co-authored-by: Eswar Prasad Clinton. A <64120992+eswarclynn@users.noreply.github.com> --- .../src/components/Chat/ChatSelector.jsx | 2 +- .../Notifications/Notifications.jsx | 6 + .../Notifications/PeerNotifications.jsx | 10 +- packages/react-icons/assets/PauseIcon.svg | 16 +- packages/react-icons/assets/PlayIcon.svg | 15 +- packages/react-icons/assets/VolumeTwoIcon.svg | 5 + .../react-icons/assets/VolumeZeroIcon.svg | 4 + packages/react-icons/src/PauseIcon.tsx | 7 +- packages/react-icons/src/PlayIcon.tsx | 4 +- packages/react-icons/src/VolumeTwoIcon.tsx | 21 ++ packages/react-icons/src/VolumeZeroIcon.tsx | 17 + packages/react-icons/src/index.ts | 2 + .../roomkit-react/src/Prebuilt/IconButton.jsx | 1 + .../src/Prebuilt/Prebuilt.stories.tsx | 1 + .../src/Prebuilt/common/constants.js | 2 + .../src/Prebuilt/common/hooks.js | 43 ++- .../src/Prebuilt/components/Chat/Chat.jsx | 73 ++-- .../src/Prebuilt/components/Chat/ChatBody.jsx | 111 ++++-- .../Prebuilt/components/Chat/ChatFooter.jsx | 117 +++--- .../Prebuilt/components/Chat/ChatHeader.jsx | 67 ---- .../components/Chat/ChatParticipantHeader.jsx | 74 ++++ .../Prebuilt/components/Chat/ChatSelector.jsx | 33 +- .../components/Chat/ChatSelectorContainer.jsx | 83 +++++ .../components/Chat/PeerJoinedMessage.jsx | 28 ++ .../components/Connection/TileConnection.jsx | 38 +- .../src/Prebuilt/components/EmojiReaction.jsx | 7 +- .../src/Prebuilt/components/Footer/Footer.jsx | 4 +- .../components/Footer/ParticipantList.jsx | 340 +++++++++--------- .../components/Footer/RoleAccordion.jsx | 78 ++++ .../Prebuilt/components/HMSVideo/Controls.jsx | 4 +- .../HMSVideo/HLSQualitySelector.jsx | 43 ++- .../components/HMSVideo/PlayButton.jsx | 2 +- .../components/HMSVideo/VideoTime.jsx | 6 +- .../components/HMSVideo/VolumeControl.jsx | 47 ++- .../components/Header/HeaderComponents.jsx | 14 +- .../components/Header/StreamActions.jsx | 93 ++--- .../components/MoreSettings/ActionTile.jsx | 5 + .../MoreSettings/ChangeNameContent.jsx | 19 +- .../MoreSettings/ChangeNameModal.jsx | 2 +- .../SplitComponents/DesktopLeaveRoom.jsx | 38 +- .../SplitComponents/DesktopOptions.jsx | 16 +- .../SplitComponents/MwebLeaveRoom.jsx | 24 +- .../SplitComponents/MwebOptions.jsx | 8 +- .../Notifications/MessageNotifications.jsx | 16 +- .../Notifications/Notifications.jsx | 12 +- .../Notifications/PeerNotifications.jsx | 14 +- .../Notifications/PermissionErrorModal.jsx | 4 +- .../Settings/NotificationSettings.jsx | 6 +- .../components/Settings/SettingsModal.jsx | 8 +- .../Prebuilt/components/TileMenu/TileMenu.jsx | 6 +- .../components/TileMenu/TileMenuContent.jsx | 4 +- .../Prebuilt/components/Toast/ToastConfig.jsx | 63 +++- .../src/Prebuilt/components/VideoTile.jsx | 33 +- .../src/Prebuilt/components/conference.jsx | 4 + .../src/Prebuilt/components/peerTileUtils.jsx | 2 +- .../images}/android-perm-1.png | Bin .../src/Prebuilt/images/empty-chat.svg | 12 + .../images}/ios-perm-0.png | Bin .../src/Prebuilt/layouts/HLSView.jsx | 135 +++---- .../src/Prebuilt/layouts/InsetView.jsx | 3 +- .../src/Prebuilt/layouts/SidePane.jsx | 20 +- 61 files changed, 1255 insertions(+), 617 deletions(-) create mode 100644 packages/react-icons/assets/VolumeTwoIcon.svg create mode 100644 packages/react-icons/assets/VolumeZeroIcon.svg create mode 100644 packages/react-icons/src/VolumeTwoIcon.tsx create mode 100644 packages/react-icons/src/VolumeZeroIcon.tsx delete mode 100644 packages/roomkit-react/src/Prebuilt/components/Chat/ChatHeader.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/Chat/PeerJoinedMessage.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx rename packages/roomkit-react/src/{assets => Prebuilt/images}/android-perm-1.png (100%) create mode 100644 packages/roomkit-react/src/Prebuilt/images/empty-chat.svg rename packages/roomkit-react/src/{assets => Prebuilt/images}/ios-perm-0.png (100%) diff --git a/apps/100ms-web/src/components/Chat/ChatSelector.jsx b/apps/100ms-web/src/components/Chat/ChatSelector.jsx index f033df0827..a42148981e 100644 --- a/apps/100ms-web/src/components/Chat/ChatSelector.jsx +++ b/apps/100ms-web/src/components/Chat/ChatSelector.jsx @@ -194,7 +194,7 @@ export const ChatSelector = ({ role, peerId, onSelect }) => { )} diff --git a/apps/100ms-web/src/components/Notifications/Notifications.jsx b/apps/100ms-web/src/components/Notifications/Notifications.jsx index 7aaccc1798..c217f64451 100644 --- a/apps/100ms-web/src/components/Notifications/Notifications.jsx +++ b/apps/100ms-web/src/components/Notifications/Notifications.jsx @@ -3,7 +3,9 @@ import React, { useEffect } from "react"; import { logMessage } from "zipyai"; import { HMSNotificationTypes, + HMSRoomState, selectLocalPeerID, + selectRoomState, useHMSNotifications, useHMSStore, } from "@100mslive/react-sdk"; @@ -36,6 +38,7 @@ export function Notifications() { const subscribedNotifications = useSubscribedNotifications() || {}; const isHeadless = useIsHeadless(); const toggleWidget = useWidgetToggle(); + const roomState = useHMSStore(selectRoomState); useEffect(() => { if (!notification) { @@ -43,6 +46,9 @@ export function Notifications() { } switch (notification.type) { case HMSNotificationTypes.METADATA_UPDATED: + if (roomState !== HMSRoomState.Connected) { + return; + } // Don't toast message when metadata is updated and raiseHand is false. // Don't toast message in case of local peer. const metadata = getMetadata(notification.data?.metadata); diff --git a/apps/100ms-web/src/components/Notifications/PeerNotifications.jsx b/apps/100ms-web/src/components/Notifications/PeerNotifications.jsx index 0bf9ba3df7..5b967c7eb3 100644 --- a/apps/100ms-web/src/components/Notifications/PeerNotifications.jsx +++ b/apps/100ms-web/src/components/Notifications/PeerNotifications.jsx @@ -1,7 +1,10 @@ import { useEffect } from "react"; import { HMSNotificationTypes, + HMSRoomState, + selectRoomState, useHMSNotifications, + useHMSStore, } from "@100mslive/react-sdk"; import { ToastBatcher } from "../Toast/ToastBatcher"; import { useSubscribedNotifications } from "../AppData/useUISettings"; @@ -22,7 +25,12 @@ export const PeerNotifications = () => { const isPeerLeftSubscribed = useSubscribedNotifications( SUBSCRIBED_NOTIFICATIONS.PEER_LEFT ); + const roomState = useHMSStore(selectRoomState); + useEffect(() => { + if (roomState !== HMSRoomState.Connected) { + return; + } if ( !notification || (notification?.data?.roleName && @@ -51,7 +59,7 @@ export const PeerNotifications = () => { return; } ToastBatcher.showToast({ notification }); - }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]); + }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]); return null; }; diff --git a/packages/react-icons/assets/PauseIcon.svg b/packages/react-icons/assets/PauseIcon.svg index a0bc7fc29f..84b0048c50 100644 --- a/packages/react-icons/assets/PauseIcon.svg +++ b/packages/react-icons/assets/PauseIcon.svg @@ -1,12 +1,4 @@ - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/packages/react-icons/assets/PlayIcon.svg b/packages/react-icons/assets/PlayIcon.svg index 6975552275..e88494cf05 100644 --- a/packages/react-icons/assets/PlayIcon.svg +++ b/packages/react-icons/assets/PlayIcon.svg @@ -1,12 +1,3 @@ - - - \ No newline at end of file + + + \ No newline at end of file diff --git a/packages/react-icons/assets/VolumeTwoIcon.svg b/packages/react-icons/assets/VolumeTwoIcon.svg new file mode 100644 index 0000000000..96bb5b3c92 --- /dev/null +++ b/packages/react-icons/assets/VolumeTwoIcon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/react-icons/assets/VolumeZeroIcon.svg b/packages/react-icons/assets/VolumeZeroIcon.svg new file mode 100644 index 0000000000..b3d9314ffd --- /dev/null +++ b/packages/react-icons/assets/VolumeZeroIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/react-icons/src/PauseIcon.tsx b/packages/react-icons/src/PauseIcon.tsx index 6ebd79b0e3..a412acf80b 100644 --- a/packages/react-icons/src/PauseIcon.tsx +++ b/packages/react-icons/src/PauseIcon.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import { SVGProps } from 'react'; const SvgPauseIcon = (props: SVGProps) => ( - - + + ); export default SvgPauseIcon; diff --git a/packages/react-icons/src/PlayIcon.tsx b/packages/react-icons/src/PlayIcon.tsx index 27a4979e4a..cf5ed72e0d 100644 --- a/packages/react-icons/src/PlayIcon.tsx +++ b/packages/react-icons/src/PlayIcon.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { SVGProps } from 'react'; const SvgPlayIcon = (props: SVGProps) => ( - + diff --git a/packages/react-icons/src/VolumeTwoIcon.tsx b/packages/react-icons/src/VolumeTwoIcon.tsx new file mode 100644 index 0000000000..79f8946d1f --- /dev/null +++ b/packages/react-icons/src/VolumeTwoIcon.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; +const SvgVolumeTwoIcon = (props: SVGProps) => ( + + + + + +); +export default SvgVolumeTwoIcon; diff --git a/packages/react-icons/src/VolumeZeroIcon.tsx b/packages/react-icons/src/VolumeZeroIcon.tsx new file mode 100644 index 0000000000..ad78facc79 --- /dev/null +++ b/packages/react-icons/src/VolumeZeroIcon.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { SVGProps } from 'react'; +const SvgVolumeZeroIcon = (props: SVGProps) => ( + + + + +); +export default SvgVolumeZeroIcon; diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts index b6229340ba..53ca615ccb 100644 --- a/packages/react-icons/src/index.ts +++ b/packages/react-icons/src/index.ts @@ -247,6 +247,8 @@ export { default as VideoPlayerIcon } from './VideoPlayerIcon'; export { default as ViewIcon } from './ViewIcon'; export { default as VirtualBackgroundIcon } from './VirtualBackgroundIcon'; export { default as VolumeOneIcon } from './VolumeOneIcon'; +export { default as VolumeTwoIcon } from './VolumeTwoIcon'; +export { default as VolumeZeroIcon } from './VolumeZeroIcon'; export { default as WalletIcon } from './WalletIcon'; export { default as WebhookIcon } from './WebhookIcon'; export { default as WiredMicIcon } from './WiredMicIcon'; diff --git a/packages/roomkit-react/src/Prebuilt/IconButton.jsx b/packages/roomkit-react/src/Prebuilt/IconButton.jsx index 9478525f48..1a86330ef5 100644 --- a/packages/roomkit-react/src/Prebuilt/IconButton.jsx +++ b/packages/roomkit-react/src/Prebuilt/IconButton.jsx @@ -5,6 +5,7 @@ const IconButton = styled(BaseIconButton, { width: '$14', height: '$14', border: '1px solid $border_bright', + bg: '$background_dim', r: '$1', variants: { active: { diff --git a/packages/roomkit-react/src/Prebuilt/Prebuilt.stories.tsx b/packages/roomkit-react/src/Prebuilt/Prebuilt.stories.tsx index fe516742b3..5fbea6c173 100644 --- a/packages/roomkit-react/src/Prebuilt/Prebuilt.stories.tsx +++ b/packages/roomkit-react/src/Prebuilt/Prebuilt.stories.tsx @@ -9,6 +9,7 @@ export default { roomCode: { control: { type: 'text' }, defaultValue: '' }, logo: { control: { type: 'object' }, defaultValue: null }, typography: { control: { type: 'object' }, defaultValue: 'Roboto' }, + options: { control: { type: 'object' }, defaultValue: {} }, }, } as Meta; diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js index 6e1abd42cc..eb22739394 100644 --- a/packages/roomkit-react/src/Prebuilt/common/constants.js +++ b/packages/roomkit-react/src/Prebuilt/common/constants.js @@ -204,3 +204,5 @@ export const SESSION_STORE_KEY = { PINNED_MESSAGE: 'pinnedMessage', SPOTLIGHT: 'spotlight', }; + +export const LOWER_HAND = 'lowerHand'; diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.js b/packages/roomkit-react/src/Prebuilt/common/hooks.js index 82df0d3278..43674c3ac6 100644 --- a/packages/roomkit-react/src/Prebuilt/common/hooks.js +++ b/packages/roomkit-react/src/Prebuilt/common/hooks.js @@ -1,8 +1,19 @@ // @ts-check import { useEffect, useRef, useState } from 'react'; import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form'; -import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk'; +import { + selectAvailableRoleNames, + selectIsConnectedToRoom, + selectLocalPeerRoleName, + selectPeerCount, + selectPeerMetadata, + selectPeers, + selectRemotePeers, + useHMSStore, + useHMSVanillaStore, +} from '@100mslive/react-sdk'; import { useRoomLayout } from '../provider/roomLayoutProvider'; +import { useHLSViewerRole } from '../components/AppData/useUISettings'; import { isInternalRole } from './utils'; /** @@ -53,3 +64,33 @@ export const useShowStreamingUI = () => { const { join_form } = layout?.screens?.preview?.default?.elements || {}; return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE; }; + +export const useIsLocalPeerHLSViewer = () => { + const localPeerRoleName = useHMSStore(selectLocalPeerRoleName); + const hlsViewerRole = useHLSViewerRole(); + return localPeerRoleName === hlsViewerRole; +}; + +// The search results should not have role name matches +export const useParticipants = params => { + const isConnected = useHMSStore(selectIsConnectedToRoom); + const peerCount = useHMSStore(selectPeerCount); + const availableRoles = useHMSStore(selectAvailableRoleNames); + let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers); + const rolesWithParticipants = Array.from(new Set(participantList.map(peer => peer.roleName))); + const vanillaStore = useHMSVanillaStore(); + if (params?.metadata?.isHandRaised) { + participantList = participantList.filter(peer => { + return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised; + }); + } + if (params?.role && availableRoles.includes(params.role)) { + participantList = participantList.filter(peer => peer.roleName === params.role); + } + if (params?.search) { + const search = params.search.toLowerCase(); + // Removed peer.roleName?.toLowerCase().includes(search) + participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search.toLowerCase())); + } + return { participants: participantList, isConnected, peerCount, rolesWithParticipants }; +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx index b5ad59ac12..cbf4019e19 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx @@ -1,4 +1,5 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import { HMSNotificationTypes, selectHMSMessagesCount, @@ -13,13 +14,14 @@ import { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; import { Text } from '../../../Text'; -import IconButton from '../../IconButton'; +import { config as cssConfig } from '../../../Theme'; import { AnnotisedMessage, ChatBody } from './ChatBody'; import { ChatFooter } from './ChatFooter'; -import { ChatHeader } from './ChatHeader'; +import { ChatParticipantHeader } from './ChatParticipantHeader'; import { useSetSubscribedChatSelector } from '../AppData/useUISettings'; import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage'; import { useUnreadCount } from './useUnreadCount'; +import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks'; import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants'; const PinnedMessage = ({ clearPinnedMessage }) => { @@ -28,16 +30,14 @@ const PinnedMessage = ({ clearPinnedMessage }) => { return pinnedMessage ? ( - - - + + { {permissions.removeOthers && ( - clearPinnedMessage()}> + clearPinnedMessage()} + css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }} + > - + )} ) : null; @@ -83,6 +86,10 @@ export const Chat = () => { }, [notification, peerSelector, setPeerSelector]); const storeMessageSelector = selectHMSMessagesCount; + const isMobile = useMedia(cssConfig.media.md); + const showStreamingUI = useShowStreamingUI(); + const isHLSViewer = useIsLocalPeerHLSViewer(); + const mwebStreaming = isMobile && (showStreamingUI || isHLSViewer); const messagesCount = useHMSStore(storeMessageSelector) || 0; const scrollToBottom = useCallback( @@ -100,8 +107,23 @@ export const Chat = () => { return ( - + setSelectorOpen(value => !value)} /> + + + ) : null} + + + scrollToBottom(1)} selection={chatOptions.selection} onSelect={({ role, peerId, selection }) => { setChatOptions({ @@ -112,16 +134,8 @@ export const Chat = () => { setPeerSelector(peerId); setRoleSelector(role); }} - role={chatOptions.role} peerId={chatOptions.peerId} - onToggle={() => { - setSelectorOpen(value => !value); - }} - /> - - - - scrollToBottom(1)}> + > {!isSelectorOpen && ( )} @@ -146,13 +160,26 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => { }} > ); diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx index 49b73c6ae5..3a4b6f5c8b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx @@ -1,5 +1,6 @@ import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useInView } from 'react-intersection-observer'; +import { useMedia } from 'react-use'; import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeList } from 'react-window'; import { @@ -13,14 +14,17 @@ import { useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; -import { HorizontalMenuIcon, PinIcon } from '@100mslive/react-icons'; +import { CopyIcon, PinIcon, VerticalMenuIcon } from '@100mslive/react-icons'; import { Dropdown } from '../../../Dropdown'; import { IconButton } from '../../../IconButton'; import { Box, Flex } from '../../../Layout'; import { Text } from '../../../Text'; -import { styled } from '../../../Theme'; +import { config as cssConfig, styled } from '../../../Theme'; import { Tooltip } from '../../../Tooltip'; +import emptyChat from '../../images/empty-chat.svg'; +import { ToastManager } from '../Toast/ToastManager'; import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage'; +import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks'; const formatTime = date => { if (!(date instanceof Date)) { @@ -46,7 +50,7 @@ const MessageTypeContainer = ({ left, right }) => { ml: 'auto', mr: '$4', p: '$2 $4', - border: '1px solid $on_surface_low', + border: '1px solid $border_bright', r: '$0', }} > @@ -55,9 +59,9 @@ const MessageTypeContainer = ({ left, right }) => { {left} )} - {left && right && } + {left && right && } {right && ( - + {right} )} @@ -123,16 +127,19 @@ const getMessageType = ({ roles, receiver }) => { } return receiver ? 'private' : ''; }; - -const ChatActions = ({ onPin }) => { +const ChatActions = ({ onPin, showPinAction, messageContent }) => { const [open, setOpen] = useState(false); + const isMobile = useMedia(cssConfig.media.md); + if (!isMobile && !showPinAction) { + return null; + } return ( - + @@ -140,7 +147,7 @@ const ChatActions = ({ onPin }) => { @@ -148,6 +155,30 @@ const ChatActions = ({ onPin }) => { Pin Message + {isMobile && showPinAction ? : null} + {isMobile ? ( + { + try { + navigator?.clipboard.writeText(messageContent); + ToastManager.addToast({ + title: 'Message copied successfully', + }); + } catch (e) { + console.log(e); + ToastManager.addToast({ + title: 'Could not copy message', + }); + } + }} + > + + + Copy Message + + + ) : null} @@ -160,6 +191,8 @@ const SenderName = styled(Text, { whiteSpace: 'nowrap', maxWidth: '24ch', minWidth: 0, + color: '$on_surface_high', + fontWeight: '$semiBold', }); const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => { @@ -170,6 +203,10 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi setRowHeight(index, rowRef.current.clientHeight); } }, [index, setRowHeight]); + const isMobile = useMedia(cssConfig.media.md); + const isHLSViewer = useIsLocalPeerHLSViewer(); + const showStreamingUI = useShowStreamingUI(); + const mwebStreaming = isMobile && (showStreamingUI || isHLSViewer); const hmsActions = useHMSActions(); const localPeerId = useHMSStore(selectLocalPeerID); @@ -194,7 +231,8 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi align="center" css={{ flexWrap: 'wrap', - bg: messageType ? '$surface_bright' : undefined, + // Theme independent color, token should not be used for transparent chat + bg: messageType ? (mwebStreaming ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined, r: messageType ? '$1' : undefined, px: messageType ? '$4' : '$2', py: messageType ? '$4' : 0, @@ -216,30 +254,38 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi > {message.senderName === 'You' || !message.senderName ? ( - {message.senderName || 'Anonymous'} + + {message.senderName || 'Anonymous'} + ) : ( - {message.senderName} + + {message.senderName} + )} - - {formatTime(message.time)} - + {!mwebStreaming ? ( + + {formatTime(message.time)} + + ) : null} - {showPinAction && } + {!mwebStreaming ? ( + + ) : null} { +export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom, mwebStreaming }, listRef) => { const storeMessageSelector = role ? selectMessagesByRole(role) : peerId @@ -347,7 +393,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list : selectHMSMessages; const messages = useHMSStore(storeMessageSelector) || []; - if (messages.length === 0) { + if (messages.length === 0 && !mwebStreaming) { return ( - There are no messages here + + Empty Chat + + Start a conversation + + + There are no messages here yet. Start a conversation by sending a message. + + ); } diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx index c6460e8916..63ef46f0d7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx @@ -1,12 +1,15 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import data from '@emoji-mart/data'; import Picker from '@emoji-mart/react'; import { useHMSActions } from '@100mslive/react-sdk'; import { EmojiIcon, SendIcon } from '@100mslive/react-icons'; -import { Box, Flex, IconButton, Popover, styled } from '../../../'; +import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../../'; import { ToastManager } from '../Toast/ToastManager'; +import { ChatSelectorContainer } from './ChatSelectorContainer'; import { useChatDraftMessage } from '../AppData/useChatState'; import { useEmojiPickerStyles } from './useEmojiPickerStyles'; +import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../common/hooks'; const TextArea = styled('textarea', { width: '100%', @@ -32,9 +35,9 @@ function EmojiPicker({ onSelect }) { return ( - + - + { +export const ChatFooter = ({ role, peerId, onSend, children, onSelect, selection }) => { const hmsActions = useHMSActions(); const inputRef = useRef(null); const [draftMessage, setDraftMessage] = useChatDraftMessage(); + const isMobile = useMedia(cssConfig.media.md); + const isHLSViewer = useIsLocalPeerHLSViewer(); + const showStreamingUI = useShowStreamingUI(); const sendMessage = useCallback(async () => { const message = inputRef.current.value; @@ -102,49 +108,64 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => { }, [setDraftMessage]); return ( - - {children} -