@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

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';

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -1,292 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  selectHMSMessages,
-  selectLocalPeerID,
-  selectPeerNameByID,
-  selectSessionStore,
-  selectUnreadHMSMessagesCount,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { SendIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { TextArea } from '../../../TextArea';
-import { Tooltip } from '../../../Tooltip';
-import IconButton from '../../IconButton';
-import { AnnotisedMessage } from '../Chat/ChatBody';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { CHAT_MESSAGE_LIMIT, formatTime } from '../Chat/utils';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-export const PIPChat = () => {
-  const messages = useHMSStore(selectHMSMessages);
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const count = useHMSStore(selectUnreadHMSMessagesCount);
-  const [unreadMessageCount, setUnreadMessageCount] = useState(0);
-
-  const getSenderName = useCallback(
-    (senderName: string, senderID?: string) => {
-      const slicedName = senderName.length > 10 ? senderName.slice(0, 10) + '...' : senderName;
-      return slicedName + (senderID === localPeerID ? ' (You)' : '');
-    },
-    [localPeerID],
-  );
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setUnreadMessageCount(count);
-    }, 100);
-    return () => clearTimeout(timeoutId);
-  }, [count]);
-
-  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST));
-  const filteredMessages = useMemo(() => {
-    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
-    return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
-  }, [blacklistedMessageIDs, messages]);
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
-    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const { elements } = useRoomLayoutConferencingScreen();
-  const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
-  const canSendChatMessages =
-    !!elements?.chat?.public_chat_enabled ||
-    !!elements?.chat?.roles_whitelist?.length ||
-    !!elements?.chat?.private_chat_enabled;
-
-  const getChatStatus = useCallback(() => {
-    if (isLocalPeerBlacklisted) return "You've been blocked from sending messages";
-    if (!isChatEnabled)
-      return `Chat has been paused by ${
-        chatStateUpdatedBy.peerId === localPeerID ? 'you' : chatStateUpdatedBy?.userName
-      }`;
-    return message_placeholder;
-  }, [
-    chatStateUpdatedBy.peerId,
-    chatStateUpdatedBy?.userName,
-    isChatEnabled,
-    isLocalPeerBlacklisted,
-    localPeerID,
-    message_placeholder,
-  ]);
-
-  return (
-    <div style={{ height: '100vh' }}>
-      <Box
-        id="chat-container"
-        css={{
-          bg: '$surface_dim',
-          overflowY: 'auto',
-          // Subtracting height of footer
-          h: canSendChatMessages ? 'calc(100% - 87px)' : '100%',
-          position: 'relative',
-        }}
-      >
-        {unreadMessageCount ? (
-          <Box
-            id="new-message-notif"
-            style={{
-              position: 'fixed',
-              bottom: '76px',
-              right: '4px',
-            }}
-          >
-            <Text
-              variant="xs"
-              css={{ cursor: 'pointer' }}
-              style={{ color: 'white', background: 'gray', padding: '4px', borderRadius: '4px' }}
-            >
-              {unreadMessageCount === 1 ? 'New message' : `${unreadMessageCount} new messages`}
-            </Text>
-          </Box>
-        ) : (
-          ''
-        )}
-        {filteredMessages.length === 0 ? (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-              width: '100%',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
-              {canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
-            </Text>
-            {canSendChatMessages ? (
-              <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
-                There are no messages here yet. Start a conversation by sending a message.
-              </Text>
-            ) : (
-              ''
-            )}
-          </div>
-        ) : (
-          filteredMessages.map(message => (
-            <Box className="pip-message" key={message.id} id={message.id} style={{ padding: '8px 0.75rem' }}>
-              <Flex style={{ width: '100%', alignItems: 'center', justifyContent: 'between' }}>
-                <Text
-                  style={{ display: 'flex', justifyContent: 'between', width: '100%', alignItems: 'center' }}
-                  css={{
-                    color: '$on_surface_high',
-                    fontWeight: '$semiBold',
-                  }}
-                >
-                  <Flex style={{ flexGrow: 1, gap: '2px', alignItems: 'center' }}>
-                    {message.senderName === 'You' || !message.senderName ? (
-                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                        {message.senderName || 'Anonymous'}
-                      </Text>
-                    ) : (
-                      <Tooltip title={message.senderName} side="top" align="start">
-                        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                          {getSenderName(message.senderName, message?.sender)}
-                        </Text>
-                      </Tooltip>
-                    )}
-                    <MessageTitle
-                      localPeerID={localPeerID}
-                      recipientPeer={message.recipientPeer}
-                      recipientRoles={message.recipientRoles}
-                    />
-                  </Flex>
-
-                  <Text
-                    variant="xs"
-                    css={{
-                      color: '$on_surface_medium',
-                      flexShrink: 0,
-                      p: '$2',
-                      whitespace: 'nowrap',
-                    }}
-                  >
-                    {formatTime(message.time)}
-                  </Text>
-                </Text>
-              </Flex>
-              <Text
-                variant="sm"
-                css={{
-                  w: '100%',
-                  mt: '$2',
-                  wordBreak: 'break-word',
-                  whiteSpace: 'pre-wrap',
-                  userSelect: 'all',
-                  color: '$on_surface_high',
-                }}
-              >
-                <AnnotisedMessage message={message.message} />
-              </Text>
-            </Box>
-          ))
-        )}
-        <div id="marker" style={{ height: filteredMessages.length ? '1px' : 0 }} />
-      </Box>
-      {canSendChatMessages && (
-        <Box css={{ bg: '$surface_dim' }}>
-          <Flex css={{ px: '$4', pb: '3px', gap: '$2', alignItems: 'center' }}>
-            <Text variant="caption">To:</Text>
-            <Flex css={{ bg: '$primary_bright', color: '$on_primary_high', r: '$2' }}>
-              <select
-                id="selector"
-                style={{
-                  background: 'inherit',
-                  color: 'inherit',
-                  border: 'none',
-                  outline: 'none',
-                  borderRadius: '4px',
-                  padding: '0 2px',
-                }}
-                defaultValue={elements.chat?.public_chat_enabled ? 'Everyone' : elements.chat?.roles_whitelist?.[0]}
-              >
-                {elements.chat?.roles_whitelist?.map(role => (
-                  <option key={role} value={role}>
-                    {role}
-                  </option>
-                ))}
-                {elements.chat?.public_chat_enabled ? <option value="Everyone">Everyone</option> : ''}
-              </select>
-            </Flex>
-          </Flex>
-          <Flex
-            align="center"
-            css={{
-              bg: '$surface_default',
-              minHeight: '$16',
-              width: '100%',
-              py: '$6',
-              pl: '$4',
-              boxSizing: 'border-box',
-              gap: '$2',
-              r: '$2',
-            }}
-          >
-            <TextArea
-              id="chat-input"
-              maxLength={CHAT_MESSAGE_LIMIT}
-              disabled={!isChatEnabled || isLocalPeerBlacklisted}
-              rows={1}
-              css={{
-                w: '100%',
-                c: '$on_surface_high',
-                p: '0.75rem 0.75rem !important',
-                border: 'none',
-                resize: 'none',
-              }}
-              placeholder={getChatStatus()}
-              required
-              autoComplete="off"
-              aria-autocomplete="none"
-            />
-
-            <IconButton
-              id="send-btn"
-              disabled={!isChatEnabled || isLocalPeerBlacklisted}
-              title={getChatStatus()}
-              css={{
-                ml: 'auto',
-                height: 'max-content',
-                mr: '$4',
-                '&:hover': { c: '$on_surface_medium' },
-              }}
-              data-testid="send_msg_btn"
-            >
-              <SendIcon />
-            </IconButton>
-          </Flex>
-        </Box>
-      )}
-    </div>
-  );
-};
-
-const MessageTitle = ({
-  recipientPeer,
-  recipientRoles,
-  localPeerID,
-}: {
-  recipientPeer?: string;
-  recipientRoles?: string[];
-  localPeerID: string;
-}) => {
-  const peerName = useHMSStore(selectPeerNameByID(recipientPeer));
-
-  return (
-    <>
-      {recipientRoles ? (
-        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-          to {recipientRoles} (Group)
-        </Text>
-      ) : null}
-      {recipientPeer ? (
-        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-          to {recipientPeer === localPeerID ? 'You' : peerName} (DM)
-        </Text>
-      ) : null}
-    </>
-  );
-};

