@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.7

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
+import { Sheet } from '../../../Sheet';
+
+export const RequestPrompt = ({
+  open = true,
+  onOpenChange,
+  title,
+  body,
+  actionText = 'Accept',
+  onAction,
+}: {
+  open?: boolean;
+  onOpenChange: (value: boolean) => void;
+  title: string;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction: () => void;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ py: '$8' }}>
+          <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
+          {body}
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ p: '$10' }}>
+          <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
+            <Text variant="h6">{title}</Text>
+          </Dialog.Title>
+          <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
+          <RequestActions actionText={actionText} onAction={onAction} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+const RequestActions = ({ onAction, actionText }: { actionText?: string; onAction: () => void }) => (
+  <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
+    <Box css={{ width: '50%' }}>
+      <Dialog.Close css={{ width: '100%' }}>
+        <Button variant="standard" outlined css={{ width: '100%' }}>
+          Decline
+        </Button>
+      </Dialog.Close>
+    </Box>
+    <Box css={{ width: '50%' }}>
+      <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+        {actionText}
+      </Button>
+    </Box>
+  </Flex>
+);

package/src/Prebuilt/components/{RoleChangeRequestModal.tsx → RoleChangeRequest/RoleChangeRequestModal.tsx}

@@ -7,13 +7,14 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { Flex, Text } from '../../..';
 // @ts-ignore: No implicit Any
-import { PreviewControls, PreviewTile } from './Preview/PreviewJoin';
-import { Box, Button, Dialog, Flex, Text } from '../..';
+import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
+import { RequestPrompt } from './RequestPrompt';
 // @ts-ignore: No implicit Any
