@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

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

@@ -1,144 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSException,
-  HMSNotificationTypes,
-  HMSTrackException,
-  HMSTrackExceptionTrackType,
-  useHMSNotifications,
-} from '@100mslive/react-sdk';
-import { Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
-// @ts-ignore: No implicit Any
-import androidPermissionAlert from '../../images/android-perm-1.png';
-// @ts-ignore: No implicit Any
-import iosPermissions from '../../images/ios-perm-0.png';
-// @ts-ignore: No implicit Any
-import { isAndroid, isIOS } from '../../common/constants';
-
-export function PermissionErrorNotificationModal() {
-  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
-  return <PermissionErrorModal error={notification?.data} />;
-}
-
-export const PermissionErrorModal = ({ error }: { error?: HMSException }) => {
-  const [deviceType, setDeviceType] = useState('');
-  const [isSystemError, setIsSystemError] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-  useEffect(() => {
-    if (
-      !error ||
-      (error?.code !== 3001 && error?.code !== 3011) ||
-      (error?.code === 3001 && error?.message.includes('screen'))
-    ) {
-      return;
-    }
-
-    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');
-    } else if (hasVideo) {
-      setDeviceType('camera');
-    } else if (hasScreen) {
-      setDeviceType('screen');
-    }
-    setIsSystemError(error.code === 3011);
-  }, [error]);
-
-  return deviceType ? (
-    <Dialog.Root open={!!deviceType}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            w: 'min(380px, 90%)',
-            p: '$8',
-            // overlay over Sheet.tsx
-            zIndex: 23,
-          }}
-        >
-          <Dialog.Title
-            css={{
-              borderBottom: '1px solid $border_default',
-            }}
-          >
-            {isMobile && isIOS ? (
-              <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} alt="iOS Permission flow" />
-            ) : null}
-
-            {/* Images for android */}
-            {isMobile && isAndroid ? (
-              <img
-                src={androidPermissionAlert}
-                style={{ maxWidth: '100%', maxHeight: '100%' }}
-                alt="Android Permission flow "
-              />
-            ) : null}
-
-            <Text variant="h6">We can't access your {deviceType}</Text>
-          </Dialog.Title>
-
-          <Text variant="sm" css={{ pt: '$4', pb: '$10', color: '$on_surface_medium' }}>
-            {/* IOS prompt text */}
-            {isMobile && isIOS
-              ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.'
-              : null}
-
-            {/* Prompt for android devices */}
-            {isMobile && isAndroid
-              ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.`
-              : null}
-
-            {/* Prompt for desktops */}
-            {!isMobile ? `Access to ${deviceType} is required. ` : null}
-
-            {isSystemError && !isMobile
-              ? `Enable permissions for ${deviceType}${deviceType === 'screen' ? 'share' : ''} from sytem settings`
-              : null}
-            {!isSystemError && !isMobile
-              ? `Enable permissions for ${deviceType}${
-                  deviceType === 'screen' ? 'share' : ''
-                } from address bar or browser settings.`
-              : null}
-          </Text>
-
-          {/* CTA section */}
-          {isMobile && isIOS ? (
-            <>
-              <Button onClick={() => window.location.reload()} css={{ w: '100%', mb: '$6' }}>
-                Reload
-              </Button>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
-                Continue anyway
-              </Button>
-            </>
-          ) : null}
-
-          {isMobile && isAndroid ? (
-            <>
-              <Button onClick={() => setDeviceType('')} css={{ w: '100%', mb: '$6' }}>
-                I've allowed access
-              </Button>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
-                Continue anyway
-              </Button>
-            </>
-          ) : null}
-
-          {!isMobile ? (
-            <Flex justify="end" css={{ w: '100%' }}>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')}>
-                Dismiss
-              </Button>
-            </Flex>
-          ) : null}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  ) : null;
-};

package/src/Prebuilt/components/Notifications/PollNotificationModal.tsx

@@ -1,71 +0,0 @@
-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<string, string> = {};
-
-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: (
-              <Button
-                onClick={() => togglePollView(notification.data.id)}
-                variant="standard"
-                css={{
-                  backgroundColor: '$surface_bright',
-                  fontWeight: '$semiBold',
-                  color: '$on_surface_high',
-                  p: '$xs $md',
-                }}
-              >
-                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
-              </Button>
-            ),
-            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;
-};

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

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastConfig } from '../Toast/ToastConfig';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
-let notificationId: string | null = null;
-
-export const ReconnectNotifications = () => {
-  const notification = useHMSNotifications(notificationTypes);
-  const prevErrorCode = useRef(0);
-  useEffect(() => {
-    if (!notification) {
-      return;
-    }
-    if (notification.type === HMSNotificationTypes.RECONNECTED) {
-      notificationId = ToastManager.replaceToast(
-        notificationId,
-        ToastConfig.RECONNECTED.single([4005, 4006].includes(prevErrorCode.current)),
-      );
-    } else if (notification.type === HMSNotificationTypes.RECONNECTING) {
-      prevErrorCode.current = notification.data?.code || 0;
-      notificationId = ToastManager.replaceToast(
-        notificationId,
-        ToastConfig.RECONNECTING.single(notification.data?.message),
-      );
-    }
-  }, [notification]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx

@@ -1,24 +0,0 @@
-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;
-};

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

@@ -1,61 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSChangeMultiTrackStateRequest,
-  HMSNotificationTypes,
-  useHMSActions,
-  useHMSNotifications,
-} from '@100mslive/react-sdk';
-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<HMSChangeMultiTrackStateRequest | null>(null);
-  const notification = useHMSNotifications(notificationTypes);
-
-  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;
-
-  const types = new Set(tracks.map(track => track.type));
-
-  return (
-    <RequestDialog
-      title="Unmute request"
-      body={`${peer?.name} is requesting you to unmute your ${Array.from(types).join(',')}`}
-      onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
-      onAction={() => {
-        tracks.forEach(track => {
-          hmsActions.setEnabledTrack(track.id, enabled);
-        });
-        setMuteNotification(null);
-      }}
-      Icon={MicOnIcon}
-    />
-  );
-};

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

@@ -1,41 +0,0 @@
-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) {
-      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]);
-
-  return null;
-};

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

@@ -1,63 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSChangeTrackStateRequest,
-  HMSNotificationTypes,
-  useHMSActions,
-  useHMSNotifications,
-} from '@100mslive/react-sdk';
-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(notificationTypes);
-  const [muteNotification, setMuteNotification] = useState<HMSChangeTrackStateRequest | null>(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:
-        if (notification?.data.enabled) {
-          setMuteNotification(notification.data);
-        }
-        break;
-      default:
-        return;
-    }
-  }, [notification]);
-
-  if (!muteNotification) {
-    return null;
-  }
-
-  const { requestedBy: peer, track, enabled } = muteNotification;
-
-  return (
-    <RequestDialog
-      title={`Unmute your ${track.type}?`}
-      onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
-      body={`${peer?.name} is requesting you to unmute your ${track?.type}.`}
-      onAction={() => {
-        hmsActions.setEnabledTrack(track.id, enabled);
-        setMuteNotification(null);
-      }}
-      Icon={MicOnIcon}
-    />
-  );
-};

package/src/Prebuilt/components/Notifications/TranscriptionNotifications.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect } from 'react';
-import { match } from 'ts-pattern';
-import { HMSNotificationTypes, HMSTranscriptionState, useHMSNotifications } from '@100mslive/react-sdk';
-import { AlertTriangleIcon, ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { CAPTION_TOAST } from '../../common/constants';
-
-export const TranscriptionNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.TRANSCRIPTION_STATE_UPDATED);
-  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
-
-  useEffect(() => {
-    if (!notification?.data) {
-      return;
-    }
-
-    console.debug(`[${notification.type}]`, notification);
-    const transcriptionStates = notification.data;
-    if (transcriptionStates.length > 0) {
-      let id = '';
-      match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error })
-        .when(
-          ({ error }) => !!error,
-          () => {
-            id = ToastManager.replaceToast(toastId, {
-              title: `Failed to enable Closed Caption`,
-              variant: 'error',
-              icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
-            });
-          },
-        )
-        .with({ state: HMSTranscriptionState.STARTED }, () => {
-          id = ToastManager.replaceToast(toastId, {
-            title: `Closed Captioning enabled for everyone`,
-            variant: 'standard',
-            duration: 2000,
-            icon: <ClosedCaptionIcon style={{ marginRight: '0.5rem' }} />,
-          });
-        })
-        .with({ state: HMSTranscriptionState.STOPPED }, () => {
-          id = ToastManager.replaceToast(toastId, {
-            title: `Closed Captioning disabled for everyone`,
-            variant: 'standard',
-            duration: 2000,
-            icon: <OpenCaptionIcon style={{ marginRight: '0.5rem' }} />,
-          });
-        })
-        .otherwise(() => null);
-      setToastId(id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notification, setToastId]);
-
-  return null;
-};

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

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