package/src/Prebuilt/components/PIP/PIPChatOption.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ExternalLinkIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Text } from '../../../Text';
-
-export const PIPChatOption = ({ openChat, showPIPChat }: { openChat: () => void; showPIPChat: boolean }) => {
-  if (!showPIPChat) {
-    return <></>;
-  }
-  return (
-    <Dropdown.Item onClick={openChat} data-testid="pip_chat_btn">
-      <ExternalLinkIcon />
-      <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-        Pop out Chat
-      </Text>
-    </Dropdown.Item>
-  );
-};

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

@@ -1,90 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { selectPeers, selectTracksMap, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { PipIcon } from '@100mslive/react-icons';
-import { Flex, Tooltip } from '../../..';
-import IconButton from '../../IconButton';
-import { PictureInPicture } from './PIPManager';
-// @ts-ignore: No implicit Any
-import { MediaSession } from './SetupMediaSession';
-// @ts-ignore: No implicit Any
-import { usePinnedTrack } from '../AppData/useUISettings';
-
-/**
- * shows a button which when clicked shows some videos in PIP, clicking
- * again turns it off.
- */
-const PIPComponent = ({ content = null }) => {
-  const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
-  const hmsActions = useHMSActions();
-  const store = useHMSVanillaStore();
-
-  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]);
-
-  if (!PictureInPicture.isSupported()) {
-    return null;
-  }
-  return (
-    <>
-      {content ? (
-        <Flex css={{ w: '100%' }} onClick={() => onPipToggle()} data-testid="pip_btn">
-          {content}
-        </Flex>
-      ) : (
-        <Tooltip title={`${isPipOn ? 'Deactivate' : 'Activate'} picture in picture view`}>
-          <IconButton active={!isPipOn} key="pip" onClick={() => onPipToggle()} data-testid="pip_btn">
-            <PipIcon />
-          </IconButton>
-        </Tooltip>
-      )}
-    </>
-  );
-};
-
-/**
- * this is a separate component so it can be conditionally rendered and
- * the subscriptions to store are done only if required.
- */
-export const ActivatedPIP = () => {
-  const store = useHMSVanillaStore();
-  const pinnedTrack = usePinnedTrack();
-
-  useEffect(() => {
-    function subscribeToStore() {
-      return store.subscribe(tracksMap => {
-        let pipPeers = store.getState(selectPeers);
-        if (pinnedTrack) {
-          pipPeers = pipPeers.filter(peer => pinnedTrack.peerId === peer.id);
-        }
-        PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
-          console.error('error in updating pip', err);
-        });
-      }, selectTracksMap);
-    }
-    let unsubscribe: (() => void) | undefined = PictureInPicture.isOn() ? subscribeToStore() : undefined;
-    PictureInPicture.listenToStateChange(isOn => {
-      if (isOn) {
-        if (!unsubscribe) {
-          unsubscribe = subscribeToStore();
-        }
-      } else {
-        unsubscribe?.();
-        unsubscribe = undefined;
-      }
-    });
-    return () => {
-      unsubscribe?.();
-      unsubscribe = undefined;
-    };
-  }, [pinnedTrack, store]);
-
-  return <></>;
-};
-
-export default PIPComponent;