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

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,115 +0,0 @@
-import React, { useEffect } from 'react';
-import { useMedia } from 'react-use';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
-import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
-import { config as cssConfig, Footer as AppFooter } from '../../..';
-// @ts-ignore: No implicit Any
-import { AudioVideoToggle } from '../AudioVideoToggle';
-import { CaptionIcon } from '../CaptionIcon';
-// @ts-ignore: No implicit Any
-import { EmojiReaction } from '../EmojiReaction';
-// @ts-ignore: No implicit Any
-import { LeaveRoom } from '../Leave/LeaveRoom';
-// @ts-ignore: No implicit Any
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { RaiseHand } from '../RaiseHand';
-// @ts-ignore: No implicit Any
-import { ScreenshareToggle } from '../ScreenShareToggle';
-// @ts-ignore: No implicit Any
-import { VBToggle } from '../VirtualBackground/VBToggle';
-// @ts-ignore: No implicit Any
-import { ChatToggle } from './ChatToggle';
-import { ParticipantCount } from './ParticipantList';
-import { PollsToggle } from './PollsToggle';
-import { WhiteboardToggle } from './WhiteboardToggle';
-import { ConferencingScreenElements } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useShowPolls } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const Footer = ({
-  screenType,
-  elements,
-}: {
-  screenType: keyof ConferencingScreen;
-  elements: ConferencingScreenElements;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isOverlayChat = !!elements?.chat?.is_overlay;
-  const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
-
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const { showPolls } = useShowPolls();
-
-  useEffect(() => {
-    if (!isChatOpen && openByDefault) {
-      toggleChat();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleChat, openByDefault]);
-
-  return (
-    <AppFooter.Root
-      css={{
-        flexWrap: 'nowrap',
-        '@md': {
-          justifyContent: 'center',
-          gap: '$10',
-          position: 'relative',
-          // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat && isChatOpen ? 20 : 1,
-        },
-      }}
-    >
-      <AppFooter.Left
-        css={{
-          '@md': {
-            w: 'unset',
-            p: '0',
-            gap: '$10',
-          },
-        }}
-      >
-        {isMobile ? <LeaveRoom screenType={screenType} /> : null}
-        <AudioVideoToggle />
-        {!isMobile && elements.virtual_background ? <VBToggle /> : null}
-      </AppFooter.Left>
-      <AppFooter.Center
-        css={{
-          '@md': {
-            w: 'unset',
-            gap: '$10',
-          },
-        }}
-      >
-        {isMobile ? (
-          <>
-            <ScreenshareToggle />
-            <RaiseHand />
-            {elements?.chat && <ChatToggle />}
-            <MoreSettings elements={elements} screenType={screenType} />
-          </>
-        ) : (
-          <>
-            <ScreenshareToggle />
-            <RaiseHand />
-            {screenType !== 'hls_live_streaming' && <CaptionIcon />}
-            {elements?.emoji_reactions && <EmojiReaction />}
-            <LeaveRoom screenType={screenType} />
-          </>
-        )}
-      </AppFooter.Center>
-      <AppFooter.Right>
-        <WhiteboardToggle />
-        {showPolls && <PollsToggle />}
-        {!isMobile && elements?.chat && <ChatToggle />}
-        {elements?.participant_list && <ParticipantCount />}
-        <MoreSettings elements={elements} screenType={screenType} />
-      </AppFooter.Right>
-    </AppFooter.Root>
-  );
-};

package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx

@@ -1,124 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-import { useMeasure } from 'react-use';
-import { VariableSizeList } from 'react-window';
-import { selectIsConnectedToRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { IconButton } from '../../../IconButton';
-import { Box, Flex } from '../../../Layout';
-import { Loading } from '../../../Loading';
-import { Text } from '../../../Text';
-import { Participant, ParticipantSearch } from './ParticipantList';
-import { ItemData, itemKey, ROW_HEIGHT } from './RoleAccordion';
-// @ts-ignore: No implicit Any
-import { useSidepaneReset } from '../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { getFormattedCount } from '../../common/utils';
-
-const LoadMoreParticipants = ({
-  hasNext,
-  loadMore,
-  style,
-}: {
-  hasNext: boolean;
-  loadMore: () => Promise<void>;
-  style: React.CSSProperties;
-}) => {
-  const { ref, inView } = useInView();
-  const [inProgress, setInProgress] = useState(false);
-
-  useEffect(() => {
-    if (hasNext && inView && !inProgress) {
-      setInProgress(true);
-      loadMore()
-        .catch(console.error)
-        .finally(() => setInProgress(false));
-    }
-  }, [hasNext, loadMore, inView, inProgress]);
-  return (
-    <Flex ref={ref} style={style} align="center" justify="center">
-      {inProgress ? <Loading size={16} /> : null}
-    </Flex>
-  );
-};
-
-const VirtualizedParticipantItem = React.memo(
-  ({
-    index,
-    data,
-    style,
-  }: {
-    index: number;
-    data: ItemData & { hasNext: boolean; loadMorePeers: () => Promise<void> };
-    style: React.CSSProperties;
-  }) => {
-    if (!data.peerList[index]) {
-      return <LoadMoreParticipants hasNext={data.hasNext} loadMore={data.loadMorePeers} style={style} />;
-    }
-    return (
-      <Participant
-        key={data.peerList[index].id}
-        peer={data.peerList[index]}
-        isConnected={data.isConnected}
-        style={style}
-      />
-    );
-  },
-);
-
-export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
-  const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
-  const [search, setSearch] = useState<string>('');
-  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search?.toLowerCase()));
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
-  const height = ROW_HEIGHT * (filteredPeers.length + 1);
-  const resetSidePane = useSidepaneReset();
-
-  useEffect(() => {
-    loadPeers();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Flex ref={ref} direction="column" css={{ size: '100%', gap: '$4' }}>
-      <Flex align="center">
-        <Flex align="center" css={{ flex: '1 1 0', cursor: 'pointer' }} onClick={onBack}>
-          <ChevronLeftIcon />
-          <Text variant="lg" css={{ flex: '1 1 0' }}>
-            Participants
-          </Text>
-        </Flex>
-        <IconButton
-          onClick={e => {
-            e.stopPropagation();
-            resetSidePane();
-          }}
-          data-testid="close_sidepane"
-        >
-          <CrossIcon />
-        </IconButton>
-      </Flex>
-      <ParticipantSearch onSearch={(search: string) => setSearch(search)} placeholder={`Search for ${roleName}`} />
-      <Flex direction="column" css={{ border: '1px solid $border_default', borderRadius: '$1', flex: '1 1 0' }}>
-        <Flex align="center" css={{ height: ROW_HEIGHT, borderBottom: '1px solid $border_default', px: '$8' }}>
-          <Text css={{ fontSize: '$space$7' }}>
-            {roleName}({getFormattedCount(peers.length)}/{getFormattedCount(total)})
-          </Text>
-        </Flex>
-        <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
-          <VariableSizeList
-            itemSize={index => (index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT)}
-            itemData={{ peerList: filteredPeers, hasNext: hasNext(), loadMorePeers, isConnected: isConnected === true }}
-            itemKey={itemKey}
-            itemCount={filteredPeers.length + 1}
-            width={width}
-            height={height}
-          >
-            {VirtualizedParticipantItem}
-          </VariableSizeList>
-        </Box>
-      </Flex>
-    </Flex>
-  );
-};