@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/layouts/PinnedTrackView.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useMeasure } from 'react-use';
+import { selectPeers, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { GridSidePaneView } from '../components/gridView';
+import VideoTile from '../components/VideoTile';
+import { Flex } from '../../Layout';
+import { useTheme } from '../../Theme';
+import { usePinnedTrack } from '../components/AppData/useUISettings';
+
+const PinnedPeerView = () => {
+  const { aspectRatio } = useTheme();
+  // can be audio or video track, if tile with only audio track is pinned
+  const pinnedTrack = usePinnedTrack();
+  const peerVideoTrack = useHMSStore(selectVideoTrackByPeerID(pinnedTrack.peerId));
+  const pinnedVideoTrack = pinnedTrack && pinnedTrack.type === 'audio' ? peerVideoTrack : pinnedTrack;
+  const [ref, { height, width }] = useMeasure();
+  const peers = (useHMSStore(selectPeers) || []).filter(
+    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,
+  );
+  if (peers.length === 0) {
+    return null;
+  }
+  const showSidePane = pinnedTrack && peers.length > 1;
+
+  let finalWidth = (aspectRatio.width / aspectRatio.height) * height;
+  let finalHeight = height;
+
+  if (finalWidth > width) {
+    finalWidth = width;
+    finalHeight = (aspectRatio.height / aspectRatio.width) * width;
+  }
+
+  return (
+    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>
+      <Flex
+        css={{
+          flex: '1 1 0',
+          p: '$8',
+          minHeight: 0,
+          minWidth: 0,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        ref={ref}
+      >
+        <VideoTile
+          key={pinnedTrack.id}
+          trackId={pinnedVideoTrack?.id}
+          peerId={pinnedTrack.peerId}
+          height={finalHeight}
+          width={finalWidth}
+        />
+      </Flex>
+      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== pinnedTrack.peerId)} />}
+    </Flex>
+  );
+};
+
+export default PinnedPeerView;

package/src/Prebuilt/layouts/SidePane.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
+import { Chat } from '../components/Chat/Chat';
+import { ParticipantList } from '../components/Header/ParticipantList';
+import { StreamingLanding } from '../components/Streaming/StreamingLanding';
+import { Box } from '../../Layout';
+import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
+
+const SidePane = ({ css = {} }) => {
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  let ViewComponent;
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
+    ViewComponent = ParticipantList;
+  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = Chat;
+  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
+    ViewComponent = StreamingLanding;
+  }
+  if (!ViewComponent) {
+    return null;
+  }
+  return (
+    <Box
+      css={{
+        position: 'absolute',
+        w: '$100',
+        h: '100%',
+        p: '$10',
+        bg: '$surfaceDefault',
+        r: '$1',
+        top: 0,
+        right: '$10',
+        zIndex: 10,
+        boxShadow: '$md',
+        ...css,
+        '@lg': {
+          w: '100%',
+          right: 0,
+          position: 'fixed',
+          bottom: 0,
+          height: 'unset',
+          ...(css['@lg'] || {}),
+        },
+      }}
+    >
+      <ViewComponent />
+    </Box>
+  );
+};
+
+export default SidePane;

