@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

package/src/Prebuilt/components/Header/ConferencingHeader.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { Flex, VerticalDivider } from '../../../';
-import { Logo, SpeakerTag } from './HeaderComponents';
+import { Flex } from '../../../';
+import { SpeakerTag } from './HeaderComponents';
 import { ParticipantCount } from './ParticipantList';
 import { StreamActions } from './StreamActions';
 
-export const ConferencingHeader = ({ isPreview }) => {
+export const ConferencingHeader = () => {
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
       <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
-        <Logo />
-        <VerticalDivider css={{ ml: '$8' }} />
-        {!isPreview ? <SpeakerTag /> : null}
+        <SpeakerTag />
       </Flex>
 
       <Flex

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -3,13 +3,17 @@ import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
 import { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';
-import { useLogo } from '../AppData/useUISettings';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
   return dominantSpeaker && dominantSpeaker.name ? (
-    <Flex align="center" justify="center" css={{ flex: '1 1 0', color: '$textPrimary', '@md': { display: 'none' } }}>
+    <Flex
+      align="center"
+      justify="center"
+      css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+    >
       <VolumeOneIcon />
       <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
         {dominantSpeaker.name}
@@ -22,20 +26,21 @@ export const SpeakerTag = () => {
 
 const LogoImg = styled('img', {
   maxHeight: '$14',
-  p: '$2',
   w: 'auto',
+  objectFit: 'contain',
   '@md': {
     maxHeight: '$12',
   },
 });
 
 export const Logo = () => {
-  const logo = useLogo();
+  const roomLayout = useRoomLayout();
+  const logo = roomLayout?.logo?.url;
   const isMobile = useMedia(cssConfig.media.md);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   // Hide logo for now as there is not enough space
   if (isConnected && isMobile && isStreamingKit()) {
     return null;
   }
-  return logo ? <LogoImg src={logo} alt="Brand Logo" width={132} height={40} /> : null;
+  return logo ? <LogoImg src={logo} alt="Brand Logo" /> : null;
 };

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -19,7 +19,7 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
         asChild
         data-testid="participant_list_filter"
         css={{
-          border: '1px solid $textDisabled',
+          border: '1px solid $on_surface_low',
           r: '$0',
           p: '$2 $4',
         }}
@@ -29,7 +29,7 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
           <Text variant="sm" css={{ ...textEllipsis(80) }}>
             {selectionValue || 'Everyone'}
           </Text>
-          <Box css={{ ml: '$2', color: '$textDisabled' }}>
+          <Box css={{ ml: '$2', color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
           </Box>
         </Flex>

package/src/Prebuilt/components/Header/ParticipantList.jsx

@@ -258,7 +258,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId }) => {
               }}
             >
               <RemoveUserIcon />
-              <Text css={{ ml: '$4', color: '$error' }}>Remove Participant</Text>
+              <Text css={{ ml: '$4', color: '$alert_error_default' }}>Remove Participant</Text>
             </Dropdown.Item>
           )}
         </Dropdown.Content>
@@ -313,7 +313,7 @@ export const ParticipantSearch = ({ onSearch, placeholder }) => {
           left: '$4',
           top: '$2',
           transform: 'translateY(50%)',
-          color: '$textMedEmp',
+          color: '$on_surface_medium',
         }}
       >
         <SearchIcon />

package/src/Prebuilt/components/Header/StreamActions.jsx

@@ -1,9 +1,10 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
-  selectAppData,
+  HMSRoomState,
   selectIsConnectedToRoom,
   selectPermissions,
+  selectRoomState,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -15,7 +16,7 @@ import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
-import { useSidepaneState, useSidepaneToggle } from '../AppData/useSidepane';
+import { useSidepaneToggle } from '../AppData/useSidepane';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION, SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -26,7 +27,7 @@ export const LiveStatus = () => {
   }
   return (
     <Flex align="center">
-      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$error', mr: '$2' }} />
+      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />
       <Text>
         Live
         <Text as="span" css={{ '@md': { display: 'none' } }}>
@@ -61,7 +62,7 @@ export const RecordingStatus = () => {
     >
       <Box
         css={{
-          color: '$error',
+          color: '$alert_error_default',
         }}
       >
         <RecordIcon width={24} height={24} />
@@ -72,16 +73,6 @@ export const RecordingStatus = () => {
 
 const EndStream = () => {
   const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-  const sidePane = useSidepaneState();
-  useEffect(() => {
-    if (window && !sidePane) {
-      const userStartedStream = window.sessionStorage.getItem('userStartedStream');
-      if (userStartedStream === 'true') {
-        toggleStreaming();
-        window.sessionStorage.setItem('userStartedStream', '');
-      }
-    }
-  }, [sidePane, toggleStreaming]);
 
   return (
     <Button data-testid="end_stream" variant="danger" icon onClick={toggleStreaming}>
@@ -93,7 +84,6 @@ const EndStream = () => {
 
 const StartRecording = () => {
   const permissions = useHMSStore(selectPermissions);
-  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
   const [open, setOpen] = useState(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
@@ -115,7 +105,7 @@ const StartRecording = () => {
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content align="end" sideOffset={8} css={{ w: '$64' }}>
-            <Text variant="body" css={{ color: '$textMedEmp' }}>
+            <Text variant="body" css={{ color: '$on_surface_medium' }}>
               Are you sure you want to end the recording?
             </Text>
             <Button
@@ -175,7 +165,6 @@ const StartRecording = () => {
             try {
               setRecordingState(true);
               await hmsActions.startRTMPOrRecording({
-                meetingURL: recordingUrl,
                 resolution: getResolution(resolution),
                 record: true,
               });
@@ -208,12 +197,13 @@ export const StreamActions = () => {
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
   const { isStreamingOn } = useRecordingStreaming();
+  const roomState = useHMSStore(selectRoomState);
 
   return (
     <Flex align="center" css={{ gap: '$4' }}>
       <AdditionalRoomState />
       <Flex align="center" css={{ gap: '$4', '@md': { display: 'none' } }}>
-        <LiveStatus />
+        {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
         <RecordingStatus />
       </Flex>
       {isConnected && !isMobile ? <StartRecording /> : null}

package/src/Prebuilt/components/Header/StreamingHeader.jsx

@@ -4,11 +4,11 @@ import { config as cssConfig, Flex } from '../../../';
 import { EmojiReaction } from '../EmojiReaction';
 import { LeaveRoom } from '../LeaveRoom';
 import MetaActions from '../MetaActions';
-import { Logo, SpeakerTag } from './HeaderComponents';
+import { SpeakerTag } from './HeaderComponents';
 import { ParticipantCount } from './ParticipantList';
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
 
-export const StreamingHeader = ({ isPreview }) => {
+export const StreamingHeader = () => {
   const isMobile = useMedia(cssConfig.media.md);
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
@@ -19,15 +19,14 @@ export const StreamingHeader = ({ isPreview }) => {
           left: '$10',
         }}
       >
-        <Logo />
-        {isMobile && (
+        {isMobile ? (
           <Flex align="center" gap={2}>
             <LeaveRoom />
             <LiveStatus />
             <RecordingStatus />
           </Flex>
-        )}
-        {!isPreview ? <SpeakerTag /> : null}
+        ) : null}
+        <SpeakerTag />
       </Flex>
 
       <Flex

package/src/Prebuilt/components/HlsStatsOverlay.jsx

@@ -13,7 +13,7 @@ export function HlsStatsOverlay({ hlsStatsState, onClose }) {
         marginLeft: '$8',
         padding: '$8 $8 $10',
         zIndex: 10,
-        backgroundColor: 'rgba(55,59,66, 0.84)',
+        backgroundColor: '$surface_brighter',
         borderRadius: '$1',
       }}
       direction="column"
@@ -44,7 +44,7 @@ export function HlsStatsOverlay({ hlsStatsState, onClose }) {
       <HlsStatsRow label="distance from live">
         {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}
       </HlsStatsRow>
-      <HlsStatsRow label="Dropped frames">{`${hlsStatsState?.droppedFrames}`}</HlsStatsRow>
+      <HlsStatsRow label="Dropped frames">{hlsStatsState?.droppedFrames}</HlsStatsRow>
     </Flex>
   );
 }

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -0,0 +1,102 @@
+import { VerticalMenuIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Box, Flex } from '../../../Layout';
+import { styled } from '../../../Theme';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+
+const IconSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  borderTopRightRadius: 0,
+  borderColor: '$border_default',
+  borderBottomRightRadius: 0,
+  '@md': {
+    mx: 0,
+    borderTopRightRadius: '$1',
+    borderBottomRightRadius: '$1',
+  },
+});
+
+const OptionsSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  borderTopLeftRadius: 0,
+  borderColor: '$border_default',
+  borderBottomLeftRadius: 0,
+  borderLeftWidth: 0,
+  '&:not([disabled]):focus-visible': {
+    boxShadow: 'none',
+  },
+  '@md': {
+    display: 'none',
+  },
+});
+
+export const IconButtonWithOptions = ({
+  tooltipMessage = '',
+  icon,
+  options = [],
+  active,
+  onClick = () => {
+    return;
+  },
+  key = '',
+}) => {
+  const bgCss = { backgroundColor: active ? '$transparent' : '$secondary_dim' };
+  const iconCss = { color: active ? '$on_surface_high' : '$on_primary_high' };
+  return (
+    <Flex>
+      <IconSection css={bgCss} onClick={onClick} key={key}>
+        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
+          <Flex align="center" justify="center" css={iconCss}>
+            {icon}
+          </Flex>
+        </Tooltip>
+      </IconSection>
+      <Dropdown.Root>
+        <Dropdown.Trigger asChild>
+          <OptionsSection css={bgCss}>
+            <Tooltip title="View Options">
+              <Box css={iconCss}>
+                <VerticalMenuIcon />
+              </Box>
+            </Tooltip>
+          </OptionsSection>
+        </Dropdown.Trigger>
+        <Dropdown.Content
+          sideOffset={5}
+          align="center"
+          css={{
+            w: '$64',
+            maxHeight: '$96',
+            p: 0,
+            border: 'none',
+          }}
+        >
+          {options.map((option, index) => (
+            <Dropdown.Item
+              key={option.title}
+              css={{
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                backgroundColor: option.active ? '$surface_bright' : '$surface_dim',
+                borderTop: index === 0 ? 'none' : '1px solid $border_default',
+                '&:hover': {
+                  cursor: 'pointer',
+                },
+                p: '0',
+              }}
+            >
+              {option.content}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { MicIcon } from '@100mslive/react-icons';
+import { Box } from '../../../Layout';
+import { Text } from '../../../Text';
+import { IconButtonWithOptions } from './IconButtonWithOptions';
+
+export default {
+  title: 'Components/IconButtonWithOptions',
+  component: IconButtonWithOptions,
+  argTypes: {
+    tooltipMessage: { control: 'text' },
+    icon: { control: 'object' },
+    options: { control: 'object' },
+    active: { control: 'boolean' },
+    onClick: { control: 'function' },
+    key: { control: 'string' },
+  },
+} as Meta;
+
+const Template = args => (
+  <Box css={{ ml: '$20', bg: '$background_dim', p: '$8' }}>
+    <IconButtonWithOptions {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tooltipMessage: 'Click me!',
+  icon: <MicIcon height={32} width={32} />,
+  options: [
+    { title: 'Option 1', content: <Text>Some content</Text> },
+    { title: 'Option 2', content: <Text>Some more content</Text> },
+  ],
+  active: true,
+  onClick: () => {
+    return;
+  },
+  key: '',
+};

package/src/Prebuilt/components/LeaveRoom.jsx

@@ -89,7 +89,7 @@ export const LeaveRoom = () => {
               asChild
               css={{
                 '&[data-state="open"]': {
-                  bg: '$errorDark',
+                  bg: '$alert_error_dim',
                 },
               }}
             >
@@ -106,27 +106,27 @@ export const LeaveRoom = () => {
                 data-testid="end_room_btn"
               >
                 <Flex gap={4}>
-                  <Box css={{ color: '$error' }}>
+                  <Box css={{ color: '$alert_error_default' }}>
                     <AlertTriangleIcon />
                   </Box>
                   <Flex direction="column" align="start">
-                    <Text variant="lg" css={{ c: '$error' }}>
+                    <Text variant="lg" css={{ c: '$alert_error_default' }}>
                       End Room for All
                     </Text>
-                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
                       Warning: You can’t undo this action
                     </Text>
                   </Flex>
                 </Flex>
               </Dropdown.Item>
-              <Dropdown.Item css={{ bg: '$surfaceDefault' }} onClick={leaveRoom} data-testid="just_leave_btn">
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid="just_leave_btn">
                 <Flex gap={4}>
                   <Box>
                     <ExitIcon />
                   </Box>
                   <Flex direction="column" align="start">
                     <Text variant="lg">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>
-                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                    <Text variant="sm" css={{ c: '$on_surface_medium', mt: '$2' }}>
                       You can always rejoin later
                     </Text>
                   </Flex>
@@ -174,16 +174,16 @@ export const LeaveRoom = () => {
 };
 
 const LeaveIconButton = styled(IconButton, {
-  color: '$white',
+  color: '$on_primary_high',
   h: '$14',
   px: '$8',
   r: '$1',
-  bg: '$error',
+  bg: '$alert_error_default',
   '&:not([disabled]):hover': {
-    bg: '$errorTint',
+    bg: '$alert_error_default',
   },
   '&:not([disabled]):active': {
-    bg: '$errorTint',
+    bg: '$alert_error_default',
   },
   '@md': {
     px: '$4',
@@ -192,7 +192,7 @@ const LeaveIconButton = styled(IconButton, {
 });
 
 const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $errorDark',
+  borderLeft: '1px solid $alert_error_dim',
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0,
   px: '$3',

package/src/Prebuilt/components/MetaActions.jsx

@@ -25,14 +25,14 @@ const MetaActions = ({ isMobile = false, compact = false }) => {
           <IconButton
             onClick={toggleHandRaise}
             active={!isHandRaised}
-            data-testid={`${isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}`}
+            data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}
           >
             <HandIcon />
           </IconButton>
         </Tooltip>
       )}
       {isBRBEnabled && (
-        <Tooltip title={`${isBRBOn ? `I'm back` : `I'll be right back`}`}>
+        <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>
           <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
             <BrbIcon />
           </IconButton>

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

@@ -121,7 +121,7 @@ export const BulkRoleChangeModal = ({ onOpenChange }) => {
         </DialogRow>
         <DialogRow>
           {errorMessage && (
-            <Flex gap={2} css={{ c: '$error', w: '70%', ml: 'auto' }}>
+            <Flex gap={2} css={{ c: '$alert_error_default', w: '70%', ml: 'auto' }}>
               <AlertTriangleIcon />
               <Text css={{ c: 'inherit' }}>{errorMessage}</Text>
             </Flex>
@@ -129,7 +129,7 @@ export const BulkRoleChangeModal = ({ onOpenChange }) => {
         </DialogRow>
         <DialogRow justify="end">
           <Button variant="primary" onClick={changeBulkRole} disabled={!(selectedRole && selectedBulkRole.length > 0)}>
-            {isSubmiting && <Loading css={{ color: '$textSecondary' }} />}
+            {isSubmiting && <Loading css={{ color: '$on_primary_medium' }} />}
             Apply
           </Button>
         </DialogRow>

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

@@ -43,7 +43,7 @@ export const ChangeSelfRole = ({ onClick }) => {
         </Text>
         <ArrowRightIcon />
       </Dropdown.TriggerItem>
-      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ '@md': { w: '$64' } }}>
+      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ py: '$0', '@md': { w: '$64' } }}>
         {availableSelfChangeRoles.map(role => (
           <Dropdown.Item
             key={role}

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

@@ -99,6 +99,7 @@ export const MoreSettings = () => {
           sideOffset={5}
           align="center"
           css={{
+            py: '$0',
             maxHeight: '$96',
             '@md': { w: '$64' },
             "div[role='separator']:first-child": {

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

@@ -0,0 +1,69 @@
+import React, { useCallback, useState } from 'react';
+import { selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { Button } from '../../../Button';
+import { Flex } from '../../../Layout';
+import { Dialog } from '../../../Modal';
+import { Text } from '../../../Text';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA } from '../../common/constants';
+
+export function HLSFailureModal() {
+  const { hlsError } = useHMSStore(selectHLSState).error || false;
+  const [openModal, setOpenModal] = useState(!!hlsError);
+  const hmsActions = useHMSActions();
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const startHLS = useCallback(async () => {
+    try {
+      if (isHLSStarted) {
+        return;
+      }
+      setHLSStarted(true);
+      await hmsActions.startHLSStreaming({});
+    } catch (error) {
+      if (error.message.includes('invalid input')) {
+        await startHLS();
+        return;
+      }
+      setHLSStarted(false);
+    }
+  }, [hmsActions, isHLSStarted, setHLSStarted]);
+
+  return hlsError ? (
+    <Dialog.Root
+      open={openModal}
+      onOpenChange={value => {
+        if (!value) {
+          setOpenModal(false);
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
+          <Dialog.Title
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              borderBottom: '1px solid $border_default',
+              mt: '$4',
+            }}
+          >
+            <Text variant="h6" css={{ fontWeight: '$semiBold' }}>
+              Failed to Go Live
+            </Text>
+          </Dialog.Title>
+          <Text variant="sm" css={{ mb: '$10', color: '$on_surface_medium' }}>
+            Something went wrong and your live broadcast failed. Please try again.
+          </Text>
+          <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
+            <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setOpenModal(false)}>
+              Dismiss
+            </Button>
+            <Button css={{ w: '100%' }}>Go Live</Button>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ) : null;
+}

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

@@ -59,8 +59,6 @@ export function Notifications() {
               inlineAction: true,
               action: (
                 <Button
-                  as="div"
-                  variant="primary"
                   onClick={() => {
                     ToastManager.removeToast(toastId);
                     window.location.reload();
@@ -81,7 +79,7 @@ export function Notifications() {
           }, 2000);
           return;
         }
-        // Autoplay error or user denied screen share(cancelled browser pop-up)
+        // Autoplay error or user denied screen share (cancelled browser pop-up)
         if (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {
           return;
         }