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

package/src/Prebuilt/layouts/ActiveSpeakerView.jsx

@@ -1,34 +0,0 @@
-import React, { useRef } from 'react';
-import { selectDominantSpeaker, selectPeers, useHMSStore } from '@100mslive/react-sdk';
-import { GridSidePaneView } from '../components/gridView';
-import VideoTile from '../components/VideoTile';
-import { Box, Flex } from '../../Layout';
-
-const ActiveSpeakerView = () => {
-  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
-  const latestDominantSpeakerRef = useRef(dominantSpeaker);
-  const peers = (useHMSStore(selectPeers) || []).filter(
-    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,
-  );
-  // if there is no current dominant speaker latest keeps pointing to last
-  if (dominantSpeaker) {
-    latestDominantSpeakerRef.current = dominantSpeaker;
-  }
-  if (peers.length === 0) {
-    return null;
-  }
-  // show local peer if there hasn't been any dominant speaker
-  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];
-  const showSidePane = activeSpeaker && peers.length > 1;
-
-  return (
-    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>
-      <Box css={{ flex: '1 1 0 ' }}>
-        <VideoTile peerId={activeSpeaker.id} width="100%" height="100%" />
-      </Box>
-      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== activeSpeaker.id)} />}
-    </Flex>
-  );
-};
-
-export default ActiveSpeakerView;

package/src/Prebuilt/layouts/InsetView.jsx

