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

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

@@ -1,73 +0,0 @@
-import React, { useCallback } from 'react';
-import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { Button } from '../../../Button';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-export const ChatPaused = () => {
-  const hmsActions = useHMSActions();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const can_disable_chat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
-    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
-
-  const localPeer = useHMSStore(selectLocalPeer);
-
-  const unPauseChat = useCallback(
-    async () =>
-      await hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, {
-        enabled: true,
-        updatedBy: { userName: localPeer?.name, userId: localPeer?.customerUserId, peerId: localPeer?.id },
-        updatedAt: Date.now(),
-      }),
-    [hmsActions, localPeer],
-  );
-
-  return isChatEnabled ? null : (
-    <Flex
-      align="center"
-      justify="between"
-      css={{ borderRadius: '$1', bg: '$surface_default', p: '$2 $4 $2 $8', w: '100%' }}
-    >
-      <Box>
-        <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
-          Chat paused
-        </Text>
-        <Text
-          variant="xs"
-          css={{ color: '$on_surface_medium', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}
-        >
-          Chat has been paused by {chatStateUpdatedBy?.peerId === localPeer?.id ? 'you' : chatStateUpdatedBy?.userName}
-        </Text>
-      </Box>
-      {can_disable_chat ? (
-        <Button css={{ fontWeight: '$semiBold', fontSize: '$sm', borderRadius: '$2' }} onClick={unPauseChat}>
-          Resume
-        </Button>
-      ) : (
-        <></>
-      )}
-    </Flex>
-  );
-};
-
-export const ChatBlocked = () => {
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  if (!isLocalPeerBlacklisted) {
-    return null;
-  }
-  return (
-    <Flex
-      align="center"
-      justify="between"
-      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
-    >
-      <Text variant="sm" css={{ color: '$on_surface_medium', textAlign: 'center', w: '100%' }}>
-        You've been blocked from sending messages
-      </Text>
-    </Flex>
-  );
-};

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-// @ts-ignore
-import emptyChat from '../../images/empty-chat.svg';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-
-export const EmptyChat = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMobile = useMedia(cssConfig.media.md);
-  const canSendMessages =
-    elements.chat &&
-    (elements.chat.public_chat_enabled ||
-      elements.chat.private_chat_enabled ||
-      (elements.chat.roles_whitelist && elements.chat.roles_whitelist.length)) &&
-    !isLocalPeerBlacklisted;
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  const streaming = isMobileHLSStream || isLandscapeStream;
-
-  if (isMobile && elements?.chat?.is_overlay && !streaming) return <></>;
-
-  return (
-    <Flex
-      css={{
-        width: '100%',
-        flex: '1 1 0',
-        textAlign: 'center',
-        px: '$4',
-      }}
-      align="center"
-      justify="center"
-    >
-      <Box>
-        <Box css={{ m: '0 auto', mt: '$4', '@media (max-height: 575px)': { display: 'none' } }}>
-          <img src={emptyChat} style={{ display: 'inline' }} alt="Empty Chat" height={132} width={185} />
-        </Box>
-
-        <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
-          {canSendMessages ? 'Start a conversation' : 'No messages yet'}
-        </Text>
-        {canSendMessages ? (
-          <Text
-            variant="sm"
-            css={{ mt: '$4', maxWidth: '80%', textAlign: 'center', mx: 'auto', c: '$on_surface_medium' }}
-          >
-            There are no messages here yet. Start a conversation by sending a message.
-          </Text>
-        ) : null}
-      </Box>
-    </Flex>
-  );
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-export const MwebChatOption = ({
-  icon,
-  text,
-  onClick,
-  color = '$on_surface_high',
-}: {
-  icon: React.ReactNode;
-  text: string;
-  onClick: () => void | Promise<void>;
-  color?: string;
-}) => {
-  return (
-    <Flex align="center" css={{ w: '100%', color, cursor: 'pointer', gap: '$4', p: '$8' }} onClick={onClick}>
-      {icon}
-      <Text variant="sm" css={{ color, fontWeight: '$semiBold' }}>
-        {text}
-      </Text>
-    </Flex>
-  );
-};

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

