From 1a68a622f415bb9918c3bd7d728d357df367833f Mon Sep 17 00:00:00 2001 From: Saikat Mitra Date: Mon, 11 Sep 2023 07:03:07 +0530 Subject: [PATCH 01/22] fix: saving brand logo url is not reflecting on preview component (#1885) * fix: saving brand logo url is not reflecting on preview component * fix: dependency for the hook --- .../src/Prebuilt/components/Header/HeaderComponents.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx index 278fe08271..907be86c78 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useMedia } from 'react-use'; import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk'; import { VolumeOneIcon } from '@100mslive/react-icons'; @@ -41,6 +41,13 @@ export const Logo = () => { const isConnected = useHMSStore(selectIsConnectedToRoom); const [hideImage, setHideImage] = useState(false); // Hide logo for now as there is not enough space + useEffect(() => { + if (hideImage) { + setHideImage(false); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [logo]); + if (isConnected && isMobile) { return null; } From aa555900704b1e271f05142b77a483a364e76626 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 11:36:28 +0530 Subject: [PATCH 02/22] fix: hide name for inset --- packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx index 7ab8cf2791..5582a2fdb1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx @@ -120,6 +120,7 @@ export const InsetTile = () => { canMinimise isDragabble {...videoTileProps} + hideParticipantNameOnTile /> )} From f963a6d0597ad0d3d8501abfd6619e5d36b9f204 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 11:37:16 +0530 Subject: [PATCH 03/22] fix: chat init state controlled by footer --- .../Prebuilt/components/Footer/ChatToggle.tsx | 11 ++-------- .../src/Prebuilt/components/Footer/Footer.tsx | 20 ++++++++++++++++--- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx index 6ef9cd1310..b3359e4fb1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk'; import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons'; import { Tooltip } from '../../..'; @@ -9,18 +9,11 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane // @ts-ignore: No implicit Any import { SIDE_PANE_OPTIONS } from '../../common/constants'; -export const ChatToggle = ({ openByDefault }: { openByDefault: boolean }) => { +export const ChatToggle = () => { const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount); const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT); const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); - useEffect(() => { - if (!isChatOpen && openByDefault) { - toggleChat(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [toggleChat, openByDefault]); - return ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx index e528e11b7a..dec7fb96dd 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx @@ -1,4 +1,4 @@ -import React, { Suspense } from 'react'; +import React, { Suspense, useEffect } from 'react'; import { useMedia } from 'react-use'; import { ConferencingScreen, @@ -25,6 +25,10 @@ import { ChatToggle } from './ChatToggle'; // @ts-ignore: No implicit Any import { ParticipantCount } from './ParticipantList'; // @ts-ignore: No implicit Any +import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane'; +// @ts-ignore: No implicit Any +import { SIDE_PANE_OPTIONS } from '../../common/constants'; +// @ts-ignore: No implicit Any const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground')); export const Footer = ({ @@ -39,6 +43,16 @@ export const Footer = ({ const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN; const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); + const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT); + const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); + + useEffect(() => { + if (!isChatOpen && openByDefault) { + toggleChat(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [toggleChat, openByDefault]); + return ( {screenType === 'hls_live_streaming' ? : null} - {elements?.chat && } + {elements?.chat && } ) : ( @@ -89,7 +103,7 @@ export const Footer = ({ )} - {!isMobile && elements?.chat && } + {!isMobile && elements?.chat && } {elements?.participant_list && } From 4c25fac36398e03e1ce14b7b83991525cbec7d16 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 11:53:52 +0530 Subject: [PATCH 04/22] refactor: chat participants, auto update ui (#1886) * refactor: chat participants * fix: update check for participant list --- .../src/Prebuilt/components/Chat/Chat.jsx | 8 +- .../components/Chat/ChatParticipantHeader.jsx | 84 ------------ .../components/Footer/ParticipantList.jsx | 2 - .../src/Prebuilt/components/SidePaneTabs.tsx | 120 ++++++++++++++++++ .../src/Prebuilt/layouts/SidePane.tsx | 11 +- 5 files changed, 125 insertions(+), 100 deletions(-) delete mode 100644 packages/roomkit-react/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx index 11a81fdef4..2db74186d0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx @@ -17,7 +17,6 @@ import { Text } from '../../../Text'; import { config as cssConfig } from '../../../Theme'; import { AnnotisedMessage, ChatBody } from './ChatBody'; import { ChatFooter } from './ChatFooter'; -import { ChatParticipantHeader } from './ChatParticipantHeader'; import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; import { useSetSubscribedChatSelector } from '../AppData/useUISettings'; import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage'; @@ -77,7 +76,7 @@ export const Chat = ({ screenType, hideControls = false }) => { peerId: peerSelector && peerName ? peerSelector : '', selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone', }); - const [isSelectorOpen, setSelectorOpen] = useState(false); + const [isSelectorOpen] = useState(false); const listRef = useRef(null); const hmsActions = useHMSActions(); const { setPinnedMessage } = useSetPinnedMessage(); @@ -128,10 +127,7 @@ export const Chat = ({ screenType, hideControls = false }) => { }} > {isMobile && elements?.chat?.is_overlay ? null : ( - <> - setSelectorOpen(value => !value)} /> - {elements?.chat?.allow_pinning_messages ? : null} - + <>{elements?.chat?.allow_pinning_messages ? : null} )} { - const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); - const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); - const [activeTab, setActiveTab] = useState(activeTabValue); - const peerCount = useHMSStore(selectPeerCount); - const { elements } = useRoomLayoutConferencingScreen(); - const showChat = !!elements?.chat; - const showParticipants = !!elements?.participant_list; - const hideTabs = !(showChat && showParticipants); - - return ( - - {hideTabs ? ( - - {showChat ? 'Chat' : `Participants (${peerCount})`} - - ) : ( - - - - - Chat - - - Participants ({peerCount}) - - - - - )} - { - e.stopPropagation(); - if (activeTab === SIDE_PANE_OPTIONS.CHAT) { - toggleChat(); - } else { - toggleParticipants(); - } - }} - data-testid="close_chat" - > - - - - ); -}); diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx index 7011425324..84f9782fc7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx @@ -21,7 +21,6 @@ import { } from '@100mslive/react-icons'; import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..'; import IconButton from '../../IconButton'; -import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader'; import { ConnectionIndicator } from '../Connection/ConnectionIndicator'; import { ToastManager } from '../Toast/ToastManager'; import { RoleAccordion } from './RoleAccordion'; @@ -61,7 +60,6 @@ export const ParticipantList = () => { return ( - {!filter?.search && participants.length === 0 ? null : } {participants.length === 0 ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx new file mode 100644 index 0000000000..13181f4f89 --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx @@ -0,0 +1,120 @@ +import React, { useEffect, useState } from 'react'; +import { ConferencingScreen } from '@100mslive/types-prebuilt'; +import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk'; +import { CrossIcon } from '@100mslive/react-icons'; +// @ts-ignore: No implicit Any +import { Chat } from './Chat/Chat'; +// @ts-ignore: No implicit Any +import { ParticipantList } from './Footer/ParticipantList'; +import { Flex, IconButton, Tabs, Text } from '../..'; +import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; +// @ts-ignore: No implicit Any +import { useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane'; +// @ts-ignore: No implicit Any +import { SIDE_PANE_OPTIONS } from '../common/constants'; + +const tabTriggerCSS = { + color: '$on_surface_high', + p: '$4', + fontWeight: '$semiBold', + fontSize: '$sm', + w: '100%', + justifyContent: 'center', +}; + +export const SidePaneTabs = React.memo<{ + active: 'Participants | Chat'; + screenType: keyof ConferencingScreen; + hideControls?: boolean; +}>(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => { + const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); + const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); + const resetSidePane = useSidepaneReset(); + const [activeTab, setActiveTab] = useState(active); + const peerCount = useHMSStore(selectPeerCount); + const { elements } = useRoomLayoutConferencingScreen(); + const showChat = !!elements?.chat; + const showParticipants = !!elements?.participant_list; + const hideTabs = !(showChat && showParticipants); + + useEffect(() => { + if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) { + setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS); + } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) { + setActiveTab(SIDE_PANE_OPTIONS.CHAT); + } else if (!showChat && !showParticipants) { + resetSidePane(); + } + }, [showChat, activeTab, showParticipants, resetSidePane]); + + return ( + + {hideTabs ? ( + <> + + {showChat ? 'Chat' : `Participants (${peerCount})`} + + {showChat ? : } + + ) : ( + + + + Chat + + + Participants ({peerCount}) + + + + + + + + + + )} + { + e.stopPropagation(); + if (activeTab === SIDE_PANE_OPTIONS.CHAT) { + toggleChat(); + } else { + toggleParticipants(); + } + }} + data-testid="close_chat" + > + + + + ); +}); diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index b370feb614..8c8da3e61f 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -2,10 +2,7 @@ import React from 'react'; import { useMedia } from 'react-use'; import { ConferencingScreen } from '@100mslive/types-prebuilt'; import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk'; -// @ts-ignore: No implicit Any -import { Chat } from '../components/Chat/Chat'; -// @ts-ignore: No implicit Any -import { ParticipantList } from '../components/Footer/ParticipantList'; +import { SidePaneTabs } from '../components/SidePaneTabs'; // @ts-ignore: No implicit Any import { StreamingLanding } from '../components/Streaming/StreamingLanding'; import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout'; @@ -32,10 +29,8 @@ const SidePane = ({ const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id; const { elements } = useRoomLayoutConferencingScreen(); let ViewComponent; - if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) { - ViewComponent = ; - } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) { - ViewComponent = ; + if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) { + ViewComponent = ; } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) { ViewComponent = ; } From 554a3e2105e1b072494b6808157dc54f4748d89a Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 11:55:30 +0530 Subject: [PATCH 05/22] fix: vb for role change --- .../src/Prebuilt/components/Footer/Footer.tsx | 8 +++++--- .../src/Prebuilt/components/Preview/PreviewJoin.tsx | 5 ++--- .../plugins/VirtualBackground/VirtualBackground.jsx | 6 +++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx index dec7fb96dd..91ff40d918 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx @@ -6,7 +6,6 @@ import { HLSLiveStreamingScreen_Elements, } from '@100mslive/types-prebuilt'; import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat'; -import { selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk'; import { config as cssConfig, Footer as AppFooter } from '../../..'; // @ts-ignore: No implicit Any import { AudioVideoToggle } from '../AudioVideoToggle'; @@ -41,7 +40,6 @@ export const Footer = ({ const isMobile = useMedia(cssConfig.media.md); const isOverlayChat = !!elements?.chat?.is_overlay; const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN; - const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT); const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); @@ -77,7 +75,11 @@ export const Footer = ({ > {isMobile ? : null} - {isMobile ? null : }>{isVideoOn ? : null}} + {isMobile ? null : ( + }> + + + )} { - const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); const isMobile = useMedia(cssConfig.media.md); return ( @@ -258,8 +257,8 @@ export const PreviewControls = ({ hideSettings }: { hideSettings: boolean }) => }} > - - {isVideoOn && !isMobile ? : null} + + {!isMobile ? : null} {!hideSettings ? : null} diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx index 2040c2a619..c7a0a4e017 100644 --- a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx +++ b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background'; import { - selectIsAllowedToPublish, + selectIsLocalVideoEnabled, selectIsLocalVideoPluginPresent, selectLocalPeerRole, selectLocalVideoTrackID, @@ -23,8 +23,8 @@ export const VirtualBackground = ({ }) => { const pluginRef = useRef(null); const hmsActions = useHMSActions(); - const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish); const role = useHMSStore(selectLocalPeerRole); + const isVideoOn = useHMSStore(selectIsLocalVideoEnabled); const [isVBLoading, setIsVBLoading] = useState(false); const [isVBSupported, setIsVBSupported] = useState(false); const [isVBOn, setIsVBOn] = useState(false); @@ -69,7 +69,7 @@ export const VirtualBackground = ({ } } - if (!isAllowedToPublish.video || !isVBSupported) { + if (!isVBSupported || !isVideoOn) { return null; } if (asActionTile) { From 79d597fae32fb14cb5ecd88c4e2f5e947597e343 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 12:30:41 +0530 Subject: [PATCH 06/22] fix: extra notification on role change decline, handraise --- .../Notifications/Notifications.jsx | 21 ++++++++---- .../components/RoleChangeRequestModal.tsx | 10 +++--- .../Prebuilt/components/hooks/useMetadata.jsx | 32 ++++--------------- 3 files changed, 27 insertions(+), 36 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx index 8bd6b59ae2..341811d6cb 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx @@ -4,10 +4,12 @@ import { useNavigate, useParams } from 'react-router-dom'; import { HMSNotificationTypes, HMSRoomState, + selectPeerMetadata, selectRoomState, useCustomEvent, useHMSNotifications, useHMSStore, + useHMSVanillaStore, } from '@100mslive/react-sdk'; import { Button } from '../../../'; import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider'; @@ -29,6 +31,7 @@ export function Notifications() { const notification = useHMSNotifications(); const navigate = useNavigate(); const params = useParams(); + const vanillaStore = useHMSVanillaStore(); const subscribedNotifications = useSubscribedNotifications() || {}; const roomState = useHMSStore(selectRoomState); const updateRoomLayoutForRole = useUpdateRoomLayout(); @@ -53,8 +56,8 @@ export function Notifications() { 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. + // Don't show toast message when metadata is updated and raiseHand is false. + // Don't show toast message in case of local peer. const metadata = getMetadata(notification.data?.metadata); if (!metadata?.isHandRaised || notification.data.isLocal) return; @@ -108,14 +111,18 @@ export function Notifications() { title: `Error: ${notification.data?.message} - ${notification.data?.description}`, }); break; - case HMSNotificationTypes.ROLE_UPDATED: + case HMSNotificationTypes.ROLE_UPDATED: { if (notification.data?.isLocal) { - ToastManager.addToast({ - title: `You are now a ${notification.data.roleName}`, - }); - updateRoomLayoutForRole(notification.data.roleName); + const { prevRole } = vanillaStore.getState(selectPeerMetadata(notification.data?.id)); + if (prevRole !== notification?.data?.roleName) { + ToastManager.addToast({ + title: `You are now a ${notification.data.roleName}`, + }); + updateRoomLayoutForRole(notification.data.roleName); + } } break; + } case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST: const track = notification.data?.track; if (!notification.data.enabled) { diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx index 647651eadc..6c598a4078 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx @@ -27,9 +27,11 @@ export const RoleChangeRequestModal = () => { if (!roleChangeRequest?.role) { return; } - - hmsActions.preview({ asRole: roleChangeRequest.role.name }); - }, [hmsActions, roleChangeRequest]); + (async () => { + await updateMetaData({ prevRole: currentRole }); + await hmsActions.preview({ asRole: roleChangeRequest.role.name }); + })(); + }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]); if (!roleChangeRequest?.role) { return null; @@ -69,7 +71,7 @@ export const RoleChangeRequestModal = () => { body={body} onAction={async () => { await hmsActions.acceptChangeRole(roleChangeRequest); - await updateMetaData({ isHandRaised: false, prevRole: currentRole }); + await updateMetaData({ isHandRaised: false }); }} actionText="Accept" /> diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx index d3dfc7d42e..7be346a869 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useMetadata.jsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react'; +import { useCallback } from 'react'; import { selectLocalPeerID, selectPeerMetadata, @@ -12,8 +12,6 @@ export const useMyMetadata = () => { const localPeerId = useHMSStore(selectLocalPeerID); const vanillaStore = useHMSVanillaStore(); const metaData = useHMSStore(selectPeerMetadata(localPeerId)); - const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false); - const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back const update = async updatedFields => { try { @@ -27,28 +25,12 @@ export const useMyMetadata = () => { }; const toggleHandRaise = useCallback(async () => { - const brbUpdate = !isHandRaised ? false : isBRBOn; - const success = await update({ - isHandRaised: !isHandRaised, - isBRBOn: brbUpdate, - }); - if (success) { - setBRBOn(brbUpdate); - setHandRaised(!isHandRaised); - } - }, [isHandRaised, isBRBOn]); //eslint-disable-line + await update({ isHandRaised: !metaData?.isHandRaised, isBRBOn: false }); + }, [metaData?.isHandRaised]); //eslint-disable-line const toggleBRB = useCallback(async () => { - const handRaiseUpdate = !isBRBOn ? false : isHandRaised; - const success = await update({ - isHandRaised: handRaiseUpdate, - isBRBOn: !isBRBOn, - }); - if (success) { - setBRBOn(!isBRBOn); - setHandRaised(handRaiseUpdate); - } - }, [isHandRaised, isBRBOn]); //eslint-disable-line + await update({ isBRBOn: !metaData?.isBRBOn, isHandRaised: false }); + }, [metaData?.isBRBOn]); //eslint-disable-line const setPrevRole = async role => { await update({ @@ -57,8 +39,8 @@ export const useMyMetadata = () => { }; return { - isHandRaised, - isBRBOn, + isHandRaised: !!metaData?.isHandRaised, + isBRBOn: !!metaData?.isBRBOn, metaData, updateMetaData: update, toggleHandRaise, From 9480f6794b238b679f307ce3c91caf942dbe4e2c Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 12:46:29 +0530 Subject: [PATCH 07/22] fix: screenshare tile controls showing in beam --- .../roomkit-react/src/Prebuilt/layouts/SidePane.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index 8c8da3e61f..d7c020bf6a 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -38,6 +38,14 @@ const SidePane = ({ return null; } + const tileLayout = { + hideParticipantNameOnTile: tileProps.hide_participant_name_on_tile, + roundedVideoTile: tileProps.rounded_video_tile, + hideAudioMuteOnTile: tileProps.hide_audio_mute_on_tile, + hideMetadataOnTile: tileProps.hide_metadata_on_tile, + objectFit: tileProps.video_object_fit, + }; + const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay; return ( @@ -59,8 +67,7 @@ const SidePane = ({ width="100%" height={225} rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }} - objectFit="contain" - {...tileProps} + {...tileLayout} /> )} {!!ViewComponent && ( From 71ece5d54f6d0ac59dcad5648dd379c572671ca4 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Mon, 11 Sep 2023 13:07:07 +0530 Subject: [PATCH 08/22] fix: add null check --- .../roomkit-react/src/Prebuilt/layouts/SidePane.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index d7c020bf6a..ebeee18e7c 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -39,11 +39,11 @@ const SidePane = ({ } const tileLayout = { - hideParticipantNameOnTile: tileProps.hide_participant_name_on_tile, - roundedVideoTile: tileProps.rounded_video_tile, - hideAudioMuteOnTile: tileProps.hide_audio_mute_on_tile, - hideMetadataOnTile: tileProps.hide_metadata_on_tile, - objectFit: tileProps.video_object_fit, + hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile, + roundedVideoTile: tileProps?.rounded_video_tile, + hideAudioMuteOnTile: tileProps?.hide_audio_mute_on_tile, + hideMetadataOnTile: tileProps?.hide_metadata_on_tile, + objectFit: tileProps?.video_object_fit, }; const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay; From 189c4f95c0a553d2955bec6388a83ea5cc794b4e Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 13:18:54 +0530 Subject: [PATCH 09/22] feat: prebuilt header --- apps/100ms-custom-app/src/App.jsx | 24 ++- .../100ms-custom-app/src/components/Header.js | 190 ++++++++---------- apps/100ms-custom-app/src/utils/utils.js | 35 ++++ 3 files changed, 144 insertions(+), 105 deletions(-) diff --git a/apps/100ms-custom-app/src/App.jsx b/apps/100ms-custom-app/src/App.jsx index 742dfb6467..ab5f5a02dd 100644 --- a/apps/100ms-custom-app/src/App.jsx +++ b/apps/100ms-custom-app/src/App.jsx @@ -1,22 +1,34 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { Suspense, useEffect, useRef, useState } from 'react'; import { Flex, HMSPrebuilt } from '@100mslive/roomkit-react'; import { useOverridePrebuiltLayout } from './hooks/useOverridePrebuiltLayout'; import { useSearchParam } from './hooks/useSearchParam'; import { + fetchData, getAuthTokenUsingRoomIdRole, getRoomCodeFromUrl, getRoomIdRoleFromUrl, } from './utils/utils'; +const Header = React.lazy(() => import('./components/Header')); + const App = () => { const roomCode = getRoomCodeFromUrl(); + const [onlyEmail, setOnlyEmail] = useState(false); const [authToken, setAuthToken] = useState(useSearchParam('auth_token')); + const [data, setData] = useState({}); + const [showHeader, setShowHeader] = useState(false); // added subdomain in query param for easy testing in vercel links const subdomain = useSearchParam('subdomain') || window.location.hostname; const { roomId, role } = getRoomIdRoleFromUrl(); const { overrideLayout, isHeadless } = useOverridePrebuiltLayout(); const hmsPrebuiltRef = useRef(); + useEffect(() => { + if (roomCode) { + fetchData(subdomain, roomCode, setOnlyEmail, setData, setShowHeader); + } + }, []); + useEffect(() => { // remove notifications and messages for beam // enable beam speaker logging for transcription @@ -48,6 +60,16 @@ const App = () => { direction="column" css={{ size: '100%', overflowY: 'hidden', bg: '$background_dim' }} > + {onlyEmail && showHeader && ( + +
+ + )} {(authToken || roomCode) && ( import('./DownloadCodeModal')); const InviteLinksModal = React.lazy(() => import('./InviteLinksModal')); + const LogoImg = styled('img', { - maxHeight: '$14', + maxHeight: '$10', width: 'auto', cursor: 'pointer', '@md': { - maxHeight: '$12', + maxHeight: '$10', }, }); -const randomColor = getRandomColor(); export default function Header({ - savingData, - refreshData, - settings, - roomLinks, + roomLinks = {}, onlyEmail, - toggleModal, + policyID = '', + theme = 'DARK', }) { const [modal, togModal] = useState(false); - const [codeModal, setCodeModal] = useState(false); - - const generateEnvData = useCallback( - logo => { - return `REACT_APP_TILE_SHAPE=${settings.tile_shape}\nREACT_APP_THEME=${ - settings.theme - }\nREACT_APP_COLOR=${settings.brand_color}\nREACT_APP_LOGO=${ - logo || '' - }\nREACT_APP_FONT=${ - settings.font - }\nREACT_APP_TOKEN_GENERATION_ENDPOINT=${`${ - apiBasePath + window.location.hostname - }/`}\nREACT_APP_ENV=${process.env.REACT_APP_ENV}\n`; - }, - [settings.tile_shape, settings.brand_color, settings.theme, settings.font] - ); - - const downloadCode = async () => { - await refreshData().then(logo => { - var envFile = document.createElement('a'); - const data = generateEnvData(logo); - envFile.setAttribute( - 'href', - `data:text/plain;charset=utf-8,${encodeURIComponent(data)}` - ); - envFile.download = 'example.env'; - envFile.style.display = 'none'; - document.body.appendChild(envFile); - envFile.click(); - document.body.removeChild(envFile); - }); - }; return ( <> @@ -79,75 +42,94 @@ export default function Header({ onClick={() => { window.open(process.env.REACT_APP_DASHBOARD_LINK); }} - src={settings.theme === 'dark' ? logo : darkLogo} + src={theme !== 'DARK' ? darkLogo : logo} alt="100ms logo" width={132} height={40} /> - {onlyEmail && ( - <> - {roomLinks && Object.keys(roomLinks).length > 0 && ( - - )} - - + + + Invite Others + + + )} + - - )} - - - {getInitialsFromEmail()} - - + + - {codeModal && ( - - setCodeModal(false)} - /> - - )} + {modal && ( { + const jwt = getAuthInfo().token; + + const url = `${apiBasePath}apps/get-details?domain=${subdomain}&room_id=${roomCode}`; + const headers = {}; + if (jwt) { + headers['Authorization'] = `Bearer ${jwt}`; + } + headers['Content-Type'] = 'application/json'; + + getWithRetry(url, headers) + .then(res => { + if (res.data.success) { + setOnlyEmail(res.data.same_user); + setShowHeader(true); + setData({ + roomLinks: res.data.room_link, + policyID: res.data.policy_id, + theme: res.data.theme, + }); + } + }) + .catch(err => { + setShowHeader(false); + const errorMessage = `[Get Details] ${err.message}`; + console.error(errorMessage); + }); +}; From e9017621fb9f9594f985d47483ccab4bed324a35 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:34:11 +0530 Subject: [PATCH 10/22] build: update versions for alpha 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 79dfc9b11b..837d8d91f7 100644 --- a/apps/100ms-custom-app/package.json +++ b/apps/100ms-custom-app/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@100mslive/react-icons": "0.8.15-alpha.1", - "@100mslive/roomkit-react": "0.1.6-alpha.1", + "@100mslive/react-icons": "0.8.15-alpha.2", + "@100mslive/roomkit-react": "0.1.6-alpha.2", "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 2cfd3ac468..b7f5718953 100644 --- a/apps/100ms-web/package.json +++ b/apps/100ms-web/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/hls-player": "0.1.15-alpha.1", - "@100mslive/hms-virtual-background": "1.11.15-alpha.1", - "@100mslive/react-icons": "0.8.15-alpha.1", - "@100mslive/react-sdk": "0.8.15-alpha.1", - "@100mslive/roomkit-react": "0.1.6-alpha.1", + "@100mslive/hls-player": "0.1.15-alpha.2", + "@100mslive/hms-virtual-background": "1.11.15-alpha.2", + "@100mslive/react-icons": "0.8.15-alpha.2", + "@100mslive/react-sdk": "0.8.15-alpha.2", + "@100mslive/roomkit-react": "0.1.6-alpha.2", "@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 7340323497..85c0f29fcb 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.1.15-alpha.1", + "version": "0.1.15-alpha.2", "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.15-alpha.1", + "@100mslive/hls-stats": "0.2.15-alpha.2", "eventemitter2": "^6.4.7", "hls.js": "^1.4.12" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index 2eab191d36..f0a3197970 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.2.15-alpha.1", + "version": "0.2.15-alpha.2", "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 17b0704ddb..b53ed786e2 100644 --- a/packages/hms-noise-suppression/package.json +++ b/packages/hms-noise-suppression/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.15-alpha.1", + "version": "0.9.15-alpha.2", "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.15-alpha.1" + "@100mslive/hms-video": "0.9.15-alpha.2" } } diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json index b11f306256..34d88ca6a3 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.10.15-alpha.1", + "version": "0.10.15-alpha.2", "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.15-alpha.1", + "@100mslive/hms-video": "0.9.15-alpha.2", "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 2dc1ae2048..7016b432a0 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.15-alpha.1", + "version": "0.9.15-alpha.2", "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 3ad9d9c743..a2b2461b0e 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.11.15-alpha.1", + "version": "1.11.15-alpha.2", "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.15-alpha.1" + "@100mslive/hms-video": "0.9.15-alpha.2" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index d3af71d681..d530889f3a 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.15-alpha.1", + "version": "0.8.15-alpha.2", "author": "100ms", "license": "MIT", "files": [ diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index acafeec07e..5de5b480a4 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.15-alpha.1", + "version": "0.8.15-alpha.2", "author": "100ms", "license": "MIT", "files": [ @@ -43,7 +43,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.10.15-alpha.1", + "@100mslive/hms-video-store": "0.10.15-alpha.2", "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 360eb1d757..0d0c0ed824 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.1.6-alpha.1", + "version": "0.1.6-alpha.2", "author": "100ms", "license": "MIT", "files": [ @@ -76,10 +76,10 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.1.15-alpha.1", - "@100mslive/hms-virtual-background": "1.11.15-alpha.1", - "@100mslive/react-icons": "0.8.15-alpha.1", - "@100mslive/react-sdk": "0.8.15-alpha.1", + "@100mslive/hls-player": "0.1.15-alpha.2", + "@100mslive/hms-virtual-background": "1.11.15-alpha.2", + "@100mslive/react-icons": "0.8.15-alpha.2", + "@100mslive/react-sdk": "0.8.15-alpha.2", "@100mslive/types-prebuilt": "0.12.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", From a3cedc71c5fcbdce477e94d708fb902b928140eb Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Mon, 11 Sep 2023 15:18:19 +0530 Subject: [PATCH 11/22] fix: hls stream recover after network disconnection (#1883) * fix: hls stream recover after newtwork disconnection * fix: updated the version of hls.js --- packages/hls-player/package.json | 2 +- packages/hls-stats/package.json | 4 ++-- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index 85c0f29fcb..7e3069f621 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -33,6 +33,6 @@ "dependencies": { "@100mslive/hls-stats": "0.2.15-alpha.2", "eventemitter2": "^6.4.7", - "hls.js": "^1.4.12" + "hls.js": "1.4.3" } } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index f0a3197970..6876479ee0 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -31,9 +31,9 @@ "author": "Ragzzy-R", "license": "ISC", "devDependencies": { - "hls.js": "^1.4.12" + "hls.js": "1.4.3" }, "peerDependencies": { - "hls.js": "^1.4.12" + "hls.js": "1.4.3" } } diff --git a/yarn.lock b/yarn.lock index 8db2e6de01..bea4183117 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10543,10 +10543,10 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hls.js@^1.4.12: - version "1.4.12" - resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.12.tgz#2022daa29d10c662387d80a5297f8330f8ef5ee2" - integrity sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA== +hls.js@1.4.3: + version "1.4.3" + resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.3.tgz#9326a680f5905631f86344d0ae155b5ef9d1bad7" + integrity sha512-EE1MjIYDNO+ynbmCpAWfhUwQpyG8gUcKKuGDGgYgfRmW/g+inQUQ8sVVVY5WZaCxEGxDMGLbXhXGepkmDIMvdw== hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" From f7561dbf7463081cf98c96e638e6103a05114351 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 16:07:32 +0530 Subject: [PATCH 12/22] fix: handraise flow (#1896) --- .../components/Notifications/Notifications.jsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx index 341811d6cb..73fbfd65ea 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx @@ -4,7 +4,6 @@ import { useNavigate, useParams } from 'react-router-dom'; import { HMSNotificationTypes, HMSRoomState, - selectPeerMetadata, selectRoomState, useCustomEvent, useHMSNotifications, @@ -113,13 +112,10 @@ export function Notifications() { break; case HMSNotificationTypes.ROLE_UPDATED: { if (notification.data?.isLocal) { - const { prevRole } = vanillaStore.getState(selectPeerMetadata(notification.data?.id)); - if (prevRole !== notification?.data?.roleName) { - ToastManager.addToast({ - title: `You are now a ${notification.data.roleName}`, - }); - updateRoomLayoutForRole(notification.data.roleName); - } + ToastManager.addToast({ + title: `You are now a ${notification.data.roleName}`, + }); + updateRoomLayoutForRole(notification.data.roleName); } break; } From 4eb0e8b2f31903df8b77a53b13133ef767669229 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 16:28:57 +0530 Subject: [PATCH 13/22] fix: ui for chat, participant list --- .../src/Prebuilt/components/Footer/Footer.tsx | 2 +- .../components/Footer/ParticipantList.jsx | 7 +- .../src/Prebuilt/components/SidePaneTabs.tsx | 129 ++++++++++-------- 3 files changed, 77 insertions(+), 61 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx index 91ff40d918..c6c2a19655 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx @@ -60,7 +60,7 @@ export const Footer = ({ gap: '$10', position: 'relative', // To prevent it from showing over the sidepane if chat type is not overlay - zIndex: isOverlayChat ? 20 : 1, + zIndex: isOverlayChat && isChatOpen ? 20 : 1, }, }} > diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx index 84f9782fc7..dbafa9c64d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx @@ -119,10 +119,11 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter direction="column" css={{ gap: '$8', - maxHeight: '100%', overflowY: 'auto', overflowX: 'hidden', - pr: '$3', + pr: '$10', + mr: '-$10', + flex: '1 1 0', }} > { if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) { @@ -55,66 +60,76 @@ export const SidePaneTabs = React.memo<{ h: '100%', }} > - {hideTabs ? ( - <> - - {showChat ? 'Chat' : `Participants (${peerCount})`} - - {showChat ? : } - + {isOverlayChat && isChatOpen && showChat ? ( + ) : ( - - - - Chat - - + {hideTabs ? ( + <> + + {showChat ? 'Chat' : `Participants (${peerCount})`} + + + {showChat ? : } + + ) : ( + - Participants ({peerCount}) - - - - - - - - - + + + Chat + + + Participants ({peerCount}) + + + + + + + + + + )} + + )} + + {isOverlayChat && isChatOpen ? null : ( + { + e.stopPropagation(); + if (activeTab === SIDE_PANE_OPTIONS.CHAT) { + toggleChat(); + } else { + toggleParticipants(); + } + }} + data-testid="close_chat" + > + + )} - { - e.stopPropagation(); - if (activeTab === SIDE_PANE_OPTIONS.CHAT) { - toggleChat(); - } else { - toggleParticipants(); - } - }} - data-testid="close_chat" - > - - ); }); From e88e69002910f0f2767dfc745a532f6c09ae3da0 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 16:35:02 +0530 Subject: [PATCH 14/22] fix: extra handraise notification --- .../src/Prebuilt/components/RoleChangeRequestModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx index 6c598a4078..a2a1d3f77f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.tsx @@ -28,7 +28,6 @@ export const RoleChangeRequestModal = () => { return; } (async () => { - await updateMetaData({ prevRole: currentRole }); await hmsActions.preview({ asRole: roleChangeRequest.role.name }); })(); }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]); @@ -71,7 +70,7 @@ export const RoleChangeRequestModal = () => { body={body} onAction={async () => { await hmsActions.acceptChangeRole(roleChangeRequest); - await updateMetaData({ isHandRaised: false }); + await updateMetaData({ isHandRaised: false, prevRole: currentRole }); }} actionText="Accept" /> From 3230b9e4f6dc0904ec8f0a8150502436bcfe160d Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Sep 2023 17:03:17 +0530 Subject: [PATCH 15/22] fix: accordion css --- .../src/Prebuilt/components/Footer/RoleAccordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx index f90b0018aa..65f50040fc 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx @@ -46,7 +46,7 @@ export const RoleAccordion = ({ const height = ROW_HEIGHT * peerList.length; return ( - + Date: Mon, 11 Sep 2023 17:28:17 +0530 Subject: [PATCH 16/22] fix: typo, hide custom header for mweb --- apps/100ms-custom-app/src/App.jsx | 1 - apps/100ms-custom-app/src/components/Header.js | 15 +++++++++++++-- apps/100ms-custom-app/src/utils/utils.js | 2 +- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/100ms-custom-app/src/App.jsx b/apps/100ms-custom-app/src/App.jsx index ab5f5a02dd..42fd489094 100644 --- a/apps/100ms-custom-app/src/App.jsx +++ b/apps/100ms-custom-app/src/App.jsx @@ -64,7 +64,6 @@ const App = () => {
diff --git a/apps/100ms-custom-app/src/components/Header.js b/apps/100ms-custom-app/src/components/Header.js index b1a0209db4..ef69e0e039 100644 --- a/apps/100ms-custom-app/src/components/Header.js +++ b/apps/100ms-custom-app/src/components/Header.js @@ -1,10 +1,17 @@ import React, { Suspense, useState } from 'react'; +import { useMedia } from 'react-use'; import { BrushDesignIcon, PeopleAddIcon, PersonContactIcon, } from '@100mslive/react-icons'; -import { Button, Flex, styled, Text } from '@100mslive/roomkit-react'; +import { + Button, + config as cssConfig, + Flex, + styled, + Text, +} from '@100mslive/roomkit-react'; import darkLogo from '../assets/images/100ms_dark.svg'; import logo from '../assets/images/100ms_logo.svg'; @@ -21,11 +28,15 @@ const LogoImg = styled('img', { export default function Header({ roomLinks = {}, - onlyEmail, policyID = '', theme = 'DARK', }) { const [modal, togModal] = useState(false); + const isMobile = useMedia(cssConfig.media.md); + + if (isMobile) { + return null; + } return ( <> diff --git a/apps/100ms-custom-app/src/utils/utils.js b/apps/100ms-custom-app/src/utils/utils.js index 6c84f444b8..412e034b82 100644 --- a/apps/100ms-custom-app/src/utils/utils.js +++ b/apps/100ms-custom-app/src/utils/utils.js @@ -206,7 +206,7 @@ export const fetchData = async ( setOnlyEmail(res.data.same_user); setShowHeader(true); setData({ - roomLinks: res.data.room_link, + roomLinks: res.data.room_links, policyID: res.data.policy_id, theme: res.data.theme, }); From dae85f90e6e8f6cd436a077b1bce1cc813b49dcf Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 11 Sep 2023 17:44:09 +0530 Subject: [PATCH 17/22] fix: chat/particiants tab --- packages/react-sdk/src/hooks/usePreviewJoin.ts | 4 +++- .../src/Prebuilt/components/Notifications/Notifications.jsx | 2 -- .../roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx | 4 ++++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-sdk/src/hooks/usePreviewJoin.ts b/packages/react-sdk/src/hooks/usePreviewJoin.ts index 7a3a22cdea..fb1b13d85e 100644 --- a/packages/react-sdk/src/hooks/usePreviewJoin.ts +++ b/packages/react-sdk/src/hooks/usePreviewJoin.ts @@ -127,7 +127,9 @@ export const usePreviewJoin = ({ } try { if (isConnected || roomState !== HMSRoomState.Disconnected) { - await actions.leave(); + await actions.leave().catch(() => { + // Do nothing as this might lead to leave called before join + }); } await actions.preview(config); } catch (err) { diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx index 73fbfd65ea..b1a44fd221 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.jsx @@ -8,7 +8,6 @@ import { useCustomEvent, useHMSNotifications, useHMSStore, - useHMSVanillaStore, } from '@100mslive/react-sdk'; import { Button } from '../../../'; import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider'; @@ -30,7 +29,6 @@ export function Notifications() { const notification = useHMSNotifications(); const navigate = useNavigate(); const params = useParams(); - const vanillaStore = useHMSVanillaStore(); const subscribedNotifications = useSubscribedNotifications() || {}; const roomState = useHMSStore(selectRoomState); const updateRoomLayoutForRole = useUpdateRoomLayout(); diff --git a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx index 6a18e83250..bd28384167 100644 --- a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx @@ -52,6 +52,10 @@ export const SidePaneTabs = React.memo<{ } }, [showChat, activeTab, showParticipants, resetSidePane]); + useEffect(() => { + setActiveTab(active); + }, [active]); + return ( Date: Mon, 11 Sep 2023 17:54:52 +0530 Subject: [PATCH 18/22] fix: show logo in mweb header --- .../Prebuilt/components/Header/HeaderComponents.jsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx index 907be86c78..e2b0d9de82 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx @@ -1,8 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { useMedia } from 'react-use'; -import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk'; +import { selectDominantSpeaker, useHMSStore } from '@100mslive/react-sdk'; import { VolumeOneIcon } from '@100mslive/react-icons'; -import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../'; +import { Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../'; import { useRoomLayout } from '../../provider/roomLayoutProvider'; export const SpeakerTag = () => { @@ -37,8 +36,6 @@ const LogoImg = styled('img', { export const Logo = () => { const roomLayout = useRoomLayout(); const logo = roomLayout?.logo?.url; - const isMobile = useMedia(cssConfig.media.md); - const isConnected = useHMSStore(selectIsConnectedToRoom); const [hideImage, setHideImage] = useState(false); // Hide logo for now as there is not enough space useEffect(() => { @@ -48,9 +45,6 @@ export const Logo = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [logo]); - if (isConnected && isMobile) { - return null; - } return logo && !hideImage ? ( Date: Mon, 11 Sep 2023 17:59:12 +0530 Subject: [PATCH 19/22] fix: add null check in screenshare tile --- .../Prebuilt/components/ScreenshareTile.jsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/ScreenshareTile.jsx b/packages/roomkit-react/src/Prebuilt/components/ScreenshareTile.jsx index 4451aec164..6f8f9ea6e5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ScreenshareTile.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/ScreenshareTile.jsx @@ -34,11 +34,6 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => { const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly); const [isMouseHovered, setIsMouseHovered] = useState(false); const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles); - const label = getVideoTileLabel({ - peerName: peer.name, - isLocal: false, - track, - }); const fullscreenRef = useRef(null); // fullscreen is for desired state const [fullscreen, setFullscreen] = useState(false); @@ -56,6 +51,13 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => { if (!peer) { return null; } + + const label = getVideoTileLabel({ + peerName: peer?.name, + isLocal: false, + track, + }); + return ( { /> ) : null} {label} - {isMouseHovered && !peer?.isLocal ? ( - + {isMouseHovered && !peer.isLocal ? ( + ) : null} From 7702269af8b8b7a39b5d7d22815ecc125f9b6f77 Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Tue, 12 Sep 2023 14:34:21 +0530 Subject: [PATCH 20/22] fix: overlay chat repostion on tapping --- .../roomkit-react/src/Prebuilt/components/Chat/Chat.jsx | 4 +--- .../src/Prebuilt/components/SidePaneTabs.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx index 2db74186d0..4b4427ee1b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx @@ -66,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => { ) : null; }; -export const Chat = ({ screenType, hideControls = false }) => { +export const Chat = ({ screenType }) => { const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT); const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID); const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE); @@ -122,8 +122,6 @@ export const Chat = ({ screenType, hideControls = false }) => { css={{ size: '100%', gap: '$4', - marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0', - transition: 'margin 0.3s ease-in-out', }} > {isMobile && elements?.chat?.is_overlay ? null : ( diff --git a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx index bd28384167..58acb3bb16 100644 --- a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx @@ -62,10 +62,12 @@ export const SidePaneTabs = React.memo<{ css={{ color: '$on_primary_high', h: '100%', + marginTop: hideControls && isOverlayChat ? '$17' : '0', + transition: 'margin 0.3s ease-in-out', }} > {isOverlayChat && isChatOpen && showChat ? ( - + ) : ( <> {hideTabs ? ( @@ -74,7 +76,7 @@ export const SidePaneTabs = React.memo<{ {showChat ? 'Chat' : `Participants (${peerCount})`} - {showChat ? : } + {showChat ? : } ) : ( - + )} From ca7550db3a40a8b3c8ce903bb032b67e7a30e982 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Tue, 12 Sep 2023 18:45:18 +0530 Subject: [PATCH 21/22] fix: show end session if endRoom permission exists --- .../components/Leave/DesktopLeaveRoom.tsx | 16 +++++++--------- .../src/Prebuilt/components/Leave/LeaveRoom.tsx | 8 ++++++-- .../Prebuilt/components/Leave/MwebLeaveRoom.tsx | 11 +++++++---- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx index 20c52da8dc..32199ba117 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx @@ -16,9 +16,11 @@ import { useDropdownList } from '../hooks/useDropdownList'; export const DesktopLeaveRoom = ({ leaveRoom, screenType, + endRoom, }: { leaveRoom: (args: { endstream: boolean }) => void; screenType: keyof ConferencingScreen; + endRoom: () => void; }) => { const [open, setOpen] = useState(false); const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false); @@ -26,7 +28,7 @@ export const DesktopLeaveRoom = ({ const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); - const showStream = permissions?.hlsStreaming && isStreamingOn; + const showStream = screenType !== 'hls_live_streaming' && isStreamingOn; useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' }); @@ -36,7 +38,7 @@ export const DesktopLeaveRoom = ({ return ( - {permissions.hlsStreaming ? ( + {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? ( { - if (screenType === 'hls_live_streaming') { - setShowLeaveRoomAlert(true); - } else { - leaveRoom({ endstream: false }); - } + leaveRoom({ endstream: false }); }} > @@ -94,7 +92,7 @@ export const DesktopLeaveRoom = ({ css={{ p: 0 }} /> - {isStreamingOn && permissions?.hlsStreaming ? ( + {permissions?.endRoom || permissions?.hlsStreaming ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx index 8fcc658dae..8fcfcae662 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx @@ -46,6 +46,10 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' }); } }; + const endRoom = () => { + hmsActions.endRoom(false, 'End Room'); + redirectToLeave(); + }; const leaveRoom = async ({ endstream = false }) => { if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) { @@ -59,8 +63,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen return null; } return isMobile ? ( - + ) : ( - + ); }; diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx index 84dbe756db..fabd3d70b4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx @@ -17,9 +17,11 @@ import { useDropdownList } from '../hooks/useDropdownList'; export const MwebLeaveRoom = ({ leaveRoom, screenType, + endRoom, }: { leaveRoom: (args: { endstream: boolean }) => void; screenType: keyof ConferencingScreen; + endRoom: () => void; }) => { const [open, setOpen] = useState(false); const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false); @@ -27,8 +29,8 @@ export const MwebLeaveRoom = ({ const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); + const showStream = screenType !== 'hls_live_streaming' && isStreamingOn; - const showStream = permissions?.hlsStreaming && isStreamingOn; useDropdownList({ open, name: 'LeaveRoom' }); if (!permissions || !isConnected) { @@ -37,7 +39,7 @@ export const MwebLeaveRoom = ({ return ( - {permissions?.hlsStreaming ? ( + {screenType !== 'hls_live_streaming' ? ( leaveRoom({ endstream: false })} css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }} /> - {isStreamingOn && permissions?.hlsStreaming ? ( + + {permissions?.endRoom || permissions?.hlsStreaming ? ( From 71f7e1f2871c3fdff7425a1d5ad6afbfaae3c8dd Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Tue, 12 Sep 2023 21:58:43 +0530 Subject: [PATCH 22/22] fix: 9:16 aspect ratio is not working in mweb (#1909) * fix: 9:16 aspect ratio is not working in mweb * fix: cleanup of code * fix: name typo * Update packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts --------- Co-authored-by: Saikat Mitra --- .../media/settings/HMSVideoTrackSettings.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts b/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts index 10656eccb3..1e1a0aa81c 100644 --- a/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts +++ b/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts @@ -1,5 +1,6 @@ import { IAnalyticsPropertiesProvider } from '../../analytics/IAnalyticsPropertiesProvider'; import { HMSFacingMode, HMSVideoCodec, HMSVideoTrackSettings as IHMSVideoTrackSettings } from '../../interfaces'; +import { isMobile } from '../../utils/support'; export class HMSVideoTrackSettingsBuilder { private _width?: number = 320; @@ -115,9 +116,10 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics if (isScreenShare) { dimensionConstraintKey = 'max'; } + const aspectRatio = this.improviseConstraintsAspect(); return { - width: { [dimensionConstraintKey]: this.width }, - height: { [dimensionConstraintKey]: this.height }, + width: { [dimensionConstraintKey]: aspectRatio.width }, + height: { [dimensionConstraintKey]: aspectRatio.height }, frameRate: this.maxFramerate, deviceId: this.deviceId, facingMode: this.facingMode, @@ -134,4 +136,18 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics facingMode: this.facingMode, }; } + + // reverse the height and width if mobile as mobile web browsers override the height and width basis orientation + private improviseConstraintsAspect(): Partial { + if (isMobile() && this.height && this.width && this.height > this.width) { + return { + width: this.height, + height: this.width, + }; + } + return { + width: this.width, + height: this.height, + }; + } }