@@ -1,260 +0,0 @@
-import React, { Fragment, useEffect, useRef } from 'react';
-import Draggable from 'react-draggable';
-import { useMedia } from 'react-use';
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectRemotePeers,
-  selectRolesMap,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ExpandIcon } from '@100mslive/react-icons';
-import { AudioVideoToggle } from '../components/AudioVideoToggle';
-import { FirstPersonDisplay } from '../components/FirstPersonDisplay';
-import VideoTile from '../components/VideoTile';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-import IconButton from '../IconButton';
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
-import { useRolePreference } from '../components/hooks/useFeatures';
-import { APP_DATA } from '../common/constants';
-
-const getAspectRatio = ({ roleMap, roleName, isMobile }) => {
-  const role = roleMap[roleName];
-  const { width, height } = role.publishParams.video;
-  return isMobile ? height / width : width / height;
-};
-
-export function InsetView() {
-  const remotePeers = useHMSStore(selectRemotePeers);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const roleMap = useHMSStore(selectRolesMap);
-  const rolePreference = useRolePreference();
-  let centerPeers = [];
-  let sidepanePeers = [];
-  if (rolePreference) {
-    const center = rolePreference[localPeer.roleName]?.split(',') || [];
-    for (const peer of remotePeers) {
-      if (center.includes(peer.roleName)) {
-        centerPeers.push(peer);
-      } else {
-        sidepanePeers.push(peer);
-      }
-    }
-    if (centerPeers.length === 0 && sidepanePeers.length > 0) {
-      centerPeers = sidepanePeers;
-      sidepanePeers = [];
-    }
-  } else {
-    centerPeers = remotePeers;
-  }
-  const hideInset = sidepanePeers.length > 0 && (isMobile || isLandscape);
-
-  return (
-    <Fragment>
-      <Box
-        css={{
-          display: 'grid',
-          gridTemplateColumns: sidepanePeers.length > 0 ? '3fr 1fr' : '100%',
-          gridTemplateRows: '1fr',
-          gap: '$8',
-          px: '$10',
-          size: '100%',
-          '@md': {
-            gridTemplateColumns: '1fr',
-            gridTemplateRows: sidepanePeers.length > 0 ? `3fr 1fr` : '100%',
-          },
-        }}
-      >
-        <Flex
-          align="center"
-          justify="center"
-          css={{
-            size: '100%',
-            gap: '$8',
-            flexWrap: 'wrap',
-            placeContent: 'center',
-            minHeight: 0,
-            minWidth: 0,
-            '@lg': { flexFlow: 'column' },
-            '@ls': { flexFlow: 'row' },
-          }}
-        >
-          {centerPeers.length > 0 ? (
-            centerPeers.map(peer => (
-              <VideoTile
-                key={peer.videoTrack || peer.id}
-                peerId={peer.id}
-                trackId={peer.videoTrack}
-                rootCSS={{
-                  aspectRatio: getAspectRatio({
-                    roleMap,
-                    roleName: peer.roleName,
-                    isMobile,
-                  }),
-                  padding: 0,
-                  height: '100%',
-                  maxWidth: '100%',
-                  minWidth: 0,
-                  minHeight: 0,
-                  flex: remotePeers.length === 1 ? undefined : '1 1 0',
-                  display: 'flex',
-                  alignItems: 'center',
-                  '@lg': {
-                    display: 'block',
-                    padding: '0 !important',
-                    width: '100%',
-                  },
-                }}
-                objectFit="contain"
-              />
-            ))
-          ) : (
-            <FirstPersonDisplay />
-          )}
-        </Flex>
-        {sidepanePeers.length > 0 && (
-          <Flex
-            align="center"
-            justify="center"
-            css={{
-              size: '100%',
-              gap: '$4',
-              flexFlow: 'row wrap',
-              placeContent: 'center',
-            }}
-          >
-            {(hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => (
-              <VideoTile
-                key={peer.videoTrack || peer.id}
-                peerId={peer.id}
-                trackId={peer.videoTrack}
-                rootCSS={{
-                  aspectRatio: getAspectRatio({
-                    roleMap,
-                    roleName: peer.roleName,
-                    isMobile: false,
-                  }),
-                  flexBasis: '100%',
-                  '@ls': {
-                    aspectRatio: 1,
-                    flexBasis: 'calc(50% - $4)',
-                  },
-                  '@md': {
-                    aspectRatio: 1,
-                    flexBasis: arr.length < 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
-                  },
-                  '@sm': {
-                    flexBasis: arr.length <= 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
-                  },
-                  padding: 0,
-                }}
-                objectFit="contain"
-              />
-            ))}
-          </Flex>
-        )}
-      </Box>
-      {!hideInset && <InsetTile roleMap={roleMap} isMobile={isMobile} isLandscape={isLandscape} />}
-    </Fragment>
-  );
-}
-
-const MinimisedTile = ({ setMinimised }) => {
-  return (
-    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
-      <AudioVideoToggle hideOptions={true} />
-      <Text>You</Text>
-      <IconButton
-        onClick={() => setMinimised(false)}
-        css={{ bg: 'transparent', border: 'transparent' }}
-        className="__cancel-drag-event"
-      >
-        <ExpandIcon />
-      </IconButton>
-    </Flex>
-  );
-};
-
-export const InsetTile = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const aspectRatio = isMobile ? 9 / 16 : 16 / 9;
-  let height = 180;
-  let width = height * aspectRatio;
-  if (isLandscape && width > 240) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-
-  const nodeRef = useRef(null);
-
-  useEffect(() => {
-    if (!nodeRef.current || !window.ResizeObserver) {
-      return;
-    }
-    const node = nodeRef.current;
-    const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target === node.parentElement) {
-          // reset to original position on resize
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    resizeObserver.observe(node.parentElement);
-    return () => {
-      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
-      resizeObserver?.disconnect();
-    };
-  }, []);
-
-  if (!isAllowedToPublish.audio && !isAllowedToPublish.video) {
-    return null;
-  }
-
-  return (
-    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
-      <Box
-        ref={nodeRef}
-        css={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          zIndex: 10,
-          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
-          r: '$2',
-          ...(!minimised
-            ? {
-                aspectRatio: aspectRatio,
-                h: height,
-              }
-            : {}),
-        }}
-      >
-        {minimised ? (
-          <MinimisedTile setMinimised={setMinimised} />
-        ) : (
-          <VideoTile
-            peerId={localPeer.id}
-            trackid={localPeer.videoTrack}
-            rootCSS={{
-              size: '100%',
-              padding: 0,
-            }}
-            width={width}
-            height={height}
-            isDragabble={isMobile}
-            canMinimise
-          />
-        )}
-      </Box>
-    </Draggable>
-  );
-};

package/src/Prebuilt/layouts/PinnedTrackView.jsx

