From bc21ddf1fdf019384ab96f68e7ea3eb131a4dfa4 Mon Sep 17 00:00:00 2001 From: ygit Date: Thu, 3 Oct 2024 16:23:36 +0530 Subject: [PATCH 01/49] fix: make interruption reason generic (#3290) --- .../src/media/tracks/HMSLocalVideoTrack.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts index 5e5090ecd8..f05da3f17e 100644 --- a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts @@ -522,11 +522,12 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { } private handleTrackMute = () => { - HMSLogger.d(this.TAG, 'muted natively'); + HMSLogger.d(this.TAG, 'muted natively', document.visibilityState); + const reason = document.visibilityState === 'hidden' ? 'visibility-change' : 'incoming-call'; this.eventBus.analytics.publish( this.sendInterruptionEvent({ started: true, - reason: 'incoming-call', + reason: reason, }), ); this.eventBus.localVideoEnabled.publish({ enabled: false, track: this }); @@ -534,11 +535,12 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { /** @internal */ handleTrackUnmute = () => { - HMSLogger.d(this.TAG, 'unmuted natively'); + HMSLogger.d(this.TAG, 'unmuted natively', document.visibilityState); + const reason = document.visibilityState === 'hidden' ? 'visibility-change' : 'incoming-call'; this.eventBus.analytics.publish( this.sendInterruptionEvent({ started: false, - reason: 'incoming-call', + reason: reason, }), ); super.handleTrackUnmute(); From 201a92fdcee1274cf4ade6a179deaf10b46f6cd8 Mon Sep 17 00:00:00 2001 From: ygit Date: Fri, 4 Oct 2024 17:02:58 +0530 Subject: [PATCH 02/49] fix: wrong color applied for vb selection in mweb (#3283) --- .../src/Prebuilt/components/VirtualBackground/VBOption.tsx | 4 +++- .../src/Prebuilt/components/VirtualBackground/VBPicker.tsx | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBOption.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBOption.tsx index 58b4294170..17340ee391 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBOption.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBOption.tsx @@ -25,7 +25,9 @@ const Root = ({ bg: '$surface_bright', border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`, cursor: 'pointer', - '&:hover': { border: '4px solid $primary_dim' }, + '@media (hover:hover)': { + '&:hover': { border: '4px solid $primary_dim' }, + }, ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}), }} onClick={async () => { diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx index 30a1dc70ad..2ad687cf2f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx @@ -180,6 +180,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac onClick: async () => { await VBHandler.removeEffects(); hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE); + if (isMobile) { + toggleVB(); + } }, supported: true, }, @@ -235,6 +238,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac onClick: async () => { await VBHandler?.setBackground(mediaURL); hmsActions.setAppData(APP_DATA.background, mediaURL); + if (isMobile) { + toggleVB(); + } }, supported: true, }))} From 6239e8a0f7b44da57d3c07a9bda0324bb103d952 Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Tue, 8 Oct 2024 16:59:04 +0530 Subject: [PATCH 03/49] feat: add debug info in stats for nerds --- packages/hms-video-store/src/IHMSActions.ts | 3 ++ .../src/reactive-store/HMSSDKActions.ts | 4 +++ .../hms-video-store/src/schema/settings.ts | 6 ++++ packages/hms-video-store/src/sdk/index.ts | 12 +++++++ .../src/Prebuilt/components/StatsForNerds.jsx | 35 +++++++++++++++++-- 5 files changed, 57 insertions(+), 3 deletions(-) diff --git a/packages/hms-video-store/src/IHMSActions.ts b/packages/hms-video-store/src/IHMSActions.ts index d1ab46e0ff..7eaea1424b 100644 --- a/packages/hms-video-store/src/IHMSActions.ts +++ b/packages/hms-video-store/src/IHMSActions.ts @@ -25,6 +25,7 @@ import { TokenRequestOptions, } from './internal'; import { + DebugInfo, HMSChangeMultiTrackStateParams, HMSGenericTypes, HMSMessageID, @@ -581,4 +582,6 @@ export interface IHMSActions this.transport.isFlagEnabled(flag)); + const initEndpoint = this.store.getConfig()?.initEndpoint; + return { + websocketURL, + enabledFlags, + initEndpoint, + }; + } + getSessionStore() { return this.sessionStore; } diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 747601668b..8aed7e43ea 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -5,9 +5,11 @@ import { selectLocalPeerID, selectPeersMap, selectTracksMap, + useHMSActions, useHMSStatsStore, useHMSStore, } from '@100mslive/react-sdk'; +import { Accordion } from '../../Accordion'; import { HorizontalDivider } from '../../Divider'; import { Dropdown } from '../../Dropdown'; import { Label } from '../../Label'; @@ -27,6 +29,8 @@ export const StatsForNerds = ({ onOpenChange }) => { () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels], [tracksWithLabels], ); + const hmsActions = useHMSActions(); + const details = hmsActions.getDebugInfo(); const [selectedStat, setSelectedStat] = useState(statsOptions[0]); const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles); const [open, setOpen] = useState(false); @@ -46,7 +50,7 @@ export const StatsForNerds = ({ onOpenChange }) => { @@ -70,6 +74,7 @@ export const StatsForNerds = ({ onOpenChange }) => { {/* Select */} + { ) : ( )} + + + @@ -229,8 +237,29 @@ const TrackStats = ({ trackID, layer, local }) => { ); }; -const StatsRow = React.memo(({ label, value }) => ( - +const DebugInfo = ({ details }) => { + return ( + + + + + + + + + + + + + + + ); +}; + +const StatsRow = React.memo(({ label, value, css }) => ( + Date: Tue, 8 Oct 2024 17:08:48 +0530 Subject: [PATCH 04/49] feat: upgrade stitches (#3308) Co-authored-by: Kaustubh Kumar Co-authored-by: hdz-666 <93115614+hdz-666@users.noreply.github.com> --- packages/roomkit-react/package.json | 2 +- packages/roomkit-react/src/Avatar/Avatar.tsx | 2 +- .../src/Popover/Popover.stories.tsx | 2 +- .../VideoLayouts/ProminenceLayout.tsx | 4 +- yarn.lock | 39 +++++++++++++++---- 5 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json index ec97436310..a65e30ff34 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -99,7 +99,7 @@ "@radix-ui/react-tabs": "1.0.0", "@radix-ui/react-toast": "1.0.0", "@radix-ui/react-tooltip": "1.0.6", - "@stitches/react": "^1.2.8", + "@stitches/react": "1.3.1-1", "emoji-mart": "^5.2.2", "eventemitter2": "^6.4.9", "lodash.merge": "^4.6.2", diff --git a/packages/roomkit-react/src/Avatar/Avatar.tsx b/packages/roomkit-react/src/Avatar/Avatar.tsx index c9dd366d9e..470e0a63a8 100644 --- a/packages/roomkit-react/src/Avatar/Avatar.tsx +++ b/packages/roomkit-react/src/Avatar/Avatar.tsx @@ -13,7 +13,7 @@ export const StyledAvatar = styled('div', { ...flexCenter, color: '$colors$on_primary_high', fontFamily: '$sans', - aspectRatio: 1, + aspectRatio: '1', fontWeight: 600, fontSize: '$space$9', variants: { diff --git a/packages/roomkit-react/src/Popover/Popover.stories.tsx b/packages/roomkit-react/src/Popover/Popover.stories.tsx index 24a8b51b81..b955386e62 100644 --- a/packages/roomkit-react/src/Popover/Popover.stories.tsx +++ b/packages/roomkit-react/src/Popover/Popover.stories.tsx @@ -32,7 +32,7 @@ const Template: ComponentStory = () => ( - ), - duration: Infinity, - }); - pollToastKey[notification.data.id] = pollToastID; - } - break; - case HMSNotificationTypes.POLL_STOPPED: - const pollID = notification?.data.id; - if (pollID && pollToastKey?.[pollID]) { - ToastManager.removeToast(pollToastKey?.[notification.data.id]); - delete pollToastKey[notification?.data.id]; - } - break; - case HMSNotificationTypes.NEW_MESSAGE: - if (amIScreenSharing && !notification.data?.ignored && !pipWindow) { - showNotification(`New message from ${notification.data.senderName}`, { - body: notification.data.message, - icon: logoURL, - }); - } - break; - default: - break; - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]); - if (isNotificationDisabled) { return null; } @@ -197,7 +45,11 @@ export function Notifications() { {roomState === HMSRoomState.Connected ? : null} + + + + diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx index 4487b13836..c23fb041ce 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx @@ -1,19 +1,28 @@ import { useEffect } from 'react'; import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider'; // @ts-ignore: No implicit Any import { ToastBatcher } from '../Toast/ToastBatcher'; // @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; +// @ts-ignore: No implicit Any import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../AppData/useUISettings'; // @ts-ignore: No implicit Any import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants'; -const notificationTypes = [HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT]; +const notificationTypes = [ + HMSNotificationTypes.PEER_JOINED, + HMSNotificationTypes.PEER_LEFT, + HMSNotificationTypes.NAME_UPDATED, + HMSNotificationTypes.ROLE_UPDATED, +]; export const PeerNotifications = () => { const notification = useHMSNotifications(notificationTypes); const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED); const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT); const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER); + const updateRoomLayoutForRole = useUpdateRoomLayout(); useEffect(() => { if (!notification?.data) { @@ -35,11 +44,23 @@ export const PeerNotifications = () => { return; } break; + case HMSNotificationTypes.NAME_UPDATED: + console.log(notification.data.id + ' changed their name to ' + notification.data.name); + return; + case HMSNotificationTypes.ROLE_UPDATED: { + if (notification.data?.isLocal && notification.data?.roleName) { + ToastManager.addToast({ + title: `You are now a ${notification.data.roleName}`, + }); + updateRoomLayoutForRole?.(notification.data.roleName); + } + return; + } default: return; } ToastBatcher.showToast({ notification }); - }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]); + }, [notification]); return null; }; diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/PollNotificationModal.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/PollNotificationModal.tsx new file mode 100644 index 0000000000..4b960842e5 --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/PollNotificationModal.tsx @@ -0,0 +1,71 @@ +import React, { useEffect } from 'react'; +import { + HMSNotificationTypes, + selectLocalPeerID, + selectPeerNameByID, + useHMSNotifications, + useHMSStore, + useHMSVanillaStore, +} from '@100mslive/react-sdk'; +import { Button } from '../../../Button'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; +import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; +// @ts-ignore: No implicit Any +import { usePollViewToggle } from '../AppData/useSidepane'; + +const notificationTypes = [HMSNotificationTypes.POLL_STARTED, HMSNotificationTypes.POLL_STOPPED]; + +const pollToastKey: Record = {}; + +export const PollNotificationModal = () => { + const togglePollView = usePollViewToggle(); + const localPeerID = useHMSStore(selectLocalPeerID); + const vanillaStore = useHMSVanillaStore(); + const screenProps = useRoomLayoutConferencingScreen(); + + const notification = useHMSNotifications(notificationTypes); + + useEffect(() => { + switch (notification?.type) { + case HMSNotificationTypes.POLL_STARTED: + if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') { + const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant'; + + const pollToastID = ToastManager.addToast({ + title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`, + action: ( + + ), + duration: Infinity, + }); + pollToastKey[notification.data.id] = pollToastID; + } + break; + case HMSNotificationTypes.POLL_STOPPED: + { + const pollID = notification?.data.id; + if (pollID && pollToastKey?.[pollID]) { + ToastManager.removeToast(pollToastKey?.[notification.data.id]); + delete pollToastKey[notification?.data.id]; + } + } + break; + default: + break; + } + }, [notification]); + + return null; +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx index 71511f55c9..406fbfd65d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx @@ -5,11 +5,7 @@ import { ToastConfig } from '../Toast/ToastConfig'; // @ts-ignore: No implicit Any import { ToastManager } from '../Toast/ToastManager'; -const notificationTypes = [ - HMSNotificationTypes.RECONNECTED, - HMSNotificationTypes.RECONNECTING, - HMSNotificationTypes.ERROR, -]; +const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING]; let notificationId: string | null = null; export const ReconnectNotifications = () => { diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx index 63bc1f8ee6..89dabac4a8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx @@ -9,14 +9,16 @@ import { MicOnIcon } from '@100mslive/react-icons'; // @ts-ignore: No implicit Any import { RequestDialog } from '../../primitives/DialogContent'; +const notificationTypes = [ + HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST, + HMSNotificationTypes.ROOM_ENDED, + HMSNotificationTypes.REMOVED_FROM_ROOM, +]; + export const TrackBulkUnmuteModal = () => { const hmsActions = useHMSActions(); const [muteNotification, setMuteNotification] = useState(null); - const notification = useHMSNotifications([ - HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST, - HMSNotificationTypes.ROOM_ENDED, - HMSNotificationTypes.REMOVED_FROM_ROOM, - ]); + const notification = useHMSNotifications(notificationTypes); useEffect(() => { switch (notification?.type) { diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackNotifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackNotifications.tsx index 01beae1716..bbd234643f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackNotifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackNotifications.tsx @@ -1,17 +1,39 @@ import { useEffect } from 'react'; import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; const notificationTypes = [ HMSNotificationTypes.TRACK_ADDED, HMSNotificationTypes.TRACK_REMOVED, HMSNotificationTypes.TRACK_MUTED, HMSNotificationTypes.TRACK_UNMUTED, + HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST, ]; + export const TrackNotifications = () => { const notification = useHMSNotifications(notificationTypes); useEffect(() => { if (notification) { - console.debug(`[${notification.type}]`, notification); + switch (notification.type) { + case HMSNotificationTypes.TRACK_ADDED: + case HMSNotificationTypes.TRACK_REMOVED: + case HMSNotificationTypes.TRACK_MUTED: + case HMSNotificationTypes.TRACK_UNMUTED: + console.debug(`[${notification.type}]`, notification); + break; + case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST: + { + const track = notification.data?.track; + if (!notification.data.enabled) { + ToastManager.addToast({ + title: `Your ${track.source} ${track.type} was muted by + ${notification.data.requestedBy?.name}.`, + }); + } + } + break; + } } }, [notification]); diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx index 3b0cce23bd..7d8142701c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx @@ -8,20 +8,28 @@ import { import { MicOnIcon } from '@100mslive/react-icons'; // @ts-ignore: No implicit Any import { RequestDialog } from '../../primitives/DialogContent'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; + +const notificationTypes = [ + HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST, + HMSNotificationTypes.ROOM_ENDED, + HMSNotificationTypes.REMOVED_FROM_ROOM, +]; export const TrackUnmuteModal = () => { const hmsActions = useHMSActions(); - const notification = useHMSNotifications([ - HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST, - HMSNotificationTypes.ROOM_ENDED, - HMSNotificationTypes.REMOVED_FROM_ROOM, - ]); + const notification = useHMSNotifications(notificationTypes); const [muteNotification, setMuteNotification] = useState(null); useEffect(() => { switch (notification?.type) { case HMSNotificationTypes.REMOVED_FROM_ROOM: case HMSNotificationTypes.ROOM_ENDED: + ToastManager.addToast({ + title: `${notification.message}. + ${notification.data.reason && `Reason: ${notification.data.reason}`}`, + }); setMuteNotification(null); break; case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST: From 51976c43cf88a41d31564cd6081b2b1712233b65 Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Tue, 8 Oct 2024 17:13:41 +0530 Subject: [PATCH 06/49] fix: audio not audible when audio decode error occurs (#3289) --- .../src/analytics/AnalyticsEventFactory.ts | 10 ++++++++++ .../src/audio-sink-manager/AudioSinkManager.ts | 8 +++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/hms-video-store/src/analytics/AnalyticsEventFactory.ts b/packages/hms-video-store/src/analytics/AnalyticsEventFactory.ts index 2053784eaa..4197182456 100644 --- a/packages/hms-video-store/src/analytics/AnalyticsEventFactory.ts +++ b/packages/hms-video-store/src/analytics/AnalyticsEventFactory.ts @@ -135,6 +135,16 @@ export default class AnalyticsEventFactory { }); } + static audioRecovered(message: string) { + return new AnalyticsEvent({ + name: 'audioRecovered', + level: AnalyticsEventLevel.VERBOSE, + properties: { + message, + }, + }); + } + static deviceChange({ isUserSelection, selection, diff --git a/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts b/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts index 08b0b7e0df..51a4190313 100644 --- a/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts +++ b/packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts @@ -136,13 +136,19 @@ export class AudioSinkManager { ); this.eventBus.analytics.publish(AnalyticsEventFactory.audioPlaybackError(ex)); if (audioEl?.error?.code === MediaError.MEDIA_ERR_DECODE) { + // try to wait for main execution to complete first this.removeAudioElement(audioEl, track); await sleep(500); await this.handleTrackAdd({ track, peer, callListener: false }); + if (!this.state.autoplayFailed) { + this.eventBus.analytics.publish( + AnalyticsEventFactory.audioRecovered('Audio recovered after media decode error'), + ); + } } }; track.setAudioElement(audioEl); - track.setVolume(this.volume); + await track.setVolume(this.volume); HMSLogger.d(this.TAG, 'Audio track added', `${track}`); this.init(); // call to create sink element if not already created this.audioSink?.append(audioEl); From bc76e24828c560bc321e2c0b517d0c50000ab52c Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Tue, 8 Oct 2024 17:17:37 +0530 Subject: [PATCH 07/49] fix: add an event when tracks are published with no data (#3298) Co-authored-by: Yogesh Singh --- .../hms-video-store/src/error/ErrorCodes.ts | 3 ++ .../hms-video-store/src/error/ErrorFactory.ts | 10 ++++ .../hms-video-store/src/interfaces/config.ts | 4 -- .../src/media/tracks/HMSLocalAudioTrack.ts | 54 ++++++++++++++++--- .../src/media/tracks/HMSLocalVideoTrack.ts | 2 + .../src/media/tracks/HMSTrack.ts | 5 ++ .../src/media/tracks/HMSVideoTrack.ts | 4 +- .../src/sdk/LocalTrackManager.test.ts | 12 ++++- packages/hms-video-store/src/sdk/index.ts | 35 +++++++++--- .../src/utils/track-audio-level-monitor.ts | 2 +- 10 files changed, 108 insertions(+), 23 deletions(-) diff --git a/packages/hms-video-store/src/error/ErrorCodes.ts b/packages/hms-video-store/src/error/ErrorCodes.ts index 24e00e6419..dccd5b6286 100644 --- a/packages/hms-video-store/src/error/ErrorCodes.ts +++ b/packages/hms-video-store/src/error/ErrorCodes.ts @@ -76,6 +76,9 @@ export const ErrorCodes = { // Selected device not detected on change SELECTED_DEVICE_MISSING: 3014, + + // Track is publishing with no data, can happen when a whatsapp call is ongoing before 100ms call in mweb + NO_DATA: 3015, }, WebrtcErrors: { diff --git a/packages/hms-video-store/src/error/ErrorFactory.ts b/packages/hms-video-store/src/error/ErrorFactory.ts index e0655a225f..7345d26749 100644 --- a/packages/hms-video-store/src/error/ErrorFactory.ts +++ b/packages/hms-video-store/src/error/ErrorFactory.ts @@ -251,6 +251,16 @@ export const ErrorFactory = { false, ); }, + + NoDataInTrack(description: string) { + return new HMSException( + ErrorCodes.TracksErrors.NO_DATA, + 'Track does not have any data', + HMSAction.TRACK, + description, + 'This could possibily due to another application taking priority over the access to camera or microphone or due to an incoming call', + ); + }, }, WebrtcErrors: { diff --git a/packages/hms-video-store/src/interfaces/config.ts b/packages/hms-video-store/src/interfaces/config.ts index 07d75e21a4..23b88c4b58 100644 --- a/packages/hms-video-store/src/interfaces/config.ts +++ b/packages/hms-video-store/src/interfaces/config.ts @@ -42,10 +42,6 @@ export interface HMSConfig { audioSinkElementId?: string; autoVideoSubscribe?: boolean; initEndpoint?: string; - /** - * Request Camera/Mic permissions irrespective of role to avoid delay in getting device list - */ - alwaysRequestPermissions?: boolean; /** * Enable to get a network quality score while in preview. The score ranges from -1 to 5. * -1 when we are not able to connect to 100ms servers within an expected time limit diff --git a/packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts b/packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts index b97efa49cd..d194ccca37 100644 --- a/packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts @@ -56,6 +56,7 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { ) { super(stream, track, source); stream.tracks.push(this); + this.addTrackEventListeners(track); this.settings = settings; // Replace the 'default' or invalid deviceId with the actual deviceId @@ -99,13 +100,9 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { this.manuallySelectedDeviceId = undefined; } - private isTrackNotPublishing = () => { - return this.nativeTrack.readyState === 'ended' || this.nativeTrack.muted; - }; - private handleVisibilityChange = async () => { // track state is fine do nothing - if (!this.isTrackNotPublishing()) { + if (!this.shouldReacquireTrack()) { HMSLogger.d(this.TAG, `visibiltiy: ${document.visibilityState}`, `${this}`); return; } @@ -151,16 +148,19 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { * no audio when the above getAudioTrack throws an error. ex: DeviceInUse error */ prevTrack?.stop(); + this.removeTrackEventListeners(prevTrack); this.tracksCreated.forEach(track => track.stop()); this.tracksCreated.clear(); try { const newTrack = await getAudioTrack(settings); + this.addTrackEventListeners(newTrack); this.tracksCreated.add(newTrack); HMSLogger.d(this.TAG, 'replaceTrack, Previous track stopped', prevTrack, 'newTrack', newTrack); await this.updateTrack(newTrack); } catch (e) { // Generate a new track from previous settings so there will be audio because previous track is stopped const newTrack = await getAudioTrack(this.settings); + this.addTrackEventListeners(newTrack); this.tracksCreated.add(newTrack); await this.updateTrack(newTrack); if (this.isPublished) { @@ -184,8 +184,8 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { return; } - // Replace silent empty track or muted track(happens when microphone is disabled from address bar in iOS) with an actual audio track, if enabled. - if (value && (isEmptyTrack(this.nativeTrack) || this.nativeTrack.muted)) { + // Replace silent empty track or muted track(happens when microphone is disabled from address bar in iOS) with an actual audio track, if enabled or ended track or when silence is detected. + if (value && this.shouldReacquireTrack()) { await this.replaceTrackWith(this.settings); } await super.setEnabled(value); @@ -303,6 +303,40 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { return this.processedTrack || this.nativeTrack; } + private addTrackEventListeners(track: MediaStreamTrack) { + track.addEventListener('mute', this.handleTrackMute); + track.addEventListener('unmute', this.handleTrackUnmute); + } + + private removeTrackEventListeners(track: MediaStreamTrack) { + track.removeEventListener('mute', this.handleTrackMute); + track.removeEventListener('unmute', this.handleTrackUnmute); + } + + private handleTrackMute = () => { + HMSLogger.d(this.TAG, 'muted natively'); + const reason = document.visibilityState === 'hidden' ? 'visibility-change' : 'incoming-call'; + this.eventBus.analytics.publish( + this.sendInterruptionEvent({ + started: true, + reason, + }), + ); + }; + + /** @internal */ + handleTrackUnmute = () => { + HMSLogger.d(this.TAG, 'unmuted natively'); + const reason = document.visibilityState === 'hidden' ? 'visibility-change' : 'incoming-call'; + this.eventBus.analytics.publish( + this.sendInterruptionEvent({ + started: false, + reason, + }), + ); + this.setEnabled(this.enabled); + }; + private replaceSenderTrack = async () => { if (!this.transceiver || this.transceiver.direction !== 'sendonly') { HMSLogger.d(this.TAG, `transceiver for ${this.trackId} not available or not connected yet`); @@ -311,6 +345,12 @@ export class HMSLocalAudioTrack extends HMSAudioTrack { await this.transceiver.sender.replaceTrack(this.processedTrack || this.nativeTrack); }; + private shouldReacquireTrack = () => { + return ( + isEmptyTrack(this.nativeTrack) || this.isTrackNotPublishing() || this.audioLevelMonitor?.isSilentThisInstant() + ); + }; + private buildNewSettings(settings: Partial) { const { volume, codec, maxBitrate, deviceId, advanced, audioMode } = { ...this.settings, ...settings }; const newSettings = new HMSAudioTrackSettings(volume, codec, maxBitrate, deviceId, advanced, audioMode); diff --git a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts index f05da3f17e..46d4eeea77 100644 --- a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts @@ -131,6 +131,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { * use this function to set the enabled state of a track. If true the track will be unmuted and muted otherwise. * @param value */ + // eslint-disable-next-line complexity async setEnabled(value: boolean): Promise { if (value === this.enabled) { return; @@ -546,6 +547,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { super.handleTrackUnmute(); this.eventBus.localVideoEnabled.publish({ enabled: this.enabled, track: this }); this.eventBus.localVideoUnmutedNatively.publish(); + this.setEnabled(this.enabled); }; /** diff --git a/packages/hms-video-store/src/media/tracks/HMSTrack.ts b/packages/hms-video-store/src/media/tracks/HMSTrack.ts index 04f9ff511f..208d021ba4 100644 --- a/packages/hms-video-store/src/media/tracks/HMSTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSTrack.ts @@ -85,6 +85,11 @@ export abstract class HMSTrack { protected setFirstTrackId(trackId: string) { this.firstTrackId = trackId; } + + isTrackNotPublishing = () => { + return this.nativeTrack.readyState === 'ended' || this.nativeTrack.muted; + }; + /** * @internal * It will send event to analytics when interruption start/stop diff --git a/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts b/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts index 3f6e60b2e7..03e6d7e0b7 100644 --- a/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts @@ -93,8 +93,8 @@ export class HMSVideoTrack extends HMSTrack { private reTriggerPlay = ({ videoElement }: { videoElement: HTMLVideoElement }) => { setTimeout(() => { - videoElement.play().catch(() => { - HMSLogger.w('[HMSVideoTrack]', 'failed to play'); + videoElement.play().catch((e: Error) => { + HMSLogger.w('[HMSVideoTrack]', 'failed to play', e.message); }); }, 0); }; diff --git a/packages/hms-video-store/src/sdk/LocalTrackManager.test.ts b/packages/hms-video-store/src/sdk/LocalTrackManager.test.ts index b962dabd20..e1788ae25e 100644 --- a/packages/hms-video-store/src/sdk/LocalTrackManager.test.ts +++ b/packages/hms-video-store/src/sdk/LocalTrackManager.test.ts @@ -109,6 +109,7 @@ const mockMediaStream = { kind: 'video', getSettings: jest.fn(() => ({ deviceId: 'video-device-id' })), addEventListener: jest.fn(() => {}), + removeEventListener: jest.fn(() => {}), }, ]), getAudioTracks: jest.fn(() => [ @@ -117,6 +118,7 @@ const mockMediaStream = { kind: 'audio', getSettings: jest.fn(() => ({ deviceId: 'audio-device-id' })), addEventListener: jest.fn(() => {}), + removeEventListener: jest.fn(() => {}), }, ]), addTrack: jest.fn(() => {}), @@ -206,7 +208,13 @@ const mockAudioContext = { return { stream: { getAudioTracks: jest.fn(() => [ - { id: 'audio-id', kind: 'audio', getSettings: jest.fn(() => ({ deviceId: 'audio-mock-device-id' })) }, + { + id: 'audio-id', + kind: 'audio', + getSettings: jest.fn(() => ({ deviceId: 'audio-mock-device-id' })), + addEventListener: jest.fn(() => {}), + removeEventListener: jest.fn(() => {}), + }, ]), }, }; @@ -426,6 +434,7 @@ describe('LocalTrackManager', () => { kind: 'video', getSettings: () => ({ deviceId: 'video-device-id', groupId: 'video-group-id' }), addEventListener: jest.fn(() => {}), + removeEventListener: jest.fn(() => {}), } as unknown as MediaStreamTrack, HMSPeerType.REGULAR, testEventBus, @@ -459,6 +468,7 @@ describe('LocalTrackManager', () => { kind: 'video', getSettings: () => ({ deviceId: 'video-device-id', groupId: 'video-group-id' }), addEventListener: jest.fn(() => {}), + removeEventListener: jest.fn(() => {}), } as unknown as MediaStreamTrack, HMSPeerType.REGULAR, testEventBus, diff --git a/packages/hms-video-store/src/sdk/index.ts b/packages/hms-video-store/src/sdk/index.ts index 2f3b5fd716..236f74912b 100644 --- a/packages/hms-video-store/src/sdk/index.ts +++ b/packages/hms-video-store/src/sdk/index.ts @@ -447,13 +447,6 @@ export class HMSSdk implements HMSInterface { this.analyticsTimer.start(TimedEvent.PREVIEW); this.setUpPreview(config, listener); - // Request permissions and populate devices before waiting for policy - if (config.alwaysRequestPermissions) { - this.localTrackManager.requestPermissions().then(async () => { - await this.initDeviceManagers(); - }); - } - let initSuccessful = false; let networkTestFinished = false; const timerId = setTimeout(() => { @@ -469,7 +462,21 @@ export class HMSSdk implements HMSInterface { this.localPeer.asRole = newRole || this.localPeer.role; } const tracks = await this.localTrackManager.getTracksToPublish(config.settings); - tracks.forEach(track => this.setLocalPeerTrack(track)); + tracks.forEach(track => { + this.setLocalPeerTrack(track); + if (track.isTrackNotPublishing()) { + const error = ErrorFactory.TracksErrors.NoDataInTrack( + `${track.type} track has no data. muted: ${track.nativeTrack.muted}, readyState: ${track.nativeTrack.readyState}`, + ); + this.sendAnalyticsEvent( + AnalyticsEventFactory.publish({ + devices: this.deviceManager.getDevices(), + error: error, + }), + ); + this.listener?.onError(error); + } + }); this.localPeer?.audioTrack && this.initPreviewTrackAudioLevelMonitor(); await this.initDeviceManagers(); this.sdkState.isPreviewInProgress = false; @@ -1344,6 +1351,18 @@ export class HMSSdk implements HMSInterface { private async setAndPublishTracks(tracks: HMSLocalTrack[]) { for (const track of tracks) { await this.transport.publish([track]); + if (track.isTrackNotPublishing()) { + const error = ErrorFactory.TracksErrors.NoDataInTrack( + `${track.type} track has no data. muted: ${track.nativeTrack.muted}, readyState: ${track.nativeTrack.readyState}`, + ); + this.sendAnalyticsEvent( + AnalyticsEventFactory.publish({ + devices: this.deviceManager.getDevices(), + error: error, + }), + ); + this.listener?.onError(error); + } this.setLocalPeerTrack(track); this.listener?.onTrackUpdate(HMSTrackUpdate.TRACK_ADDED, track, this.localPeer!); } diff --git a/packages/hms-video-store/src/utils/track-audio-level-monitor.ts b/packages/hms-video-store/src/utils/track-audio-level-monitor.ts index fa46e1cd20..c191424a87 100644 --- a/packages/hms-video-store/src/utils/track-audio-level-monitor.ts +++ b/packages/hms-video-store/src/utils/track-audio-level-monitor.ts @@ -133,7 +133,7 @@ export class TrackAudioLevelMonitor { return percent; } - private isSilentThisInstant() { + isSilentThisInstant() { if (!this.analyserNode || !this.dataArray) { HMSLogger.d(this.TAG, 'AudioContext not initialized'); return; From 2b884857baa5c19fe1fd3af90152b27117683e67 Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Tue, 8 Oct 2024 17:43:29 +0530 Subject: [PATCH 08/49] fix: notification api support check (#3304) --- packages/react-sdk/src/hooks/useAwayNotifications.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-sdk/src/hooks/useAwayNotifications.ts b/packages/react-sdk/src/hooks/useAwayNotifications.ts index cd72f9c3c5..2cd5365727 100644 --- a/packages/react-sdk/src/hooks/useAwayNotifications.ts +++ b/packages/react-sdk/src/hooks/useAwayNotifications.ts @@ -8,10 +8,12 @@ export const useAwayNotifications = () => { const vanillaStore = useHMSVanillaStore(); const requestPermission = useCallback(async () => { // Headless check for beam - if (navigator.webdriver) { + if (!('Notification' in window) || navigator.webdriver) { + console.debug('Request Permsissions : Notifications not supported or headless browser'); + // Notifications not supported return; } - if (!Notification || Notification?.permission === 'granted' || Notification?.permission === 'denied') { + if (Notification?.permission === 'granted' || Notification?.permission === 'denied') { return; } const unsubscribe = vanillaStore.subscribe(async role => { @@ -23,8 +25,12 @@ export const useAwayNotifications = () => { }, [vanillaStore]); const showNotification = useCallback((title: string, options?: NotificationOptions) => { + // Notifications not supported + if (!('Notification' in window)) { + console.debug('Show Notifications: Notifications not supported or headless browser'); + return; + } if ( - !Notification || Notification?.permission === 'denied' || /** * document.visibilityState is still 'visible' when the tab is active but window is not open From 75e9ead1e69df1d522c454250519564b9929a19e Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Tue, 8 Oct 2024 17:47:52 +0530 Subject: [PATCH 09/49] fix: clean up mediastream plugins (#3287) --- .../hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts | 4 +++- .../src/plugins/video/HMSMediaStreamPluginsManager.ts | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts index 46d4eeea77..d594b04264 100644 --- a/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts @@ -262,9 +262,11 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { */ async cleanup() { this.removeTrackEventListeners(this.nativeTrack); + // Stopping the plugin before cleaning the track is more predictable when dealing with 3rd party plugins + await this.mediaStreamPluginsManager.cleanup(); + await this.pluginsManager.cleanup(); super.cleanup(); this.transceiver = undefined; - await this.pluginsManager.cleanup(); this.processedTrack?.stop(); this.isPublished = false; if (isBrowser && isMobile()) { diff --git a/packages/hms-video-store/src/plugins/video/HMSMediaStreamPluginsManager.ts b/packages/hms-video-store/src/plugins/video/HMSMediaStreamPluginsManager.ts index 1991355757..5bc32bcfcf 100644 --- a/packages/hms-video-store/src/plugins/video/HMSMediaStreamPluginsManager.ts +++ b/packages/hms-video-store/src/plugins/video/HMSMediaStreamPluginsManager.ts @@ -63,4 +63,8 @@ export class HMSMediaStreamPluginsManager { getPlugins(): string[] { return Array.from(this.plugins).map(plugin => plugin.getName()); } + + async cleanup() { + this.removePlugins(Array.from(this.plugins)); + } } From 70cb71f50025378f6ea537588cb5395978b73e21 Mon Sep 17 00:00:00 2001 From: ygit Date: Tue, 8 Oct 2024 17:55:13 +0530 Subject: [PATCH 10/49] fix: crash on publishing role to non-publishing role and back (#3299) --- .../src/device-manager/DeviceManager.ts | 10 ++++---- packages/hms-video-store/src/index.ts | 1 + packages/hms-video-store/src/utils/media.ts | 23 ++++++++++++++----- .../src/Prebuilt/components/Header/common.jsx | 11 +++++---- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/hms-video-store/src/device-manager/DeviceManager.ts b/packages/hms-video-store/src/device-manager/DeviceManager.ts index 629dd36bc5..d6d4e5281f 100644 --- a/packages/hms-video-store/src/device-manager/DeviceManager.ts +++ b/packages/hms-video-store/src/device-manager/DeviceManager.ts @@ -4,7 +4,7 @@ import { ErrorFactory } from '../error/ErrorFactory'; import { HMSException } from '../error/HMSException'; import { EventBus } from '../events/EventBus'; import { DeviceMap, HMSDeviceChangeEvent, SelectedDevices } from '../interfaces'; -import { getAudioDeviceCategory, isIOS } from '../internal'; +import { getAudioDeviceCategory, HMSAudioDeviceCategory, isIOS } from '../internal'; import { HMSAudioTrackSettingsBuilder, HMSVideoTrackSettingsBuilder } from '../media/settings'; import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../media/tracks'; import { Store } from '../sdk/store'; @@ -444,13 +444,13 @@ export class DeviceManager implements HMSDeviceManager { for (const device of this.audioInput) { const deviceCategory = getAudioDeviceCategory(device.label); - if (deviceCategory === 'speakerphone') { + if (deviceCategory === HMSAudioDeviceCategory.SPEAKERPHONE) { speakerPhone = device; - } else if (deviceCategory === 'wired') { + } else if (HMSAudioDeviceCategory.WIRED) { wired = device; - } else if (deviceCategory === 'bluetooth') { + } else if (HMSAudioDeviceCategory.BLUETOOTH) { bluetoothDevice = device; - } else if (deviceCategory === 'speakerhone') { + } else if (HMSAudioDeviceCategory.EARPIECE) { earpiece = device; } } diff --git a/packages/hms-video-store/src/index.ts b/packages/hms-video-store/src/index.ts index aa36a66403..e26beb60ef 100644 --- a/packages/hms-video-store/src/index.ts +++ b/packages/hms-video-store/src/index.ts @@ -12,6 +12,7 @@ export * from './selectors'; export * from './webrtc-stats'; export { HMSAudioMode, + HMSAudioDeviceCategory, HMSLogLevel, HMSAudioPluginType, HMSVideoPluginType, diff --git a/packages/hms-video-store/src/utils/media.ts b/packages/hms-video-store/src/utils/media.ts index c9740bcc0a..330b544b14 100644 --- a/packages/hms-video-store/src/utils/media.ts +++ b/packages/hms-video-store/src/utils/media.ts @@ -64,16 +64,27 @@ export const HMSAudioContextHandler: HMSAudioContext = { }, }; -export const getAudioDeviceCategory = (deviceLabel: string) => { +export enum HMSAudioDeviceCategory { + SPEAKERPHONE = 'SPEAKERPHONE', + WIRED = 'WIRED', + BLUETOOTH = 'BLUETOOTH', + EARPIECE = 'EARPIECE', +} + +export const getAudioDeviceCategory = (deviceLabel?: string) => { + if (!deviceLabel) { + HMSLogger.e('[DeviceManager]:', 'No device label provided'); + return HMSAudioDeviceCategory.SPEAKERPHONE; + } const label = deviceLabel.toLowerCase(); if (label.includes('speakerphone')) { - return 'speakerhone'; + return HMSAudioDeviceCategory.SPEAKERPHONE; } else if (label.includes('wired')) { - return 'wired'; + return HMSAudioDeviceCategory.WIRED; } else if (/airpods|buds|wireless|bluetooth/gi.test(label)) { - return 'bluetooth'; + return HMSAudioDeviceCategory.BLUETOOTH; } else if (label.includes('earpiece')) { - return 'earpiece'; + return HMSAudioDeviceCategory.EARPIECE; } - return 'speakerphone'; + return HMSAudioDeviceCategory.SPEAKERPHONE; }; diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx index 3a36c01ad8..f67296ffda 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Header/common.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { DeviceType, getAudioDeviceCategory, + HMSAudioDeviceCategory, selectIsLocalVideoEnabled, selectLocalVideoTrackID, selectVideoTrackByID, @@ -79,13 +80,13 @@ export const AudioActions = () => { if (!audioFiltered) { return null; } - const deviceCategory = getAudioDeviceCategory(currentSelection.label); + const deviceCategory = getAudioDeviceCategory(currentSelection?.label); let AudioIcon = ; - if (deviceCategory === 'bluetooth') { + if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) { AudioIcon = ; - } else if (deviceCategory === 'wired') { + } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) { AudioIcon = ; - } else if (deviceCategory === 'earpiece') { + } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) { AudioIcon = ; } return ( @@ -112,7 +113,7 @@ export const AudioActions = () => { await hmsActions.refreshDevices(); }} > - {AudioIcon} + {AudioIcon} ); From c8799db1b7b10caf3f0cd82370bf43263983ee27 Mon Sep 17 00:00:00 2001 From: "Eswar Prasad Clinton. A" <64120992+eswarclynn@users.noreply.github.com> Date: Tue, 8 Oct 2024 18:00:32 +0530 Subject: [PATCH 11/49] fix: device in use error modal --- .../Notifications/DeviceInUseError.tsx | 79 +++++++++++++++++++ .../Notifications/Notifications.tsx | 2 + 2 files changed, 81 insertions(+) create mode 100644 packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx new file mode 100644 index 0000000000..3249d845ca --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useState } from 'react'; +import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +import { Button, Dialog, Text } from '../../..'; +// @ts-ignore: No implicit Any +import { DialogContent, DialogRow } from '../../primitives/DialogContent'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; + +const Instruction = ({ description }: { description: string }) => ( +
  • + + {description} + +
    • +); + +export function DeviceInUseError() { + const notification = useHMSNotifications(HMSNotificationTypes.ERROR); + const [showDeviceInUseModal, setShowDeviceInUseModal] = useState(false); + const [deviceType, setDeviceType] = useState(''); + + useEffect(() => { + const error = notification?.data; + if (!error || error.code !== 3003) { + return; + } + + const errorMessage = error?.message; + ToastManager.addToast({ + title: `Error: ${errorMessage} - ${error?.description}`, + action: ( + + ), + }); + + const hasAudio = errorMessage.includes('audio'); + const hasVideo = errorMessage.includes('video'); + const hasScreen = errorMessage.includes('screen'); + if (hasAudio && hasVideo) { + setDeviceType('camera and microphone'); + } else if (hasAudio) { + setDeviceType('microphone'); + } else if (hasVideo) { + setDeviceType('camera'); + } else if (hasScreen) { + setDeviceType('screen'); + } + }, [notification]); + + return ( + { + setShowDeviceInUseModal(false); + }} + > + + + + We weren't able to access your {deviceType} since it's either in use by another application or is not + configured properly. Please follow the following instructions to resolve this issue. + + +
      + + Privacy and security > Site settings > ${deviceType} and check if your preferred device is selected as default.`} + /> + + +
    +     +     + ); +} diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx index f5dcc1ef91..b0b31bb36c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx @@ -6,6 +6,7 @@ import { ToastManager } from '../Toast/ToastManager'; import { AutoplayBlockedModal } from './AutoplayBlockedModal'; import { ChatNotifications } from './ChatNotifications'; import { DeviceChangeNotifications } from './DeviceChangeNotifications'; +import { DeviceInUseError } from './DeviceInUseError'; import { ErrorNotifications } from './ErrorNotifications'; import { HandRaisedNotifications } from './HandRaisedNotifications'; import { InitErrorModal } from './InitErrorModal'; @@ -56,6 +57,7 @@ export function Notifications() { + ); } From ddcd47e23c20e97098e7ab62f032212717de6d96 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Tue, 8 Oct 2024 18:53:18 +0530 Subject: [PATCH 12/49] feat: lazy load less frequently used components (#3010) --- packages/roomkit-react/src/Prebuilt/App.tsx | 8 +- .../src/Prebuilt/components/Chat/Chat.tsx | 20 +++-- .../Prebuilt/components/Chat/ChatFooter.tsx | 2 +- .../components/VideoLayouts/GridLayout.tsx | 74 +++++++++++-------- .../src/Prebuilt/layouts/HLSView.jsx | 1 + .../src/Prebuilt/layouts/PDFView.jsx | 1 + .../src/Prebuilt/layouts/SidePane.tsx | 18 +++-- .../layouts/VideoStreamingSection.tsx | 69 ++++++++--------- scripts/build-webapp.js | 2 +- scripts/dev-webapp.js | 2 +- 10 files changed, 113 insertions(+), 84 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx index 8010a58115..644bc9a49c 100644 --- a/packages/roomkit-react/src/Prebuilt/App.tsx +++ b/packages/roomkit-react/src/Prebuilt/App.tsx @@ -13,14 +13,12 @@ import { import { AppData } from './components/AppData/AppData'; // @ts-ignore: No implicit Any import AuthToken from './components/AuthToken'; -import { ConferenceScreen } from './components/ConferenceScreen'; // @ts-ignore: No implicit Any import { ErrorBoundary } from './components/ErrorBoundary'; // @ts-ignore: No implicit Any import { Init } from './components/init/Init'; // @ts-ignore: No implicit Any import { KeyboardHandler } from './components/Input/KeyboardInputManager'; -import { LeaveScreen } from './components/LeaveScreen'; import { MwebLandscapePrompt } from './components/MwebLandscapePrompt'; import { Notifications } from './components/Notifications'; import { PIPProvider } from './components/PIP/PIPProvider'; @@ -50,6 +48,12 @@ import { import { FeatureFlags } from './services/FeatureFlags'; // @ts-ignore: No implicit Any import { DEFAULT_PORTAL_CONTAINER } from './common/constants'; +const LeaveScreen = React.lazy(() => + import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })), +); +const ConferenceScreen = React.lazy(() => + import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })), +); export type HMSPrebuiltOptions = { userName?: string; diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx index ae455703d7..3f47263e7e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx @@ -1,4 +1,4 @@ -import React, { MutableRefObject, useCallback, useRef } from 'react'; +import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react'; import { useMedia } from 'react-use'; import { VariableSizeList } from 'react-window'; import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store'; @@ -8,10 +8,6 @@ import { ChevronDownIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; import { config as cssConfig } from '../../../Theme'; -// @ts-ignore: No implicit any -import { EmojiReaction } from '../EmojiReaction'; -import { MoreSettings } from '../MoreSettings/MoreSettings'; -import { RaiseHand } from '../RaiseHand'; import { ChatBody } from './ChatBody'; import { ChatFooter } from './ChatFooter'; import { ChatBlocked, ChatPaused } from './ChatStates'; @@ -21,6 +17,12 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist'; import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks'; import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants'; +const MoreSettings = React.lazy(() => + import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })), +); +const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand }))); +// @ts-ignore: No implicit any +const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction }))); export const Chat = () => { const { elements, screenType } = useRoomLayoutConferencingScreen(); @@ -65,10 +67,10 @@ export const Chat = () => { {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && ( - <> + }> - + )} {isMobile && elements?.chat?.is_overlay && !streaming ? : null} @@ -129,7 +131,9 @@ export const Chat = () => { .otherwise(() => ({})), }} > - + }> + +     )} diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx index 5e3f25b1d5..3f4c020fb5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; import { useMedia } from 'react-use'; -import data from '@emoji-mart/data'; +import data from '@emoji-mart/data/sets/14/apple.json'; import Picker from '@emoji-mart/react'; import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons'; diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index b7097f49ca..cc108494eb 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { Suspense, useEffect, useMemo, useState } from 'react'; import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout'; import { selectLocalPeerID, @@ -9,16 +9,22 @@ import { useHMSStore, useHMSVanillaStore, } from '@100mslive/react-sdk'; -// @ts-ignore: No implicit Any +import FullPageProgress from '../FullPageProgress'; import { EqualProminence } from './EqualProminence'; -import { RoleProminence } from './RoleProminence'; -import { ScreenshareLayout } from './ScreenshareLayout'; -import { WhiteboardLayout } from './WhiteboardLayout'; // @ts-ignore: No implicit Any import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings'; import { VideoTileContext } from '../hooks/useVideoTileLayout'; import PeersSorter from '../../common/PeersSorter'; import { APP_DATA } from '../../common/constants'; +const RoleProminence = React.lazy(() => + import('./RoleProminence').then(module => ({ default: module.RoleProminence })), +); +const ScreenshareLayout = React.lazy(() => + import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })), +); +const WhiteboardLayout = React.lazy(() => + import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })), +); export type TileCustomisationProps = { hide_participant_name_on_tile: boolean; @@ -108,38 +114,44 @@ export const GridLayout = ({ if (peerSharing) { return ( - - - + }> + + + + ); } else if (whiteboard?.open) { return ( - - - + }> + + + + ); } else if (isRoleProminence) { return ( - - - + }> + + + + ); } return ( diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index a90071082d..941e7caec3 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -286,6 +286,7 @@ const HLSView = () => { hlsPlayer.reset(); }; } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [hlsUrl, vanillaStore, hmsActions]); /** diff --git a/packages/roomkit-react/src/Prebuilt/layouts/PDFView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/PDFView.jsx index 851738a2be..881454471f 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/PDFView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/PDFView.jsx @@ -19,6 +19,7 @@ export const PDFView = () => { return () => { resetConfig(); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { (async () => { diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index b9d7ad50e2..c5fa092e75 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -1,14 +1,10 @@ -import React, { useEffect } from 'react'; +import React, { Suspense, useEffect } from 'react'; import { useMedia } from 'react-use'; import { match } from 'ts-pattern'; import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk'; -import { Polls } from '../components/Polls/Polls'; -import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane'; import { LayoutMode } from '../components/Settings/LayoutSettings'; -import { SidePaneTabs } from '../components/SidePaneTabs'; import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout'; import VideoTile from '../components/VideoTile'; -import { VBPicker } from '../components/VirtualBackground/VBPicker'; import { Flex } from '../../Layout'; import { config as cssConfig, styled } from '../../Theme'; // @ts-ignore: No implicit Any @@ -22,6 +18,16 @@ import { import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks'; import { translateAcross } from '../../utils'; import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants'; +const SidePaneTabs = React.lazy(() => + import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })), +); +const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls }))); +const RoomDetailsPane = React.lazy(() => + import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })), +); +const VBPicker = React.lazy(() => + import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })), +); const Wrapper = styled('div', { w: '$100', @@ -233,7 +239,7 @@ const SidePane = ({ {...tileLayout} /> )} - {SidepaneComponent} + }>{SidepaneComponent} ); }; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx index 8acd07d015..250b78eeb7 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx @@ -19,13 +19,7 @@ import FullPageProgress from '../components/FullPageProgress'; import { GridLayout } from '../components/VideoLayouts/GridLayout'; import { Box, Flex } from '../../Layout'; import { config } from '../../Theme'; -// @ts-ignore: No implicit Any -import { EmbedView } from './EmbedView'; -// @ts-ignore: No implicit Any -import { PDFView } from './PDFView'; import SidePane from './SidePane'; -// @ts-ignore: No implicit Any -import { WaitingView } from './WaitingView'; import { CaptionsViewer } from '../plugins/CaptionsViewer'; // @ts-ignore: No implicit Any import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings'; @@ -34,6 +28,11 @@ import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '. import { SESSION_STORE_KEY } from '../common/constants'; // @ts-ignore: No implicit Any const HLSView = React.lazy(() => import('./HLSView')); +// @ts-ignore: No implicit Any +const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView }))); +// @ts-ignore: No implicit Any +const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView }))); +const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView }))); export const VideoStreamingSection = ({ screenType, @@ -79,18 +78,18 @@ export const VideoStreamingSection = ({ } return ( - }> - , 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream }) - .with({ isLandscapeHLSStream: true }, () => 'row') - .with({ isMobileHLSStream: true }, () => 'column') - .otherwise(() => 'row')} - > + , 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream }) + .with({ isLandscapeHLSStream: true }, () => 'row') + .with({ isMobileHLSStream: true }, () => 'column') + .otherwise(() => 'row')} + > + }> {match({ screenType, isNotAllowedToPublish, @@ -142,27 +141,29 @@ export const VideoStreamingSection = ({ return ; })} - '1 1 0') - .with({ isMobileHLSStream: true }, () => '2 1 0') - .otherwise(() => undefined), - position: 'relative', - height: !isMobileHLSStream ? '100%' : undefined, - maxHeight: '100%', - '&:empty': { display: 'none' }, - overflowY: 'clip', - }} - > + + '1 1 0') + .with({ isMobileHLSStream: true }, () => '2 1 0') + .otherwise(() => undefined), + position: 'relative', + height: !isMobileHLSStream ? '100%' : undefined, + maxHeight: '100%', + '&:empty': { display: 'none' }, + overflowY: 'clip', + }} + > + }> - - - + + + ); }; diff --git a/scripts/build-webapp.js b/scripts/build-webapp.js index 3c8a0919b3..8f07f6dd53 100644 --- a/scripts/build-webapp.js +++ b/scripts/build-webapp.js @@ -16,7 +16,7 @@ async function main() { const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8')); const source = pkg.name === '@100mslive/roomkit-web' ? './src/index.js' : './src/index.ts'; const external = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})]; - const loader = { '.js': 'jsx', '.svg': 'dataurl', '.png': 'dataurl' }; + const loader = { '.js': 'jsx', '.svg': 'file', '.png': 'file' }; const define = { 'process.env': JSON.stringify(process.env) }; const target = 'es6'; const plugins = [ diff --git a/scripts/dev-webapp.js b/scripts/dev-webapp.js index 98bea395b1..491203ec35 100644 --- a/scripts/dev-webapp.js +++ b/scripts/dev-webapp.js @@ -5,7 +5,7 @@ async function main() { const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8')); const source = 'src/App.js'; const external = Object.keys(pkg.dependencies || {}); - const loader = { '.js': 'jsx', '.svg': 'dataurl', '.png': 'dataurl' }; + const loader = { '.js': 'jsx', '.svg': 'file', '.png': 'file' }; require('dotenv').config(); const define = { 'process.env': JSON.stringify(process.env) }; const commonOptions = { From 780129c6a98154f99e64544a348f0337953ff2d2 Mon Sep 17 00:00:00 2001 From: ygit Date: Wed, 9 Oct 2024 11:26:45 +0530 Subject: [PATCH 13/49] fix: make role change notification an independent component --- .../Notifications/Notifications.tsx | 2 ++ .../Notifications/PeerNotifications.tsx | 14 ----------- .../Notifications/RoleChangeNotification.tsx | 24 +++++++++++++++++++ 3 files changed, 26 insertions(+), 14 deletions(-) create mode 100644 packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx index b0b31bb36c..c14ff9c091 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx @@ -15,6 +15,7 @@ import { PeerNotifications } from './PeerNotifications'; import { PermissionErrorNotificationModal } from './PermissionErrorModal'; import { PollNotificationModal } from './PollNotificationModal'; import { ReconnectNotifications } from './ReconnectNotifications'; +import { RoleChangeNotification } from './RoleChangeNotification'; import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal'; import { TrackNotifications } from './TrackNotifications'; import { TrackUnmuteModal } from './TrackUnmuteModal'; @@ -46,6 +47,7 @@ export function Notifications() { {roomState === HMSRoomState.Connected ? : null} + diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx index c23fb041ce..fe3ee15adb 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/PeerNotifications.tsx @@ -1,11 +1,8 @@ import { useEffect } from 'react'; import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; -import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider'; // @ts-ignore: No implicit Any import { ToastBatcher } from '../Toast/ToastBatcher'; // @ts-ignore: No implicit Any -import { ToastManager } from '../Toast/ToastManager'; -// @ts-ignore: No implicit Any import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../AppData/useUISettings'; // @ts-ignore: No implicit Any import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants'; @@ -14,7 +11,6 @@ const notificationTypes = [ HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT, HMSNotificationTypes.NAME_UPDATED, - HMSNotificationTypes.ROLE_UPDATED, ]; export const PeerNotifications = () => { @@ -22,7 +18,6 @@ export const PeerNotifications = () => { const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED); const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT); const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER); - const updateRoomLayoutForRole = useUpdateRoomLayout(); useEffect(() => { if (!notification?.data) { @@ -47,15 +42,6 @@ export const PeerNotifications = () => { case HMSNotificationTypes.NAME_UPDATED: console.log(notification.data.id + ' changed their name to ' + notification.data.name); return; - case HMSNotificationTypes.ROLE_UPDATED: { - if (notification.data?.isLocal && notification.data?.roleName) { - ToastManager.addToast({ - title: `You are now a ${notification.data.roleName}`, - }); - updateRoomLayoutForRole?.(notification.data.roleName); - } - return; - } default: return; } diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx new file mode 100644 index 0000000000..00dfab79db --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx @@ -0,0 +1,24 @@ +import { useEffect } from 'react'; +import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; + +export const RoleChangeNotification = () => { + const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED); + const updateRoomLayoutForRole = useUpdateRoomLayout(); + + useEffect(() => { + if (!notification?.data) { + return; + } + if (notification.data?.isLocal && notification.data?.roleName) { + ToastManager.addToast({ + title: `You are now a ${notification.data.roleName}`, + }); + updateRoomLayoutForRole?.(notification.data.roleName); + } + }, [notification]); + + return null; +}; From 258ec48b769aff6684b92ca04e72c61d02ada701 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Wed, 9 Oct 2024 16:09:13 +0530 Subject: [PATCH 14/49] fix: use copy loader for images --- scripts/build-webapp.js | 2 +- scripts/dev-webapp.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/build-webapp.js b/scripts/build-webapp.js index 8f07f6dd53..9eb775acc8 100644 --- a/scripts/build-webapp.js +++ b/scripts/build-webapp.js @@ -16,7 +16,7 @@ async function main() { const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8')); const source = pkg.name === '@100mslive/roomkit-web' ? './src/index.js' : './src/index.ts'; const external = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})]; - const loader = { '.js': 'jsx', '.svg': 'file', '.png': 'file' }; + const loader = { '.js': 'jsx', '.svg': 'copy', '.png': 'copy' }; const define = { 'process.env': JSON.stringify(process.env) }; const target = 'es6'; const plugins = [ diff --git a/scripts/dev-webapp.js b/scripts/dev-webapp.js index 491203ec35..b30d4a2df2 100644 --- a/scripts/dev-webapp.js +++ b/scripts/dev-webapp.js @@ -5,7 +5,7 @@ async function main() { const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8')); const source = 'src/App.js'; const external = Object.keys(pkg.dependencies || {}); - const loader = { '.js': 'jsx', '.svg': 'file', '.png': 'file' }; + const loader = { '.js': 'jsx', '.svg': 'copy', '.png': 'copy' }; require('dotenv').config(); const define = { 'process.env': JSON.stringify(process.env) }; const commonOptions = { From 7d4a6852fffde4f0c8052cb76d81a2d1133262d8 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 14 Oct 2024 17:43:11 +0530 Subject: [PATCH 15/49] fix: add new stats for nerds sheet --- .../SplitComponents/MwebOptions.tsx | 15 ++- .../src/Prebuilt/components/StatsForNerds.jsx | 98 +++++++++++++++++-- 2 files changed, 105 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index c5e4257ff6..869d8f31d8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -43,6 +43,8 @@ import { StopRecordingInSheet } from '../../Header/StreamActions'; // @ts-ignore: No implicit any import SettingsModal from '../../Settings/SettingsModal'; // @ts-ignore: No implicit any +import { StatsForNerds } from '../../StatsForNerds'; +// @ts-ignore: No implicit any import { ToastManager } from '../../Toast/ToastManager'; // @ts-ignore: No implicit any import { ActionTile } from '../ActionTile'; @@ -94,6 +96,7 @@ export const MwebOptions = ({ const [openModals, setOpenModals] = useState(new Set()); const [openOptionsSheet, setOpenOptionsSheet] = useState(false); const [openSettingsSheet, setOpenSettingsSheet] = useState(false); + const [openStatsForNerdsSheet, setOpenStatsForNerdsSheet] = useState(false); const [showEmojiCard, setShowEmojiCard] = useState(false); const [showRecordingOn, setShowRecordingOn] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); @@ -269,7 +272,15 @@ export const MwebOptions = ({ Settings - + { + setOpenStatsForNerdsSheet(true); + setOpenOptionsSheet(false); + }} + > + + Stats For Nerds + {isConnected && permissions?.browserRecording ? ( + + {openModals.has(MODALS.MUTE_ALL) && ( updateState(MODALS.MUTE_ALL, value)} isMobile /> )} diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 747601668b..6d48e0ef71 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import { match, P } from 'ts-pattern'; import { selectHMSStats, @@ -13,15 +14,20 @@ import { Dropdown } from '../../Dropdown'; import { Label } from '../../Label'; import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; +import { Sheet } from '../../Sheet'; import { formatBytes } from '../../Stats'; import { Switch } from '../../Switch'; import { Text } from '../../Text'; +import { config as cssConfig } from '../../Theme'; import { DialogDropdownTrigger } from '../primitives/DropdownTrigger'; import { useSetUiSettings } from './AppData/useUISettings'; import { useDropdownSelection } from './hooks/useDropdownSelection'; import { UI_SETTINGS } from '../common/constants'; -export const StatsForNerds = ({ onOpenChange }) => { +export const StatsForNerds = ({ open, onOpenChange }) => { + const mediaQueryLg = cssConfig.media.md; + const isMobile = useMedia(mediaQueryLg); + const tracksWithLabels = useTracksWithLabel(); const statsOptions = useMemo( () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels], @@ -29,7 +35,7 @@ export const StatsForNerds = ({ onOpenChange }) => { ); const [selectedStat, setSelectedStat] = useState(statsOptions[0]); const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles); - const [open, setOpen] = useState(false); + const [openDropdown, setOpenDropdown] = useState(false); const ref = useRef(); const selectionBg = useDropdownSelection(); @@ -38,9 +44,87 @@ export const StatsForNerds = ({ onOpenChange }) => { setSelectedStat('local-peer'); } }, [tracksWithLabels, selectedStat]); - - return ( - + console.log({ isMobile }); + return isMobile ? ( + + + + + + + Stats For Nerds + + + + + + + + + + Show Stats on Tiles + + + {/* Select */} + + + + + + + {statsOptions.map(option => { + const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; + return ( + { + setSelectedStat(option); + }} + css={{ + px: '$9', + bg: isSelected ? selectionBg : undefined, + c: isSelected ? '$on_primary_high' : '$on_primary_high', + }} + > + {option.label} + + ); + })} + + + + + {/* Stats */} + {selectedStat.id === 'local-peer' ? ( + + ) : ( + + )} + + + ) : ( + { - + From 2c50a1d42b9097c48023f2cb4e17a56e65343274 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:15:39 +0530 Subject: [PATCH 16/49] fix: remove console --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 6d48e0ef71..0390f07425 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -44,7 +44,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { setSelectedStat('local-peer'); } }, [tracksWithLabels, selectedStat]); - console.log({ isMobile }); + return isMobile ? ( Date: Wed, 16 Oct 2024 15:55:46 +0530 Subject: [PATCH 17/49] fix: text size on waiting view on smaller screens --- packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx b/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx index aac75c4895..378617e972 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/WaitingView.tsx @@ -36,12 +36,12 @@ export const WaitingView = React.memo( gap: '$4', }} > - + {title} {subtitle} From 69ab42fc4105f7ae56801a20928c334d1c25bc1b Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Thu, 17 Oct 2024 13:38:43 +0530 Subject: [PATCH 18/49] fix: handle terminal while retrying in RetryScheduler --- .../src/transport/RetryScheduler.ts | 42 ++++++++++++------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/packages/hms-video-store/src/transport/RetryScheduler.ts b/packages/hms-video-store/src/transport/RetryScheduler.ts index 0feaf8c006..7230612a99 100644 --- a/packages/hms-video-store/src/transport/RetryScheduler.ts +++ b/packages/hms-video-store/src/transport/RetryScheduler.ts @@ -114,17 +114,7 @@ export class RetryScheduler { } } - const timeElapsedSinceError = Date.now() - failedAt; - if (timeElapsedSinceError >= maxRetryTime || hasFailedDependency) { - error.description += `. [${TFC[category]}] Could not recover after ${timeElapsedSinceError} milliseconds`; - - if (hasFailedDependency) { - error.description += ` Could not recover all of it's required dependencies - [${(dependencies as Array) - .map(dep => TFC[dep]) - .toString()}]`; - } - error.isTerminal = true; - + const handleTerminalError = (error: HMSException) => { // @NOTE: Don't reject to throw error for dependencies, use onStateChange // const taskPromise = this.inProgress.get(category); this.inProgress.delete(category); @@ -140,6 +130,19 @@ export class RetryScheduler { } return; + }; + + const timeElapsedSinceError = Date.now() - failedAt; + if (timeElapsedSinceError >= maxRetryTime || hasFailedDependency) { + error.description += `. [${TFC[category]}] Could not recover after ${timeElapsedSinceError} milliseconds`; + + if (hasFailedDependency) { + error.description += ` Could not recover all of it's required dependencies - [${(dependencies as Array) + .map(dep => TFC[dep]) + .toString()}]`; + } + error.isTerminal = true; + return handleTerminalError(error); } if (changeState) { @@ -158,11 +161,18 @@ export class RetryScheduler { taskSucceeded = await this.setTimeoutPromise(task, delay); } catch (ex) { taskSucceeded = false; - HMSLogger.w( - this.TAG, - `[${TFC[category]}] Un-caught exception ${(ex as HMSException).name} in retry-task, initiating retry`, - ex, - ); + const error = ex as HMSException; + + if (error.isTerminal) { + HMSLogger.e(this.TAG, `[${TFC[category]}] Un-caught terminal exception ${error.name} in retry-task`, ex); + return handleTerminalError(error); + } else { + HMSLogger.w( + this.TAG, + `[${TFC[category]}] Un-caught exception ${error.name} in retry-task, initiating retry`, + ex, + ); + } } if (taskSucceeded) { From 970e9cc2335d94012870128e63c3ca0d5914c968 Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Thu, 17 Oct 2024 13:39:42 +0530 Subject: [PATCH 19/49] fix: show stats for nerds in mweb --- .../SplitComponents/MwebOptions.tsx | 15 ++- .../src/Prebuilt/components/StatsForNerds.jsx | 96 +++++++++++++++++-- 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index c5e4257ff6..869d8f31d8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -43,6 +43,8 @@ import { StopRecordingInSheet } from '../../Header/StreamActions'; // @ts-ignore: No implicit any import SettingsModal from '../../Settings/SettingsModal'; // @ts-ignore: No implicit any +import { StatsForNerds } from '../../StatsForNerds'; +// @ts-ignore: No implicit any import { ToastManager } from '../../Toast/ToastManager'; // @ts-ignore: No implicit any import { ActionTile } from '../ActionTile'; @@ -94,6 +96,7 @@ export const MwebOptions = ({ const [openModals, setOpenModals] = useState(new Set()); const [openOptionsSheet, setOpenOptionsSheet] = useState(false); const [openSettingsSheet, setOpenSettingsSheet] = useState(false); + const [openStatsForNerdsSheet, setOpenStatsForNerdsSheet] = useState(false); const [showEmojiCard, setShowEmojiCard] = useState(false); const [showRecordingOn, setShowRecordingOn] = useState(false); const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS); @@ -269,7 +272,15 @@ export const MwebOptions = ({ Settings - + { + setOpenStatsForNerdsSheet(true); + setOpenOptionsSheet(false); + }} + > + + Stats For Nerds + {isConnected && permissions?.browserRecording ? ( + + {openModals.has(MODALS.MUTE_ALL) && ( updateState(MODALS.MUTE_ALL, value)} isMobile /> )} diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 8aed7e43ea..209b6095e5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { useMedia } from 'react-use'; import { match, P } from 'ts-pattern'; import { selectHMSStats, @@ -15,15 +16,20 @@ import { Dropdown } from '../../Dropdown'; import { Label } from '../../Label'; import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; +import { Sheet } from '../../Sheet'; import { formatBytes } from '../../Stats'; import { Switch } from '../../Switch'; import { Text } from '../../Text'; +import { config as cssConfig } from '../../Theme'; import { DialogDropdownTrigger } from '../primitives/DropdownTrigger'; import { useSetUiSettings } from './AppData/useUISettings'; import { useDropdownSelection } from './hooks/useDropdownSelection'; import { UI_SETTINGS } from '../common/constants'; -export const StatsForNerds = ({ onOpenChange }) => { +export const StatsForNerds = ({ open, onOpenChange }) => { + const mediaQueryLg = cssConfig.media.md; + const isMobile = useMedia(mediaQueryLg); + const tracksWithLabels = useTracksWithLabel(); const statsOptions = useMemo( () => [{ id: 'local-peer', label: 'Local Peer Stats' }, ...tracksWithLabels], @@ -33,7 +39,7 @@ export const StatsForNerds = ({ onOpenChange }) => { const details = hmsActions.getDebugInfo(); const [selectedStat, setSelectedStat] = useState(statsOptions[0]); const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles); - const [open, setOpen] = useState(false); + const [openDropdown, setOpenDropdown] = useState(false); const ref = useRef(); const selectionBg = useDropdownSelection(); @@ -43,8 +49,86 @@ export const StatsForNerds = ({ onOpenChange }) => { } }, [tracksWithLabels, selectedStat]); - return ( - + return isMobile ? ( + + + + + + + Stats For Nerds + + + + + + + + + + Show Stats on Tiles + + + {/* Select */} + + + + + + + {statsOptions.map(option => { + const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; + return ( + { + setSelectedStat(option); + }} + css={{ + px: '$9', + bg: isSelected ? selectionBg : undefined, + c: isSelected ? '$on_primary_high' : '$on_primary_high', + }} + > + {option.label} + + ); + })} + + + + + {/* Stats */} + {selectedStat.id === 'local-peer' ? ( + + ) : ( + + )} + + + ) : ( + { - + From 84e1b0eabce1410784173532f013630a125e4241 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:42:14 +0530 Subject: [PATCH 20/49] fix: add new changes for debug info in mweb --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 209b6095e5..c205d98483 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -56,6 +56,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { bg: '$surface_dim', overflowY: 'auto', px: '$4', + pb: '$4', }} > @@ -125,6 +126,9 @@ export const StatsForNerds = ({ open, onOpenChange }) => { ) : ( )} + + + ) : ( From 41ce979600dc2c0878b5caea871f2dccd373c60a Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 21 Oct 2024 14:00:52 +0530 Subject: [PATCH 21/49] fix: add new mweb changes for stats for nerds and debug info --- .../src/Prebuilt/components/StatsForNerds.jsx | 119 +++++++++--------- 1 file changed, 63 insertions(+), 56 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index c205d98483..ccf56cba8e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -54,12 +54,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - + @@ -70,64 +69,72 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - - - - Show Stats on Tiles - - - {/* Select */} - - - - - - {statsOptions.map(option => { - const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; - return ( - { - setSelectedStat(option); - }} - css={{ - px: '$9', - bg: isSelected ? selectionBg : undefined, - c: isSelected ? '$on_primary_high' : '$on_primary_high', - }} - > - {option.label} - - ); - })} - - - - - {/* Stats */} - {selectedStat.id === 'local-peer' ? ( - - ) : ( - - )} - - + + + + Show Stats on Tiles + + + {/* Select */} + + + + + + + {statsOptions.map(option => { + const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer; + return ( + { + setSelectedStat(option); + }} + css={{ + px: '$9', + bg: isSelected ? selectionBg : undefined, + c: isSelected ? '$on_primary_high' : '$on_primary_high', + }} + > + {option.label} + + ); + })} + + + + + {/* Stats */} + {selectedStat.id === 'local-peer' ? ( + + ) : ( + + )} + + + From e2226dd0759abcf85676fc9c2af2c5303febb5d1 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:27:29 +0530 Subject: [PATCH 22/49] fix: padding and scroll css styles --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index ccf56cba8e..39d50b94f7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -54,11 +54,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => { - + @@ -74,6 +74,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ overflowY: 'auto', maxHeight: '65vh', + px: '$4', }} > From 8e66e169c1f540912d36c2f020f840ff82d524b8 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Tue, 22 Oct 2024 11:32:27 +0530 Subject: [PATCH 23/49] fix: chat not shown for hls viewer --- .../src/Prebuilt/components/HMSVideo/HMSVideo.jsx | 6 +++--- packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx index 5ba399c1d4..d48854ab21 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx @@ -1,7 +1,7 @@ import React, { forwardRef, useEffect, useState } from 'react'; import { Flex } from '../../../Layout'; -export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => { +export const HMSVideo = forwardRef(({ children, isFullScreen, ...props }, videoRef) => { const [width, setWidth] = useState('auto'); useEffect(() => { @@ -22,7 +22,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => { return () => { videoEl.removeEventListener('loadedmetadata', updatingVideoWidth); }; - }, []); + }, [videoRef, width]); return ( { transition: 'all 0.3s ease-in-out', '@md': { '& video': { - height: props.isFullScreen ? '' : '$60 !important', + height: isFullScreen ? '' : '$60 !important', }, }, '& video::cue': { diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 941e7caec3..405f16fd3c 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -46,7 +46,6 @@ const toastMap = {}; const ToggleChat = ({ isFullScreen = false }) => { const { elements } = useRoomLayoutConferencingScreen(); const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane)); - const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); const showChat = !!elements?.chat; const isMobile = useMedia(config.media.md); const hmsActions = useHMSActions(); @@ -57,7 +56,7 @@ const ToggleChat = ({ isFullScreen = false }) => { hmsActions.setAppData(APP_DATA.sidePane, ''); }) .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => { - toggleChat(); + hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT); }) .with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => { hmsActions.setAppData(APP_DATA.sidePane, ''); @@ -65,7 +64,7 @@ const ToggleChat = ({ isFullScreen = false }) => { .otherwise(() => { //do nothing }); - }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]); + }, [sidepane, isMobile, showChat, hmsActions, isFullScreen]); return null; }; const HLSView = () => { From e01406303ec88d759cfc065039ca22f42eec3333 Mon Sep 17 00:00:00 2001 From: Amar Bathwal <110378139+amar-1995@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:32:45 +0530 Subject: [PATCH 24/49] fix: add delay when whiteboard is open --- .../components/Footer/WhiteboardToggle.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx index 3db4f2b32b..68505503fe 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk'; import { PencilDrawIcon } from '@100mslive/react-icons'; import { Tooltip } from '../../..'; @@ -11,6 +11,7 @@ export const WhiteboardToggle = () => { const { toggle, open, isOwner } = useWhiteboard(); const peerSharing = useHMSStore(selectPeerScreenSharing); const disabled = !!peerSharing || (open && !isOwner); + const [isLoading, setLoading] = useState(false); if (!toggle) { return null; @@ -25,17 +26,23 @@ export const WhiteboardToggle = () => { > { - if (disabled) { + if (disabled || isLoading) { return; } try { - await toggle(); + if (!open) { + setLoading(true); + await toggle(); + setTimeout(() => setLoading(false), 500); + } else { + await toggle(); + } } catch (error) { ToastManager.addToast({ title: (error as Error).message, variant: 'error' }); } }} active={!open} - disabled={disabled} + disabled={disabled || isLoading} data-testid="whiteboard_btn" > From 04869b9797bbddbae1b7e8d83e3f8684a95f2eb4 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Tue, 22 Oct 2024 12:49:00 +0530 Subject: [PATCH 25/49] revert: lazy load --- packages/roomkit-react/src/Prebuilt/App.tsx | 8 +- .../src/Prebuilt/components/Chat/Chat.tsx | 20 ++- .../components/VideoLayouts/GridLayout.tsx | 73 ++++------ .../src/Prebuilt/layouts/SidePane.tsx | 18 +-- .../layouts/VideoStreamingSection.tsx | 133 +++++++++--------- 5 files changed, 110 insertions(+), 142 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx index 644bc9a49c..8010a58115 100644 --- a/packages/roomkit-react/src/Prebuilt/App.tsx +++ b/packages/roomkit-react/src/Prebuilt/App.tsx @@ -13,12 +13,14 @@ import { import { AppData } from './components/AppData/AppData'; // @ts-ignore: No implicit Any import AuthToken from './components/AuthToken'; +import { ConferenceScreen } from './components/ConferenceScreen'; // @ts-ignore: No implicit Any import { ErrorBoundary } from './components/ErrorBoundary'; // @ts-ignore: No implicit Any import { Init } from './components/init/Init'; // @ts-ignore: No implicit Any import { KeyboardHandler } from './components/Input/KeyboardInputManager'; +import { LeaveScreen } from './components/LeaveScreen'; import { MwebLandscapePrompt } from './components/MwebLandscapePrompt'; import { Notifications } from './components/Notifications'; import { PIPProvider } from './components/PIP/PIPProvider'; @@ -48,12 +50,6 @@ import { import { FeatureFlags } from './services/FeatureFlags'; // @ts-ignore: No implicit Any import { DEFAULT_PORTAL_CONTAINER } from './common/constants'; -const LeaveScreen = React.lazy(() => - import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })), -); -const ConferenceScreen = React.lazy(() => - import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })), -); export type HMSPrebuiltOptions = { userName?: string; diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx index 3f47263e7e..4fbaf9abd4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx @@ -1,4 +1,4 @@ -import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react'; +import React, { MutableRefObject, useCallback, useRef } from 'react'; import { useMedia } from 'react-use'; import { VariableSizeList } from 'react-window'; import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store'; @@ -8,6 +8,10 @@ import { ChevronDownIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; import { config as cssConfig } from '../../../Theme'; +// @ts-ignore: No implicit Any +import { EmojiReaction } from '../EmojiReaction'; +import { MoreSettings } from '../MoreSettings/MoreSettings'; +import { RaiseHand } from '../RaiseHand'; import { ChatBody } from './ChatBody'; import { ChatFooter } from './ChatFooter'; import { ChatBlocked, ChatPaused } from './ChatStates'; @@ -17,12 +21,6 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist'; import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks'; import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants'; -const MoreSettings = React.lazy(() => - import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })), -); -const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand }))); -// @ts-ignore: No implicit any -const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction }))); export const Chat = () => { const { elements, screenType } = useRoomLayoutConferencingScreen(); @@ -67,10 +65,10 @@ export const Chat = () => { {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && ( - }> + <> - + )} {isMobile && elements?.chat?.is_overlay && !streaming ? : null} @@ -131,9 +129,7 @@ export const Chat = () => { .otherwise(() => ({})), }} > - }> - - + )} diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index cc108494eb..82b1d47186 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout'; import { selectLocalPeerID, @@ -9,22 +9,15 @@ import { useHMSStore, useHMSVanillaStore, } from '@100mslive/react-sdk'; -import FullPageProgress from '../FullPageProgress'; import { EqualProminence } from './EqualProminence'; +import { RoleProminence } from './RoleProminence'; +import { ScreenshareLayout } from './ScreenshareLayout'; +import { WhiteboardLayout } from './WhiteboardLayout'; // @ts-ignore: No implicit Any import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings'; import { VideoTileContext } from '../hooks/useVideoTileLayout'; import PeersSorter from '../../common/PeersSorter'; import { APP_DATA } from '../../common/constants'; -const RoleProminence = React.lazy(() => - import('./RoleProminence').then(module => ({ default: module.RoleProminence })), -); -const ScreenshareLayout = React.lazy(() => - import('./ScreenshareLayout').then(module => ({ default: module.ScreenshareLayout })), -); -const WhiteboardLayout = React.lazy(() => - import('./WhiteboardLayout').then(module => ({ default: module.WhiteboardLayout })), -); export type TileCustomisationProps = { hide_participant_name_on_tile: boolean; @@ -114,44 +107,38 @@ export const GridLayout = ({ if (peerSharing) { return ( - }> - - - - + + + ); } else if (whiteboard?.open) { return ( - }> - - - - + + + ); } else if (isRoleProminence) { return ( - }> - - - - + + + ); } return ( diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx index c5fa092e75..b9d7ad50e2 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx @@ -1,10 +1,14 @@ -import React, { Suspense, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { useMedia } from 'react-use'; import { match } from 'ts-pattern'; import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk'; +import { Polls } from '../components/Polls/Polls'; +import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane'; import { LayoutMode } from '../components/Settings/LayoutSettings'; +import { SidePaneTabs } from '../components/SidePaneTabs'; import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout'; import VideoTile from '../components/VideoTile'; +import { VBPicker } from '../components/VirtualBackground/VBPicker'; import { Flex } from '../../Layout'; import { config as cssConfig, styled } from '../../Theme'; // @ts-ignore: No implicit Any @@ -18,16 +22,6 @@ import { import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks'; import { translateAcross } from '../../utils'; import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants'; -const SidePaneTabs = React.lazy(() => - import('../components/SidePaneTabs').then(module => ({ default: module.SidePaneTabs })), -); -const Polls = React.lazy(() => import('../components/Polls/Polls').then(module => ({ default: module.Polls }))); -const RoomDetailsPane = React.lazy(() => - import('../components/RoomDetails/RoomDetailsPane').then(module => ({ default: module.RoomDetailsPane })), -); -const VBPicker = React.lazy(() => - import('../components/VirtualBackground/VBPicker').then(module => ({ default: module.VBPicker })), -); const Wrapper = styled('div', { w: '$100', @@ -239,7 +233,7 @@ const SidePane = ({ {...tileLayout} /> )} - }>{SidepaneComponent} + {SidepaneComponent} ); }; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx index 250b78eeb7..d2be65f114 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx @@ -1,4 +1,4 @@ -import React, { Suspense, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { ControlPosition } from 'react-draggable'; import { useMedia } from 'react-use'; import { @@ -15,24 +15,23 @@ import { useHMSStore, } from '@100mslive/react-sdk'; import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons'; -import FullPageProgress from '../components/FullPageProgress'; import { GridLayout } from '../components/VideoLayouts/GridLayout'; import { Box, Flex } from '../../Layout'; import { config } from '../../Theme'; +// @ts-ignore: No implicit Any +import { EmbedView } from './EmbedView'; +// @ts-ignore: No implicit Any +import HLSView from './HLSView'; +// @ts-ignore: No implicit Any +import { PDFView } from './PDFView'; import SidePane from './SidePane'; +import { WaitingView } from './WaitingView'; import { CaptionsViewer } from '../plugins/CaptionsViewer'; // @ts-ignore: No implicit Any import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings'; import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard'; import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks'; import { SESSION_STORE_KEY } from '../common/constants'; -// @ts-ignore: No implicit Any -const HLSView = React.lazy(() => import('./HLSView')); -// @ts-ignore: No implicit Any -const EmbedView = React.lazy(() => import('./EmbedView').then(module => ({ default: module.EmbedView }))); -// @ts-ignore: No implicit Any -const PDFView = React.lazy(() => import('./PDFView').then(module => ({ default: module.PDFView }))); -const WaitingView = React.lazy(() => import('./WaitingView').then(module => ({ default: module.WaitingView }))); export const VideoStreamingSection = ({ screenType, @@ -89,59 +88,57 @@ export const VideoStreamingSection = ({ .with({ isMobileHLSStream: true }, () => 'column') .otherwise(() => 'row')} > - }> - {match({ - screenType, - isNotAllowedToPublish, - isScreenOnlyPublishParams, - hasSubscribedRolePublishing, - isSharingScreen, - pdfAnnotatorActive, - urlToIframe, - }) - .with( - { - screenType: 'hls_live_streaming', - }, - () => , - ) - .when( - ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) => - isNotAllowedToPublish && !hasSubscribedRolePublishing, - () => ( - } - /> - ), - ) - .when( - ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) => - isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing, - () => ( - } - /> - ), - ) - .when( - ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive, - () => , - ) - .when( - ({ urlToIframe }) => !!urlToIframe, - () => , - ) + {match({ + screenType, + isNotAllowedToPublish, + isScreenOnlyPublishParams, + hasSubscribedRolePublishing, + isSharingScreen, + pdfAnnotatorActive, + urlToIframe, + }) + .with( + { + screenType: 'hls_live_streaming', + }, + () => , + ) + .when( + ({ isNotAllowedToPublish, hasSubscribedRolePublishing }) => + isNotAllowedToPublish && !hasSubscribedRolePublishing, + () => ( + } + /> + ), + ) + .when( + ({ isScreenOnlyPublishParams, isSharingScreen, hasSubscribedRolePublishing }) => + isScreenOnlyPublishParams && !isSharingScreen && !hasSubscribedRolePublishing, + () => ( + } + /> + ), + ) + .when( + ({ pdfAnnotatorActive }) => !!pdfAnnotatorActive, + () => , + ) + .when( + ({ urlToIframe }) => !!urlToIframe, + () => , + ) - .otherwise(() => { - // @ts-ignore - return ; - })} - - + .otherwise(() => { + // @ts-ignore + return ; + })} + - }> - - + ); From 9716660718b6cf694aef1a3ffeaa6531f888ee08 Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Tue, 22 Oct 2024 13:01:29 +0530 Subject: [PATCH 26/49] fix: tooltip not getting dismissed (#3321) --- .../components/MoreSettings/SplitComponents/DesktopOptions.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index a642567526..410b6d699e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -130,6 +130,9 @@ export const DesktopOptions = ({ { + e.preventDefault(); + }} align="end" css={{ py: '$0', From 22b142b83bb3cfe38cea9de3a6de65e66e59f38d Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Tue, 22 Oct 2024 13:27:00 +0530 Subject: [PATCH 27/49] Fix: aspect ratio ignored due to type (#3333) --- .../src/Prebuilt/components/Preview/PreviewJoin.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx index 7dc9797ceb..4b3a7618c2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx @@ -61,7 +61,7 @@ const useLocalTileAspectRatio = () => { } else { aspectRatio = isMobile ? 9 / 16 : 16 / 9; } - return aspectRatio; + return aspectRatio.toString(); }; const PreviewJoin = ({ @@ -113,6 +113,7 @@ const PreviewJoin = ({ const { elements = {} } = useRoomLayoutPreviewScreen(); const { preview_header: previewHeader = {}, virtual_background } = elements || {}; const aspectRatio = useLocalTileAspectRatio(); + useEffect(() => { if (authToken) { if (skipPreview) { @@ -158,7 +159,7 @@ const PreviewJoin = ({ {toggleVideo ? : null} - + Date: Tue, 22 Oct 2024 16:41:33 +0530 Subject: [PATCH 28/49] fix: add negative margin --- packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 39d50b94f7..1f6b6c95b5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -55,6 +55,7 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ bg: '$surface_dim', px: '$4', + mr: '-$2', pb: '$4', }} > From 43c0d01a062edacf924f0f29f6dbd6a7f78d1239 Mon Sep 17 00:00:00 2001 From: hdz-666 <93115614+hdz-666@users.noreply.github.com> Date: Tue, 22 Oct 2024 18:57:26 +0530 Subject: [PATCH 29/49] fix: padding left --- .../roomkit-react/src/Prebuilt/components/StatsForNerds.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx index 1f6b6c95b5..989f5ab648 100644 --- a/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/StatsForNerds.jsx @@ -55,7 +55,6 @@ export const StatsForNerds = ({ open, onOpenChange }) => { css={{ bg: '$surface_dim', px: '$4', - mr: '-$2', pb: '$4', }} > @@ -73,9 +72,11 @@ export const StatsForNerds = ({ open, onOpenChange }) => { From 1264ad0cea9f80f3c8b379566dc1aa976880555e Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Wed, 23 Oct 2024 16:44:40 +0530 Subject: [PATCH 30/49] fix: local video replay after incoming call --- packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts b/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts index 03e6d7e0b7..8e577d4579 100644 --- a/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts +++ b/packages/hms-video-store/src/media/tracks/HMSVideoTrack.ts @@ -87,9 +87,9 @@ export class HMSVideoTrack extends HMSTrack { this.sinkCount++; } - handleTrackUnmute() { + handleTrackUnmute = () => { this.getSinks().forEach(videoElement => this.reTriggerPlay({ videoElement })); - } + }; private reTriggerPlay = ({ videoElement }: { videoElement: HTMLVideoElement }) => { setTimeout(() => { From e8da8fdeb5bd0aca5edc37d2ed43598153167cfc Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 23 Oct 2024 16:45:19 +0530 Subject: [PATCH 31/49] ci: add merge rules in PR description --- .github/pull_request_template.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 737e45d20a..c5b46c9ad9 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -4,3 +4,8 @@ - ### Implementation note, gotchas, related work and Future TODOs (optional) + + +### Merging: +- Squash merge to dev +- Merge commit to publish-alpha and main From 3ab79c301a40b2084853fd3d1566329df306a15e Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Wed, 23 Oct 2024 16:45:43 +0530 Subject: [PATCH 32/49] fix: mute audio when device change throws an error in preview --- packages/hms-video-store/src/interfaces/preview-listener.ts | 4 +++- packages/hms-video-store/src/reactive-store/HMSSDKActions.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/hms-video-store/src/interfaces/preview-listener.ts b/packages/hms-video-store/src/interfaces/preview-listener.ts index 56ac6019ff..4c88d21b2a 100644 --- a/packages/hms-video-store/src/interfaces/preview-listener.ts +++ b/packages/hms-video-store/src/interfaces/preview-listener.ts @@ -1,7 +1,7 @@ import { DeviceChangeListener } from './devices'; import { HMSPeer } from './peer'; import { HMSRoom } from './room'; -import { HMSPeerUpdate, HMSRoomUpdate } from './update-listener'; +import { HMSPeerUpdate, HMSRoomUpdate, HMSTrackUpdate } from './update-listener'; import { HMSException } from '../error/HMSException'; import { HMSTrack } from '../media/tracks/HMSTrack'; @@ -13,4 +13,6 @@ export interface HMSPreviewListener extends DeviceChangeListener { onRoomUpdate(type: HMSRoomUpdate, room: HMSRoom): void; onPeerUpdate(type: HMSPeerUpdate, peer: HMSPeer | HMSPeer[] | null): void; onNetworkQuality?(score: number): void; + // This is needed to mute audio when there is an error in device change + onTrackUpdate(type: HMSTrackUpdate, track: HMSTrack, peer: HMSPeer): void; } diff --git a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts index fae041cb22..a6f77818a4 100644 --- a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts +++ b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts @@ -932,6 +932,7 @@ export class HMSSDKActions Date: Thu, 24 Oct 2024 11:40:12 +0530 Subject: [PATCH 33/49] fix: make device label change a warning instead of error --- packages/hms-video-store/src/utils/media.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/hms-video-store/src/utils/media.ts b/packages/hms-video-store/src/utils/media.ts index 330b544b14..025fc7a4bb 100644 --- a/packages/hms-video-store/src/utils/media.ts +++ b/packages/hms-video-store/src/utils/media.ts @@ -73,7 +73,7 @@ export enum HMSAudioDeviceCategory { export const getAudioDeviceCategory = (deviceLabel?: string) => { if (!deviceLabel) { - HMSLogger.e('[DeviceManager]:', 'No device label provided'); + HMSLogger.w('[DeviceManager]:', 'No device label provided'); return HMSAudioDeviceCategory.SPEAKERPHONE; } const label = deviceLabel.toLowerCase(); From dbb4dda1a24043b051978c3a6a765fc04c2abf89 Mon Sep 17 00:00:00 2001 From: ygit Date: Mon, 28 Oct 2024 13:08:05 +0530 Subject: [PATCH 34/49] fix: added cross button to dismiss the ThankYou view (#3343) --- .../EndCallFeedback/ThankyouView.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx b/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx index 5a0593ff23..b7b14df5f6 100644 --- a/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx @@ -1,12 +1,18 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useMedia } from 'react-use'; -import { UserMusicIcon } from '@100mslive/react-icons'; +import { CrossIcon, UserMusicIcon } from '@100mslive/react-icons'; import { Flex } from '../../../Layout'; import { Text } from '../../../Text'; import { config as cssConfig } from '../../../Theme'; export const ThankyouView = () => { + const [isVisible, setIsVisible] = useState(true); const isMobile = useMedia(cssConfig.media.md); + + if (!isVisible) { + return null; + } + return ( { }, }} > + {isMobile && ( + setIsVisible(false)} + style={{ + position: 'absolute', + top: '8px', + right: '16px', + cursor: 'pointer', + }} + /> + )} Thank you for your feedback From 7af55c8813cea144fcde61d7185e30b40c5b2faf Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Tue, 29 Oct 2024 11:35:38 +0530 Subject: [PATCH 35/49] fix: remember device selection in skip preview flow --- .../roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx index d0e0399ea5..428c44470c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx @@ -95,6 +95,7 @@ export const ConferenceScreen = () => { userName: userName || uuid(), authToken: authTokenInAppData, initEndpoint: endpoints?.init, + rememberDeviceSelection: true, settings: { isAudioMuted: !isPreviewScreenEnabled, isVideoMuted: !isPreviewScreenEnabled, From 86639b5928caff86629d2a179b6a2e32d15d32be Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:24:13 +0530 Subject: [PATCH 36/49] fix: handle UI state on peer join timeout --- packages/roomkit-react/src/Prebuilt/AppStateContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx index 7c48647629..99aadb311c 100644 --- a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx +++ b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx @@ -67,6 +67,7 @@ export const useAppStateManager = () => { [HMSRoomState.Disconnected, HMSRoomState.Connected], [HMSRoomState.Disconnected, HMSRoomState.Connecting], [HMSRoomState.Disconnected, HMSRoomState.Reconnecting], + [HMSRoomState.Disconnected, HMSRoomState.Preview], () => { setActiveState(prevState => { return match({ isLeaveScreenEnabled, isPreviewScreenEnabled, prevState }) From d75edb2a8884d4ee9a5a8df705e469c8c4000d66 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 30 Oct 2024 14:40:26 +0530 Subject: [PATCH 37/49] fix: adjust tile dimension calculation to handle 480p recording --- .../src/Prebuilt/components/hooks/useTileLayout.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx index 17b63f888d..84c7630a42 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx @@ -77,7 +77,7 @@ export const useTileLayout = ({ return rowElements; }); - const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items + const gap = edgeToEdge ? 0 : 8; // gap between flex items const maxHeight = height - (maxRows - 1) * gap; const maxRowHeight = maxHeight / matrix.length; const aspectRatios = @@ -115,9 +115,11 @@ export const useTileLayout = ({ } } } + // Beam layout breaks at 480p resolution because the gap of $4 between tiles is not accounted for + // There could be more such cases, this is a generic fix for (let i = 0; i < row.length; i++) { - row[i].width = tileWidth; - row[i].height = tileHeight; + row[i].width = tileWidth - (gap / maxCols) * (maxCols - 1); + row[i].height = tileHeight - (gap / maxRows) * (maxRows - 1); } } } From dbbb43d8878268b001affc0c3f5a12b97521e756 Mon Sep 17 00:00:00 2001 From: ygit Date: Wed, 30 Oct 2024 15:12:36 +0530 Subject: [PATCH 38/49] ci: update github actions versions --- .github/CODEOWNERS | 5 ++ .github/CODE_OF_CONDUCT.md | 76 ++++++++++++++++++++++ .github/ISSUE_TEMPLATE/bug_report.yml | 3 +- .github/ISSUE_TEMPLATE/config.yml | 11 ++++ .github/ISSUE_TEMPLATE/feature_request.yml | 3 +- .github/pull_request_template.md | 24 ++++++- .github/workflows/alpha-release.yml | 8 +-- .github/workflows/create-release-pr.yml | 6 +- .github/workflows/cypress.yml | 4 +- .github/workflows/firstinteraction.yml | 34 ++++++++++ .github/workflows/generate-docs.yml | 12 ++-- .github/workflows/lint-test-build.yml | 8 +-- .github/workflows/publish.yml | 6 +- .github/workflows/stale.yml | 2 +- .github/workflows/sync-alpha-to-main.yml | 2 +- 15 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 .github/CODEOWNERS create mode 100644 .github/CODE_OF_CONDUCT.md create mode 100644 .github/ISSUE_TEMPLATE/config.yml create mode 100644 .github/workflows/firstinteraction.yml diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000000..674766d7ca --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,5 @@ +@raviteja83 +@KaustubhKumar05 +@amar-1995 +@hdz-666 +@ygit \ No newline at end of file diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..6ba377a75a --- /dev/null +++ b/.github/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to make participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behaviour that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behaviour by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behaviour and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behaviour. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviours that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing or otherwise unacceptable behaviour may be +reported by contacting the 100ms team. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality concerning the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see + diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 049d4b5ba6..a58e397fe4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -30,5 +30,4 @@ body: - Firefox - Chrome - Safari - - Microsoft Edge - \ No newline at end of file + - Microsoft Edge \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..852ba8201e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: 📃 100ms Documentation + url: https://www.100ms.live/docs + about: Explore the 100ms capabilities with our Popular Guides, Demos & Blogs on 100ms Documentation page + - name: 💫 Register on 100ms Dashboard + url: https://dashboard.100ms.live/register + about: Try the gold-standard for adding live audio-video to your apps for free. + - name: 🗣️ Talk to us + url: https://www.100ms.live/contact + about: Get in touch with the 100ms team today! We are committed to helping our customers maximize the potential of our cutting-edge live video platform. Whether you need advice on how to leverage live streaming for your business, pricing information, or want to learn more about the 100ms platform, our team is here to answer all your questions and provide tailored solutions to meet your unique needs. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index f8e83701f3..33f595c361 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -13,5 +13,4 @@ body: label: What's the feature? description: Describe the feature, who it would help, and link to any examples from other apps. validations: - required: true - \ No newline at end of file + required: true \ No newline at end of file diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c5b46c9ad9..684a291339 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,11 +1,29 @@ -### Details(context, link the issue, how was the bug fixed, what does the new feature do) +# Description + +_Replace this paragraph with a description of what this PR is changing or adding, and why. Consider including before/after screenshots._ + +_List which issues are fixed by this PR. You must list at least one issue._ + +--- + +## Implementation note, gotchas, related work and Future TODOs (optional) + + -- - -### Implementation note, gotchas, related work and Future TODOs (optional) +### Pre-launch Checklist +- [ ] The [Documentation] is updated accordingly, or this PR doesn't require it. +- [ ] I updated/added relevant documentation. +- [ ] I listed at least one issue that this PR fixes in the description above. +- [ ] I added new tests to check the change I am making, or this PR is test-exempt. +- [ ] All existing and new tests are passing. ### Merging: - Squash merge to dev - Merge commit to publish-alpha and main + + + +[Documentation]: https://www.100ms.live/docs \ No newline at end of file diff --git a/.github/workflows/alpha-release.yml b/.github/workflows/alpha-release.yml index 200a536c34..a1388d3b95 100644 --- a/.github/workflows/alpha-release.yml +++ b/.github/workflows/alpha-release.yml @@ -9,7 +9,7 @@ jobs: bump_versions: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 @@ -41,10 +41,8 @@ jobs: needs: bump_versions steps: - name: Trigger Publish Packages workflow - uses: aurelien-baudet/workflow-dispatch@v2.1.1 + uses: aurelien-baudet/workflow-dispatch@v4.0.0 with: workflow: publish.yml token: ${{ secrets.GITHUB_TOKEN }} - inputs: '{ "publishFlag": "alpha" }' - - \ No newline at end of file + inputs: '{ "publishFlag": "alpha" }' \ No newline at end of file diff --git a/.github/workflows/create-release-pr.yml b/.github/workflows/create-release-pr.yml index 1aac560706..25b42a8a6f 100644 --- a/.github/workflows/create-release-pr.yml +++ b/.github/workflows/create-release-pr.yml @@ -1,4 +1,4 @@ -name: Create release PR +name: Create Release PR on: workflow_dispatch: inputs: @@ -19,7 +19,7 @@ jobs: if: github.event.inputs.versionBump != 'prerelease' && github.ref != 'refs/heads/dev' run: exit 1 - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 @@ -48,7 +48,7 @@ jobs: echo $STORE_VERSION echo "::set-output name=store_version::$(echo $STORE_VERSION)" - - uses: peter-evans/create-pull-request@v4 + - uses: peter-evans/create-pull-request@v7 with: commit-message: 'ci: update versions for release' title: 'ci: update versions for release' diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 34ed21abac..0ace350abd 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -8,8 +8,8 @@ jobs: runs-on: ubuntu-latest if: github.event.pull_request.draft != true steps: - - uses: actions/checkout@v2 - - uses: dorny/paths-filter@v2 + - uses: actions/checkout@v4 + - uses: dorny/paths-filter@v3 id: filter with: filters: | diff --git a/.github/workflows/firstinteraction.yml b/.github/workflows/firstinteraction.yml new file mode 100644 index 0000000000..345e65ee85 --- /dev/null +++ b/.github/workflows/firstinteraction.yml @@ -0,0 +1,34 @@ +name: first-interaction + +on: + workflow_dispatch: {} + issues: + types: [opened] + pull_request: + branches: + - main + - develop + types: [opened] + +jobs: + check_for_first_interaction: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/first-interaction@main + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-message: | + Hello! Thank you for filing an issue. + + Please include relevant logs or detailed description for faster resolutions. + + We really appreciate your contribution! + pr-message: | + Hello! Thank you for your contribution. + + If you are fixing a bug, please reference the issue number in the description. + + If you are implementing a feature request, please check with the maintainers that the feature will be accepted first. + + We really appreciate your contribution! diff --git a/.github/workflows/generate-docs.yml b/.github/workflows/generate-docs.yml index cf434339c9..113382818a 100644 --- a/.github/workflows/generate-docs.yml +++ b/.github/workflows/generate-docs.yml @@ -3,7 +3,7 @@ on: workflow_dispatch: workflow_call: secrets: - DOCKER_GIT_TOKEN: + DOCKER_GIT_TOKEN: required: true jobs: @@ -11,10 +11,10 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repo - uses: actions/checkout@v2 + uses: actions/checkout@v4 - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} cache: 'yarn' @@ -34,7 +34,7 @@ jobs: run: yarn docs - name: checkout 100ms-docs - uses: actions/checkout@v2 + uses: actions/checkout@v4 with: token: ${{ secrets.DOCKER_GIT_TOKEN }} repository: 100mslive/100ms-docs @@ -52,9 +52,9 @@ jobs: rm -r v2 mv docs v2 mv react/docs v2/react-hooks - + - name: Create PR - uses: peter-evans/create-pull-request@v3 + uses: peter-evans/create-pull-request@v7 with: path: 100ms-docs token: ${{ secrets.DOCKER_GIT_TOKEN }} diff --git a/.github/workflows/lint-test-build.yml b/.github/workflows/lint-test-build.yml index c81b8cbf5b..92c54ad683 100644 --- a/.github/workflows/lint-test-build.yml +++ b/.github/workflows/lint-test-build.yml @@ -1,18 +1,18 @@ name: Lint, Test and Build -on: +on: push: merge_group: types: [checks_requested] - + jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repo - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Setup Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: 18 cache: 'yarn' diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 64ad12c0dd..3935706aeb 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -17,8 +17,8 @@ jobs: publish_packages: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: node-version: 18 registry-url: https://registry.npmjs.org/ @@ -30,7 +30,7 @@ jobs: - name: Notify slack starting if: github.event.inputs.publishFlag == 'latest' && success() id: slack # IMPORTANT: reference this step ID value in future Slack steps - env: + env: SLACK_BOT_TOKEN: ${{ secrets.SLACK_DEPLOY_BOT_TOKEN }} uses: voxmedia/github-action-slack-notify-build@v1 with: diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index 246d2fb95b..8e9e78c8c8 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -8,7 +8,7 @@ jobs: stale: runs-on: ubuntu-latest steps: - - uses: actions/stale@v8 + - uses: actions/stale@v9 with: stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days." stale-pr-message: "This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days." diff --git a/.github/workflows/sync-alpha-to-main.yml b/.github/workflows/sync-alpha-to-main.yml index 34dee4d4ab..0557263d8f 100644 --- a/.github/workflows/sync-alpha-to-main.yml +++ b/.github/workflows/sync-alpha-to-main.yml @@ -9,7 +9,7 @@ jobs: pull-request: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v1 + - uses: actions/checkout@v4 - name: pull-request uses: repo-sync/pull-request@v2 if: github.event.pull_request.merged == true From 136ccdf16f57892d07726558582f3db28ac57ad4 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 30 Oct 2024 17:59:14 +0530 Subject: [PATCH 39/49] fix: gap in recording layout for 480p --- .../src/Prebuilt/components/VideoLayouts/Grid.tsx | 2 +- .../src/Prebuilt/components/hooks/useTileLayout.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx index 3c8e46a107..751d5eed8b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx @@ -20,7 +20,7 @@ export const Grid = React.forwardRef {tiles?.map(tile => { diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx index 84c7630a42..cf38dd7af1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx @@ -77,7 +77,7 @@ export const useTileLayout = ({ return rowElements; }); - const gap = edgeToEdge ? 0 : 8; // gap between flex items + const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items const maxHeight = height - (maxRows - 1) * gap; const maxRowHeight = maxHeight / matrix.length; const aspectRatios = @@ -115,11 +115,10 @@ export const useTileLayout = ({ } } } - // Beam layout breaks at 480p resolution because the gap of $4 between tiles is not accounted for - // There could be more such cases, this is a generic fix + for (let i = 0; i < row.length; i++) { - row[i].width = tileWidth - (gap / maxCols) * (maxCols - 1); - row[i].height = tileHeight - (gap / maxRows) * (maxRows - 1); + row[i].width = tileWidth; + row[i].height = tileHeight; } } } From 83810759c9241399bd8f40ccaf31a4232e4354dc Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Thu, 31 Oct 2024 11:41:32 +0530 Subject: [PATCH 40/49] fix: remove discord links --- README.md | 63 +++++++++---------- examples/prebuilt-react-integration/README.md | 3 - packages/hms-whiteboard/src/ErrorFallback.tsx | 4 +- packages/roomkit-react/README.md | 30 +++++---- .../src/Prebuilt/components/AuthToken.tsx | 4 +- .../src/Prebuilt/components/ErrorBoundary.jsx | 4 +- 6 files changed, 49 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index c7c247dcd9..07fd77dc2a 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@ - # Web SDKs -This monorepo contains all the packages required to integrate 100ms on the web. +This monorepo contains all the packages required to integrate 100ms on the web. ## What is included? + The packages folder contains all the SDK's of 100ms. Here is a brief overview of them: | Directory | Package | Description | Link | |--|--|--|--| -| `hms-video-store` | `@100mslive/hms-video-store` | This package contains the core SDK and the reactive store parts. | [README](./packages/hms-video-store) | -| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) | +| `hms-video-store` | `@100mslive/hms-video-store` | This package contains the core SDK and the reactive store parts. | [README](./packages/hms-video-store) | +| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) | | `react-sdk` | `@100mslive/react-sdk` | This contains the base React Hooks and some commonly used functionalities as React Hooks. | [README](./packages/react-sdk) | -| `roomkit-react` | `@100mslive/roomkit-react`| This contains the React components used in the Prebuilt and the Prebuilt component itself. | [README](./packages/roomkit-react) | +| `roomkit-react` | `@100mslive/roomkit-react`| This contains the React components used in the Prebuilt and the Prebuilt component itself. | [README](./packages/roomkit-react) | | `roomkit-web` | `@100mslive/roomkit-web` | This is a web component port of the `HMSPrebuilt` component from the `roomkit-react`. If you are not using React,this can be used as a web component. | [README](./packages/roomkit-web)| For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs) @@ -18,21 +18,22 @@ For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs)
    ## How to integrate? -The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. + +The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. **There are two ways you can add 100ms to your apps:** 1. ## Custom UI - - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI. - - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`. - - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration).
    + - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI. + - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`. + - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration).
    > Navigate to `react-sdk` for the base React Hooks and some commonly used functionalities by clicking [here](./packages/react-sdk). -2. ## 100ms Prebuilt - - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. - - **Related packages include:** `roomkit-react` and `roomkit-web`. - - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart).
    +2. ## 100ms Prebuilt + - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. + - **Related packages include:** `roomkit-react` and `roomkit-web`. + - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart).
    > Navigate to `roomkit-react` for the React components used in Prebuilt and the Prebuilt component itself by clicking [here](./packages/roomkit-react). @@ -40,16 +41,15 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live ![Banner](prebuilt-banner.png) +### 100ms Prebuilt Cross Platform Support -### 100ms Prebuilt Cross Platform Support -| Client | Repository | Docs | Example | -|--|--|--|--| -| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) -| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) -| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) -| Flutter | [100ms-flutter](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit)| [Link](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt) | [hms_room_kit/example](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit/example) -| React Native | [100ms-react-native](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit)| [Link](https://www.100ms.live/docs/react-native/v2/quickstart/prebuilt) | [react-native-room-kit/example](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit/example) - +| Client | Repository | Docs | Example | +| ------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) | +| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) | +| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) | +| Flutter | [100ms-flutter](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit) | [Link](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt) | [hms_room_kit/example](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit/example) | +| React Native | [100ms-react-native](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit) | [Link](https://www.100ms.live/docs/react-native/v2/quickstart/prebuilt) | [react-native-room-kit/example](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit/example) |

    @@ -62,7 +62,6 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live if you are using a different version in other projects, use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) to manage node versions. - ``` git clone https://github.com/100mslive/web-sdks.git cd web-sdks @@ -81,16 +80,14 @@ yarn dev Once you run `yarn dev`, the localhost link with the port will be generated automatically. Just get the roomCode from [100ms dashboard](https://dashboard.100ms.live) and append at the end - ### Testing Changes Locally + Run `yarn start` by navigating to the package you are making changes to, the changes should reflect in the above sample app. For example, if you are making changes in roomkit-react(prebuilt), run `yarn start` in that package. The sample app should auto reload. > Note: Make sure `yarn build` is run atleast once before using `yarn start` - -
    ### Deploying Your Changes @@ -100,8 +97,8 @@ Once you have forked the repository and tested your changes on the local build, - Import the fork repository - Set `examples/prebuilt-react-integration` as the root directory - Use the Create React App preset and update the build and install commands `Project Settings` to use the root level scripts - - install: `cd ../../ && yarn install` - - build: `cd ../../ && yarn build` + - install: `cd ../../ && yarn install` + - build: `cd ../../ && yarn build` For reference: @@ -109,7 +106,7 @@ For reference:
    -Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes +Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes
    @@ -142,14 +139,12 @@ import { HMSPrebuilt } from '@100mslive/roomkit-react'; ``` ## Contributing -We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase. -Please join us [on Discord](https://discord.com/invite/kGdmszyzq2) to discuss any new ideas and/or PRs. +We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase.
    ## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/examples/prebuilt-react-integration/README.md b/examples/prebuilt-react-integration/README.md index c0ba926c6d..244c6693f5 100644 --- a/examples/prebuilt-react-integration/README.md +++ b/examples/prebuilt-react-integration/README.md @@ -6,6 +6,3 @@ - Run `yarn && yarn build` at the root level of the repo (./web-sdks) - Then, navigate to this folder and run `yarn dev` - -### Facing a problem? -Join us on the [100ms Discord](https://discord.com/invite/kGdmszyzq2) to ask questions and get help from the 100ms team. diff --git a/packages/hms-whiteboard/src/ErrorFallback.tsx b/packages/hms-whiteboard/src/ErrorFallback.tsx index e4d97fa381..2e62d0aec8 100644 --- a/packages/hms-whiteboard/src/ErrorFallback.tsx +++ b/packages/hms-whiteboard/src/ErrorFallback.tsx @@ -3,7 +3,7 @@ import { useValue } from '@tldraw/state'; import { Editor, hardResetEditor } from '@tldraw/tldraw'; import classNames from 'classnames'; -const DISCORD_URL = 'https://discord.gg/pTge2BwDBq'; +const DASHBOARD_URL = 'https://dashboard.100ms.live/dashboard'; export type TLErrorFallbackComponent = ComponentType<{ error: unknown; @@ -141,7 +141,7 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh

    Something's gone wrong.

    Sorry, we encountered an error. Please refresh the page to continue. If you keep seeing this error, you - can ask for help on Discord. + can ask for help on Dashboard.

    {shouldShowError && (
    diff --git a/packages/roomkit-react/README.md b/packages/roomkit-react/README.md index 92bff98b9c..b4a8f1f1ae 100644 --- a/packages/roomkit-react/README.md +++ b/packages/roomkit-react/README.md @@ -1,7 +1,6 @@ - ![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png) -# Room Kit React Library +# Room Kit React Library 100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps. @@ -44,6 +43,7 @@ export default App() { For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt) ## Customisation + While we offer [a no-code way to customize Prebuilt](https://www.100ms.live/docs/get-started/v2/get-started/prebuilt/overview#customize-prebuilt), you can fork your copy of the Prebuilt component and make changes to the code to allow for more fine-tuning. Prebuilt customisations are available on [100ms Dashboard](https://dashboard.100ms.live). @@ -56,15 +56,14 @@ The `Prebuilt` folder contains the full Prebuilt implementation. ### Major Components in Prebuilt -| Component | Description | -|--|--| -| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join.| -|[AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | -| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input.| -| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content.| -| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) |This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | -| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) |This is the screen that is shown when you leave the meeting | - +| Component | Description | +| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join. | +| [AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | +| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input. | +| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content. | +| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) | This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | +| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) | This is the screen that is shown when you leave the meeting | ### Customising the Styles @@ -74,14 +73,13 @@ When [`HMSThemeProvider`](./src/Theme/ThemeProvider.tsx) is used at the top leve For components created using the base components like `Box`, `Flex`, `Button` etc, css Prop is available to modify the styles. Within the css prop, you can access the variables from the [base config](./src/Theme/base.config.ts). - ## Contributing - Make sure whatever new Component/file you create is in `Typescript`. - Don't forget to add data-testid for actionables like buttons, menus etc. -- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. +- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. - `yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors. @@ -89,6 +87,6 @@ Read this [doc](../../DEVELOPER.MD) for the coding guidelines. ## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Dashboard](https://dashboard.100ms.live/dashboard) - ask questions to get help from the 100ms team. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx index ed83c3a51b..7546be7dc2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx @@ -107,8 +107,8 @@ const AuthToken = React.memo<{ const convertError = (error: HMSException) => { console.error('[error]', { error }); console.warn( - 'If you think this is a mistake on our side, please reach out to us over Discord:', - 'https://discord.com/invite/kGdmszyzq2', + 'If you think this is a mistake on our side, please reach out to us on Dashboard:', + 'https://dashboard.100ms.live/dashboard', ); return match([error.action, error.code]) .with(['GET_TOKEN', 403], () => ({ diff --git a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx index 8ae2dcdc49..a245758b59 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx @@ -49,8 +49,8 @@ export class ErrorBoundary extends Component { Message: ${this.state.error}
    Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on - - Discord + + Dashboard
    From fcd2027d606f86c61cb73f5898c949fc15239ef1 Mon Sep 17 00:00:00 2001 From: Hardik Maheshwari <93115614+hdz-666@users.noreply.github.com> Date: Thu, 31 Oct 2024 17:17:01 +0530 Subject: [PATCH 41/49] fix: add trackType to track related errors Co-authored-by: raviteja83 --- .../src/device-manager/DeviceManager.ts | 5 +- .../hms-video-store/src/error/ErrorFactory.ts | 52 ++++++++++++------- .../hms-video-store/src/error/HMSException.ts | 16 +++--- .../src/error/HMSTrackException.ts | 37 +++++++++++++ packages/hms-video-store/src/error/utils.ts | 16 +++--- packages/hms-video-store/src/index.ts | 2 + packages/hms-video-store/src/internal.ts | 1 + .../tracks/HMSTrackExceptionTrackType.ts | 6 +++ .../src/reactive-store/adapter.ts | 13 +++-- packages/hms-video-store/src/schema/error.ts | 6 +++ .../src/sdk/LocalTrackManager.ts | 15 +++--- packages/hms-video-store/src/utils/media.ts | 9 ++-- packages/hms-video-store/src/utils/track.ts | 7 +-- .../Notifications/DeviceInUseError.tsx | 17 ++++-- .../Notifications/PermissionErrorModal.tsx | 20 ++++--- 15 files changed, 159 insertions(+), 63 deletions(-) create mode 100644 packages/hms-video-store/src/error/HMSTrackException.ts create mode 100644 packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts diff --git a/packages/hms-video-store/src/device-manager/DeviceManager.ts b/packages/hms-video-store/src/device-manager/DeviceManager.ts index 41ef7972b7..fd7bfcf9f3 100644 --- a/packages/hms-video-store/src/device-manager/DeviceManager.ts +++ b/packages/hms-video-store/src/device-manager/DeviceManager.ts @@ -7,6 +7,7 @@ import { DeviceMap, HMSDeviceChangeEvent, SelectedDevices } from '../interfaces' import { getAudioDeviceCategory, HMSAudioDeviceCategory, isIOS } from '../internal'; import { HMSAudioTrackSettingsBuilder, HMSVideoTrackSettingsBuilder } from '../media/settings'; import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../media/tracks'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import { Store } from '../sdk/store'; import HMSLogger from '../utils/logger'; import { debounce } from '../utils/timer-utils'; @@ -325,7 +326,7 @@ export class DeviceManager implements HMSDeviceManager { this.eventBus.analytics.publish( AnalyticsEventFactory.deviceChange({ selection: { audioInput: newSelection }, - error: ErrorFactory.TracksErrors.SelectedDeviceMissing('audio'), + error: ErrorFactory.TracksErrors.SelectedDeviceMissing(HMSTrackExceptionTrackType.AUDIO), devices: this.getDevices(), type: 'audioInput', }), @@ -383,7 +384,7 @@ export class DeviceManager implements HMSDeviceManager { this.eventBus.analytics.publish( AnalyticsEventFactory.deviceChange({ selection: { videoInput: newSelection }, - error: ErrorFactory.TracksErrors.SelectedDeviceMissing('video'), + error: ErrorFactory.TracksErrors.SelectedDeviceMissing(HMSTrackExceptionTrackType.VIDEO), devices: this.getDevices(), type: 'video', }), diff --git a/packages/hms-video-store/src/error/ErrorFactory.ts b/packages/hms-video-store/src/error/ErrorFactory.ts index 7345d26749..c4b258c4a8 100644 --- a/packages/hms-video-store/src/error/ErrorFactory.ts +++ b/packages/hms-video-store/src/error/ErrorFactory.ts @@ -8,6 +8,8 @@ import { ErrorCodes } from './ErrorCodes'; import { HMSAction } from './HMSAction'; import { HMSException } from './HMSException'; +import { HMSTrackException } from './HMSTrackException'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import { HMSSignalMethod } from '../signal/jsonrpc/models'; const terminalActions: (HMSSignalMethod | HMSAction)[] = [ @@ -98,52 +100,56 @@ export const ErrorFactory = { TracksErrors: { GenericTrack(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.GENERIC_TRACK, 'GenericTrack', action, `[TRACK]: ${description}`, `[TRACK]: ${description}`, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, - CantAccessCaptureDevice(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CANT_ACCESS_CAPTURE_DEVICE, 'CantAccessCaptureDevice', action, `User denied permission to access capture device - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceNotAvailable(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_NOT_AVAILABLE, 'DeviceNotAvailable', action, `[TRACK]: Capture device is no longer available - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceInUse(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_IN_USE, 'DeviceInUse', action, `[TRACK]: Capture device is in use by another application - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceLostMidway(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_LOST_MIDWAY, 'DeviceLostMidway', action, `Lost access to capture device midway - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, @@ -152,113 +158,123 @@ export const ErrorFactory = { description = '', message = `There is no media to return. Please select either video or audio or both.`, ) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NOTHING_TO_RETURN, 'NothingToReturn', action, message, description, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, InvalidVideoSettings(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.INVALID_VIDEO_SETTINGS, 'InvalidVideoSettings', action, `Cannot enable simulcast when no video settings are provided`, description, + HMSTrackExceptionTrackType.VIDEO, ); }, AutoplayBlocked(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.AUTOPLAY_ERROR, 'AutoplayBlocked', action, "Autoplay blocked because the user didn't interact with the document first", description, + HMSTrackExceptionTrackType.AUDIO, ); }, CodecChangeNotPermitted(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CODEC_CHANGE_NOT_PERMITTED, 'CodecChangeNotPermitted', action, `Codec can't be changed mid call.`, description, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, OverConstrained(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.OVER_CONSTRAINED, 'OverConstrained', action, `[TRACK]: Requested constraints cannot be satisfied with the device hardware - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, NoAudioDetected(action: HMSAction, description = 'Please check the mic or use another audio input') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NO_AUDIO_DETECTED, 'NoAudioDetected', action, 'No audio input detected from microphone', description, + HMSTrackExceptionTrackType.AUDIO, ); }, SystemDeniedPermission(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.SYSTEM_DENIED_PERMISSION, 'SystemDeniedPermission', action, `Operating System denied permission to access capture device - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, CurrentTabNotShared() { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CURRENT_TAB_NOT_SHARED, 'CurrentTabNotShared', HMSAction.TRACK, 'The app requires you to share the current tab', 'You must screen share the current tab in order to proceed', + HMSTrackExceptionTrackType.SCREEN, ); }, AudioPlaybackError(description: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.AUDIO_PLAYBACK_ERROR, 'Audio playback error', HMSAction.TRACK, description, description, + HMSTrackExceptionTrackType.AUDIO, ); }, SelectedDeviceMissing(deviceType: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.SELECTED_DEVICE_MISSING, 'SelectedDeviceMissing', HMSAction.TRACK, `Could not detect selected ${deviceType} device`, `Please check connection to the ${deviceType} device`, - false, + deviceType as HMSTrackExceptionTrackType, ); }, NoDataInTrack(description: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NO_DATA, 'Track does not have any data', HMSAction.TRACK, description, 'This could possibily due to another application taking priority over the access to camera or microphone or due to an incoming call', + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, }, diff --git a/packages/hms-video-store/src/error/HMSException.ts b/packages/hms-video-store/src/error/HMSException.ts index 03c6afa687..88513d117d 100644 --- a/packages/hms-video-store/src/error/HMSException.ts +++ b/packages/hms-video-store/src/error/HMSException.ts @@ -38,13 +38,13 @@ export class HMSException extends Error implements IAnalyticsPropertiesProvider toString() { return `{ - code: ${this.code}; - name: ${this.name}; - action: ${this.action}; - message: ${this.message}; - description: ${this.description}; - isTerminal: ${this.isTerminal}; - nativeError: ${this.nativeError?.message}; - }`; + code: ${this.code}; + name: ${this.name}; + action: ${this.action}; + message: ${this.message}; + description: ${this.description}; + isTerminal: ${this.isTerminal}; + nativeError: ${this.nativeError?.message}; + }`; } } diff --git a/packages/hms-video-store/src/error/HMSTrackException.ts b/packages/hms-video-store/src/error/HMSTrackException.ts new file mode 100644 index 0000000000..1a8f9c666b --- /dev/null +++ b/packages/hms-video-store/src/error/HMSTrackException.ts @@ -0,0 +1,37 @@ +import { HMSAction } from './HMSAction'; +import { HMSException } from './HMSException'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; +import { HMSSignalMethod } from '../signal/jsonrpc/models'; + +export class HMSTrackException extends HMSException { + constructor( + public readonly code: number, + public name: string, + action: HMSAction | HMSSignalMethod, + public message: string, + public description: string, + public trackType: HMSTrackExceptionTrackType, + ) { + super(code, name, action, message, description, false); + } + + toAnalyticsProperties() { + return { + ...super.toAnalyticsProperties(), + track_type: this.trackType, + }; + } + + toString() { + return `{ + code: ${this.code}; + name: ${this.name}; + action: ${this.action}; + message: ${this.message}; + description: ${this.description}; + isTerminal: ${this.isTerminal}; + nativeError: ${this.nativeError?.message}; + trackType: ${this.trackType}; + }`; + } +} diff --git a/packages/hms-video-store/src/error/utils.ts b/packages/hms-video-store/src/error/utils.ts index 42dea262ce..36c5efbbbf 100644 --- a/packages/hms-video-store/src/error/utils.ts +++ b/packages/hms-video-store/src/error/utils.ts @@ -1,7 +1,7 @@ import adapter from 'webrtc-adapter'; import { ErrorFactory } from './ErrorFactory'; import { HMSAction } from './HMSAction'; -import { HMSException } from './HMSException'; +import { HMSTrackException } from './HMSTrackException'; export enum HMSGetMediaActions { UNKNOWN = 'unknown(video or audio)', @@ -13,13 +13,15 @@ export enum HMSGetMediaActions { function getDefaultError(error: string, deviceInfo: string) { const message = error.toLowerCase(); + let exception = ErrorFactory.TracksErrors.GenericTrack(HMSAction.TRACK, error); + if (message.includes('device not found')) { - return ErrorFactory.TracksErrors.DeviceNotAvailable(HMSAction.TRACK, deviceInfo, error); + exception = ErrorFactory.TracksErrors.DeviceNotAvailable(HMSAction.TRACK, deviceInfo, error); } else if (message.includes('permission denied')) { - return ErrorFactory.TracksErrors.CantAccessCaptureDevice(HMSAction.TRACK, deviceInfo, error); - } else { - return ErrorFactory.TracksErrors.GenericTrack(HMSAction.TRACK, error); + exception = ErrorFactory.TracksErrors.CantAccessCaptureDevice(HMSAction.TRACK, deviceInfo, error); } + + return exception; } /** @@ -31,7 +33,7 @@ function getDefaultError(error: string, deviceInfo: string) { * System blocked - NotAllowedError - Permission denied by system */ // eslint-disable-next-line complexity -function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSException { +function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSTrackException { /** * Note: Adapter detects all chromium browsers as 'chrome' */ @@ -70,7 +72,7 @@ function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSExcept } } -export function BuildGetMediaError(err: Error, deviceInfo: string): HMSException { +export function BuildGetMediaError(err: Error, deviceInfo: string): HMSTrackException { const exception = convertMediaErrorToHMSException(err, deviceInfo); exception.addNativeError(err); return exception; diff --git a/packages/hms-video-store/src/index.ts b/packages/hms-video-store/src/index.ts index e26beb60ef..8d44ae20d5 100644 --- a/packages/hms-video-store/src/index.ts +++ b/packages/hms-video-store/src/index.ts @@ -78,3 +78,5 @@ export type { } from './internal'; export * from './diagnostics'; export { DomainCategory } from './analytics/AnalyticsEventDomains'; + +export { HMSTrackExceptionTrackType } from './media/tracks/HMSTrackExceptionTrackType'; diff --git a/packages/hms-video-store/src/internal.ts b/packages/hms-video-store/src/internal.ts index 22ad33d6c9..dda7d2ba85 100644 --- a/packages/hms-video-store/src/internal.ts +++ b/packages/hms-video-store/src/internal.ts @@ -11,6 +11,7 @@ export * from './utils/media'; export * from './utils/device-error'; export * from './utils/support'; export * from './error/HMSException'; +export * from './error/HMSTrackException'; export * from './interfaces'; export * from './rtc-stats'; export * from './plugins'; diff --git a/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts b/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts new file mode 100644 index 0000000000..5bca9518b2 --- /dev/null +++ b/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts @@ -0,0 +1,6 @@ +export enum HMSTrackExceptionTrackType { + AUDIO = 'audio', + VIDEO = 'video', + AUDIO_VIDEO = 'audio, video', + SCREEN = 'screen', +} diff --git a/packages/hms-video-store/src/reactive-store/adapter.ts b/packages/hms-video-store/src/reactive-store/adapter.ts index c765a4c8b3..b6c4ea7b29 100644 --- a/packages/hms-video-store/src/reactive-store/adapter.ts +++ b/packages/hms-video-store/src/reactive-store/adapter.ts @@ -24,6 +24,7 @@ import { HMSRoom, HMSScreenVideoTrack, HMSTrack, + HMSTrackException, HMSTrackFacingMode, HMSVideoTrack, } from '../schema'; @@ -203,8 +204,9 @@ export class SDKToHMS { }; } - static convertException(sdkException: sdkTypes.HMSException): HMSException { - return { + static convertException(sdkException: sdkTypes.HMSException): HMSException | HMSTrackException { + const isTrackException = 'trackType' in sdkException; + const exp = { code: sdkException.code, action: sdkException.action, name: sdkException.name, @@ -213,7 +215,12 @@ export class SDKToHMS { isTerminal: sdkException.isTerminal, nativeError: sdkException.nativeError, timestamp: new Date(), - }; + } as HMSException; + if (isTrackException) { + (exp as HMSTrackException).trackType = (sdkException as sdkTypes.HMSTrackException)?.trackType; + return exp as HMSTrackException; + } + return exp; } static convertDeviceChangeUpdate(sdkDeviceChangeEvent: sdkTypes.HMSDeviceChangeEvent): HMSDeviceChangeEvent { diff --git a/packages/hms-video-store/src/schema/error.ts b/packages/hms-video-store/src/schema/error.ts index 7a19a4a7a0..ca9dcb4572 100644 --- a/packages/hms-video-store/src/schema/error.ts +++ b/packages/hms-video-store/src/schema/error.ts @@ -1,3 +1,5 @@ +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; + /** * any mid call error notification will be in this format */ @@ -11,3 +13,7 @@ export interface HMSException { timestamp: Date; nativeError?: Error; } + +export interface HMSTrackException extends HMSException { + trackType: HMSTrackExceptionTrackType; +} diff --git a/packages/hms-video-store/src/sdk/LocalTrackManager.ts b/packages/hms-video-store/src/sdk/LocalTrackManager.ts index 64c0251a7e..70103137db 100644 --- a/packages/hms-video-store/src/sdk/LocalTrackManager.ts +++ b/packages/hms-video-store/src/sdk/LocalTrackManager.ts @@ -7,7 +7,7 @@ import { ErrorCodes } from '../error/ErrorCodes'; import { ErrorFactory } from '../error/ErrorFactory'; import { HMSAction } from '../error/HMSAction'; import { HMSException } from '../error/HMSException'; -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; import { EventBus } from '../events/EventBus'; import { HMSAudioCodec, @@ -27,6 +27,7 @@ import { HMSVideoTrackSettingsBuilder, } from '../media/settings'; import { HMSLocalStream } from '../media/streams/HMSLocalStream'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import ITransportObserver from '../transport/ITransportObserver'; import HMSLogger from '../utils/logger'; import { HMSAudioContextHandler } from '../utils/media'; @@ -236,7 +237,7 @@ export class LocalTrackManager { } } catch (err) { HMSLogger.w(this.TAG, 'error in getting screenshare - ', err); - const error = BuildGetMediaError(err as Error, HMSGetMediaActions.SCREEN); + const error = BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.SCREEN); this.eventBus.analytics.publish( AnalyticsEventFactory.publish({ error: error as Error, @@ -478,17 +479,17 @@ export class LocalTrackManager { } } - getErrorType(videoError: boolean, audioError: boolean): HMSGetMediaActions { + getErrorType(videoError: boolean, audioError: boolean): HMSTrackExceptionTrackType { if (videoError && audioError) { - return HMSGetMediaActions.AV; + return HMSTrackExceptionTrackType.AUDIO_VIDEO; } if (videoError) { - return HMSGetMediaActions.VIDEO; + return HMSTrackExceptionTrackType.VIDEO; } if (audioError) { - return HMSGetMediaActions.AUDIO; + return HMSTrackExceptionTrackType.AUDIO; } - return HMSGetMediaActions.UNKNOWN; + return HMSTrackExceptionTrackType.AUDIO_VIDEO; } private getEmptyTracks(fetchTrackOptions: IFetchAVTrackOptions) { diff --git a/packages/hms-video-store/src/utils/media.ts b/packages/hms-video-store/src/utils/media.ts index 025fc7a4bb..05d60e443f 100644 --- a/packages/hms-video-store/src/utils/media.ts +++ b/packages/hms-video-store/src/utils/media.ts @@ -1,12 +1,13 @@ import HMSLogger from './logger'; -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; export async function getLocalStream(constraints: MediaStreamConstraints): Promise { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); return stream; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.AV); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.AUDIO_VIDEO); } } @@ -16,7 +17,7 @@ export async function getLocalScreen(constraints: MediaStreamConstraints['video' const stream = await navigator.mediaDevices.getDisplayMedia({ video: constraints, audio: false }); return stream; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.SCREEN); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.SCREEN); } } @@ -37,7 +38,7 @@ export async function getLocalDevices(): Promise { devices.forEach(device => deviceGroups[device.kind].push(device)); return deviceGroups; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.AV); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.AUDIO_VIDEO); } } diff --git a/packages/hms-video-store/src/utils/track.ts b/packages/hms-video-store/src/utils/track.ts index fea545dd08..6af65ce30f 100644 --- a/packages/hms-video-store/src/utils/track.ts +++ b/packages/hms-video-store/src/utils/track.ts @@ -1,5 +1,6 @@ -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; import { HMSAudioTrackSettings, HMSVideoTrackSettings } from '../media/settings'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; export async function getAudioTrack(settings: HMSAudioTrackSettings): Promise { try { @@ -8,7 +9,7 @@ export async function getAudioTrack(settings: HMSAudioTrackSettings): Promise { ) { return; } - const errorMessage = error?.message; - const hasAudio = errorMessage.includes('audio'); - const hasVideo = errorMessage.includes('video'); - const hasScreen = errorMessage.includes('screen'); - if (hasAudio && hasVideo) { + + const errorTrackExceptionType = (error as HMSTrackException)?.trackType; + const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO; + const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO; + const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO; + const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN; + if (hasAudioVideo) { setDeviceType('camera and microphone'); } else if (hasAudio) { setDeviceType('microphone'); From 693901c2997454bc8dc5f5639d113dc6c554c4f0 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Thu, 7 Nov 2024 12:43:30 +0530 Subject: [PATCH 42/49] fix: clean up vb state on reset --- packages/roomkit-react/src/Prebuilt/App.tsx | 4 +++- packages/roomkit-react/src/Prebuilt/AppStateContext.tsx | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx index 8010a58115..8c62917fde 100644 --- a/packages/roomkit-react/src/Prebuilt/App.tsx +++ b/packages/roomkit-react/src/Prebuilt/App.tsx @@ -1,5 +1,6 @@ import React, { MutableRefObject, useEffect, useRef } from 'react'; import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store'; +import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background'; import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt'; import { match } from 'ts-pattern'; import { @@ -49,7 +50,7 @@ import { // @ts-ignore: No implicit Any import { FeatureFlags } from './services/FeatureFlags'; // @ts-ignore: No implicit Any -import { DEFAULT_PORTAL_CONTAINER } from './common/constants'; +import { APP_DATA, DEFAULT_PORTAL_CONTAINER } from './common/constants'; export type HMSPrebuiltOptions = { userName?: string; @@ -131,6 +132,7 @@ export const HMSPrebuilt = React.forwardRef { VBHandler.reset(); + reactiveStore?.current?.hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE); reactiveStore?.current?.hmsActions.leave(); }; }, []); diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx index 99aadb311c..43a5109089 100644 --- a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx +++ b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx @@ -1,5 +1,6 @@ import React, { useContext, useEffect } from 'react'; import { usePreviousDistinct } from 'react-use'; +import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background'; import { match, P } from 'ts-pattern'; import { HMSRoomState, selectRoomState, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; import { VBHandler } from './components/VirtualBackground/VBHandler'; @@ -79,6 +80,7 @@ export const useAppStateManager = () => { .otherwise(() => PrebuiltStates.MEETING); }); VBHandler.reset(); + hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE); redirectToLeave(1000); // to clear toasts after 1 second }, ) From edb994f6c3b90389ffb34611147837a6dd3cbb99 Mon Sep 17 00:00:00 2001 From: ygit Date: Thu, 7 Nov 2024 12:55:49 +0530 Subject: [PATCH 43/49] fix: typo in Flex component --- packages/roomkit-react/src/Layout/Flex.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Layout/Flex.tsx b/packages/roomkit-react/src/Layout/Flex.tsx index 2a83ed6603..a5ea8cf1d3 100644 --- a/packages/roomkit-react/src/Layout/Flex.tsx +++ b/packages/roomkit-react/src/Layout/Flex.tsx @@ -48,7 +48,7 @@ export const Flex = styled('div', { baseline: { alignItems: 'baseline', }, - strech: { + stretch: { alignItems: 'stretch', }, }, From 0045a2a779719f4f9c73e66b5e92976151a53b19 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 Date: Thu, 7 Nov 2024 13:25:06 +0530 Subject: [PATCH 44/49] fix: remove redundant vb reset call --- packages/roomkit-react/src/Prebuilt/App.tsx | 6 +----- packages/roomkit-react/src/Prebuilt/AppStateContext.tsx | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx index 8c62917fde..0dc39f3fa6 100644 --- a/packages/roomkit-react/src/Prebuilt/App.tsx +++ b/packages/roomkit-react/src/Prebuilt/App.tsx @@ -1,6 +1,5 @@ import React, { MutableRefObject, useEffect, useRef } from 'react'; import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store'; -import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background'; import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt'; import { match } from 'ts-pattern'; import { @@ -28,7 +27,6 @@ import { PIPProvider } from './components/PIP/PIPProvider'; import { PreviewScreen } from './components/Preview/PreviewScreen'; // @ts-ignore: No implicit Any import { ToastContainer } from './components/Toast/ToastContainer'; -import { VBHandler } from './components/VirtualBackground/VBHandler'; import { Sheet } from './layouts/Sheet'; import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider'; import { DialogContainerProvider } from '../context/DialogContext'; @@ -50,7 +48,7 @@ import { // @ts-ignore: No implicit Any import { FeatureFlags } from './services/FeatureFlags'; // @ts-ignore: No implicit Any -import { APP_DATA, DEFAULT_PORTAL_CONTAINER } from './common/constants'; +import { DEFAULT_PORTAL_CONTAINER } from './common/constants'; export type HMSPrebuiltOptions = { userName?: string; @@ -131,8 +129,6 @@ export const HMSPrebuilt = React.forwardRef { // leave room when component unmounts return () => { - VBHandler.reset(); - reactiveStore?.current?.hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE); reactiveStore?.current?.hmsActions.leave(); }; }, []); diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx index 43a5109089..d85f5a7700 100644 --- a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx +++ b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx @@ -90,6 +90,6 @@ export const useAppStateManager = () => { .otherwise(() => { // do nothing }); - }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]); + }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]); return { activeState, rejoin }; }; From 3a2c16b7f6d39336de10c38956c7b5e8971e416d Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Nov 2024 12:33:13 +0530 Subject: [PATCH 45/49] fix: all null check in getDebugInfo (#3361) --- packages/hms-video-store/src/IHMSActions.ts | 7 +++++-- packages/hms-video-store/src/sdk/index.ts | 6 +++++- .../src/Prebuilt/components/ErrorBoundary.jsx | 3 ++- .../MoreSettings/SplitComponents/MwebOptions.tsx | 1 + 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/hms-video-store/src/IHMSActions.ts b/packages/hms-video-store/src/IHMSActions.ts index 7eaea1424b..01cc905201 100644 --- a/packages/hms-video-store/src/IHMSActions.ts +++ b/packages/hms-video-store/src/IHMSActions.ts @@ -582,6 +582,9 @@ export interface IHMSActions this.transport.isFlagEnabled(flag)); const initEndpoint = this.store.getConfig()?.initEndpoint; diff --git a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx index a245758b59..215877a3a8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx @@ -48,7 +48,8 @@ export class ErrorBoundary extends Component { Something went wrong Message: ${this.state.error}
    - Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on + Please reload to see if it works. If you think this is a mistake on our side, please reach out to us + on  Dashboard diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 869d8f31d8..ceb29f7238 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -327,6 +327,7 @@ export const MwebOptions = ({     + {openModals.has(MODALS.MUTE_ALL) && ( From 120af49c086dc0d2375f81600c4a64aeee926b0c Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Nov 2024 12:47:54 +0530 Subject: [PATCH 46/49] fix: render stats for nerds when opened (#3364) --- .../components/MoreSettings/SplitComponents/MwebOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index ceb29f7238..ed1187f89c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -328,7 +328,7 @@ export const MwebOptions = ({ - + {openSettingsSheet && } {openModals.has(MODALS.MUTE_ALL) && ( updateState(MODALS.MUTE_ALL, value)} isMobile /> From bdca62e3eb89d0d0f0f66fea1ea58abd5e8ec4de Mon Sep 17 00:00:00 2001 From: ygit Date: Mon, 11 Nov 2024 12:49:23 +0530 Subject: [PATCH 47/49] fix: local peer Inset tile incorrect aspect ratio on mweb (#3362) --- packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx index e20fc32dc0..252d1d41df 100644 --- a/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/InsetTile.tsx @@ -105,7 +105,7 @@ export const InsetTile = ({ peerId }: { peerId?: string }) => { r: '$2', ...(!minimised ? { - aspectRatio: aspectRatio, + aspectRatio: `${aspectRatio}`, h: height, } : {}), From 8e76a4448b79f7ee57e2fa26efb4c8a596523b53 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 11 Nov 2024 15:28:56 +0530 Subject: [PATCH 48/49] fix: stats for nerds on mweb (#3365) --- .../components/MoreSettings/SplitComponents/MwebOptions.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index ed1187f89c..ebc5f4559a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -328,7 +328,9 @@ export const MwebOptions = ({ - {openSettingsSheet && } + {openStatsForNerdsSheet && ( + + )} {openModals.has(MODALS.MUTE_ALL) && ( updateState(MODALS.MUTE_ALL, value)} isMobile /> From 2f8c480b6c738a5bfce3d61fed5be72894b9e922 Mon Sep 17 00:00:00 2001 From: KaustubhKumar05 <57426646+KaustubhKumar05@users.noreply.github.com> Date: Mon, 11 Nov 2024 15:18:04 +0000 Subject: [PATCH 49/49] ci: update versions for release --- examples/prebuilt-react-integration/package.json | 2 +- packages/hls-player/package.json | 4 ++-- packages/hls-stats/package.json | 2 +- packages/hms-video-store/package.json | 2 +- packages/hms-virtual-background/package.json | 6 +++--- packages/hms-whiteboard/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-sdk/package.json | 4 ++-- packages/roomkit-react/package.json | 12 ++++++------ packages/roomkit-web/package.json | 4 ++-- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/prebuilt-react-integration/package.json b/examples/prebuilt-react-integration/package.json index afe09a3856..8c838ca36b 100644 --- a/examples/prebuilt-react-integration/package.json +++ b/examples/prebuilt-react-integration/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@100mslive/roomkit-react": "0.3.23", + "@100mslive/roomkit-react": "0.3.24", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index 13751620ea..af5c74f56e 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.3.23", + "version": "0.3.24", "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -36,7 +36,7 @@ "author": "100ms", "license": "MIT", "dependencies": { - "@100mslive/hls-stats": "0.4.23", + "@100mslive/hls-stats": "0.4.24", "eventemitter2": "^6.4.9", "hls.js": "1.4.12" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index 467ff2f149..fc3522ae93 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.4.23", + "version": "0.4.24", "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-video-store/package.json b/packages/hms-video-store/package.json index dc3f4b7925..dcfed593f6 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.12.23", + "version": "0.12.24", "license": "MIT", "repository": { "type": "git", diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json index 3314631ad5..3948195b3d 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.13.23", + "version": "1.13.24", "license": "MIT", "name": "@100mslive/hms-virtual-background", "author": "100ms", @@ -62,10 +62,10 @@ "format": "prettier --write src/**/*.ts" }, "peerDependencies": { - "@100mslive/hms-video-store": "0.12.23" + "@100mslive/hms-video-store": "0.12.24" }, "devDependencies": { - "@100mslive/hms-video-store": "0.12.23" + "@100mslive/hms-video-store": "0.12.24" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/hms-whiteboard/package.json b/packages/hms-whiteboard/package.json index 3caf29709d..1323e9215e 100644 --- a/packages/hms-whiteboard/package.json +++ b/packages/hms-whiteboard/package.json @@ -2,7 +2,7 @@ "name": "@100mslive/hms-whiteboard", "author": "100ms", "license": "MIT", - "version": "0.0.13", + "version": "0.0.14", "main": "dist/index.cjs.js", "module": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index c9868e9ff4..757f6c0f1a 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.10.23", + "version": "0.10.24", "author": "100ms", "license": "MIT", "repository": { diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 996614b58e..eaa962bbec 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.10.23", + "version": "0.10.24", "author": "100ms", "license": "MIT", "repository": { @@ -48,7 +48,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.12.23", + "@100mslive/hms-video-store": "0.12.24", "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 dd8aa91b99..a816c1bea7 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.3.23", + "version": "0.3.24", "author": "100ms", "license": "MIT", "repository": { @@ -75,12 +75,12 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.3.23", + "@100mslive/hls-player": "0.3.24", "@100mslive/hms-noise-cancellation": "0.0.1", - "@100mslive/hms-virtual-background": "1.13.23", - "@100mslive/hms-whiteboard": "0.0.13", - "@100mslive/react-icons": "0.10.23", - "@100mslive/react-sdk": "0.10.23", + "@100mslive/hms-virtual-background": "1.13.24", + "@100mslive/hms-whiteboard": "0.0.14", + "@100mslive/react-icons": "0.10.24", + "@100mslive/react-sdk": "0.10.24", "@100mslive/types-prebuilt": "0.12.12", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", diff --git a/packages/roomkit-web/package.json b/packages/roomkit-web/package.json index b160993a49..b8ed70a12e 100644 --- a/packages/roomkit-web/package.json +++ b/packages/roomkit-web/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/roomkit-web", - "version": "0.2.23", + "version": "0.2.24", "description": "A web component implementation of 100ms Prebuilt component", "keywords": [ "web-components", @@ -33,7 +33,7 @@ "build": "rm -rf dist && node ../../scripts/build-webapp" }, "dependencies": { - "@100mslive/roomkit-react": "0.3.23", + "@100mslive/roomkit-react": "0.3.24", "@r2wc/react-to-web-component": "2.0.2" } }