@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/src/Prebuilt/components/AudioLevel/BeamSpeakerLabelsLogging.jsx

@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { useIsHeadless } from '../AppData/useUISettings';
-import { FeatureFlags } from '../../services/FeatureFlags';
-
-export function BeamSpeakerLabelsLogging() {
-  const hmsActions = useHMSActions();
-  const isHeadless = useIsHeadless();
-
-  useEffect(() => {
-    if (FeatureFlags.enableBeamSpeakersLogging && isHeadless) {
-      hmsActions.enableBeamSpeakerLabelsLogging();
-    }
-  }, [hmsActions, isHeadless]);
-  return null;
-}

package/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Flex, IconButton, Tabs } from '../../..';
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-const tabTriggerCSS = {
-  color: '$on_surface_high',
-  p: '$4',
-  fontWeight: '$semiBold',
-  fontSize: '$sm',
-  w: '100%',
-  justifyContent: 'center',
-};
-
-export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OPTIONS.CHAT }) => {
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const [activeTab, setActiveTab] = useState(activeTabValue);
-  const peerCount = useHMSStore(selectPeerCount);
-
-  return (
-    <Flex
-      align="center"
-      css={{
-        color: '$on_primary_high',
-        h: '$16',
-      }}
-    >
-      <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
-        <Tabs.Root value={activeTab} onValueChange={setActiveTab} css={{ w: '100%' }}>
-          <Tabs.List css={{ w: '100%', p: '$2' }}>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.CHAT}
-              onClick={toggleChat}
-              css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-              }}
-            >
-              Chat
-            </Tabs.Trigger>
-            <Tabs.Trigger
-              value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-              onClick={toggleParticipants}
-              css={{
-                ...tabTriggerCSS,
-                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
-              }}
-            >
-              Participants ({peerCount})
-            </Tabs.Trigger>
-          </Tabs.List>
-        </Tabs.Root>
-      </Flex>
-      <IconButton
-        css={{ ml: 'auto' }}
-        onClick={e => {
-          e.stopPropagation();
-          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-            toggleChat();
-          } else {
-            toggleParticipants();
-          }
-        }}
-        data-testid="close_chat"
-      >
-        <CrossIcon />
-      </IconButton>
-    </Flex>
-  );
-});

package/src/Prebuilt/components/VideoList.jsx

@@ -1,73 +0,0 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { useVideoList } from '@100mslive/react-sdk';
-import { useTheme } from '../../Theme';
-import { StyledVideoList } from '../../VideoList';
-import { Pagination } from './Pagination';
-import ScreenshareTile from './ScreenshareTile';
-import VideoTile from './VideoTile';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless } from './AppData/useUISettings';
-
-const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShareForPeer }) => {
-  const { aspectRatio } = useTheme();
-  const tileOffset = useAppConfig('headlessConfig', 'tileOffset');
-  const isHeadless = useIsHeadless();
-
-  const { ref, pagesWithTiles } = useVideoList({
-    peers,
-    maxTileCount,
-    maxColCount,
-    maxRowCount,
-    includeScreenShareForPeer,
-    aspectRatio,
-    offsetY: getOffset({ isHeadless, tileOffset }),
-  });
-  const [page, setPage] = useState(0);
-  useEffect(() => {
-    // currentPageIndex should not exceed pages length
-    if (page >= pagesWithTiles.length) {
-      setPage(0);
-    }
-  }, [pagesWithTiles.length, page]);
-  return (
-    <StyledVideoList.Root ref={ref}>
-      <StyledVideoList.Container css={{ flexWrap: 'wrap', placeContent: 'center' }}>
-        {pagesWithTiles && pagesWithTiles.length > 0
-          ? pagesWithTiles[page]?.map(tile => {
-              if (tile.width === 0 || tile.height === 0) {
-                return null;
-              }
-              return (
-                <Fragment key={tile.track?.id || tile.peer.id}>
-                  {tile.track?.source === 'screen' ? (
-                    <ScreenshareTile width={tile.width} height={tile.height} peerId={tile.peer.id} />
-                  ) : (
-                    <VideoTile
-                      width={tile.width}
-                      height={tile.height}
-                      peerId={tile.peer?.id}
-                      trackId={tile.track?.id}
-                    />
-                  )}
-                </Fragment>
-              );
-            })
-          : null}
-      </StyledVideoList.Container>
-      {!isHeadless && pagesWithTiles.length > 1 ? (
-        <Pagination page={page} onPageChange={setPage} numPages={pagesWithTiles.length} />
-      ) : null}
-    </StyledVideoList.Root>
-  );
-};
-
-const VideoList = React.memo(List);
-
-const getOffset = ({ tileOffset, isHeadless }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return 32;
-  }
-  return Number(tileOffset);
-};
-
-export default VideoList;