@100mslive/roomkit-react 0.1.4-alpha.1 → 0.1.4

package/src/Prebuilt/components/PIP/PIPComponent.jsx

@@ -2,17 +2,17 @@ import React, { useCallback, useEffect, useState } from 'react';
 import {
   selectLocalPeerRoleName,
   selectPeers,
-  selectRemotePeers,
   selectTracksMap,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../../';
+import { Flex, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
 import { MediaSession } from './SetupMediaSession';
+import { usePinnedTrack } from '../AppData/useUISettings';
 import { useIsFeatureEnabled } from '../hooks/useFeatures';
 import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
 
@@ -20,7 +20,7 @@ import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
  * shows a button which when clicked shows some videos in PIP, clicking
  * again turns it off.
  */
-const PIPComponent = ({ peers, showLocalPeer }) => {
+const PIPComponent = ({ content = null }) => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
   const hmsActions = useHMSActions();
@@ -36,24 +36,22 @@ const PIPComponent = ({ peers, showLocalPeer }) => {
     }
   }, [hmsActions, isPipOn, store]);
 
-  // stop pip on unmount
-  useEffect(() => {
-    return () => {
-      PictureInPicture.stop().catch(err => console.error('error in stopping pip on unmount', err));
-    };
-  }, []);
-
   if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
     return null;
   }
   return (
     <>
-      <Tooltip title={`${isPipOn ? 'Deactivate' : 'Activate'} picture in picture view`}>
-        <IconButton active={!isPipOn} key="pip" onClick={() => onPipToggle()} data-testid="pip_btn">
-          <PipIcon />
-        </IconButton>
-      </Tooltip>
-      {isPipOn && <ActivatedPIP showLocalPeer={showLocalPeer} peers={peers} />}
+      {content ? (
+        <Flex css={{ w: '100%' }} onClick={() => onPipToggle()} data-testid="pip_btn">
+          {content}
+        </Flex>
+      ) : (
+        <Tooltip title={`${isPipOn ? 'Deactivate' : 'Activate'} picture in picture view`}>
+          <IconButton active={!isPipOn} key="pip" onClick={() => onPipToggle()} data-testid="pip_btn">
+            <PipIcon />
+          </IconButton>
+        </Tooltip>
+      )}
     </>
   );
 };
@@ -62,21 +60,27 @@ const PIPComponent = ({ peers, showLocalPeer }) => {
  * this is a separate component so it can be conditionally rendered and
  * the subscriptions to store are done only if required.
  */
-const ActivatedPIP = ({ showLocalPeer, peers }) => {
+export const ActivatedPIP = () => {
   const tracksMap = useHMSStore(selectTracksMap);
-  const storePeers = useHMSStore(showLocalPeer ? selectPeers : selectRemotePeers);
+  const storePeers = useHMSStore(selectPeers);
+  const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    let pipPeers = storePeers;
-    if (peers) {
-      pipPeers = storePeers.filter(peer => peers.includes(peer.id));
-    }
-    PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
-      console.error('error in updating pip', err);
+    PictureInPicture.listenToStateChange(isPipOn => {
+      if (!isPipOn) {
+        return;
+      }
+      let pipPeers = storePeers;
+      if (pinnedTrack) {
+        pipPeers = storePeers.filter(peer => pinnedTrack.peerId === peer.id);
+      }
+      PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
+        console.error('error in updating pip', err);
+      });
     });
-  }, [peers, storePeers, tracksMap]);
+  }, [storePeers, tracksMap, pinnedTrack]);
 
-  return null;
+  return <></>;
 };
 
 export default PIPComponent;

package/src/Prebuilt/components/PIP/PIPManager.js

