@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

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/ChatFooter.jsx

@@ -1,150 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import data from '@emoji-mart/data';
-import Picker from '@emoji-mart/react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
-import { Box, Flex, IconButton, Popover, styled } from '../../../';
-import { ToastManager } from '../Toast/ToastManager';
-import { useChatDraftMessage } from '../AppData/useChatState';
-import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-
-const TextArea = styled('textarea', {
-  width: '100%',
-  bg: 'transparent',
-  color: '$on_primary_high',
-  resize: 'none',
-  lineHeight: '1rem',
-  position: 'relative',
-  fontFamily: '$sans',
-  fontSize: '100%',
-  margin: 0,
-  padding: 0,
-  top: '$3',
-  '&:focus': {
-    boxShadow: 'none',
-    outline: 'none',
-  },
-});
-
-function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState(false);
-  const ref = useEmojiPickerStyles(showEmoji);
-  return (
-    <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>
-      <Popover.Trigger asChild css={{ appearance: 'none' }}>
-        <IconButton as="div">
-          <EmojiIcon />
-        </IconButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          alignOffset={-40}
-          sideOffset={16}
-          align="end"
-          css={{
-            p: 0,
-          }}
-        >
-          <Box
-            css={{
-              minWidth: 352,
-              minHeight: 435,
-            }}
-            ref={ref}
-          >
-            <Picker onEmojiSelect={onSelect} data={data} previewPosition="none" skinPosition="search" />
-          </Box>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
-export const ChatFooter = ({ role, peerId, onSend, children }) => {
-  const hmsActions = useHMSActions();
-  const inputRef = useRef(null);
-  const [draftMessage, setDraftMessage] = useChatDraftMessage();
-
-  const sendMessage = useCallback(async () => {
-    const message = inputRef.current.value;
-    if (!message || !message.trim().length) {
-      return;
-    }
-    try {
-      if (role) {
-        await hmsActions.sendGroupMessage(message, [role]);
-      } else if (peerId) {
-        await hmsActions.sendDirectMessage(message, peerId);
-      } else {
-        await hmsActions.sendBroadcastMessage(message);
-      }
-      inputRef.current.value = '';
-      setTimeout(() => {
-        onSend();
-      }, 0);
-    } catch (error) {
-      ToastManager.addToast({ title: error.message });
-    }
-  }, [role, peerId, hmsActions, onSend]);
-
-  useEffect(() => {
-    const messageElement = inputRef.current;
-    if (messageElement) {
-      messageElement.value = draftMessage;
-    }
-  }, [draftMessage]);
-
-  useEffect(() => {
-    const messageElement = inputRef.current;
-    return () => {
-      setDraftMessage(messageElement?.value || '');
-    };
-  }, [setDraftMessage]);
-
-  return (
-    <Flex
-      align="center"
-      css={{
-        bg: '$surface_bright',
-        minHeight: '$16',
-        maxHeight: '$24',
-        position: 'relative',
-        py: '$6',
-        pl: '$8',
-        r: '$1',
-      }}
-    >
-      {children}
-      <TextArea
-        placeholder="Write something here"
-        ref={inputRef}
-        autoFocus
-        onKeyPress={async event => {
-          if (event.key === 'Enter') {
-            if (!event.shiftKey) {
-              event.preventDefault();
-              await sendMessage();
-            }
-          }
-        }}
-        autoComplete="off"
-        aria-autocomplete="none"
-        onPaste={e => e.stopPropagation()}
-        onCut={e => e.stopPropagation()}
-        onCopy={e => e.stopPropagation()}
-      />
-      <EmojiPicker
-        onSelect={emoji => {
-          inputRef.current.value += ` ${emoji.native} `;
-        }}
-      />
-      <IconButton
-        onClick={sendMessage}
-        css={{ ml: 'auto', height: 'max-content', mr: '$4' }}
-        data-testid="send_msg_btn"
-      >
-        <SendIcon />
-      </IconButton>
-    </Flex>
-  );
-};

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

@@ -1,67 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, IconButton, Text, textEllipsis } from '../../../';
-import { ChatSelector } from './ChatSelector';
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSelect, role, peerId }) => {
-  const [open, setOpen] = useState(false);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  return (
-    <Flex
-      onClick={onToggle}
-      align="center"
-      css={{
-        color: '$on_primary_high',
-        h: '$16',
-        mb: '$2',
-      }}
-    >
-      <Text variant="h6">Chat </Text>
-      <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
-        <Dropdown.Trigger
-          asChild
-          data-testid="participant_list_filter"
-          css={{
-            border: '1px solid $on_surface_low',
-            r: '$0',
-            p: '$2 $4',
-            ml: '$8',
-          }}
-          tabIndex={0}
-        >
-          <Flex align="center">
-            <Text variant="sm" css={{ ...textEllipsis(80) }}>
-              {selection}
-            </Text>
-            <Box css={{ ml: '$2', color: '$on_surface_low' }}>
-              {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
-            </Box>
-          </Flex>
-        </Dropdown.Trigger>
-        <Dropdown.Content
-          css={{
-            w: '$64',
-            overflow: 'hidden',
-            maxHeight: 'unset',
-          }}
-          align="start"
-          sideOffset={8}
-        >
-          <ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
-        </Dropdown.Content>
-      </Dropdown.Root>
-      <IconButton
-        css={{ ml: 'auto' }}
-        onClick={e => {
-          e.stopPropagation();
-          selectorOpen ? onToggle() : toggleChat();
-        }}
-        data-testid="close_chat"
-      >
-        <CrossIcon />
-      </IconButton>
-    </Flex>
-  );
-});