package/src/Prebuilt/layouts/WaitingView.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ColoredTimeIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+export const WaitingView = React.memo(() => {
+  return (
+    <Box
+      css={{
+        overflow: 'hidden',
+        w: '96%',
+        maxWidth: '96%',
+        h: '100%',
+        m: 'auto',
+        background: '$surfaceDefault',
+        borderRadius: '$3',
+      }}
+      data-testid="waiting_view"
+    >
+      <Flex
+        align="center"
+        direction="column"
+        css={{
+          w: '$96',
+          textAlign: 'center',
+          margin: 'auto',
+          h: '100%',
+          justifyContent: 'center',
+          gap: '$8',
+        }}
+      >
+        <ColoredTimeIcon width="80px" height="80px" />
+        <Flex
+          direction="column"
+          css={{
+            w: '$80',
+            p: '$1',
+            gap: '$4',
+          }}
+        >
+          <Text color="white" variant="h6" css={{ '@md': { fontSize: '$md' } }}>
+            Please wait
+          </Text>
+          <Text color="$textMedEmp" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
+            Sit back and relax till others let you join.
+          </Text>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+});

package/src/Prebuilt/layouts/WhiteboardView.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { selectPeers, selectRoomID, useHMSStore } from '@100mslive/react-sdk';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { SidePane } from './screenShareView';
+import { Whiteboard } from '../plugins/whiteboard';
+
+const Editor = React.memo(({ roomId }) => {
+  return (
+    <Box
+      css={{
+        mx: '$4',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          '& video': {
+            objectFit: 'contain',
+          },
+        },
+      }}
+    >
+      <Box css={{ position: 'relative', width: '100%', height: '100%' }}>
+        <Whiteboard roomId={roomId} />
+      </Box>
+    </Box>
+  );
+});
+
+const WhiteboardView = () => {
+  // for smaller screen we will show sidebar in bottom
+  const mediaQueryLg = cssConfig.media.lg;
+  const showSidebarInBottom = useMedia(mediaQueryLg);
+  const peers = useHMSStore(selectPeers);
+  const roomId = useHMSStore(selectRoomID);
+  return (
+    <Flex
+      css={{
+        size: '100%',
+      }}
+      direction={showSidebarInBottom ? 'column' : 'row'}
+    >
+      <Editor roomId={roomId} />
+      <Flex
+        direction={{ '@initial': 'column', '@lg': 'row' }}
+        css={{
+          overflow: 'hidden',
+          p: '$4',
+          flex: '0 0 20%',
+          '@lg': {
+            flex: '1 1 0',
+          },
+        }}
+      >
+        <SidePane
+          showSidebarInBottom={showSidebarInBottom}
+          isPresenterInSmallTiles={true}
+          smallTilePeers={peers}
+          totalPeers={peers.length}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default WhiteboardView;

package/src/Prebuilt/layouts/mainGridView.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import {
+  selectLocalPeerID,
+  selectLocalPeerRole,
+  selectPeers,
+  selectPeersByRoles,
+  selectRolesMap,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { GridCenterView, GridSidePaneView } from '../components/gridView';
+import { Flex } from '../../Layout';
+import { NonPublisherView } from './NonPublisherView';
+import { useAppLayout } from '../components/AppData/useAppLayout';
+import { useUISettings } from '../components/AppData/useUISettings';
+import { UI_SETTINGS } from '../common/constants';
+
+export const MainGridView = () => {
+  const centerRoles = useAppLayout('center') || [];
+  const sidepaneRoles = useAppLayout('sidepane') || [];
+  const maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  const peers = useHMSStore(selectPeers);
+  const roles = useHMSStore(selectRolesMap);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const centerPeers = peers.filter(peer => centerRoles.includes(peer.roleName));
+  const sidebarPeers = peers.filter(peer => sidepaneRoles.includes(peer.roleName));
+  const localRole = useHMSStore(selectLocalPeerRole);
+  const peersByRoles = useHMSStore(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
+  const [placeholder, setPlaceholder] = useState('');
+
+  useEffect(() => {
+    const hasPublishingPeers = peers.some(peer => {
+      // peer able to publish
+      if (peer.roleName && roles[peer.roleName]) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return true;
+    });
+    const hasSubscribedRolePublishing = peersByRoles.some(peer => {
+      if (peer.roleName && roles[peer.roleName]) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return true;
+    });
+    if (!hasPublishingPeers) {
+      setPlaceholder('None of the roles can publish video, audio or screen');
+    } else if (!localRole.subscribeParams.subscribeToRoles?.length) {
+      setPlaceholder("This role isn't subscribed to any role");
+    } else if (!hasSubscribedRolePublishing) {
+      setPlaceholder('This role subscribed to roles is not publishing');
+    } else {
+      setPlaceholder('');
+    }
+  }, [localRole.subscribeParams.subscribeToRoles?.length, peers, peersByRoles, roles]);
+  /**
+   * If there are peers from many publishing roles, then it's possible to divide
+   * them into two parts, those who show in center and those who show in sidepane.
+   * In case there is only one person in the room, then too sidepane will be shown
+   * and center would be taken up by a banner image.
+   * There is an issue currently, where the banner is still shown if there are
+   * multiple viewers in the room but no publisher. Depending on the use case
+   * this can be useful(for webinar) or look odd(for showing you're the only one).
+   * Note that both center peers and sidebar peers have only publishing peers in them.
+   */
+  let showSidePane = centerPeers.length > 0 && sidebarPeers.length > 0;
+  if (centerPeers.length === 0) {
+    // we'll show the sidepane for banner in this case too if 1). it's only me
+    // in the room. or 2). noone is publishing in the room
+    const itsOnlyMeInTheRoom = peers.length === 1 && peers[0].id === localPeerId;
+    const nooneIsPublishing = sidebarPeers.length === 0;
+    showSidePane = itsOnlyMeInTheRoom || nooneIsPublishing;
+  }
+  return (
+    <Flex
+      css={{
+        size: '100%',
+      }}
+      direction={{
+        '@initial': 'row',
+        '@md': 'column',
+      }}
+    >
+      {placeholder ? (
+        <NonPublisherView message={placeholder} />
+      ) : (
+        <>
+          <GridCenterView
+            peers={showSidePane ? centerPeers : peers}
+            maxTileCount={maxTileCount}
+            allowRemoteMute={false}
+            hideSidePane={!showSidePane}
+            totalPeers={peers.length}
+          />
+          {showSidePane && <GridSidePaneView peers={sidebarPeers} totalPeers={peers.length} />}
+        </>
+      )}
+    </Flex>
+  );
+};

package/src/Prebuilt/layouts/mainView.jsx

@@ -0,0 +1,113 @@
+import React, { Suspense, useEffect } from 'react';
+import {
+  selectIsConnectedToRoom,
+  selectLocalPeerRoleName,
+  selectPeerScreenSharing,
+  selectPeerSharingAudio,
+  selectPeerSharingVideoPlaylist,
+  selectTemplateAppData,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import FullPageProgress from '../components/FullPageProgress';
+import { Flex } from '../../Layout';
+import { EmbedView } from './EmbedView';
+import { InsetView } from './InsetView';
+import { MainGridView } from './mainGridView';
+import { PDFView } from './PDFView';
+import ScreenShareView from './screenShareView';
+import SidePane from './SidePane';
+import { WaitingView } from './WaitingView';
+import { useWhiteboardMetadata } from '../plugins/whiteboard';
+import { useAppConfig } from '../components/AppData/useAppConfig';
+import {
+  useHLSViewerRole,
+  useIsHeadless,
+  usePDFAnnotator,
+  usePinnedTrack,
+  useUISettings,
+  useUrlToEmbed,
+  useWaitingViewerRole,
+} from '../components/AppData/useUISettings';
+import { SESSION_STORE_KEY, UI_MODE_ACTIVE_SPEAKER } from '../common/constants';
+
+// const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
+const HLSView = React.lazy(() => import('./HLSView'));
+const ActiveSpeakerView = React.lazy(() => import('./ActiveSpeakerView'));
+const PinnedTrackView = React.lazy(() => import('./PinnedTrackView'));
+
+export const ConferenceMainView = () => {
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const pinnedTrack = usePinnedTrack();
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const peerSharingAudio = useHMSStore(selectPeerSharingAudio);
+  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
+  const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
+  const hmsActions = useHMSActions();
+  const isHeadless = useIsHeadless();
+  const headlessUIMode = useAppConfig('headlessConfig', 'uiMode');
+  const { uiViewMode, isAudioOnly } = useUISettings();
+  const hlsViewerRole = useHLSViewerRole();
+  const waitingViewerRole = useWaitingViewerRole();
+  const urlToIframe = useUrlToEmbed();
+  const pdfAnntatorActive = usePDFAnnotator();
+  useEffect(() => {
+    if (!isConnected) {
+      return;
+    }
+    const audioPlaylist = JSON.parse(process.env.REACT_APP_AUDIO_PLAYLIST || '[]');
+    const videoPlaylist = JSON.parse(process.env.REACT_APP_VIDEO_PLAYLIST || '[]');
+    if (videoPlaylist.length > 0) {
+      hmsActions.videoPlaylist.setList(videoPlaylist);
+    }
+    if (audioPlaylist.length > 0) {
+      hmsActions.audioPlaylist.setList(audioPlaylist);
+    }
+
+    hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
+  }, [isConnected, hmsActions]);
+
+  if (!localPeerRole) {
+    // we don't know the role yet to decide how to render UI
+    return null;
+  }
+
+  let ViewComponent;
+  if (localPeerRole === hlsViewerRole) {
+    ViewComponent = HLSView;
+  } else if (localPeerRole === waitingViewerRole) {
+    ViewComponent = WaitingView;
+  } else if (pdfAnntatorActive) {
+    ViewComponent = PDFView;
+  } else if (urlToIframe) {
+    ViewComponent = EmbedView;
+  } else if (whiteboardShared) {
+    // ViewComponent = WhiteboardView;
+  } else if (uiMode === 'inset') {
+    ViewComponent = InsetView;
+  } else if (((peerSharing && peerSharing.id !== peerSharingAudio?.id) || peerSharingPlaylist) && !isAudioOnly) {
+    ViewComponent = ScreenShareView;
+  } else if (pinnedTrack) {
+    ViewComponent = PinnedTrackView;
+  } else if (uiViewMode === UI_MODE_ACTIVE_SPEAKER || (isHeadless && headlessUIMode === UI_MODE_ACTIVE_SPEAKER)) {
+    ViewComponent = ActiveSpeakerView;
+  } else {
+    ViewComponent = MainGridView;
+  }
+
+  return (
+    <Suspense fallback={<FullPageProgress />}>
+      <Flex
+        css={{
+          size: '100%',
+          position: 'relative',
+        }}
+      >
+        <ViewComponent />
+        <SidePane />
+      </Flex>
+    </Suspense>
+  );
+};

package/src/Prebuilt/layouts/screenShareView.jsx

@@ -0,0 +1,185 @@
+import React, { Fragment, useCallback, useMemo } from 'react';
+import { useMedia } from 'react-use';
+import {
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPeers,
+  selectPeerScreenSharing,
+  selectPeerSharingVideoPlaylist,
+  selectScreenShareByPeerID,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { VideoPlayer } from '../components/Playlist/VideoPlayer';
+import { ScreenshareDisplay } from '../components/ScreenshareDisplay';
+import ScreenshareTile from '../components/ScreenshareTile';
+import VideoList from '../components/VideoList';
+import VideoTile from '../components/VideoTile';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+
+const ScreenShareView = () => {
+  // for smaller screen we will show sidebar in bottom
+  const mediaQueryLg = cssConfig.media.xl;
+  const showSidebarInBottom = useMedia(mediaQueryLg);
+  const peers = useHMSStore(selectPeers);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const peerPresenting = useHMSStore(selectPeerScreenSharing);
+  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
+  const isPresenterFromMyRole = peerPresenting?.roleName?.toLowerCase() === localPeerRole?.toLowerCase();
+  const amIPresenting = localPeerID === peerPresenting?.id;
+  const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
+
+  const smallTilePeers = useMemo(() => {
+    const smallTilePeers = peers.filter(peer => peer.id !== peerPresenting?.id);
+    if (showPresenterInSmallTile && peerPresenting) {
+      smallTilePeers.unshift(peerPresenting); // put presenter on first page
+    }
+    return smallTilePeers;
+  }, [peers, peerPresenting, showPresenterInSmallTile]);
+
+  return (
+    <Flex
+      css={{
+        size: '100%',
+      }}
+      direction={showSidebarInBottom ? 'column' : 'row'}
+    >
+      <ScreenShareComponent
+        amIPresenting={amIPresenting}
+        peerPresenting={peerPresenting}
+        peerSharingPlaylist={peerSharingPlaylist}
+      />
+      <Flex
+        direction={{ '@initial': 'column', '@lg': 'row' }}
+        css={{
+          overflow: 'hidden',
+          p: '$4 $8',
+          flex: '0 0 20%',
+          '@xl': {
+            flex: '1 1 0',
+          },
+        }}
+      >
+        <SidePane
+          showSidebarInBottom={showSidebarInBottom}
+          peerScreenSharing={peerPresenting}
+          isPresenterInSmallTiles={showPresenterInSmallTile}
+          smallTilePeers={smallTilePeers}
+          totalPeers={peers.length}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+// Sidepane will show the camera stream of the main peer who is screensharing
+// and both camera + screen(if applicable) of others
+export const SidePane = ({
+  isPresenterInSmallTiles,
+  peerScreenSharing, // the peer who is screensharing
+  smallTilePeers,
+  showSidebarInBottom,
+}) => {
+  // The main peer's screenshare is already being shown in center view
+  const shouldShowScreenFn = useCallback(
+    peer => peerScreenSharing && peer.id !== peerScreenSharing.id,
+    [peerScreenSharing],
+  );
+  return (
+    <Fragment>
+      {!isPresenterInSmallTiles && <LargeTilePeerView peerScreenSharing={peerScreenSharing} />}
+      <SmallTilePeersView
+        showSidebarInBottom={showSidebarInBottom}
+        smallTilePeers={smallTilePeers}
+        shouldShowScreenFn={shouldShowScreenFn}
+      />
+    </Fragment>
+  );
+};
+
+const ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist }) => {
+  const screenshareTrack = useHMSStore(selectScreenShareByPeerID(peerPresenting?.id));
+
+  if (peerSharingPlaylist) {
+    return (
+      <Box
+        css={{
+          mx: '$8',
+          flex: '3 1 0',
+          '@xl': {
+            flex: '2 1 0',
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
+      >
+        <VideoPlayer peerId={peerSharingPlaylist.id} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      css={{
+        flex: '3 1 0',
+        mx: '$8',
+        '@xl': { ml: '$4', maxHeight: '80%', minHeight: 0 },
+      }}
+    >
+      {peerPresenting &&
+        (amIPresenting && !['browser', 'window', 'application'].includes(screenshareTrack?.displaySurface) ? (
+          <Box css={{ objectFit: 'contain', h: '100%' }}>
+            <ScreenshareDisplay />
+          </Box>
+        ) : (
+          <ScreenshareTile peerId={peerPresenting?.id} />
+        ))}
+    </Box>
+  );
+};
+
+const SmallTilePeersView = ({ smallTilePeers, shouldShowScreenFn, showSidebarInBottom }) => {
+  return (
+    <Flex
+      css={{
+        flex: '2 1 0',
+      }}
+    >
+      {smallTilePeers && smallTilePeers.length > 0 && (
+        <VideoList
+          peers={smallTilePeers}
+          maxColCount={showSidebarInBottom ? undefined : 1}
+          maxRowCount={showSidebarInBottom ? 1 : undefined}
+          includeScreenShareForPeer={shouldShowScreenFn}
+        />
+      )}
+    </Flex>
+  );
+};
+
+const LargeTilePeerView = ({ peerScreenSharing, showStatsOnTiles }) => {
+  return peerScreenSharing ? (
+    <Box
+      css={{
+        flex: '1 1 0',
+        minHeight: '25%',
+        py: '$4',
+        '@lg': {
+          mr: '$4',
+          minHeight: 'unset',
+          py: 0,
+        },
+        '@sm': {
+          height: '100%',
+          maxHeight: '75%',
+          alignSelf: 'center',
+        },
+      }}
+    >
+      <VideoTile showStatsOnTiles={showStatsOnTiles} width="100%" height="100%" peerId={peerScreenSharing.id} />
+    </Box>
+  ) : null;
+};
+
+export default ScreenShareView;