-import { useMyMetadata } from './hooks/useMetadata';
+import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
-import { ROLE_CHANGE_DECLINED } from '../common/constants';
+import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
@@ -38,7 +39,14 @@ export const RoleChangeRequestModal = () => {
 
   const body = (
     <>
-      <Text css={{ fontWeight: 400, c: '$on_surface_medium', textAlign: 'center' }}>
+      <Text
+        variant="xs"
+        css={{
+          c: '$on_surface_medium',
+          textAlign: 'center',
+          '@md': { textAlign: 'left', borderBottom: '1px solid $border_bright', pb: '$4', px: '$8' },
+        }}
+      >
         Setup your audio and video before joining
       </Text>
       <Flex
@@ -48,20 +56,22 @@ export const RoleChangeRequestModal = () => {
           '@sm': { width: '100%' },
           flexDirection: 'column',
           mt: '$6',
+          '@md': { px: '$8' },
         }}
       >
         <PreviewTile name={name || ''} />
+
         <PreviewControls hideSettings={true} />
       </Flex>
     </>
   );
 
   return (
-    <RequestDialog
-      title={`You're invited to join the ${roleChangeRequest.role.name} role`}
+    <RequestPrompt
+      title="You're invited to join the stage"
       onOpenChange={async value => {
         if (!value) {
-          await hmsActions.rejectChangeRole(roleChangeRequest);
+          hmsActions.rejectChangeRole(roleChangeRequest);
           sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
           await hmsActions.cancelMidCallPreview();
           await hmsActions.lowerLocalPeerHand();
@@ -77,45 +87,3 @@ export const RoleChangeRequestModal = () => {
     />
   );
 };
-
-const RequestDialog = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = 'Accept',
-  onAction,
-}: {
-  open?: boolean;
-  onOpenChange: (value: boolean) => void;
-  title: string;
-  body: React.ReactNode;
-  actionText?: string;
-  onAction: () => void;
-}) => (
-  <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content css={{ p: '$10' }}>
-        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
-          <Text variant="h6">{title}</Text>
-        </Dialog.Title>
-        <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
-          <Box css={{ width: '50%' }}>
-            <Dialog.Close css={{ width: '100%' }}>
-              <Button variant="standard" outlined css={{ width: '100%' }}>
-                Cancel
-              </Button>
-            </Dialog.Close>
-          </Box>
-          <Box css={{ width: '50%' }}>
-            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
-              {actionText}
-            </Button>
-          </Box>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-);

package/src/Prebuilt/components/VideoTile.jsx

@@ -25,6 +25,7 @@ import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { getAttributeBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -72,21 +73,28 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+
+  const ref = useRef(null);
+  const calculatedHeight = ref.current?.clientHeight || '';
+  const calculatedWidth = ref.current?.clientWidth || '';
+
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
+
   const avatarSize = useMemo(() => {
-    if (!width || !height) {
+    if (!calculatedWidth || !calculatedHeight) {
       return undefined;
     }
-    if (width <= 150 || height <= 150) {
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
       return 'small';
-    } else if (width <= 300 || height <= 300) {
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
       return 'medium';
     }
     return 'large';
-  }, [width, height]);
+  }, [calculatedWidth, calculatedHeight]);
 
   return (
     <StyledVideoTile.Root
+      ref={ref}
       css={{
         width,
         height,
@@ -133,7 +141,7 @@ const Tile = ({
             isAudioMuted ? (
               <StyledVideoTile.AudioIndicator
                 data-testid="participant_audio_mute_icon"
-                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+                size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
               >
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
@@ -150,7 +158,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -167,8 +175,6 @@ const Tile = ({
   );
 };
 
-const metaStyles = { top: '$4', left: '$4', width: '$14', height: '$14' };
-
 const heightAnimation = value =>
   keyframes({
     '50%': {
@@ -218,7 +224,7 @@ export const AudioLevel = ({ trackId }) => {
   );
 };
 
-const PeerMetadata = ({ peerId }) => {
+const PeerMetadata = ({ peerId, height, width }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -226,12 +232,12 @@ const PeerMetadata = ({ peerId }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
           <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
           <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}

package/src/Prebuilt/components/conference.jsx

@@ -13,12 +13,12 @@ import { Footer } from './Footer/Footer';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
+import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
-import { RoleChangeRequestModal } from './RoleChangeRequestModal';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -31,12 +31,13 @@ export const useMyMetadata = () => {
       await hmsActions.lowerLocalPeerHand();
     } else {
       await hmsActions.raiseLocalPeerHand();
+      await update({ isBRBOn: false });
     }
   }, [isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
     const newValue = !metaData?.isBRBOn;
-    await update({ isBRBOn: !metaData?.isBRBOn });
+    await update({ isBRBOn: newValue });
     if (newValue) {
       await hmsActions.lowerLocalPeerHand();
     }

package/src/Prebuilt/layouts/HLSView.jsx

@@ -272,9 +272,10 @@ const HLSView = () => {
                   top: '40%',
                   left: '50%',
                   transform: 'translateY(-40%) translateX(-50%)',
-                  padding: '$4 $14',
+                  padding: '$8 14px $8 18px',
                   display: 'inline-flex',
-                  r: '$0',
+                  r: '50%',
+                  gap: '$1',
                   bg: '$primary_default',
                 }}
               >

package/src/Prebuilt/layouts/SidePane.tsx

@@ -64,7 +64,6 @@ const SidePane = ({
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
-          width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
           {...tileLayout}

package/src/VideoTile/StyledVideoTile.tsx

@@ -56,20 +56,9 @@ const Info = styled('div', {
 });
 
 const AttributeBox = styled('div', {
-  position: 'absolute',
-  color: '$on_primary_high',
-  w: '$12',
-  h: '$12',
-  bg: '$secondary_dim',
-  r: '$round',
-  ...flexCenter,
-});
-
-const AudioIndicator = styled('div', {
   position: 'absolute',
   top: '$4',
-  right: '$4',
-  color: '$on_primary_high',
+  color: '$on_secondary_high',
   bg: '$secondary_dim',
   borderRadius: '$round',
   width: '$14',
@@ -91,12 +80,19 @@ const AudioIndicator = styled('div', {
         height: '$13',
       },
     },
+    position: {
+      left: { left: '$4' },
+      right: { right: '$4' },
+    },
   },
   defaultVariants: {
     size: 'medium',
+    position: 'left',
   },
 });
 
+const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
+
 const FullScreenButton = styled('button', {
   width: '2.25rem',
   height: '2.25rem',
@@ -136,9 +132,9 @@ interface VideoTileType {
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
-  AudioIndicator: typeof AudioIndicator;
   AvatarContainer: typeof AvatarContainer;
   AttributeBox: typeof AttributeBox;
+  AudioIndicator: typeof AudioIndicator;
   FullScreenButton: typeof FullScreenButton;
 }
 
@@ -147,8 +143,8 @@ export const StyledVideoTile: VideoTileType = {
   Container,
   Overlay,
   Info,
-  AudioIndicator,
   AvatarContainer,
   AttributeBox,
+  AudioIndicator,
   FullScreenButton,
 };