@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useSwipeable } from 'react-swipeable';
-import { useMedia } from 'react-use';
-import { selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
-import { PinIcon, UnpinIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { ArrowNavigation } from './ArrowNavigation';
-// @ts-ignore
-import { AnnotisedMessage } from './ChatBody';
-import { StickIndicator } from './StickIndicator';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { usePinnedMessages } from '../hooks/usePinnedMessages';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-const PINNED_MESSAGE_LENGTH = 75;
-
-export const PinnedMessage = () => {
-  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
-  const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
-  const { removePinnedMessage } = usePinnedMessages();
-  const isMobile = useMedia(cssConfig.media.md);
-
-  const { elements } = useRoomLayoutConferencingScreen();
-  const canUnpinMessage = !!elements?.chat?.allow_pinning_messages;
-
-  const [hideOverflow, setHideOverflow] = useState(true);
-  const currentPinnedMessage = pinnedMessages?.[pinnedMessageIndex]?.text || '';
-  const canOverflow = currentPinnedMessage.length > PINNED_MESSAGE_LENGTH;
-
-  const showPreviousPinnedMessage = () => {
-    const previousIndex = Math.max(pinnedMessageIndex - 1, 0);
-    setHideOverflow(pinnedMessages[previousIndex].text.length > PINNED_MESSAGE_LENGTH);
-    setPinnedMessageIndex(previousIndex);
-  };
-
-  const showNextPinnedMessage = () => {
-    const nextIndex = Math.min(pinnedMessageIndex + 1, pinnedMessages.length - 1);
-    setHideOverflow(pinnedMessages[nextIndex].text.length > PINNED_MESSAGE_LENGTH);
-    setPinnedMessageIndex(nextIndex);
-  };
-
-  const swipeHandlers = useSwipeable({
-    onSwipedUp: () => showNextPinnedMessage(),
-    onSwipedDown: () => showPreviousPinnedMessage(),
-  });
-
-  // Scenario: User is on a particular index but an earlier message is removed by another peer
-  useEffect(() => {
-    const count = pinnedMessages?.length || 1;
-    if (pinnedMessageIndex >= count) {
-      setPinnedMessageIndex(count - 1);
-    }
-  }, [pinnedMessageIndex, pinnedMessages]);
-
-  if (!pinnedMessages || pinnedMessages.length === 0) {
-    return null;
-  }
-
-  return (
-    <Flex align="center" css={{ w: '100%', gap: '$4' }}>
-      {!isMobile ? (
-        <ArrowNavigation
-          index={pinnedMessageIndex}
-          total={pinnedMessages.length}
-          showPrevious={showPreviousPinnedMessage}
-          showNext={showNextPinnedMessage}
-        />
-      ) : null}
-      <Flex
-        css={{
-          p: '$4',
-          color: '$on_surface_high',
-          bg: isMobile && elements?.chat?.is_overlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_brighter',
-          r: '$1',
-          gap: '$4',
-          mb: '$8',
-          mt: '$8',
-          flexGrow: 1,
-          border: '1px solid $border_bright',
-        }}
-        align="center"
-        justify="between"
-      >
-        {isMobile ? <StickIndicator index={pinnedMessageIndex} total={pinnedMessages.length} /> : null}
-
-        <Box
-          css={{
-            w: '100%',
-            maxHeight: '$18',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            wordBreak: 'break-word',
-            '& p span': {
-              color: '$primary_default',
-            },
-          }}
-        >
-          <Text
-            variant="sm"
-            css={{ color: '$on_surface_high' }}
-            {...swipeHandlers}
-            title={pinnedMessages[pinnedMessageIndex]?.text}
-          >
-            <AnnotisedMessage
-              message={currentPinnedMessage}
-              length={hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length}
-            />
-            {canOverflow ? (
-              <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(prev => !prev)}>
-                &nbsp;{hideOverflow ? '... See more' : 'Collapse'}
-              </span>
-            ) : null}
-          </Text>
-        </Box>
-
-        {canUnpinMessage ? (
-          <Flex
-            onClick={() => {
-              removePinnedMessage(pinnedMessageIndex);
-              setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
-            }}
-            css={{
-              cursor: 'pointer',
-              color: '$on_surface_medium',
-              '&:hover': { color: '$on_surface_high' },
-              '&:hover .hide-on-hover': { display: 'none !important' },
-              '&:hover .show-on-hover': { display: 'block !important' },
-            }}
-            title="Unpin Message"
-          >
-            <UnpinIcon className="show-on-hover" style={{ display: 'none' }} height={20} width={20} />
-            <PinIcon className="hide-on-hover" style={{ display: 'block' }} height={20} width={20} />
-          </Flex>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../../Layout';
-
-export const StickIndicator = ({ total, index }: { total: number; index: number }) => {
-  const sticksCount = Math.min(3, total);
-
-  if (total < 2) {
-    return null;
-  }
-
-  return (
-    <Flex direction="column" css={{ gap: '$1' }}>
-      {[...Array(sticksCount)].map((_, i) => (
-        <Box
-          css={{
-            borderLeft: '2px solid',
-            height: '$4',
-            borderColor: i === index ? '$on_surface_high' : '$on_surface_low',
-          }}
-        />
-      ))}
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -1,32 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useEmojiPickerStyles = showing => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (showing) {
-      setTimeout(() => {
-        const root = ref.current?.querySelector('em-emoji-picker')?.shadowRoot;
-        const style = document.createElement('style');
-        style.textContent = `
-          #root {
-            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
-            --em-rgb-input: var(--hms-ui-colors-on_primary_high);
-            --em-color-border: var(--hms-ui-colors-surface_bright);
-            --color-b: var(--hms-ui-colors-on_surface_high);
-            --rgb-background: transparent;
-            color: var(--hms-ui-colors-on_surface_high);
-            font-family: var(--hms-ui-fonts-sans);
-          }
-          .sticky {
-            top: 0.25rem;
-            background-color: var(--hms-ui-colors-surface_bright);
-            margin-top: 0.5rem;
-          }
-        `;
-        root?.appendChild(style);
-      }, 0);
-    }
-  }, [showing]);
-
-  return ref;
-};

package/src/Prebuilt/components/Chat/useUnreadCount.ts

@@ -1,19 +0,0 @@
-import {
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectUnreadHMSMessagesCount,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-
-export const useUnreadCount = ({ role, peerId }: { role?: string; peerId?: string }) => {
-  let unreadCountSelector;
-  if (role) {
-    unreadCountSelector = selectMessagesUnreadCountByRole(role);
-  } else if (peerId) {
-    unreadCountSelector = selectMessagesUnreadCountByPeerID(peerId);
-  } else {
-    unreadCountSelector = selectUnreadHMSMessagesCount;
-  }
-
-  return useHMSStore(unreadCountSelector);
-};

package/src/Prebuilt/components/Chat/utils.ts

@@ -1,11 +0,0 @@
-export const formatTime = (date: Date) => {
-  if (!(date instanceof Date)) {
-    return '';
-  }
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const suffix = hours > 11 ? 'PM' : 'AM';
-  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
-};
-
-export const CHAT_MESSAGE_LIMIT = 2000;

package/src/Prebuilt/components/ChatSettings.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { PauseCircleIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Flex } from '../../Layout';
-import { Popover } from '../../Popover';
-import { Text } from '../../Text';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { SESSION_STORE_KEY } from '../common/constants';
-
-export const ChatSettings = () => {
-  const hmsActions = useHMSActions();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const canPauseChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-  const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
-  const showPause = canPauseChat && isChatEnabled;
-
-  if (!showPause) {
-    return null;
-  }
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild css={{ px: '$4' }}>
-        <Flex
-          align="center"
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' }, cursor: 'pointer' }}
-        >
-          <SettingsIcon />
-        </Flex>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          align="end"
-          side="bottom"
-          sideOffset={2}
-          onClick={() => {
-            const chatState = {
-              enabled: false,
-              updatedBy: {
-                peerId: localPeer?.id,
-                userId: localPeer?.customerUserId,
-                userName: localPeer?.name,
-              },
-              updatedAt: Date.now(),
-            };
-            hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, chatState);
-          }}
-          css={{
-            backgroundColor: '$surface_default',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '$4',
-            borderRadius: '$1',
-            color: '$on_surface_high',
-            cursor: 'pointer',
-            '&:hover': { backgroundColor: '$surface_dim' },
-          }}
-        >
-          <PauseCircleIcon />
-          <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-            Pause Chat
-          </Text>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};

package/src/Prebuilt/components/Chip.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { CSS } from '../../Theme';
-
-const Chip = ({
-  icon = <></>,
-  content = '',
-  backgroundColor = '$surface_default',
-  textColor = '$on_surface_high',
-  hideIfNoContent = false,
-  onClick,
-  css = {},
-}: {
-  icon?: React.JSX.Element;
-  content: string;
-  backgroundColor?: string;
-  textColor?: string;
-  hideIfNoContent?: boolean;
-  onClick?: () => void | Promise<void>;
-  css?: CSS;
-}) => {
-  if (hideIfNoContent && !content) {
-    return null;
-  }
-  return (
-    <Flex
-      align="center"
-      css={{ backgroundColor, p: '$4 $6', gap: '$2', borderRadius: '$4', ...css }}
-      onClick={() => onClick?.()}
-    >
-      {icon}
-      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor }}>
-        {content}
-      </Text>
-    </Flex>
-  );
-};
-
-export default Chip;