@@ -1,59 +0,0 @@
-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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
-import { Chat } from '../components/Chat/Chat';
-import { ParticipantList } from '../components/Footer/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={{
-        w: '$100',
-        h: '100%',
-        p: '$10',
-        bg: '$surface_default',
-        r: '$1',
-        ml: '$8',
-        flexShrink: 0,
-        position: 'relative',
-        ...css,
-        '@lg': {
-          w: '100%',
-          h: '100%',
-          ml: 0,
-          right: 0,
-          position: 'fixed',
-          bottom: 0,
-          r: 0,
-          zIndex: 10,
-          ...(css['@lg'] || {}),
-        },
-      }}
-    >
-      <ViewComponent />
-    </Box>
-  );
-};
-
-export default SidePane;

package/src/Prebuilt/layouts/mainGridView.jsx

@@ -1,98 +0,0 @@
-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

@@ -1,141 +0,0 @@
-import React, { Suspense, useCallback, useEffect } from 'react';
-import {
-  selectIsConnectedToRoom,
-  selectLocalPeerRoleName,
-  selectPeerScreenSharing,
-  selectPeerSharingAudio,
-  selectPeerSharingVideoPlaylist,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { EqualProminence } from '../components/EqualProminence';
-import FullPageProgress from '../components/FullPageProgress';
-import { Flex } from '../../Layout';
-import { EmbedView } from './EmbedView';
-import { PDFView } from './PDFView';
-import ScreenShareView from './screenShareView';
-import SidePane from './SidePane';
-import { WaitingView } from './WaitingView';
-import { useWhiteboardMetadata } from '../plugins/whiteboard';
-import {
-  useHLSViewerRole,
-  usePDFAnnotator,
-  usePinnedTrack,
-  useSetAppDataByKey,
-  useUISettings,
-  useUrlToEmbed,
-  useWaitingViewerRole,
-} from '../components/AppData/useUISettings';
-import { useShowStreamingUI } from '../common/hooks';
-import { APP_DATA, SESSION_STORE_KEY } from '../common/constants';
-
-// const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
-const HLSView = React.lazy(() => import('./HLSView'));
-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 hmsActions = useHMSActions();
-  const { isAudioOnly } = useUISettings();
-  const hlsViewerRole = useHLSViewerRole();
-  const waitingViewerRole = useWaitingViewerRole();
-  const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFAnnotator();
-  const { isHLSRunning } = useRecordingStreaming();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore(selectPermissions);
-  const showStreamingUI = useShowStreamingUI();
-
-  const startHLS = useCallback(async () => {
-    try {
-      if (isHLSStarted) {
-        return;
-      }
-      setHLSStarted(true);
-      await hmsActions.startHLSStreaming({});
-    } catch (error) {
-      if (error.message === 'beam already started') {
-        return;
-      }
-      if (error.message.includes('invalid input')) {
-        await startHLS();
-        return;
-      }
-      setHLSStarted(false);
-    }
-  }, [hmsActions, isHLSStarted, setHLSStarted]);
-
-  useEffect(() => {
-    if (!isConnected) {
-      return;
-    }
-    // Is a streaming kit and broadcaster joins
-    if (permissions?.hlsStreaming && !isHLSRunning && showStreamingUI) {
-      startHLS();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected]);
-
-  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]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [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 (pdfAnnotatorActive) {
-    ViewComponent = PDFView;
-  } else if (urlToIframe) {
-    ViewComponent = EmbedView;
-  } else if (whiteboardShared) {
-    // ViewComponent = WhiteboardView;
-  } else if (((peerSharing && peerSharing.id !== peerSharingAudio?.id) || peerSharingPlaylist) && !isAudioOnly) {
-    ViewComponent = ScreenShareView;
-  } else if (pinnedTrack) {
-    ViewComponent = PinnedTrackView;
-  } else {
-    ViewComponent = EqualProminence;
-  }
-
-  return (
-    <Suspense fallback={<FullPageProgress />}>
-      <Flex
-        css={{
-          size: '100%',
-          position: 'relative',
-        }}
-      >
-        <ViewComponent />
-        <SidePane />
-      </Flex>
-    </Suspense>
-  );
-};