@100mslive/roomkit-react 0.1.18-alpha.0 → 0.1.18

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.18-alpha.0",
+  "version": "0.1.18",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.27-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.27-alpha.0",
-    "@100mslive/react-icons": "0.8.27-alpha.0",
-    "@100mslive/react-sdk": "0.8.27-alpha.0",
+    "@100mslive/hls-player": "0.1.27",
+    "@100mslive/hms-virtual-background": "1.11.27",
+    "@100mslive/react-icons": "0.8.27",
+    "@100mslive/react-sdk": "0.8.27",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "cf7ed529de05b3c513939ef3ae1f595536d554d6"
+  "gitHead": "bebaa35da830548dc943d08a9d3cfe2f472e23b1"
 }

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

@@ -0,0 +1,108 @@
+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 { selectHMSMessagesCount, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { ChevronDownIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { Flex } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+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 { SESSION_STORE_KEY } from '../../common/constants';
+
+export const Chat = () => {
+  const { elements } = 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 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],
+  );
+
+  return (
+    <Flex
+      direction="column"
+      css={{
+        size: '100%',
+        gap: '$4',
+      }}
+    >
+      {isMobile && elements?.chat?.is_overlay ? null : <PinnedMessage />}
+      <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
+      <ChatPaused />
+      <ChatBlocked />
+      {isMobile && elements?.chat?.is_overlay ? <PinnedMessage /> : null}
+      {isChatEnabled ? (
+        <ChatFooter onSend={scrollToBottom}>
+          <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
+        </ChatFooter>
+      ) : null}
+    </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;
+  // @ts-ignore
+  if (outerElement.scrollHeight === listRef.current.state.scrollOffset + outerElement.offsetHeight) {
+    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

@@ -0,0 +1,295 @@
+import React, { useCallback, useState } from 'react';
+import { HMSMessage, selectLocalPeerName, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  CopyIcon,
+  CrossCircleIcon,
+  CrossIcon,
+  EyeCloseIcon,
+  PeopleRemoveIcon,
+  PinIcon,
+  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 } from '../hooks/useChatBlacklist';
+import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
+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,
+  showReply,
+  message,
+  sentByLocalPeer,
+  isMobile,
+  openSheet,
+  setOpenSheet,
+}: {
+  showPinAction: boolean;
+  onReply: () => void;
+  showReply: boolean;
+  message: HMSMessage;
+  sentByLocalPeer: boolean;
+  isMobile: boolean;
+  openSheet: boolean;
+  setOpenSheet: (value: boolean) => void;
+}) => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { can_hide_message, can_block_user } = elements?.chat?.real_time_controls || {
+    can_hide_message: false,
+    can_block_user: false,
+  };
+  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 } = useSetPinnedMessages();
+
+  const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
+    SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
+  );
+
+  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: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
+      tooltipText: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
+      icon: <ReplyIcon style={iconStyle} />,
+      onClick: onReply,
+      show: showReply,
+    },
+    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,
+    },
+    remove: {
+      text: 'Remove Partipant',
+      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={() => setOpenSheet(false)}>
+          <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={() => setOpenSheet(false)}>
+              <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',
+          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.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>
+  );
+};