package/src/Prebuilt/components/Connection/TileConnection.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { styled, Text, textEllipsis } from '../../../';
-import { ConnectionIndicator } from './ConnectionIndicator';
-
-const TileConnection = ({ name, peerId, hideLabel, width }) => {
-  return (
-    <Wrapper>
-      {!hideLabel ? (
-        <Text
-          css={{
-            c: '$on_surface_high',
-            ...textEllipsis(width - 60),
-          }}
-          variant="xs"
-        >
-          {name}
-        </Text>
-      ) : null}
-      <ConnectionIndicator isTile peerId={peerId} />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  position: 'absolute',
-  bottom: '$2',
-  left: '$2',
-  backgroundColor: '$background_dim',
-  borderRadius: '$1',
-  maxWidth: '85%',
-  '& p,span': {
-    p: '$2 $3',
-  },
-});
-
-export default TileConnection;

package/src/Prebuilt/components/EqualProminence.jsx

@@ -1,180 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useMeasure, useMedia } from 'react-use';
-import {
-  getPeersWithTiles,
-  selectLocalPeer,
-  selectPeers,
-  selectRemotePeers,
-  selectTracksMap,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { InsetTile } from '../layouts/InsetView';
-import { useRoomLayout } from '../provider/roomLayoutProvider';
-import { Pagination } from './Pagination';
-import VideoTile from './VideoTile';
-import { useUISettings } from './AppData/useUISettings';
-import PeersSorter from '../common/PeersSorter';
-import { UI_SETTINGS } from '../common/constants';
-
-const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
-
-export function EqualProminence() {
-  const layout = useRoomLayout();
-  const { enable_local_tile_inset: isInsetEnabled = true } =
-    //@ts-ignore
-    layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {};
-  const peers = useHMSStore(isInsetEnabled ? selectRemotePeers : selectPeers);
-  const [sortedPeers, setSortedPeers] = useState(peers);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const vanillaStore = useHMSVanillaStore();
-  const isMobile = useMedia(cssConfig.media.md);
-  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  const [pagesWithTiles, setPagesWithTiles] = useState([]);
-  const [page, setPage] = useState(0);
-  const [ref, { width, height }] = useMeasure();
-  const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
-  const pageSize = pagesWithTiles[0]?.length;
-
-  useEffect(() => {
-    // currentPageIndex should not exceed pages length
-    if (page >= pagesWithTiles.length) {
-      setPage(0);
-    }
-  }, [pagesWithTiles.length, page]);
-
-  useEffect(() => {
-    if (width === 0 || height === 0) {
-      return;
-    }
-    const tracksMap = vanillaStore.getState(selectTracksMap);
-    const peersWithTiles = getPeersWithTiles(
-      sortedPeers.length === 0 ? [localPeer] : sortedPeers,
-      tracksMap,
-      () => false,
-    );
-    const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
-    let remaining = peersWithTiles.length;
-    let sliceStart = 0;
-    let pagesList = [];
-    // split into pages
-    for (let i = 0; i < noOfPages; i++) {
-      const count = Math.min(remaining, maxTileCount);
-      pagesList.push(peersWithTiles.slice(sliceStart, sliceStart + count));
-      remaining = remaining - count;
-      sliceStart += count;
-    }
-    // calculate dimesions for each page
-    for (const page of pagesList) {
-      const noOfTilesInPage = page.length;
-      let maxCols =
-        noOfTilesInPage > 2 && noOfTilesInPage < 9
-          ? Math.ceil(noOfTilesInPage / 2)
-          : Math.ceil(Math.sqrt(noOfTilesInPage));
-      if (isMobile) {
-        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
-      }
-      let maxRows = Math.ceil(noOfTilesInPage / maxCols);
-      let index = 0;
-      // convert the current page to a matrix(grid)
-      const matrix = new Array(maxRows).fill(null).map((_, i) => {
-        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
-        let rowElements = [];
-        for (let j = 0; j < numCols; j++) {
-          if (index < page.length) {
-            rowElements.push(page[index++]);
-          }
-        }
-        return rowElements;
-      });
-
-      const maxHeight = height - (maxRows - 1) * 8;
-      const maxRowHeight = maxHeight / matrix.length;
-      const aspectRatios =
-        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)
-          ? aspectRatioConfig.mobile
-          : aspectRatioConfig.default;
-      // calculate height and width of each tile in a row
-      for (const row of matrix) {
-        let tileWidth = (width - (row.length - 1) * 8) / row.length;
-        let tileHeight = 0;
-        const calcHeights = aspectRatios.map(aR => tileWidth / aR);
-        for (const h of calcHeights) {
-          if (h < maxRowHeight) {
-            if (tileHeight < h) {
-              tileHeight = h;
-            }
-          }
-        }
-
-        // tileHeight is not calculated as it could be exceeding the max possible height
-        // find the max possible width instead
-        if (tileHeight === 0) {
-          tileHeight = maxRowHeight;
-          const calcWidths = aspectRatios.map(aR => tileHeight * aR);
-          tileWidth = 0;
-          for (const w of calcWidths) {
-            if (w < width) {
-              if (tileWidth < w) {
-                tileWidth = w;
-              }
-            }
-          }
-        }
-        for (let i = 0; i < row.length; i++) {
-          row[i].width = tileWidth;
-          row[i].height = tileHeight;
-        }
-      }
-    }
-    setPagesWithTiles(pagesList);
-  }, [width, height, maxTileCount, vanillaStore, sortedPeers, page, isMobile, localPeer]);
-
-  useEffect(() => {
-    if (page !== 0) {
-      return;
-    }
-    peersSorter.setPeersAndTilesPerPage({
-      peers,
-      tilesPerPage: pageSize || maxTileCount,
-    });
-    peersSorter.onUpdate(setSortedPeers);
-  }, [page, peersSorter, peers, pageSize, maxTileCount]);
-
-  return (
-    <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>
-      <Box
-        ref={ref}
-        css={{
-          flex: '1 1 0',
-          gap: '$4',
-          display: 'flex',
-          placeContent: 'center',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexFlow: 'row wrap',
-          minHeight: 0,
-        }}
-      >
-        {pagesWithTiles[page]?.map(tile => {
-          return (
-            <VideoTile
-              key={tile.track?.id || tile.peer?.id}
-              width={tile.width}
-              height={tile.height}
-              peerId={tile.peer?.id}
-              trackId={tile.track?.id}
-              rootCSS={{ padding: 0 }}
-              objectFit="contain"
-            />
-          );
-        })}
-      </Box>
-      {pagesWithTiles.length > 1 && <Pagination page={page} onPageChange={setPage} numPages={pagesWithTiles.length} />}
-      {isInsetEnabled && sortedPeers.length > 0 && <InsetTile />}
-    </Flex>
-  );
-}

