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

package/src/Prebuilt/components/Streaming/HLSStreaming.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { selectAppData, selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import {
   EndStreamIcon,
   EyeOpenIcon,
@@ -14,7 +14,6 @@ import { Box, Button, Flex, Loading, Text } from '../../../';
 import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { useFilteredRoles } from '../../common/hooks';
-import { getDefaultMeetingUrl } from '../../common/utils';
 import { APP_DATA } from '../../common/constants';
 
 const getCardData = (roleName, roomId) => {
@@ -57,19 +56,19 @@ const Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
     <Box
       key={title}
       css={{
-        backgroundColor: '$surfaceLight',
+        backgroundColor: '$surface_bright',
         padding: '$10',
         order,
         borderRadius: '$2',
       }}
     >
-      <Flex align="center" gap="2" css={{ color: '$primaryLight' }}>
+      <Flex align="center" gap="2" css={{ color: '$primary_bright' }}>
         {icon}
         <Text variant="h6" css={{ fontWeight: '$semiBold' }}>
           {title}
         </Text>
       </Flex>
-      <Text variant="sm" css={{ color: '$textMedEmp', mt: '$6' }}>
+      <Text variant="sm" css={{ color: '$on_surface_medium', mt: '$6' }}>
         {content}
       </Text>
       <Button
@@ -128,7 +127,6 @@ const StartHLS = () => {
   const [record, setRecord] = useState(false);
   const [error, setError] = useState(false);
   const hmsActions = useHMSActions();
-  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback(
     async variants => {
@@ -143,15 +141,11 @@ const StartHLS = () => {
           recording: { hlsVod: record, singleFilePerLayer: record },
         });
       } catch (error) {
-        if (error.message.includes('invalid input')) {
-          await startHLS([{ meetingURL: recordingUrl || getDefaultMeetingUrl() }]);
-          return;
-        }
         setHLSStarted(false);
         setError(error.message);
       }
     },
-    [hmsActions, record, isHLSStarted, setHLSStarted, recordingUrl],
+    [hmsActions, record, isHLSStarted, setHLSStarted],
   );
 
   return (
@@ -174,7 +168,7 @@ const StartHLS = () => {
         <Text>
           <InfoIcon width={16} height={16} />
         </Text>
-        <Text variant="tiny" color="$textMedEmp" css={{ mx: '$8' }}>
+        <Text variant="tiny" color="$on_surface_medium" css={{ mx: '$8' }}>
           You cannot start recording once the stream starts, you will have to stop the stream to enable recording.
         </Text>
       </Flex>

package/src/Prebuilt/components/Streaming/RTMPStreaming.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { selectAppData, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { useHMSActions, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from '@100mslive/react-icons';
 import { Accordion, Box, Button, Flex, Input, Label, Loading, Text } from '../../../';
 import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';
@@ -37,7 +37,6 @@ const StartRTMP = () => {
         ],
   );
   const hmsActions = useHMSActions();
-  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
   const [error, setError] = useState(false);
   const [record, setRecord] = useState(false);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
@@ -61,7 +60,7 @@ const StartRTMP = () => {
                   value={rtmp.id}
                   key={rtmp.id}
                   css={{
-                    border: '2px solid $surfaceLight !important',
+                    border: '2px solid $surface_bright !important',
                     r: '$1',
                     my: '$4',
                   }}
@@ -131,7 +130,6 @@ const StartRTMP = () => {
               const urls = hasRTMPURL ? rtmpStreams.map(value => `${value.rtmpURL}/${value.streamKey}`) : [];
               await hmsActions.startRTMPOrRecording({
                 rtmpURLs: urls,
-                meetingURL: recordingUrl,
                 resolution: getResolution(resolution),
                 record: record,
               });
@@ -201,7 +199,7 @@ const ActionIcon = ({ icon: Icon, onClick }) => {
 
 const FormLabel = ({ id, children }) => {
   return (
-    <Label htmlFor={id} css={{ color: '$textHighEmp', my: '$4', fontSize: '$sm' }}>
+    <Label htmlFor={id} css={{ color: '$on_surface_high', my: '$4', fontSize: '$sm' }}>
       {children}
     </Label>
   );
@@ -261,7 +259,7 @@ const RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
 
 const Asterik = () => {
   return (
-    <Text variant="sm" as="span" css={{ color: '$error', mx: '$2' }}>
+    <Text variant="sm" as="span" css={{ color: '$alert_error_default', mx: '$2' }}>
       *
     </Text>
   );

package/src/Prebuilt/components/Streaming/StreamingLanding.jsx

@@ -4,9 +4,9 @@ import { ColoredHandIcon, CrossIcon, GoLiveIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import IconButton from '../../IconButton';
+import RTMPIcon from '../../images/rtmp.png';
 import { StreamCard } from './Common';
 import { HLSStreaming } from './HLSStreaming';
-import { RTMPIcon } from './RTMPIcon';
 import { RTMPStreaming } from './RTMPStreaming';
 import { useSidepaneToggle } from '../AppData/useSidepane';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -30,7 +30,7 @@ export const StreamingLanding = () => {
           css={{
             alignSelf: 'center',
             p: '$4',
-            bg: '$surfaceLight',
+            bg: '$surface_bright',
             r: '$round',
           }}
         >
@@ -44,7 +44,7 @@ export const StreamingLanding = () => {
           <CrossIcon />
         </IconButton>
       </Flex>
-      <Text variant="tiny" color="$textMedEmp">
+      <Text variant="tiny" color="$on_surface_medium">
         Start Streaming
       </Text>
       {permissions?.hlsStreaming && (
@@ -66,7 +66,7 @@ export const StreamingLanding = () => {
           onClick={() => {
             setShowRTMP(true);
           }}
-          Icon={RTMPIcon}
+          imgSrc={RTMPIcon}
         />
       )}
       {showHLS && <HLSStreaming onBack={() => setShowHLS(false)} />}

package/src/Prebuilt/components/TileMenu.jsx

@@ -76,7 +76,7 @@ const PinActions = ({ audioTrackID, videoTrackID }) => {
         onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
       >
         <PinIcon />
-        <span>{`${isTilePinned ? 'Unpin' : 'Pin'}`} Tile for myself</span>
+        <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
       </StyledMenuTile.ItemButton>
     </>
   );
@@ -142,7 +142,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false })
                 data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
               >
                 {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
-                <span>{`${isVideoEnabled ? 'Mute' : 'Request Unmute'}`}</span>
+                <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
               </StyledMenuTile.ItemButton>
             ) : null}
             {toggleAudio ? (
@@ -151,7 +151,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false })
                 data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
               >
                 {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
-                <span>{`${isAudioEnabled ? 'Mute' : 'Request Unmute'}`}</span>
+                <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
               </StyledMenuTile.ItemButton>
             ) : null}
             {audioTrackID ? (
@@ -211,7 +211,7 @@ const SimulcastLayers = ({ trackId }) => {
   const currentLayer = track.layerDefinitions.find(layer => layer.layer === track.layer);
   return (
     <Fragment>
-      <StyledMenuTile.ItemButton css={{ color: '$textMedEmp', cursor: 'default' }}>
+      <StyledMenuTile.ItemButton css={{ color: '$on_surface_medium', cursor: 'default' }}>
         Select maximum resolution
       </StyledMenuTile.ItemButton>
       {track.layerDefinitions.map(layer => {
@@ -239,14 +239,14 @@ const SimulcastLayers = ({ trackId }) => {
             >
               {layer.layer}
             </Text>
-            <Text as="span" variant="xs" css={{ color: '$textMedEmp' }}>
+            <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
               {layer.resolution.width}x{layer.resolution.height}
             </Text>
           </StyledMenuTile.ItemButton>
         );
       })}
       <StyledMenuTile.ItemButton>
-        <Text as="span" variant="xs" css={{ color: '$textMedEmp' }}>
+        <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
           Currently streaming:
           <Text
             as="span"
@@ -254,7 +254,7 @@ const SimulcastLayers = ({ trackId }) => {
             css={{
               fontWeight: '$semiBold',
               textTransform: 'capitalize',
-              color: '$textMedEmp',
+              color: '$on_surface_medium',
               ml: '$2',
             }}
           >

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -1,31 +1,23 @@
 import React from 'react';
-import { selectAppData } from '@100mslive/react-sdk';
 import { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
-import { hmsActions, hmsStore } from '../../hms';
-import { APP_DATA, SIDE_PANE_OPTIONS } from '../../common/constants';
-
-const isChatOpen = () => {
-  return hmsStore.getState(selectAppData(APP_DATA.sidePane)) === SIDE_PANE_OPTIONS.CHAT;
-};
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 const ChatAction = React.forwardRef((_, ref) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+
+  if (isChatOpen) {
+    return null;
+  }
+
   return (
-    <Button
-      outlined
-      as="div"
-      variant="standard"
-      css={{ w: 'max-content' }}
-      onClick={() => {
-        hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT);
-      }}
-      ref={ref}
-    >
+    <Button outlined as="div" variant="standard" css={{ w: 'max-content' }} onClick={toggleChat} ref={ref}>
       Open Chat
     </Button>
   );
 });
-
 export const ToastConfig = {
   PEER_LIST: {
     single: function (notification) {
@@ -98,14 +90,14 @@ export const ToastConfig = {
       return {
         title: `New message from ${notification.data?.senderName}`,
         icon: <ChatIcon />,
-        action: isChatOpen() ? null : <ChatAction />,
+        action: <ChatAction />,
       };
     },
     multiple: notifications => {
       return {
         title: `${notifications.length} new messages`,
         icon: <ChatIcon />,
-        action: isChatOpen() ? null : <ChatAction />,
+        action: <ChatAction />,
       };
     },
   },

package/src/Prebuilt/components/conference.jsx

@@ -9,6 +9,7 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
+import { HLSFailureModal } from './Notifications/HLSFailureModal';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ConferenceMainView } from '../layouts/mainView';
@@ -16,7 +17,7 @@ import { Footer } from './Footer';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { RoleChangeRequestModal } from './RoleChangeRequestModal';
-import { useAuthToken, useIsHeadless } from './AppData/useUISettings';
+import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
 import { useNavigation } from './hooks/useNavigation';
 import { useSkipPreview } from './hooks/useSkipPreview';
 import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
@@ -38,6 +39,7 @@ const Conference = () => {
   const footerRef = useRef();
   const dropdownListRef = useRef();
   const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
+  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0) {
@@ -105,7 +107,11 @@ const Conference = () => {
   }, [isHeadless, hmsActions]);
 
   if (!isConnectedToRoom) {
-    return <FullPageProgress />;
+    return <FullPageProgress loadingText="Joining..." />;
+  }
+
+  if (isHLSStarted) {
+    return <FullPageProgress loadingText="Starting live stream..." />;
   }
 
   return (
@@ -157,6 +163,7 @@ const Conference = () => {
         </Box>
       )}
       <RoleChangeRequestModal />
+      <HLSFailureModal />
     </Flex>
   );
 };

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

@@ -1,6 +1,3 @@
-import { useTheme } from '../../../';
-
 export const useDropdownSelection = () => {
-  const { themeType } = useTheme();
-  return themeType === 'dark' ? '$primaryDark' : '$grayLight';
+  return '$primary_dim';
 };

package/src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx

@@ -9,7 +9,7 @@ export const PdfErrorView = ({ isPDFUrlValid }) => {
       <DialogRow
         css={{
           mt: '-$8',
-          color: '$error',
+          color: '$alert_error_default',
           justifyContent: 'start',
         }}
       >
@@ -18,7 +18,7 @@ export const PdfErrorView = ({ isPDFUrlValid }) => {
           variant="caption"
           css={{
             pl: '$1',
-            color: '$error',
+            color: '$alert_error_default',
           }}
         >
           Please enter a valid PDF URL

package/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -47,7 +47,7 @@ export function PDFFileOptions({ onOpenChange }) {
               <Text
                 variant="tiny"
                 css={{
-                  color: '$textDisabled',
+                  color: '$on_surface_low',
                 }}
               >
                 OR

package/src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx

@@ -20,7 +20,7 @@ export const PDFHeader = () => {
         <Text
           variant="sm"
           css={{
-            c: '$textMedEmp',
+            c: '$on_surface_medium',
           }}
         >
           Choose PDF you want to annotate and share

package/src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx

@@ -9,10 +9,10 @@ export const PDFInfo = () => {
       css={{
         px: '$8',
         py: '$3',
-        bg: '$surfaceLight',
+        bg: '$surface_bright',
         r: '$1',
         outline: 'none',
-        border: '1px solid $borderLight',
+        border: '1px solid $border_bright',
         minHeight: '$11',
       }}
     >

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -89,9 +89,9 @@ export function ShareScreenOptions() {
                   p: '$6',
                   display: 'flex',
                   justifyContent: 'center',
-                  border: '1px solid $grayDefault',
+                  border: '1px solid $border_bright',
                   r: '$2',
-                  bg: '$surfaceLighter',
+                  bg: '$surface_brighter',
                   pb: '0',
                 }}
               >
@@ -109,7 +109,7 @@ export function ShareScreenOptions() {
                 <Text
                   variant="caption"
                   css={{
-                    c: '$textDisabled',
+                    c: '$on_surface_low',
                     textAlign: 'center',
                   }}
                 >
@@ -133,9 +133,9 @@ export function ShareScreenOptions() {
                   p: '$6',
                   display: 'flex',
                   justifyContent: 'center',
-                  border: '$grayDefault 1px solid',
+                  border: '$border_bright 1px solid',
                   r: '$2',
-                  bg: '$surfaceLight',
+                  bg: '$surface_bright',
                   pb: '0',
                 }}
               >
@@ -149,33 +149,25 @@ export function ShareScreenOptions() {
                 />
                 <Flex
                   direction="row"
+                  align="center"
                   css={{
                     position: 'absolute',
                     top: '29%',
                     left: '54%',
                     padding: '$2 $4',
                     r: '$2',
-                    bg: '$primaryLight',
+                    bg: '$primary_bright',
                     zIndex: '2',
+                    gap: '$2',
                   }}
                 >
-                  <IconButton
-                    css={{
-                      w: '$10',
-                      h: '$8',
-                      '&:hover': {
-                        bg: '$transparent !important',
-                        border: 'none',
-                      },
-                    }}
-                  >
-                    <StarIcon />
-                  </IconButton>
+                  <StarIcon height={14} width={14} />
+
                   <Text
                     variant="xs"
                     css={{
                       fontWeight: '$semiBold',
-                      c: '$white',
+                      c: '$on_primary_high',
                       pr: '$4',
                     }}
                   >
@@ -188,7 +180,7 @@ export function ShareScreenOptions() {
                 <Text
                   variant="caption"
                   css={{
-                    c: '$textDisabled',
+                    c: '$on_surface_low',
                     textAlign: 'center',
                   }}
                 >

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -32,17 +32,17 @@ export const UploadedFile = ({
             <DialogRow
               css={{
                 fontFamily: '$sans',
-                bg: '$surfaceLight',
+                bg: '$surface_bright',
                 r: '$1',
                 outline: 'none',
-                border: '1px solid $borderLight',
+                border: '1px solid $border_bright',
                 p: '$4 $6',
                 minHeight: '$11',
-                c: '$textPrimary',
+                c: '$on_primary_high',
                 fs: '$md',
                 w: '100%',
                 '&:focus': {
-                  boxShadow: '0 0 0 1px $colors$borderAccent',
+                  boxShadow: '0 0 0 1px $colors$primary_default',
                   border: '1px solid $transparent',
                 },
                 mb: 0,

package/src/Prebuilt/images/Logo.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="42" viewBox="0 0 32 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14.528" y="5.91187" width="2.944" height="30.176" fill="#538DFF"/>
+<rect x="22.2692" y="7.19727" width="2.944" height="30.176" transform="rotate(30 22.2692 7.19727)" fill="#538DFF"/>
+<rect x="31.088" y="19.5278" width="2.944" height="30.176" transform="rotate(90 31.088 19.5278)" fill="#538DFF"/>
+<rect x="29.8026" y="27.269" width="2.944" height="30.176" transform="rotate(120 29.8026 27.269)" fill="#538DFF"/>
+<rect x="24.8188" y="33.3304" width="2.944" height="30.176" transform="rotate(150 24.8188 33.3304)" fill="#538DFF"/>
+<rect x="28.3306" y="12.181" width="2.944" height="30.176" transform="rotate(60 28.3306 12.181)" fill="#538DFF"/>
+</svg>

package/src/Prebuilt/index.d.ts

@@ -1,15 +1,20 @@
 import React from 'react';
+import type { Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 
 export declare const HMSPrebuilt: React.FC<{
   roomCode: string;
   logo?: {
     url: string;
   };
+  themes?: Theme[];
+  typography?: Typography;
+  screens?: Screens;
   options?: {
-    endPoints?: {
+    endpoints?: {
       tokenByRoomIdRole?: string;
       tokenByRoomCode?: string;
       init?: string;
+      roomLayout?: string;
     };
   };
 }>;

package/src/Prebuilt/layouts/HLSView.jsx

@@ -243,7 +243,7 @@ const HLSView = () => {
                             css={{
                               height: '$4',
                               width: '$4',
-                              background: isVideoLive ? '$error' : '$white',
+                              background: isVideoLive ? '$alert_error_default' : '$on_primary_high',
                               r: '$1',
                             }}
                           />

package/src/Prebuilt/layouts/InsetView.jsx

@@ -210,9 +210,6 @@ const InsetTile = ({ isMobile, roleMap, isLandscape }) => {
             size: '100%',
             padding: 0,
           }}
-          containerCSS={{
-            bg: '$surfaceDefault',
-          }}
           width={width}
           height={height}
         />

package/src/Prebuilt/layouts/NonPublisherView.jsx

@@ -12,7 +12,7 @@ export const NonPublisherView = React.memo(({ message }) => {
         maxWidth: '96%',
         h: '100%',
         m: 'auto',
-        background: '$surfaceDefault',
+        background: '$surface_default',
         borderRadius: '$3',
       }}
       data-testid="non_publisher_view"
@@ -41,7 +41,7 @@ export const NonPublisherView = React.memo(({ message }) => {
           <Text color="white" variant="h6" css={{ '@md': { fontSize: '$md' } }}>
             {message}
           </Text>
-          <Text color="$textMedEmp" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
+          <Text color="$on_surface_medium" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
             Please go to dashboard and reconfigure role settings or contact the role admin.
           </Text>
         </Flex>

package/src/Prebuilt/layouts/SidePane.jsx

@@ -26,7 +26,7 @@ const SidePane = ({ css = {} }) => {
         w: '$100',
         h: '100%',
         p: '$10',
-        bg: '$surfaceDefault',
+        bg: '$surface_default',
         r: '$1',
         top: 0,
         right: '$10',

package/src/Prebuilt/layouts/WaitingView.jsx

@@ -12,7 +12,7 @@ export const WaitingView = React.memo(() => {
         maxWidth: '96%',
         h: '100%',
         m: 'auto',
-        background: '$surfaceDefault',
+        background: '$surface_default',
         borderRadius: '$3',
       }}
       data-testid="waiting_view"
@@ -41,7 +41,7 @@ export const WaitingView = React.memo(() => {
           <Text color="white" variant="h6" css={{ '@md': { fontSize: '$md' } }}>
             Please wait
           </Text>
-          <Text color="$textMedEmp" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
+          <Text color="$on_surface_medium" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
             Sit back and relax till others let you join.
           </Text>
         </Flex>