@100mslive/roomkit-react 0.1.0

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

@@ -0,0 +1,151 @@
+/* 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';
+import { ToastManager } from '../Toast/ToastManager';
+import { AutoplayBlockedModal } from './AutoplayBlockedModal';
+import { InitErrorModal } from './InitErrorModal';
+import { MessageNotifications } from './MessageNotifications';
+import { PeerNotifications } from './PeerNotifications';
+import { PermissionErrorModal } from './PermissionErrorModal';
+import { ReconnectNotifications } from './ReconnectNotifications';
+import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
+import { TrackNotifications } from './TrackNotifications';
+import { TrackUnmuteModal } from './TrackUnmuteModal';
+import { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useNavigation } from '../hooks/useNavigation';
+import { getMetadata } from '../../common/utils';
+
+export function Notifications() {
+  const notification = useHMSNotifications();
+  const navigate = useNavigation();
+  const HLS_VIEWER_ROLE = useHLSViewerRole();
+  const subscribedNotifications = useSubscribedNotifications() || {};
+  const isHeadless = useIsHeadless();
+
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+    switch (notification.type) {
+      case HMSNotificationTypes.METADATA_UPDATED:
+        // Don't toast message when metadata is updated and raiseHand is false.
+        // Don't toast message in case of local peer.
+        const metadata = getMetadata(notification.data?.metadata);
+        if (!metadata?.isHandRaised || notification.data.isLocal || isHeadless) return;
+
+        console.debug('Metadata updated', notification.data);
+        if (!subscribedNotifications.METADATA_UPDATED) return;
+        ToastBatcher.showToast({ notification });
+        break;
+      case HMSNotificationTypes.NAME_UPDATED:
+        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
+        break;
+      case HMSNotificationTypes.ERROR:
+        if (notification.data?.isTerminal && notification.data?.action !== 'INIT') {
+          if ([500, 6008].includes(notification.data?.code)) {
+            ToastManager.addToast({
+              title: `Error: ${notification.data?.message}`,
+            });
+          } else {
+            logMessage('Disconnected');
+            // show button action when the error is terminal
+            const toastId = ToastManager.addToast({
+              title:
+                notification.data?.message ||
+                'We couldn’t reconnect you. When you’re back online, try joining the room.',
+              inlineAction: true,
+              action: (
+                <Button
+                  as="div"
+                  variant="primary"
+                  onClick={() => {
+                    ToastManager.removeToast(toastId);
+                    window.location.reload();
+                  }}
+                >
+                  Rejoin
+                </Button>
+              ),
+              close: false,
+            });
+          }
+          // goto leave for terminal if any action is not performed within 2secs
+          // if network is still unavailable going to preview will throw an error
+          setTimeout(() => {
+            const previewLocation = window.location.pathname.replace('meeting', 'leave');
+            ToastManager.clearAllToast();
+            navigate(previewLocation);
+          }, 2000);
+          return;
+        }
+        // Autoplay error or user denied screen share(cancelled browser pop-up)
+        if (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {
+          return;
+        }
+        if (notification.data?.action === 'INIT') {
+          return;
+        }
+        if (!subscribedNotifications.ERROR) return;
+        ToastManager.addToast({
+          title: `Error: ${notification.data?.message} - ${notification.data?.description}`,
+        });
+        break;
+      case HMSNotificationTypes.ROLE_UPDATED:
+        if (notification.data.roleName === HLS_VIEWER_ROLE) {
+          return;
+        }
+        if (notification.data?.isLocal) {
+          ToastManager.addToast({
+            title: `You are now a ${notification.data.roleName}`,
+          });
+        }
+        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;
+      case HMSNotificationTypes.REMOVED_FROM_ROOM:
+      case HMSNotificationTypes.ROOM_ENDED:
+        ToastManager.addToast({
+          title: `${notification.message}. 
+              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
+        });
+        setTimeout(() => {
+          const leaveLocation = window.location.pathname.replace('meeting', 'leave');
+          navigate(leaveLocation);
+          ToastManager.clearAllToast();
+        }, 2000);
+        break;
+      case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
+        ToastManager.addToast({
+          title: notification.message,
+        });
+        break;
+      default:
+        break;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);
+
+  return (
+    <>
+      {!isHeadless && <TrackUnmuteModal />}
+      {!isHeadless && <TrackBulkUnmuteModal />}
+      <TrackNotifications />
+      <PeerNotifications />
+      <ReconnectNotifications />
+      <AutoplayBlockedModal />
+      <PermissionErrorModal />
+      <MessageNotifications />
+      <InitErrorModal notification={notification} />
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { ToastBatcher } from '../Toast/ToastBatcher';
+import { useSubscribedNotifications } from '../AppData/useUISettings';
+import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
+
+const notificationTypes = [
+  HMSNotificationTypes.PEER_LIST,
+  HMSNotificationTypes.PEER_JOINED,
+  HMSNotificationTypes.PEER_LEFT,
+];
+
+export const PeerNotifications = () => {
+  const notification = useHMSNotifications(notificationTypes);
+  const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
+  const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+    console.debug(`[${notification.type}]`, notification);
+    switch (notification.type) {
+      case HMSNotificationTypes.PEER_LIST:
+        if (!isPeerJoinSubscribed || notification.data?.length === 0) {
+          return;
+        }
+        break;
+      case HMSNotificationTypes.PEER_JOINED:
+        if (!isPeerJoinSubscribed) {
+          return;
+        }
+        break;
+      case HMSNotificationTypes.PEER_LEFT:
+        if (!isPeerLeftSubscribed) {
+          return;
+        }
+        break;
+      default:
+        return;
+    }
+    ToastBatcher.showToast({ notification });
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+
+  return null;
+};

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { Dialog, Text } from '../../../';
+
+export function PermissionErrorModal() {
+  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
+  const [deviceType, setDeviceType] = useState('');
+  const [isSystemError, setIsSystemError] = useState(false);
+  useEffect(() => {
+    if (
+      !notification ||
+      (notification.data?.code !== 3001 && notification.data?.code !== 3011) ||
+      (notification.data?.code === 3001 && notification.data?.message.includes('screen'))
+    ) {
+      return;
+    }
+    console.error(`[${notification.type}]`, notification);
+    const errorMessage = notification.data?.message;
+    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('Screenshare');
+    }
+    setIsSystemError(notification.data.code === 3011);
+  }, [notification]);
+  return deviceType ? (
+    <Dialog.Root
+      open
+      onOpenChange={value => {
+        if (!value) {
+          setDeviceType('');
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ w: 'min(480px, 90%)' }}>
+          <Dialog.Title
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              borderBottom: '1px solid $borderDefault',
+              pb: '$8',
+            }}
+          >
+            <Text css={{ fontWeight: '$semiBold' }}>{deviceType} permissions are blocked</Text>
+            <Dialog.DefaultClose data-testid="dialoge_cross_icon" css={{ alignSelf: 'start' }} />
+          </Dialog.Title>
+          <Text variant="md" css={{ py: '$10' }}>
+            Access to {deviceType} is required.&nbsp;
+            {isSystemError
+              ? `Enable permissions for ${deviceType} from sytem settings`
+              : `Enable permissions for ${deviceType} from address bar or browser settings`}
+          </Text>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ) : null;
+}

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

@@ -0,0 +1,69 @@
+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';
+import { ToastManager } from '../Toast/ToastManager';
+
+const notificationTypes = [
+  HMSNotificationTypes.RECONNECTED,
+  HMSNotificationTypes.RECONNECTING,
+  HMSNotificationTypes.ERROR,
+];
+let notificationId = null;
+
+const isQA = process.env.REACT_APP_ENV === 'qa';
+export const ReconnectNotifications = () => {
+  const notification = useHMSNotifications(notificationTypes);
+  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);
+      } else {
+        notificationId = ToastManager.replaceToast(
+          notificationId,
+          ToastConfig.RECONNECTING.single(notification.data.message),
+        );
+      }
+    }
+  }, [notification]);
+  if (!open || !isQA) return null;
+  return (
+    <Dialog.Root open={open} modal={true}>
+      <Dialog.Portal container={document.getElementById('conferencing')}>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{
+            width: 'fit-content',
+            maxWidth: '80%',
+            p: '$4 $8',
+            position: 'relative',
+            top: 'unset',
+            bottom: '$9',
+            transform: 'translate(-50%, -100%)',
+            animation: 'none !important',
+          }}
+        >
+          <Flex align="center">
+            <div style={{ display: 'inline', margin: '0.25rem' }}>
+              <Loading size={16} />
+            </div>
+            <Text css={{ fontSize: '$space$8', color: '$textHighEmp' }}>
+              You lost your network connection. Trying to reconnect.
+            </Text>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';
+import { MicOnIcon } from '@100mslive/react-icons';
+import { RequestDialog } from '../../primitives/DialogContent';
+
+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,
+  ]);
+
+  useEffect(() => {
+    switch (notification?.type) {
+      case HMSNotificationTypes.REMOVED_FROM_ROOM:
+      case HMSNotificationTypes.ROOM_ENDED:
+        setMuteNotification(null);
+        break;
+      case HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST:
+        if (notification?.data.enabled) {
+          setMuteNotification(notification.data);
+        }
+        break;
+      default:
+        return;
+    }
+  }, [notification]);
+
+  if (!muteNotification) {
+    return null;
+  }
+
+  const { requestedBy: peer, tracks, enabled } = muteNotification;
+
+  return (
+    <RequestDialog
+      title="Track Unmute Request"
+      body={`${peer?.name} has requested you to unmute your tracks.`}
+      onOpenChange={value => !value && setMuteNotification(null)}
+      onAction={() => {
+        tracks.forEach(track => {
+          hmsActions.setEnabledTrack(track.id, enabled);
+        });
+        setMuteNotification(null);
+      }}
+      Icon={MicOnIcon}
+    />
+  );
+};

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

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+
+const notificationTypes = [
+  HMSNotificationTypes.TRACK_ADDED,
+  HMSNotificationTypes.TRACK_REMOVED,
+  HMSNotificationTypes.TRACK_MUTED,
+  HMSNotificationTypes.TRACK_UNMUTED,
+];
+export const TrackNotifications = () => {
+  const notification = useHMSNotifications(notificationTypes);
+  useEffect(() => {
+    if (notification) {
+      console.debug(`[${notification.type}]`, notification);
+    }
+  }, [notification]);
+
+  return null;
+};

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';
+import { MicOnIcon } from '@100mslive/react-icons';
+import { RequestDialog } from '../../primitives/DialogContent';
+
+export const TrackUnmuteModal = () => {
+  const hmsActions = useHMSActions();
+  const notification = useHMSNotifications([
+    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
+    HMSNotificationTypes.ROOM_ENDED,
+    HMSNotificationTypes.REMOVED_FROM_ROOM,
+  ]);
+  const [muteNotification, setMuteNotification] = useState(null);
+
+  useEffect(() => {
+    switch (notification?.type) {
+      case HMSNotificationTypes.REMOVED_FROM_ROOM:
+      case HMSNotificationTypes.ROOM_ENDED:
+        setMuteNotification(null);
+        break;
+      case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
+        if (notification?.data.enabled) {
+          setMuteNotification(notification.data);
+        }
+        break;
+      default:
+        return;
+    }
+  }, [notification]);
+
+  if (!muteNotification) {
+    return null;
+  }
+
+  const { requestedBy: peer, track, enabled } = muteNotification;
+
+  return (
+    <RequestDialog
+      title="Track Unmute Request"
+      onOpenChange={value => !value && setMuteNotification(null)}
+      body={`${peer?.name} has requested you to unmute your ${track?.source} ${track?.type}.`}
+      onAction={() => {
+        hmsActions.setEnabledTrack(track.id, enabled);
+        setMuteNotification(null);
+      }}
+      Icon={MicOnIcon}
+    />
+  );
+};

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

@@ -0,0 +1 @@
+export { Notifications } from './Notifications';

package/src/Prebuilt/components/PIP/PIPComponent.jsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  selectLocalPeerRoleName,
+  selectPeers,
+  selectRemotePeers,
+  selectTracksMap,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { PipIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../../';
+import IconButton from '../../IconButton';
+import { PictureInPicture } from './PIPManager';
+import { MediaSession } from './SetupMediaSession';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
+
+/**
+ * shows a button which when clicked shows some videos in PIP, clicking
+ * again turns it off.
+ */
+const PIPComponent = ({ peers, showLocalPeer }) => {
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
+  const hmsActions = useHMSActions();
+  const store = useHMSVanillaStore();
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
+
+  const onPipToggle = useCallback(() => {
+    if (!isPipOn) {
+      PictureInPicture.start(hmsActions, setIsPipOn).catch(err => console.error('error in starting pip', err));
+      MediaSession.setup(hmsActions, store);
+    } else {
+      PictureInPicture.stop().catch(err => console.error('error in stopping pip', err));
+    }
+  }, [hmsActions, isPipOn, store]);
+
+  // stop pip on unmount
+  useEffect(() => {
+    return () => {
+      PictureInPicture.stop().catch(err => console.error('error in stopping pip on unmount', err));
+    };
+  }, []);
+
+  if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
+    return null;
+  }
+  return (
+    <>
+      <Tooltip title={`${isPipOn ? 'Deactivate' : 'Activate'} picture in picture view`}>
+        <IconButton active={!isPipOn} key="pip" onClick={() => onPipToggle()} data-testid="pip_btn">
+          <PipIcon />
+        </IconButton>
+      </Tooltip>
+      {isPipOn && <ActivatedPIP showLocalPeer={showLocalPeer} peers={peers} />}
+    </>
+  );
+};
+
+/**
+ * this is a separate component so it can be conditionally rendered and
+ * the subscriptions to store are done only if required.
+ */
+const ActivatedPIP = ({ showLocalPeer, peers }) => {
+  const tracksMap = useHMSStore(selectTracksMap);
+  const storePeers = useHMSStore(showLocalPeer ? selectPeers : selectRemotePeers);
+
+  useEffect(() => {
+    let pipPeers = storePeers;
+    if (peers) {
+      pipPeers = storePeers.filter(peer => peers.includes(peer.id));
+    }
+    PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
+      console.error('error in updating pip', err);
+    });
+  }, [peers, storePeers, tracksMap]);
+
+  return null;
+};
+
+export default PIPComponent;