package/src/Prebuilt/components/FirstPersonDisplay.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import PlaceholderBg from '../images/first_person.png';
-
-export const FirstPersonDisplay = React.memo(() => {
-  return (
-    <Box
-      css={{
-        position: 'relative',
-        overflow: 'hidden',
-        w: '37.5rem',
-        maxWidth: '80%',
-        h: '100%',
-        r: '$3',
-        m: '0 auto',
-        backgroundImage: `url(${PlaceholderBg})`,
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-        '@md': {
-          w: '100%',
-          maxWidth: 'unset',
-        },
-      }}
-      data-testid="first_person_img"
-    >
-      <Flex
-        align="center"
-        direction="column"
-        css={{
-          position: 'absolute',
-          w: '100%',
-          top: '33.33%',
-          left: 0,
-          textAlign: 'center',
-        }}
-      >
-        <Text color="white" variant="h4" css={{ '@md': { fontSize: '$md' } }}>
-          Welcome!
-        </Text>
-        <Text color="white" variant="h6" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
-          You’re the first one here.
-        </Text>
-        <Text color="white" variant="h6" css={{ mt: '$2', '@md': { fontSize: '$sm' } }}>
-          Sit back and relax till the others join.
-        </Text>
-      </Flex>
-    </Box>
-  );
-});

