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

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

@@ -1,94 +0,0 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { useMedia } from 'react-use';
-import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { DesktopLeaveRoom } from './MoreSettings/SplitComponents/DesktopLeaveRoom';
-import { MwebLeaveRoom } from './MoreSettings/SplitComponents/MwebLeaveRoom';
-import { PictureInPicture } from './PIP/PIPManager';
-import { ToastManager } from './Toast/ToastManager';
-import { IconButton } from '../../IconButton';
-import { config as cssConfig, styled } from '../../Theme';
-import { useHMSPrebuiltContext } from '../AppContext';
-import { useNavigation } from './hooks/useNavigation';
-
-export const LeaveRoom = () => {
-  const navigate = useNavigation();
-  const params = useParams();
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const permissions = useHMSStore(selectPermissions);
-  const isMobile = useMedia(cssConfig.media.md);
-  const hmsActions = useHMSActions();
-  const { showLeave, onLeave } = useHMSPrebuiltContext();
-
-  const stopStream = async () => {
-    try {
-      console.log('Stopping HLS stream');
-      await hmsActions.stopHLSStreaming();
-      ToastManager.addToast({ title: 'Stopping the stream' });
-    } catch (e) {
-      console.error('Error stopping stream', e);
-      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
-    }
-  };
-
-  const redirectToLeavePage = () => {
-    if (showLeave) {
-      if (params.role) {
-        navigate('/leave/' + params.roomId + '/' + params.role);
-      } else {
-        navigate('/leave/' + params.roomId);
-      }
-    }
-    PictureInPicture.stop().catch(() => console.error('stopping pip'));
-    ToastManager.clearAllToast();
-    onLeave?.();
-  };
-
-  const leaveRoom = () => {
-    hmsActions.leave();
-    redirectToLeavePage();
-  };
-
-  // const endRoom = () => {
-  //   hmsActions.endRoom(false, 'End Room');
-  //   redirectToLeavePage();
-  // };
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-  return isMobile ? (
-    <MwebLeaveRoom leaveIconButton={LeaveIconButton} leaveRoom={leaveRoom} stopStream={stopStream} />
-  ) : (
-    <DesktopLeaveRoom
-      leaveIconButton={LeaveIconButton}
-      menuTriggerButton={MenuTriggerButton}
-      leaveRoom={leaveRoom}
-      stopStream={stopStream}
-    />
-  );
-};
-
-const LeaveIconButton = styled(IconButton, {
-  color: '$on_primary_high',
-  h: '$14',
-  px: '$4',
-  r: '$1',
-  bg: '$alert_error_default',
-  '&:not([disabled]):hover': {
-    bg: '$alert_error_bright',
-  },
-  '&:not([disabled]):active': {
-    bg: '$alert_error_default',
-  },
-  '@md': {
-    mx: 0,
-  },
-});
-
-const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $alert_error_dim',
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  px: '$2',
-});

package/src/Prebuilt/components/MoreSettings/MoreSettings.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { DesktopOptions } from './SplitComponents/DesktopOptions';
-import { MwebOptions } from './SplitComponents/MwebOptions';
-import { config as cssConfig } from '../../../';
-
-export const MoreSettings = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  return isMobile ? <MwebOptions /> : <DesktopOptions />;
-};

package/src/Prebuilt/components/Notifications/MessageNotifications.jsx

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { ToastBatcher } from '../Toast/ToastBatcher';
-import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FEATURE_LIST, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
-
-export const MessageNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);
-  const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
-  const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE);
-  const isHeadless = useIsHeadless();
-  useEffect(() => {
-    if (!notification) {
-      return;
-    }
-    console.debug(`[${notification.type}]`, notification);
-    if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) {
-      return;
-    }
-    ToastBatcher.showToast({ notification });
-  }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]);
-
-  return null;
-};

package/src/Prebuilt/components/gridView.jsx

@@ -1,85 +0,0 @@
-import React, { Fragment } from 'react';
-import { useMedia } from 'react-use';
-import { Box, Flex } from '../../Layout';
-import { config as cssConfig } from '../../Theme';
-import { FirstPersonDisplay } from './FirstPersonDisplay';
-import { Image } from './Image';
-import VideoList from './VideoList';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless } from './AppData/useUISettings';
-
-const MAX_TILES_FOR_MOBILE = 4;
-
-/**
- * the below variables are for showing webinar etc. related image if required on certain meeting urls
- */
-const webinarProps = JSON.parse(process.env.REACT_APP_WEBINAR_PROPS || '{}');
-const eventRoomIDs = webinarProps?.ROOM_IDS || [];
-const eventsImg = webinarProps?.IMAGE_FILE || ''; // the image to show in center
-// the link to navigate to when user clicks on the image
-const webinarInfoLink = webinarProps?.LINK_HREF || 'https://100ms.live/';
-
-// The center of the screen shows bigger tiles
-export const GridCenterView = ({ peers, maxTileCount }) => {
-  const mediaQueryLg = cssConfig.media.md;
-  const limitMaxTiles = useMedia(mediaQueryLg);
-
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Fragment>
-      <Box
-        css={{
-          flex: '1 1 0',
-          height: '100%',
-          mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-          '@md': { flex: '2 1 0' },
-        }}
-      >
-        {peers && peers.length > 0 ? (
-          <VideoList peers={peers} maxTileCount={limitMaxTiles ? MAX_TILES_FOR_MOBILE : maxTileCount} />
-        ) : eventRoomIDs.some(id => window.location.href.includes(id)) ? (
-          <Box
-            css={{
-              display: 'grid',
-              placeItems: 'center',
-              size: '100%',
-              p: '$12',
-            }}
-          >
-            <a href={webinarInfoLink} target="_blank" rel="noreferrer">
-              <Image css={{ p: '$4', boxShadow: '$sm' }} alt="Event template" src={eventsImg} />
-            </a>
-          </Box>
-        ) : (
-          <FirstPersonDisplay />
-        )}
-      </Box>
-    </Fragment>
-  );
-};
-
-// Side pane shows smaller tiles
-export const GridSidePaneView = ({ peers }) => {
-  const headlessConfig = useAppConfig('headlessConfig');
-  const isHeadless = useIsHeadless();
-  return (
-    <Flex
-      direction="column"
-      css={{
-        flex: '0 0 20%',
-        mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
-        '@lg': {
-          flex: '0 0 25%',
-        },
-        '@md': {
-          flex: '1 1 0',
-        },
-      }}
-    >
-      <Flex css={{ flex: '1 1 0' }} align="end">
-        {peers && peers.length > 0 && <VideoList peers={peers} maxColCount={1} />}
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/hooks/useFeatures.js

@@ -1,22 +0,0 @@
-import { selectTemplateAppData, useHMSStore } from '@100mslive/react-sdk';
-
-export const useFeatures = () => {
-  let features = useHMSStore(selectTemplateAppData)?.features;
-  return features && typeof features === 'string' ? features.split(',') : undefined;
-};
-
-export const useIsFeatureEnabled = key => {
-  let features = useFeatures();
-  return features ? features.includes(key) : true;
-};
-
-export const useRolePreference = () => {
-  let preference = useHMSStore(selectTemplateAppData)?.rolePreference;
-  try {
-    preference = JSON.parse(preference || '{}');
-    return preference;
-  } catch (e) {
-    console.log('role preference parse error', e);
-    return undefined;
-  }
-};