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

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -1,190 +0,0 @@
-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';
-import { match } from 'ts-pattern';
-import { selectHMSMessagesCount, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
-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';
-import { PinnedMessage } from './PinnedMessage';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
-import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const Chat = () => {
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const listRef = useRef<VariableSizeList | null>(null);
-  const hmsActions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
-  const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
-  const isMobile = useMedia(cssConfig.media.md);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  useSidepaneResetOnLayoutUpdate('chat', SIDE_PANE_OPTIONS.CHAT);
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-
-  const scrollToBottom = useCallback(
-    (unreadCount = 0) => {
-      if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
-        const messagesCount = vanillaStore.getState(selectHMSMessagesCount);
-        listRef.current?.scrollToItem(messagesCount, 'end');
-        requestAnimationFrame(() => {
-          listRef.current?.scrollToItem(messagesCount, 'end');
-        });
-        hmsActions.setMessageRead(true);
-      }
-    },
-    [hmsActions, vanillaStore],
-  );
-
-  const streaming = isMobileHLSStream || isLandscapeStream;
-
-  return (
-    <Flex
-      direction="column"
-      justify="end"
-      css={{
-        size: '100%',
-        gap: '$4',
-      }}
-    >
-      {isMobile && elements?.chat?.is_overlay && !streaming ? null : <PinnedMessage />}
-      <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
-      <Flex align="center" css={{ w: '100%', gap: '$2' }}>
-        <ChatPaused />
-        <ChatBlocked />
-        {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
-          <>
-            <RaiseHand css={{ bg: '$surface_default' }} />
-            <MoreSettings elements={elements} screenType={screenType} />
-          </>
-        )}
-      </Flex>
-      {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
-      {isChatEnabled ? (
-        <ChatFooter onSend={scrollToBottom}>
-          <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
-        </ChatFooter>
-      ) : null}
-      {streaming && (
-        <Box
-          css={{
-            position: 'absolute',
-            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled, isLocalPeerBlacklisted })
-              .with(
-                {
-                  isLandscapeStream: true,
-                  isChatEnabled: true,
-                },
-                () => ({ bottom: '$19', right: '$10' }),
-              )
-              .with(
-                {
-                  isLandscapeStream: true,
-                  isChatEnabled: false,
-                },
-                () => ({ bottom: '$20', right: '$10' }),
-              )
-              .with(
-                {
-                  isMobileHLSStream: true,
-                  isChatEnabled: false,
-                },
-                () => ({ bottom: '$19', right: '$8' }),
-              )
-              .with(
-                {
-                  isMobileHLSStream: true,
-                  isChatEnabled: true,
-                  isLocalPeerBlacklisted: false,
-                },
-                () => ({ bottom: '$17', right: '$8' }),
-              )
-              .with(
-                {
-                  isLandscapeStream: false,
-                  isChatEnabled: true,
-                  isLocalPeerBlacklisted: true,
-                },
-                () => ({ bottom: '$18', right: '$8' }),
-              )
-              .with(
-                {
-                  isMobileHLSStream: true,
-                  isLocalPeerBlacklisted: true,
-                },
-                () => ({ bottom: '$20', right: '$8' }),
-              )
-              .otherwise(() => ({})),
-          }}
-        >
-          <EmojiReaction />
-        </Box>
-      )}
-    </Flex>
-  );
-};
-
-const NewMessageIndicator = ({
-  scrollToBottom,
-  listRef,
-}: {
-  scrollToBottom: (count: number) => void;
-  listRef: MutableRefObject<VariableSizeList | null>;
-}) => {
-  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
-  if (!unreadCount || !listRef.current) {
-    return null;
-  }
-  // @ts-ignore
-  const outerElement = listRef.current._outerRef;
-  if (
-    outerElement &&
-    outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight
-  ) {
-    return null;
-  }
-
-  return (
-    <Flex
-      justify="center"
-      css={{
-        width: '100%',
-        left: 0,
-        bottom: '$28',
-        position: 'absolute',
-      }}
-    >
-      <Button
-        variant="standard"
-        onClick={() => {
-          scrollToBottom(unreadCount);
-        }}
-        icon
-        css={{
-          p: '$3 $4',
-          pl: '$6',
-          '& > svg': { ml: '$4' },
-          borderRadius: '$round',
-          fontSize: '$xs',
-          fontWeight: '$semiBold',
-          c: '$on_secondary_high',
-        }}
-      >
-        New {unreadCount === 1 ? 'message' : 'messages'}
-        <ChevronDownIcon height={16} width={16} />
-      </Button>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Chat/ChatActions.tsx

@@ -1,314 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { HMSMessage, selectLocalPeerName, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import {
-  CopyIcon,
-  CrossCircleIcon,
-  CrossIcon,
-  EyeCloseIcon,
-  PeopleRemoveIcon,
-  PinIcon,
-  ReplyGroupIcon,
-  ReplyIcon,
-  VerticalMenuIcon,
-} from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { IconButton } from '../../../IconButton';
-import { Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import { Tooltip } from '../../../Tooltip';
-// @ts-ignore
-import { ToastManager } from '../Toast/ToastManager';
-import { MwebChatOption } from './MwebChatOption';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useChatBlacklist, useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { usePinnedMessages } from '../hooks/usePinnedMessages';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-const iconStyle = { height: '1.125rem', width: '1.125rem' };
-const tooltipBoxCSS = {
-  fontSize: '$xs',
-  backgroundColor: '$surface_default',
-  p: '$1 $5',
-  fontWeight: '$regular',
-  borderRadius: '$3',
-};
-
-export const ChatActions = ({
-  showPinAction,
-  onReply,
-  onReplyGroup,
-  showReply,
-  message,
-  sentByLocalPeer,
-  isMobile,
-  openSheet,
-  setOpenSheet,
-}: {
-  showPinAction: boolean;
-  onReply: () => void;
-  onReplyGroup: () => void;
-  showReply: boolean;
-  message: HMSMessage;
-  sentByLocalPeer: boolean;
-  isMobile: boolean;
-  openSheet: boolean;
-  setOpenSheet: (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}) => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { can_hide_message = false, can_block_user = false } = elements?.chat?.real_time_controls || {};
-  const { roles_whitelist = [] } = elements?.chat || {};
-
-  const [open, setOpen] = useState(false);
-  const actions = useHMSActions();
-  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
-  const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
-
-  const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
-    SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
-  );
-
-  const isSenderBlocked = useIsPeerBlacklisted({ peerCustomerUserId: message.senderUserId });
-
-  const updatePinnedMessages = useCallback(
-    (messageID = '') => {
-      const blacklistedMessageIDSet = new Set([...(blacklistedMessageIDs || []), messageID]);
-      unpinBlacklistedMessages(blacklistedMessageIDSet);
-    },
-    [blacklistedMessageIDs, unpinBlacklistedMessages],
-  );
-
-  const copyMessageContent = useCallback(() => {
-    try {
-      navigator?.clipboard.writeText(message.message);
-      ToastManager.addToast({
-        title: 'Message copied successfully',
-      });
-    } catch (e) {
-      console.log(e);
-      ToastManager.addToast({
-        title: 'Could not copy message',
-      });
-    }
-  }, [message]);
-
-  const options: Record<
-    string,
-    {
-      text: string;
-      tooltipText?: string;
-      icon: React.ReactNode;
-      onClick: () => void | Promise<void>;
-      show: boolean;
-      color?: string;
-    }
-  > = {
-    reply: {
-      text: 'Reply privately',
-      tooltipText: 'Reply privately',
-      icon: <ReplyIcon style={iconStyle} />,
-      onClick: onReply,
-      show: showReply,
-    },
-    replyGroup: {
-      text: 'Reply to group',
-      tooltipText: 'Reply to group',
-      icon: <ReplyGroupIcon style={iconStyle} />,
-      onClick: onReplyGroup,
-      show: !!message.senderRole && roles_whitelist.includes(message.senderRole),
-    },
-    pin: {
-      text: 'Pin message',
-      tooltipText: 'Pin',
-      icon: <PinIcon style={iconStyle} />,
-      onClick: () => setPinnedMessages(message, localPeerName || ''),
-      show: showPinAction,
-    },
-    copy: {
-      text: 'Copy text',
-      tooltipText: 'Copy',
-      icon: <CopyIcon style={iconStyle} />,
-      onClick: copyMessageContent,
-      show: true,
-    },
-    hide: {
-      text: message.recipientPeer ? 'Hide for both' : 'Hide for everyone',
-      icon: <EyeCloseIcon style={iconStyle} />,
-      onClick: async () => {
-        blacklistMessage(message.id);
-        updatePinnedMessages(message.id);
-      },
-      show: !!can_hide_message,
-    },
-    block: {
-      text: 'Block from chat',
-      icon: <CrossCircleIcon style={iconStyle} />,
-      onClick: async () => {
-        if (message.senderUserId) {
-          blacklistPeer(message.senderUserId);
-        }
-      },
-      color: '$alert_error_default',
-      show: !!can_block_user && !sentByLocalPeer && !isSenderBlocked,
-    },
-    remove: {
-      text: 'Remove participant',
-      icon: <PeopleRemoveIcon style={iconStyle} />,
-      color: '$alert_error_default',
-      show: !!canRemoveOthers && !sentByLocalPeer,
-      onClick: async () => {
-        if (!message.sender) {
-          return;
-        }
-        try {
-          await actions.removePeer(message.sender, '');
-        } catch (error) {
-          ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
-        }
-      },
-    },
-  };
-
-  if (isMobile) {
-    return (
-      <Sheet.Root open={openSheet} onOpenChange={setOpenSheet}>
-        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={e => setOpenSheet(false, e)}>
-          <Sheet.Title
-            css={{
-              display: 'flex',
-              color: '$on_surface_high',
-              w: '100%',
-              justifyContent: 'space-between',
-              mt: '$8',
-              fontSize: '$md',
-              px: '$10',
-              pb: '$8',
-              borderBottom: '1px solid $border_bright',
-              alignItems: 'center',
-            }}
-          >
-            Message options
-            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={e => setOpenSheet(false, e)}>
-              <CrossIcon />
-            </Sheet.Close>
-          </Sheet.Title>
-
-          {Object.keys(options).map(optionKey => {
-            const option = options[optionKey];
-            return option.show ? (
-              <MwebChatOption
-                key={optionKey}
-                text={option.text}
-                icon={option.icon}
-                onClick={option.onClick}
-                color={option?.color}
-              />
-            ) : null;
-          })}
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dropdown.Root open={open} onOpenChange={setOpen} css={{ '@md': { display: 'none' } }}>
-      <Flex
-        className="chat_actions"
-        css={{
-          background: '$surface_bright',
-          borderRadius: '$1',
-          p: '$2',
-          opacity: open ? 1 : 0,
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          zIndex: 1,
-          '@md': { opacity: 1 },
-        }}
-      >
-        {options.reply.show ? (
-          <Tooltip boxCss={tooltipBoxCSS} title={options.reply.tooltipText}>
-            <IconButton data-testid="reply_message_btn" onClick={options.reply.onClick}>
-              {options.reply.icon}
-            </IconButton>
-          </Tooltip>
-        ) : null}
-        {options.replyGroup.show ? (
-          <Tooltip boxCss={tooltipBoxCSS} title={options.replyGroup.tooltipText}>
-            <IconButton data-testid="reply_group_message_btn" onClick={options.replyGroup.onClick}>
-              {options.replyGroup.icon}
-            </IconButton>
-          </Tooltip>
-        ) : null}
-        {options.pin.show ? (
-          <Tooltip boxCss={tooltipBoxCSS} title={options.pin.tooltipText}>
-            <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>
-              {options.pin.icon}
-            </IconButton>
-          </Tooltip>
-        ) : null}
-
-        {options.copy.show ? (
-          <Tooltip boxCss={tooltipBoxCSS} title={options.copy.tooltipText}>
-            <IconButton onClick={options.copy.onClick} data-testid="copy_message_btn">
-              <CopyIcon style={iconStyle} />
-            </IconButton>
-          </Tooltip>
-        ) : null}
-
-        {options.block.show || options.hide.show || options.remove.show ? (
-          <Tooltip boxCss={tooltipBoxCSS} title="More actions">
-            <Dropdown.Trigger asChild>
-              <IconButton>
-                <VerticalMenuIcon style={iconStyle} />
-              </IconButton>
-            </Dropdown.Trigger>
-          </Tooltip>
-        ) : null}
-      </Flex>
-      <Dropdown.Portal>
-        <Dropdown.Content
-          sideOffset={5}
-          align="end"
-          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0', border: '1px solid $border_bright' }}
-        >
-          {options.hide.show ? (
-            <Dropdown.Item data-testid="hide_message_btn" onClick={options.hide.onClick}>
-              {options.hide.icon}
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold' }}>
-                {options.hide.text}
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {options.block.show ? (
-            <Dropdown.Item
-              data-testid="block_peer_btn"
-              onClick={options.block.onClick}
-              css={{ color: options.block.color }}
-            >
-              {options.block.icon}
-              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
-                {options.block.text}
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-          {options.remove.show ? (
-            <Dropdown.Item
-              data-testid="remove_peer_btn"
-              onClick={options.remove.onClick}
-              css={{ color: options.remove.color }}
-            >
-              {options.remove.icon}
-              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
-                {options.remove.text}
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </Dropdown.Content>
-      </Dropdown.Portal>
-    </Dropdown.Root>
-  );
-};