@@ -24,10 +24,15 @@ const PIPStates = {
  * tracks which should be shown.
  */
 class PipManager {
+  listeners = new Set();
   constructor() {
     this.reset();
   }
 
+  listenToStateChange(cb) {
+    this.listeners.add(cb);
+  }
+
   /**
    * @private
    */
@@ -87,6 +92,7 @@ class PipManager {
       console.debug('pip started');
       this.state = PIPStates.started;
       this.onStateChange(true);
+      this.callListeners(true);
     } catch (err) {
       console.error('error in request pip', err);
       this.state = PIPStates.stopped;
@@ -108,6 +114,7 @@ class PipManager {
     // detach all to avoid bandwidth consumption
     await this.detachOldAttachNewTracks(this.tracksToShow, []);
     this.onStateChange(false); // notify parent about this
+    this.callListeners(false);
     this.reset(); // cleanup
     this.state = PIPStates.stopped;
   };
@@ -131,6 +138,12 @@ class PipManager {
   }
 
   // ------- Private function --------------
+  /**
+   * @private {boolean} on - whether pip is on/off
+   */
+  callListeners = on => {
+    this.listeners.forEach(listener => listener?.(on));
+  };
 
   /**
    * @private

package/src/Prebuilt/components/PIP/index.jsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import PIPComponent from './PIPComponent';
-import { usePinnedTrack } from '../AppData/useUISettings';
 
-export const PIP = () => {
-  const pinnedTrack = usePinnedTrack();
-
-  return (
-    <PIPComponent peers={pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : undefined} showLocalPeer={true} />
-  );
+export const PIP = ({ content = null }) => {
+  return <PIPComponent content={content} />;
 };

package/src/Prebuilt/components/Pagination.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
 import { StyledPagination } from '../../Pagination';
 
-export const Pagination = ({ page, setPage, numPages }) => {
+export const Pagination = ({ page, onPageChange, numPages }) => {
   const disableLeft = page === 0;
   const disableRight = page === numPages - 1;
   const nextPage = () => {
-    setPage(Math.min(page + 1, numPages - 1));
+    onPageChange(Math.min(page + 1, numPages - 1));
   };
   const prevPage = () => {
-    setPage(Math.max(page - 1, 0));
+    onPageChange(Math.max(page - 1, 0));
   };
   return (
     <StyledPagination.Root>
@@ -18,7 +18,7 @@ export const Pagination = ({ page, setPage, numPages }) => {
       </StyledPagination.Chevron>
       <StyledPagination.Dots>
         {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => setPage(i)} />
+          <StyledPagination.Dot key={i} active={page === i} onClick={() => onPageChange(i)} />
         ))}
       </StyledPagination.Dots>
       <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>

package/src/Prebuilt/components/Preview/PreviewContainer.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
-import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { Box, Flex } from '../../../';
+import { Flex } from '../../../';
+import { useHMSPrebuiltContext } from '../../AppContext';
 import SidePane from '../../layouts/SidePane';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import FullPageProgress from '../FullPageProgress';
-import { Header } from '../Header';
 import PreviewJoin from './PreviewJoin';
 import { useAuthToken } from '../AppData/useUISettings';
 import { useNavigation } from '../hooks/useNavigation';
 import { useSkipPreview } from '../hooks/useSkipPreview';
-import { QUERY_PARAM_NAME, QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
+import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
   const navigate = useNavigation();
   const skipPreview = useSkipPreview();
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
-  const initialName = useSearchParam(QUERY_PARAM_NAME) || (skipPreview ? 'Beam' : '');
+  const { userName } = useHMSPrebuiltContext();
+  const initialName = userName || (skipPreview ? 'Beam' : '');
   const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
   const authToken = useAuthToken();
   const roomLayout = useRoomLayout();
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
 
-  const roomState = useHMSStore(selectRoomState);
-  const isPreview = roomState === HMSRoomState.Preview;
-
   const onJoin = () => {
     let meetingURL = `/meeting/${urlRoomId}`;
     if (userRole) {
@@ -35,11 +32,6 @@ const PreviewContainer = () => {
   };
   return (
     <Flex direction="column" css={{ size: '100%' }}>
-      {isPreview ? null : (
-        <Box css={{ h: '$18', '@md': { h: '$17', flexShrink: 0 } }} data-testid="header">
-          <Header />
-        </Box>
-      )}
       <Flex
         css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto', color: '$primary_default' }}
         justify="center"

package/src/Prebuilt/components/Preview/PreviewForm.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useMedia } from 'react-use';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { RadioIcon } from '@100mslive/react-icons';
 import { Button, config as cssConfig, Flex, Input, styled } from '../../..';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { PreviewSettings } from './PreviewJoin';
+import { useShowStreamingUI } from '../../common/hooks';
 
 const PreviewForm = ({
   name,
@@ -24,10 +24,8 @@ const PreviewForm = ({
   const permissions = useHMSStore(selectPermissions);
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showGoLive =
-    joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
-    !isHLSRunning &&
-    permissions?.hlsStreaming;
+  const showStreamingUI = useShowStreamingUI();
+  const showGoLive = showStreamingUI && !isHLSRunning && permissions?.hlsStreaming;
 
   return (
     <Form
@@ -44,6 +42,12 @@ const PreviewForm = ({
           placeholder="Enter name"
           autoFocus
           autoComplete="name"
+          onKeyDown={e => {
+            if (e.key === 'Enter' && name.trim().length > 0) {
+              e.preventDefault();
+              onJoin();
+            }
+          }}
         />
         {cannotPublishAudio && cannotPublishVideo && !isMobile ? <PreviewSettings /> : null}
       </Flex>

package/src/Prebuilt/components/Preview/PreviewJoin.jsx

@@ -12,18 +12,7 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
-import {
-  Avatar,
-  Box,
-  Flex,
-  flexCenter,
-  styled,
-  StyledVideoTile,
-  Text,
-  useBorderAudioLevel,
-  useTheme,
-  Video,
-} from '../../../';
+import { Avatar, Box, Flex, flexCenter, styled, StyledVideoTile, Text, useBorderAudioLevel, Video } from '../../../';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import IconButton from '../../IconButton';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
@@ -36,6 +25,7 @@ import SettingsModal from '../Settings/SettingsModal';
 import PreviewForm from './PreviewForm';
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+import { getFormattedCount } from '../../common/utils';
 import { UI_SETTINGS } from '../../common/constants';
 
 const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
@@ -44,8 +34,7 @@ const getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return 'You are the first to join';
   }
-  const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
-  const formattedNum = formatter.format(peerCount);
+  const formattedNum = getFormattedCount(peerCount);
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
 };
 
@@ -104,10 +93,16 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authToken, skipPreview]);
 
+  useEffect(() => {
+    if (initialName) {
+      setName(initialName);
+    }
+  }, [initialName]);
+
   return roomState === HMSRoomState.Preview ? (
     <Container css={{ h: '100%', pt: '$10', '@md': { justifyContent: 'space-between' } }}>
       {toggleVideo ? null : <Box />}
-      <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '360px' }}>
+      <Flex direction="column" justify="center" css={{ w: '100%', maxWidth: '640px' }}>
         <Logo />
         <Text
           variant="h4"
@@ -121,7 +116,7 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
         >
           {previewHeader.sub_title}
         </Text>
-        <Flex justify="center" css={{ mt: '$14', mb: '$14', '@md': { mt: '$8', mb: '0' }, gap: '$4' }}>
+        <Flex justify="center" css={{ mt: '$14', '@md': { mt: '$8', mb: '0' }, gap: '$4' }}>
           {isStreamingOn ? (
             <Chip
               content="LIVE"
@@ -138,6 +133,8 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
           align="center"
           justify="center"
           css={{
+            mt: '$14',
+            '@md': { mt: 0 },
             '@sm': { width: '100%' },
             flexDirection: 'column',
           }}
@@ -145,7 +142,7 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
           <PreviewTile name={name} error={previewError} />
         </Flex>
       ) : null}
-      <Box css={{ w: '100%', maxWidth: '360px' }}>
+      <Box css={{ w: '100%', maxWidth: '640px' }}>
         <PreviewControls
           enableJoin={enableJoin}
           savePreferenceAndJoin={savePreferenceAndJoin}
@@ -183,19 +180,16 @@ const PreviewTile = ({ name, error }) => {
   const track = useHMSStore(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
 
-  const {
-    aspectRatio: { width, height },
-  } = useTheme();
   return (
     <StyledVideoTile.Container
       css={{
         bg: '$surface_default',
-        aspectRatio: width / height,
-        width: 'unset',
-        height: 'min(360px, 60vh)',
-        '@sm': {
-          height: 'unset',
-          width: 'min(360px, 100%)',
+        aspectRatio: 16 / 9,
+        width: 'min(640px, 80vw)',
+        overflow: 'clip',
+        '@md': {
+          aspectRatio: 9 / 16,
+          width: 'min(275px, 70vw)',
           maxWidth: '100%',
         },
       }}
@@ -246,7 +240,6 @@ const PreviewControls = ({ hideSettings }) => {
   );
 };
 
-// Bottom action sheet goes here, if isMobile
 export const PreviewSettings = React.memo(() => {
   const [open, setOpen] = useState(false);
 

package/src/Prebuilt/components/RaiseHand.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/react-sdk';
+import { HandIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../Tooltip';
+import IconButton from '../IconButton';
+import { useIsFeatureEnabled } from './hooks/useFeatures';
+import { useMyMetadata } from './hooks/useMetadata';
+import { FEATURE_LIST } from '../common/constants';
+
+export const RaiseHand = () => {
+  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
+  const { toggleHandRaise } = useMyMetadata();
+  const localPeer = useHMSStore(selectLocalPeer);
+  const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false;
+
+  if (!isHandRaiseEnabled) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
+      <IconButton active={!isHandRaised} onClick={toggleHandRaise}>
+        <HandIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/ScreenShare.jsx

@@ -21,7 +21,7 @@ export const ScreenshareToggle = ({ css = {} }) => {
 
   return (
     <Fragment>
-      <Flex direction="row">
+      <Flex direction="row" css={{ '@md': { display: 'none' } }}>
         <ScreenShareButton
           variant="standard"
           key="ShareScreen"

package/src/Prebuilt/components/ScreenshareDisplay.jsx

@@ -22,12 +22,12 @@ export const ScreenshareDisplay = () => {
         r: '$3',
         m: '0 auto',
         color: '$on_surface_high',
-        bg: '$surface_default',
+        bg: '$background_default',
         textAlign: 'center',
       }}
     >
       <ShareScreenIcon width={48} height={48} />
-      <Text variant="h5" css={{ m: '$8 0' }}>
+      <Text variant="h5" css={{ m: '$8 0', color: '$on_surface_high' }}>
         You are sharing your screen
       </Text>
       <Button

package/src/Prebuilt/components/ScreenshareTile.jsx

@@ -9,11 +9,11 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import TileMenu from './TileMenu/TileMenu';
 import { VideoTileStats } from '../../Stats';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import TileMenu from './TileMenu';
 import { useIsHeadless, useUISettings } from './AppData/useUISettings';
 import { UI_SETTINGS } from '../common/constants';
 
@@ -49,7 +49,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }) => {
   const isFullScreenSupported = screenfull.isEnabled;
   const audioTrack = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
   return (
-    <StyledVideoTile.Root css={{ width, height }} data-testid="screenshare_tile">
+    <StyledVideoTile.Root css={{ width, height, p: 0 }} data-testid="screenshare_tile">
       {peer ? (
         <StyledVideoTile.Container
           transparentBg

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -131,6 +131,7 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
             position: 'relative',
             flex: '1 1 0',
             minWidth: 0,
+            w: '100%',
             maxWidth: '100%',
             '@md': {
               mb: children ? '$8' : 0,
@@ -145,7 +146,7 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
               open={open}
             />
             <Dropdown.Portal>
-              <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
+              <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1001 }}>
                 {devices.map(device => {
                   return (
                     <Dropdown.Item

package/src/Prebuilt/components/Settings/LayoutSettings.jsx

@@ -10,10 +10,7 @@ export const LayoutSettings = () => {
   const hmsActions = useHMSActions();
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const isLocalScreenShared = useHMSStore(selectIsLocalScreenShared);
-  const [
-    { isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo, activeSpeakerSorting, hideLocalVideo },
-    setUISettings,
-  ] = useSetUiSettings();
+  const [{ isAudioOnly, uiViewMode, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback(
     async isAudioOnlyModeOn => {
       if (isAudioOnlyModeOn) {
@@ -38,16 +35,6 @@ export const LayoutSettings = () => {
         id="activeSpeakerMode"
         label="Active Speaker Mode"
       />
-      <SwitchWithLabel
-        label="Active Speaker Sorting"
-        id="activeSpeakerSortingMode"
-        checked={activeSpeakerSorting}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.activeSpeakerSorting]: value,
-          });
-        }}
-      />
       <SwitchWithLabel label="Audio Only Mode" id="audioOnlyMode" checked={isAudioOnly} onChange={toggleIsAudioOnly} />
       <SwitchWithLabel
         label="Mirror Local Video"
@@ -59,16 +46,6 @@ export const LayoutSettings = () => {
           });
         }}
       />
-      <SwitchWithLabel
-        label="Hide Local Video"
-        id="hideLocalVideo"
-        checked={hideLocalVideo}
-        onChange={value => {
-          setUISettings({
-            [UI_SETTINGS.hideLocalVideo]: value,
-          });
-        }}
-      />
       <Flex align="center" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>
         <Text variant="md" css={{ fontWeight: '$semiBold' }}>
           Tiles In View({maxTileCount})