package/src/Prebuilt/components/Footer/Footer.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Footer as AppFooter } from '../../..';
-import { AudioVideoToggle } from '../AudioVideoToggle';
-import { EmojiReaction } from '../EmojiReaction';
-import { LeaveRoom } from '../LeaveRoom';
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { RaiseHand } from '../RaiseHand';
-import { ScreenshareToggle } from '../ScreenShare';
-import { ChatToggle } from './ChatToggle';
-import { ParticipantCount } from './ParticipantList';
-import { useHLSViewerRole } from '../AppData/useUISettings';
-
-export const Footer = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const hlsViewerRole = useHLSViewerRole();
-  const isHlsViewer = hlsViewerRole === localPeerRole;
-
-  return (
-    <AppFooter.Root
-      css={{
-        flexWrap: 'nowrap',
-        '@md': {
-          justifyContent: 'center',
-          gap: '$10',
-        },
-      }}
-    >
-      <AppFooter.Left
-        css={{
-          '@md': {
-            w: 'unset',
-            p: '0',
-            gap: '$10',
-          },
-        }}
-      >
-        {isMobile ? <LeaveRoom /> : null}
-        <AudioVideoToggle />
-      </AppFooter.Left>
-      <AppFooter.Center
-        css={{
-          '@md': {
-            w: 'unset',
-            gap: '$10',
-          },
-        }}
-      >
-        {isMobile ? (
-          <>
-            {isHlsViewer ? <RaiseHand /> : null}
-            <ChatToggle />
-            <MoreSettings />
-          </>
-        ) : (
-          <>
-            <ScreenshareToggle />
-            {isHlsViewer ? <RaiseHand /> : null}
-            <EmojiReaction />
-            <LeaveRoom />
-          </>
-        )}
-      </AppFooter.Center>
-      <AppFooter.Right>
-        <ChatToggle />
-        <ParticipantCount />
-        <MoreSettings />
-      </AppFooter.Right>
-    </AppFooter.Root>
-  );
-};

package/src/Prebuilt/components/Header/Header.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ConferencingHeader } from './ConferencingHeader';
-import { StreamingHeader } from './StreamingHeader';
-import { isStreamingKit } from '../../common/utils';
-
-export const Header = () => {
-  return isStreamingKit() ? <StreamingHeader /> : <ConferencingHeader />;
-};

package/src/Prebuilt/components/Header/StreamingHeader.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { config as cssConfig, Flex } from '../../../';
-import { EmojiReaction } from '../EmojiReaction';
-import { ParticipantCount } from '../Footer/ParticipantList';
-import { LeaveRoom } from '../LeaveRoom';
-import MetaActions from '../MetaActions';
-import { SpeakerTag } from './HeaderComponents';
-import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
-
-export const StreamingHeader = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return (
-    <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
-      <Flex
-        align="center"
-        css={{
-          position: 'absolute',
-          left: '$10',
-        }}
-      >
-        {isMobile ? (
-          <Flex align="center" gap={2}>
-            <LeaveRoom />
-            <LiveStatus />
-            <RecordingStatus />
-          </Flex>
-        ) : null}
-        <SpeakerTag />
-      </Flex>
-
-      <Flex
-        align="center"
-        css={{
-          position: 'absolute',
-          right: '$10',
-          gap: '$4',
-        }}
-      >
-        {isMobile ? (
-          <>
-            <EmojiReaction />
-            <MetaActions compact />
-          </>
-        ) : (
-          <Flex css={{ gap: '$4' }}>
-            <StreamActions />
-          </Flex>
-        )}
-        <ParticipantCount />
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/LeaveCard.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-
-export const LeaveCard = ({ icon, title, subtitle, onClick, bg, titleColor, subtitleColor, css = {} }) => {
-  return (
-    <Flex css={{ p: '$10', flexGrow: 1, gap: '$8', bg, ...css }} onClick={onClick}>
-      <Box css={{ color: titleColor }}>{icon}</Box>
-      <Box css={{ gap: '$2' }}>
-        <Text variant="lg" css={{ color: titleColor }}>
-          {title}
-        </Text>
-        <Text variant="sm" css={{ color: subtitleColor }}>
-          {subtitle}
-        </Text>
-      </Box>
-    </Flex>
-  );
-};