@100mslive/roomkit-react 0.1.4-alpha.1 → 0.1.4

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx

@@ -0,0 +1,219 @@
+import React, { Fragment, useState } from 'react';
+import { HMSHLSPlayer } from '@100mslive/hls-player';
+import {
+  selectAppData,
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
+import IconButton from '../../../IconButton';
+import { PIP } from '../../PIP';
+import { RoleChangeModal } from '../../RoleChangeModal';
+import SettingsModal from '../../Settings/SettingsModal';
+import StartRecording from '../../Settings/StartRecording';
+import { StatsForNerds } from '../../StatsForNerds';
+import { BulkRoleChangeModal } from '.././BulkRoleChangeModal';
+import { FullScreenItem } from '.././FullScreenItem';
+import { MuteAllModal } from '.././MuteAllModal';
+import { useHLSViewerRole } from '../../AppData/useUISettings';
+import { useDropdownList } from '../../hooks/useDropdownList';
+import { useIsFeatureEnabled } from '../../hooks/useFeatures';
+import { useMyMetadata } from '../../hooks/useMetadata';
+import { useShowStreamingUI } from '../../../common/hooks';
+import { FeatureFlags } from '../../../services/FeatureFlags';
+import { APP_DATA, FEATURE_LIST, isMacOS } from '../../../common/constants';
+
+const MODALS = {
+  CHANGE_NAME: 'changeName',
+  SELF_ROLE_CHANGE: 'selfRoleChange',
+  MORE_SETTINGS: 'moreSettings',
+  START_RECORDING: 'startRecording',
+  DEVICE_SETTINGS: 'deviceSettings',
+  STATS_FOR_NERDS: 'statsForNerds',
+  BULK_ROLE_CHANGE: 'bulkRoleChange',
+  MUTE_ALL: 'muteAll',
+  EMBED_URL: 'embedUrl',
+};
+
+export const DesktopOptions = () => {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const hmsActions = useHMSActions();
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
+  const [openModals, setOpenModals] = useState(new Set());
+  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
+  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
+  const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
+  const showStreamingUI = useShowStreamingUI();
+  const hlsViewerRole = useHLSViewerRole();
+  const isHlsViewer = hlsViewerRole === localPeerRole;
+  const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
+
+  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+
+  const updateState = (modalName, value) => {
+    setOpenModals(modals => {
+      const copy = new Set(modals);
+      if (value) {
+        // avoiding extra set state trigger which removes currently open dialog by clearing set.
+        copy.clear();
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+
+  return (
+    <Fragment>
+      <Dropdown.Root
+        open={openModals.has(MODALS.MORE_SETTINGS)}
+        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
+        modal={false}
+      >
+        <Dropdown.Trigger asChild data-testid="more_settings_btn">
+          <IconButton>
+            <Tooltip title="More options">
+              <DragHandleIcon />
+            </Tooltip>
+          </IconButton>
+        </Dropdown.Trigger>
+
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            py: '$0',
+            maxHeight: 'unset',
+            '@md': { w: '$64' },
+            "div[role='separator']:first-child": {
+              display: 'none',
+            },
+          }}
+        >
+          {isHandRaiseEnabled && !showStreamingUI ? (
+            <Dropdown.Item onClick={toggleHandRaise} data-testid="raise_hand_btn">
+              <HandIcon />
+              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+                Raise Hand
+              </Text>
+              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
+                {isHandRaised ? <CheckIcon /> : null}
+              </Flex>
+            </Dropdown.Item>
+          ) : null}
+
+          {isBRBEnabled && !showStreamingUI ? (
+            <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
+              <BrbIcon />
+              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+                Be Right Back
+              </Text>
+              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
+                {isBRBOn ? <CheckIcon /> : null}
+              </Flex>
+            </Dropdown.Item>
+          ) : null}
+
+          {(isBRBEnabled || isHandRaiseEnabled) && !showStreamingUI ? (
+            <Dropdown.ItemSeparator css={{ mx: '0' }} />
+          ) : null}
+
+          {isPIPEnabled && !isHlsViewer ? (
+            <Dropdown.Item>
+              <PIP
+                content={
+                  <Flex css={{ w: '100%' }}>
+                    <PipIcon />
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Picture in picture mode
+                    </Text>
+                  </Flex>
+                }
+              />
+            </Dropdown.Item>
+          ) : null}
+
+          <FullScreenItem />
+          {/* {isAllowedToPublish.screen && isEmbedEnabled && (
+            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
+          )} */}
+
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+
+          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
+            <SettingsIcon />
+            <Text variant="sm" css={{ ml: '$4' }}>
+              Settings
+            </Text>
+          </Dropdown.Item>
+
+          {FeatureFlags.enableStatsForNerds &&
+            isSFNEnabled &&
+            (localPeerRole === 'hls-viewer' ? (
+              HMSHLSPlayer.isSupported() ? (
+                <Dropdown.Item
+                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  data-testid="hls_stats"
+                >
+                  <Checkbox.Root
+                    css={{ margin: '$2' }}
+                    checked={enablHlsStats}
+                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={16} height={16} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Flex justify="between" css={{ width: '100%' }}>
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Show HLS Stats
+                    </Text>
+
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                    </Text>
+                  </Flex>
+                </Dropdown.Item>
+              ) : null
+            ) : (
+              <Dropdown.Item
+                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
+                data-testid="stats_for_nreds_btn"
+              >
+                <InfoIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  Stats for Nerds
+                </Text>
+              </Dropdown.Item>
+            ))}
+        </Dropdown.Content>
+      </Dropdown.Root>
+      {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
+        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
+
+      {openModals.has(MODALS.START_RECORDING) && (
+        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
+      )}
+      {openModals.has(MODALS.DEVICE_SETTINGS) && (
+        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
+      )}
+      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
+        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
+      )}
+      {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
+        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
+      )}
+      {/* {openModals.has(MODALS.EMBED_URL) && (
+        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
+      )} */}
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebLeaveRoom.jsx

@@ -0,0 +1,100 @@
+import React, { Fragment, useState } from 'react';
+import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { ExitIcon, StopIcon } from '@100mslive/react-icons';
+import { Box } from '../../../../Layout';
+import { Sheet } from '../../../../Sheet';
+import { Tooltip } from '../../../../Tooltip';
+import { EndSessionContent } from '../../EndSessionContent';
+import { LeaveCard } from '../../LeaveCard';
+import { useDropdownList } from '../../hooks/useDropdownList';
+import { useShowStreamingUI } from '../../../common/hooks';
+
+export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, stopStream }) => {
+  const [open, setOpen] = useState(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const { isStreamingOn } = useRecordingStreaming();
+
+  const showStreamingUI = useShowStreamingUI();
+
+  const showStream = showStreamingUI && isStreamingOn;
+  useDropdownList({ open, name: 'LeaveRoom' });
+
+  if (!permissions || !isConnected) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {permissions?.hlsStreaming ? (
+        <Sheet.Root open={open} onOpenChange={setOpen}>
+          <Sheet.Trigger asChild>
+            <LeaveIconButton
+              variant="danger"
+              key="LeaveRoom"
+              data-testid="leave_room_btn"
+              css={{
+                borderTopRightRadius: '$1',
+                borderBottomRightRadius: '$1',
+              }}
+            >
+              <Tooltip title="Leave Room">
+                <Box>
+                  <ExitIcon style={{ transform: 'rotate(180deg)' }} />
+                </Box>
+              </Tooltip>
+            </LeaveIconButton>
+          </Sheet.Trigger>
+          <Sheet.Content>
+            <LeaveCard
+              title={showStream ? 'Leave Stream' : 'Leave Session'}
+              subtitle={`Others will continue after you leave. You can join the ${
+                showStream ? 'stream' : 'session'
+              } again.`}
+              bg="$surface_default"
+              titleColor="$on_surface_high"
+              subtitleColor="$on_surface_low"
+              icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
+              onClick={leaveRoom}
+              css={{ pt: 0, mt: '$10' }}
+            />
+            {isStreamingOn && permissions?.hlsStreaming ? (
+              <LeaveCard
+                title={showStream ? 'End Stream' : 'End Session'}
+                subtitle={`The will end the ${
+                  showStream ? 'stream' : 'session'
+                } for everyone. You can't undo this action.`}
+                bg="$alert_error_dim"
+                titleColor="$alert_error_brighter"
+                subtitleColor="$alert_error_bright"
+                icon={<StopIcon height={24} width={24} />}
+                onClick={() => {
+                  setOpen(false);
+                  setShowEndStreamAlert(true);
+                }}
+              />
+            ) : null}
+          </Sheet.Content>
+        </Sheet.Root>
+      ) : (
+        <LeaveIconButton variant="danger" key="LeaveRoom" data-testid="leave_room_btn" onClick={leaveRoom}>
+          <Tooltip title="Leave Room">
+            <Box>
+              <ExitIcon style={{ transform: 'rotate(180deg)' }} />
+            </Box>
+          </Tooltip>
+        </LeaveIconButton>
+      )}
+      <Sheet.Root open={showEndStreamAlert} onOpenChange={setShowEndStreamAlert}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+          <EndSessionContent
+            setShowEndStreamAlert={setShowEndStreamAlert}
+            stopStream={stopStream}
+            leaveRoom={leaveRoom}
+          />
+        </Sheet.Content>
+      </Sheet.Root>
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx

@@ -0,0 +1,259 @@
+import React, { Suspense, useRef, useState } from 'react';
+import { useClickAway } from 'react-use';
+import {
+  selectIsConnectedToRoom,
+  selectIsLocalVideoEnabled,
+  selectPeerCount,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, Loading, Tooltip } from '../../../../';
+import { Sheet } from '../../../../Sheet';
+import IconButton from '../../../IconButton';
+import { EmojiCard } from '../../Footer/EmojiCard';
+import { StopRecordingInSheet } from '../../Header/StreamActions';
+import SettingsModal from '../../Settings/SettingsModal';
+import { ToastManager } from '../../Toast/ToastManager';
+import { ActionTile } from '.././ActionTile';
+import { ChangeNameModal } from '.././ChangeNameModal';
+import { MuteAllModal } from '.././MuteAllModal';
+import { useSidepaneToggle } from '../../AppData/useSidepane';
+import { useDropdownList } from '../../hooks/useDropdownList';
+import { getFormattedCount } from '../../../common/utils';
+import { SIDE_PANE_OPTIONS } from '../../../common/constants';
+
+const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
+
+const MODALS = {
+  CHANGE_NAME: 'changeName',
+  SELF_ROLE_CHANGE: 'selfRoleChange',
+  MORE_SETTINGS: 'moreSettings',
+  START_RECORDING: 'startRecording',
+  DEVICE_SETTINGS: 'deviceSettings',
+  STATS_FOR_NERDS: 'statsForNerds',
+  BULK_ROLE_CHANGE: 'bulkRoleChange',
+  MUTE_ALL: 'muteAll',
+  EMBED_URL: 'embedUrl',
+};
+
+export const MwebOptions = () => {
+  const hmsActions = useHMSActions();
+  const permissions = useHMSStore(selectPermissions);
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+
+  const [openModals, setOpenModals] = useState(new Set());
+
+  const [openOptionsSheet, setOpenOptionsSheet] = useState(false);
+  const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
+  const [showEmojiCard, setShowEmojiCard] = useState(false);
+  const [showRecordingOn, setShowRecordingOn] = useState(false);
+  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const peerCount = useHMSStore(selectPeerCount);
+  const emojiCardRef = useRef(null);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+
+  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+
+  const updateState = (modalName, value) => {
+    setOpenModals(modals => {
+      const copy = new Set(modals);
+      if (value) {
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+
+  useClickAway(emojiCardRef, () => setShowEmojiCard(false));
+
+  return (
+    <>
+      <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
+        <Sheet.Trigger asChild data-testid="more_settings_btn">
+          <IconButton>
+            <Tooltip title="More options">
+              <DragHandleIcon />
+            </Tooltip>
+          </IconButton>
+        </Sheet.Trigger>
+        <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              fontSize: '$md',
+              mt: '$8',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_default',
+              mb: '$8',
+              alignItems: 'center',
+            }}
+          >
+            Options
+            <Sheet.Close>
+              <Box css={{ color: '$on_surface_high' }}>
+                <CrossIcon />
+              </Box>
+            </Sheet.Close>
+          </Sheet.Title>
+          <Box
+            css={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr 1fr',
+              gridTemplateRows: 'auto',
+              gridColumnGap: '$6',
+              gridRowGap: '$8',
+              px: '$9',
+            }}
+          >
+            <ActionTile.Root
+              onClick={() => {
+                toggleParticipants();
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
+              <PeopleIcon />
+              <ActionTile.Title>Participants</ActionTile.Title>
+            </ActionTile.Root>
+
+            {isVideoOn ? (
+              <Suspense fallback="">
+                <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
+              </Suspense>
+            ) : null}
+
+            <ActionTile.Root
+              onClick={() => {
+                setShowEmojiCard(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <EmojiIcon />
+              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+            </ActionTile.Root>
+
+            <ActionTile.Root
+              onClick={() => {
+                setOpenSettingsSheet(true);
+                setOpenOptionsSheet(false);
+              }}
+            >
+              <SettingsIcon />
+              <ActionTile.Title>Settings</ActionTile.Title>
+            </ActionTile.Root>
+
+            {isConnected && permissions?.browserRecording ? (
+              <ActionTile.Root
+                disabled={isHLSRunning}
+                onClick={async () => {
+                  if (isRecordingLoading) {
+                    return;
+                  }
+                  if (isBrowserRecordingOn || isStreamingOn) {
+                    setOpenOptionsSheet(false);
+                    setShowRecordingOn(true);
+                  } else {
+                    // start recording
+                    setIsRecordingLoading(true);
+                    try {
+                      await hmsActions.startRTMPOrRecording({
+                        record: true,
+                      });
+                      setOpenOptionsSheet(false);
+                      setIsRecordingLoading(false);
+                    } catch (error) {
+                      if (error.message.includes('stream already running')) {
+                        ToastManager.addToast({
+                          title: 'Recording already running',
+                          variant: 'error',
+                        });
+                      } else {
+                        ToastManager.addToast({
+                          title: error.message,
+                          variant: 'error',
+                        });
+                      }
+                      setIsRecordingLoading(false);
+                    }
+                  }
+                  if (isHLSRunning) {
+                    setOpenOptionsSheet(false);
+                  }
+                }}
+              >
+                {isRecordingLoading ? <Loading /> : <RecordIcon />}
+                <ActionTile.Title>
+                  {isBrowserRecordingOn
+                    ? 'Recording On'
+                    : isRecordingLoading
+                    ? 'Starting Recording'
+                    : 'Start Recording'}
+                </ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
+          </Box>
+        </Sheet.Content>
+      </Sheet.Root>
+      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} />
+      {openModals.has(MODALS.MUTE_ALL) && (
+        <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} isMobile />
+      )}
+      {openModals.has(MODALS.CHANGE_NAME) && (
+        <ChangeNameModal
+          onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)}
+          openParentSheet={() => setOpenOptionsSheet(true)}
+        />
+      )}
+
+      {showEmojiCard && (
+        <Box
+          onClick={() => setShowEmojiCard(false)}
+          ref={emojiCardRef}
+          css={{
+            maxWidth: '100%',
+            w: '100%',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: '$18',
+            bg: '$surface_default',
+            zIndex: '10',
+            p: '$8',
+            pb: 0,
+            r: '$1',
+            mx: '$4',
+          }}
+        >
+          <EmojiCard />
+        </Box>
+      )}
+      {showRecordingOn && (
+        <StopRecordingInSheet
+          onClose={() => setShowRecordingOn(false)}
+          onStopRecording={async () => {
+            try {
+              await hmsActions.stopRTMPAndRecording();
+              setShowRecordingOn(false);
+            } catch (error) {
+              ToastManager.addToast({
+                title: error.message,
+                variant: 'error',
+              });
+            }
+          }}
+        />
+      )}
+    </>
+  );
+};

package/src/Prebuilt/components/Notifications/Notifications.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-case-declarations */
 import React, { useEffect } from 'react';
-import { logMessage } from 'zipyai';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Button } from '../../../';
 import { ToastBatcher } from '../Toast/ToastBatcher';
@@ -50,7 +49,6 @@ export function Notifications() {
               title: `Error: ${notification.data?.message}`,
             });
           } else {
-            logMessage('Disconnected');
             // show button action when the error is terminal
             const toastId = ToastManager.addToast({
               title:

package/src/Prebuilt/components/Notifications/ReconnectNotifications.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { logMessage } from 'zipyai';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Dialog, Flex, Loading, Text } from '../../../';
 import { ToastConfig } from '../Toast/ToastConfig';
@@ -18,14 +17,11 @@ export const ReconnectNotifications = () => {
   const [open, setOpen] = useState(false);
   useEffect(() => {
     if (notification?.type === HMSNotificationTypes.ERROR && notification?.data?.isTerminal) {
-      logMessage('Error ', notification.data?.description);
       setOpen(false);
     } else if (notification?.type === HMSNotificationTypes.RECONNECTED) {
-      logMessage('Reconnected');
       notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
       setOpen(false);
     } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {
-      logMessage('Reconnecting');
       if (isQA) {
         ToastManager.removeToast(notificationId);
         setOpen(true);