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

package/src/Prebuilt/components/AuthToken.tsx

@@ -1,148 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useSessionStorage } from 'react-use';
-import { match } from 'ts-pattern';
-import { v4 as uuid } from 'uuid';
-import { HMSException, useHMSActions } from '@100mslive/react-sdk';
-import { Dialog } from '../../Modal';
-import { Text } from '../../Text';
-import { useHMSPrebuiltContext } from '../AppContext';
-import { PrebuiltStates } from '../AppStateContext';
-// @ts-ignore: No implicit Any
-import errorImage from '../images/transaction_error.svg';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from './AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { UserPreferencesKeys } from './hooks/useUserPreferences';
-import { APP_DATA } from '../common/constants';
-
-/**
- * query params exposed -
- * skip_preview=true => used by recording and streaming service, skips preview and directly joins
- *                      header and footer don't show up in this case
- * skip_preview_headful=true => used by automation testing to skip preview without impacting the UI
- * name=abc => gives the initial name for the peer joining
- * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
- * ui_mode=activespeaker => lands in active speaker mode after joining the room
- */
-const AuthToken = React.memo<{
-  authTokenByRoomCodeEndpoint?: string;
-  defaultAuthToken?: string;
-  activeState?: PrebuiltStates;
-}>(({ authTokenByRoomCodeEndpoint, defaultAuthToken, activeState }) => {
-  const hmsActions = useHMSActions();
-  const { roomCode, userId } = useHMSPrebuiltContext();
-  const [error, setError] = useState({ title: '', body: '' });
-  const authToken = defaultAuthToken;
-  const [tokenInAppData, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
-  const [savedUserId, setSavedUserId] = useSessionStorage<string>(UserPreferencesKeys.USER_ID);
-  const progressRef = useRef<boolean | null>(null);
-
-  useEffect(() => {
-    if (authToken) {
-      setAuthTokenInAppData(authToken);
-      return;
-    }
-
-    if (tokenInAppData || progressRef.current || activeState === PrebuiltStates.LEAVE) {
-      return;
-    }
-
-    if (!roomCode) {
-      console.error('room code not provided');
-      return;
-    }
-
-    let userIdForAuthToken = userId || savedUserId;
-    if (!userIdForAuthToken) {
-      userIdForAuthToken = uuid();
-      setSavedUserId(userIdForAuthToken);
-    }
-
-    progressRef.current = true;
-    hmsActions
-      .getAuthTokenByRoomCode({ roomCode, userId: userIdForAuthToken }, { endpoint: authTokenByRoomCodeEndpoint })
-      .then(token => setAuthTokenInAppData(token))
-      .catch(error => setError(convertError(error)))
-      .finally(() => {
-        progressRef.current = false;
-      });
-  }, [
-    hmsActions,
-    authToken,
-    authTokenByRoomCodeEndpoint,
-    setAuthTokenInAppData,
-    roomCode,
-    userId,
-    savedUserId,
-    tokenInAppData,
-    setSavedUserId,
-    activeState,
-  ]);
-
-  if (error.title) {
-    return (
-      <Dialog.Root open={true}>
-        <Dialog.Content
-          css={{
-            maxWidth: '$100',
-            boxSizing: 'border-box',
-            p: '$10 $12',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <img src={errorImage} height={80} width={80} alt="Token Error" />
-          <Text variant="h4" css={{ textAlign: 'center', mb: '$4', mt: '$10' }}>
-            {error.title}
-          </Text>
-          <Text css={{ c: '$on_surface_medium', textAlign: 'center' }}>{error.body}</Text>
-        </Dialog.Content>
-      </Dialog.Root>
-    );
-  }
-  return null;
-});
-
-const convertError = (error: HMSException) => {
-  console.error('[error]', { error });
-  console.warn(
-    'If you think this is a mistake on our side, please reach out to us on Dashboard:',
-    'https://dashboard.100ms.live/dashboard',
-  );
-  return match([error.action, error.code])
-    .with(['GET_TOKEN', 403], () => ({
-      title: 'Psst! This room is currently inactive.',
-      body: 'Please feel free to join another open room for more conversations. Thanks for stopping by!',
-    }))
-
-    .with(['GET_TOKEN', 404], () => ({
-      title: 'Room code does not exist',
-      body: 'We could not find a room code corresponding to this link.',
-    }))
-    .with(['GET_TOKEN', 2003], () => ({
-      title: 'Endpoint is not reachable',
-      body: `Endpoint is not reachable. ${error.description}.`,
-    }))
-    .otherwise(() =>
-      // @ts-ignore
-      match(error.response?.status)
-        .with(404, () => ({
-          title: 'Room does not exist',
-          body: 'We could not find a room corresponding to this link.',
-        }))
-        .with(403, () => ({
-          title: 'Accessing room using this link format is disabled',
-          body: 'You can re-enable this from the developer section in Dashboard.',
-        }))
-        .otherwise(() => {
-          console.error('Token API Error', error);
-          return {
-            title: 'Error fetching token',
-            body: 'An error occurred while fetching the app token. Please look into logs for more details.',
-          };
-        }),
-    );
-};
-
-export default AuthToken;

package/src/Prebuilt/components/CaptionIcon.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { selectIsTranscriptionEnabled, useHMSStore } from '@100mslive/react-sdk';
-import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../Tooltip';
-// @ts-ignore: No implicit Any
-import IconButton from '../IconButton';
-// @ts-ignore: No implicit Any
-import { useSetIsCaptionEnabled } from './AppData/useUISettings.js';
-
-export const CaptionIcon = () => {
-  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
-  const [isCaption, setIsCaption] = useSetIsCaptionEnabled();
-
-  const onClick = () => {
-    setIsCaption(!isCaption);
-  };
-  if (!isCaptionPresent) {
-    return null;
-  }
-  return (
-    <Tooltip title={isCaption ? 'Hide closed captions' : 'Show closed captions'}>
-      <IconButton data-testid="caption_btn" onClick={onClick}>
-        {isCaption ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
-      </IconButton>
-    </Tooltip>
-  );
-};

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { Flex } from '../../../Layout';
-
-export const ArrowNavigation = ({
-  total,
-  index,
-  showPrevious,
-  showNext,
-}: {
-  total: number;
-  index: number;
-  showPrevious: () => void;
-  showNext: () => void;
-}) => {
-  if (total < 2) {
-    return null;
-  }
-
-  return (
-    <Flex direction="column" css={{ gap: '$1' }}>
-      <Flex
-        onClick={showPrevious}
-        css={
-          index === 0
-            ? { cursor: 'not-allowed', color: '$on_surface_low' }
-            : { cursor: 'pointer', color: '$on_surface_medium' }
-        }
-      >
-        <ChevronUpIcon height={20} width={20} />
-      </Flex>
-      <Flex
-        onClick={showNext}
-        css={
-          index === total - 1
-            ? { cursor: 'not-allowed', color: '$on_surface_low' }
-            : { cursor: 'pointer', color: '$on_surface_medium' }
-        }
-      >
-        <ChevronDownIcon height={20} width={20} />
-      </Flex>
-    </Flex>
-  );
-};

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>
-  );
-};