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

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

@@ -1,11 +1,25 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Dialog, Text } from '../../../';
+import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
+import androidPermissions from '../../../assets/android-perm-0.png';
+import androidPermissionAlert from '../../../assets/android-perm-1.png';
+import iosPermissions from '../../../assets/ios-perm-0.png';
+import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
   const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
   const [deviceType, setDeviceType] = useState('');
   const [isSystemError, setIsSystemError] = useState(false);
+  const [showAndroidPrompt, setShowAndroidPrompt] = useState(true);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  useEffect(() => {
+    if (showAndroidPrompt && isAndroid && isMobile) {
+      setDeviceType('camera and microphone');
+    }
+  }, []);
+
   useEffect(() => {
     if (
       !notification ||
@@ -20,46 +34,114 @@ export function PermissionErrorModal() {
     const hasVideo = errorMessage.includes('video');
     const hasScreen = errorMessage.includes('screen');
     if (hasAudio && hasVideo) {
-      setDeviceType('Camera and Microphone');
+      setDeviceType('camera and microphone');
     } else if (hasAudio) {
-      setDeviceType('Microphone');
+      setDeviceType('microphone');
     } else if (hasVideo) {
-      setDeviceType('Camera');
+      setDeviceType('camera');
     } else if (hasScreen) {
-      setDeviceType('Screenshare');
+      setDeviceType('screen');
     }
     setIsSystemError(notification.data.code === 3011);
   }, [notification]);
+
   return deviceType ? (
-    <Dialog.Root
-      open
-      onOpenChange={value => {
-        if (!value) {
-          setDeviceType('');
-        }
-      }}
-    >
+    <Dialog.Root open={!!deviceType}>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content css={{ w: 'min(480px, 90%)' }}>
+        <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>
           <Dialog.Title
             css={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              borderBottom: '1px solid $borderDefault',
-              pb: '$8',
+              borderBottom: '1px solid $border_default',
             }}
           >
-            <Text css={{ fontWeight: '$semiBold' }}>{deviceType} permissions are blocked</Text>
-            <Dialog.DefaultClose data-testid="dialoge_cross_icon" css={{ alignSelf: 'start' }} />
+            {isMobile && isIOS ? <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} /> : null}
+
+            {/* Images for android */}
+            {isMobile && isAndroid ? (
+              showAndroidPrompt ? (
+                <img src={androidPermissions} style={{ maxWidth: '100%', maxHeight: '100%' }} />
+              ) : (
+                <img src={androidPermissionAlert} style={{ maxWidth: '100%', maxHeight: '100%' }} />
+              )
+            ) : null}
+
+            <Text variant="h6">
+              {showAndroidPrompt ? `Allow access to your ${deviceType}` : `We can't access your ${deviceType}`}
+            </Text>
           </Dialog.Title>
-          <Text variant="md" css={{ py: '$10' }}>
-            Access to {deviceType} is required.&nbsp;
-            {isSystemError
-              ? `Enable permissions for ${deviceType} from sytem settings`
-              : `Enable permissions for ${deviceType} from address bar or browser settings`}
+
+          <Text variant="sm" css={{ pt: '$4', pb: '$10', color: '$on_surface_medium' }}>
+            {/* IOS prompt text */}
+            {isMobile && isIOS
+              ? 'Enable permissions by reloading this page and clicking “Allow” on the pop-up, or change settings from the address bar.'
+              : null}
+
+            {/* Initial prompt for android devices */}
+            {isMobile && showAndroidPrompt && isAndroid
+              ? 'In order for others to see and hear you, your browser will request camera and microphone access.'
+              : null}
+
+            {/* Successive prompts for android devices */}
+            {isMobile && !showAndroidPrompt && isAndroid
+              ? 'To allow other users to see and hear you, click the blocked camera icon in your browser’s address bar.'
+              : null}
+
+            {/* Prompt for desktops */}
+            {!isMobile ? `Access to ${deviceType} is required. ` : null}
+
+            {isSystemError && !isMobile
+              ? `Enable permissions for ${deviceType}${deviceType === 'screen' ? 'share' : ''} from sytem settings`
+              : null}
+            {!isSystemError && !isMobile
+              ? `Enable permissions for ${deviceType}${
+                  deviceType === 'screen' ? 'share' : ''
+                } from address bar or browser settings.`
+              : null}
           </Text>
+
+          {/* CTA section */}
+          {isMobile && isIOS ? (
+            <>
+              <Button onClick={() => window.location.reload()} css={{ w: '100%', mb: '$6' }}>
+                Reload
+              </Button>
+              <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
+                Continue anyway
+              </Button>
+            </>
+          ) : null}
+
+          {isMobile && isAndroid ? (
+            showAndroidPrompt ? (
+              <Button
+                css={{ w: '100%' }}
+                onClick={() => {
+                  setDeviceType('');
+                  setShowAndroidPrompt(false);
+                }}
+              >
+                Continue
+              </Button>
+            ) : (
+              <>
+                <Button onClick={() => setDeviceType('')} css={{ w: '100%', mb: '$6' }}>
+                  I've allowed access
+                </Button>
+                <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
+                  Continue anyway
+                </Button>
+              </>
+            )
+          ) : null}
+
+          {!isMobile ? (
+            <Flex justify="end" css={{ w: '100%' }}>
+              <Button outlined variant="standard" onClick={() => setDeviceType('')}>
+                Dismiss
+              </Button>
+            </Flex>
+          ) : null}
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

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

@@ -58,7 +58,7 @@ export const ReconnectNotifications = () => {
             <div style={{ display: 'inline', margin: '0.25rem' }}>
               <Loading size={16} />
             </div>
-            <Text css={{ fontSize: '$space$8', color: '$textHighEmp' }}>
+            <Text css={{ fontSize: '$space$8', color: '$on_surface_high' }}>
               You lost your network connection. Trying to reconnect.
             </Text>
           </Flex>

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

@@ -5,12 +5,12 @@ function setPIPCanvasColors() {
   if (!CANVAS_FILL_COLOR) {
     CANVAS_FILL_COLOR = window
       .getComputedStyle(document.documentElement)
-      .getPropertyValue('--hms-ui-colors-surfaceLight');
+      .getPropertyValue('--hms-ui-colors-surface_bright');
   }
   if (!CANVAS_STROKE_COLOR) {
     CANVAS_STROKE_COLOR = window
       .getComputedStyle(document.documentElement)
-      .getPropertyValue('--hms-ui-colors-borderLight');
+      .getPropertyValue('--hms-ui-colors-border_bright');
   }
 }
 

package/src/Prebuilt/components/Playlist/Playlist.jsx

@@ -68,16 +68,16 @@ export const Playlist = ({ type }) => {
             maxHeight: 'unset',
             width: '$60',
             p: '$0',
-            bg: '$bgSecondary',
-            border: '1px solid $menuBg',
+            bg: '$surface_bright',
+            border: '1px solid $border_default',
           }}
         >
           <Flex
             align="center"
             css={{
               p: '$4 $8',
-              borderBottom: '1px solid $borderLight',
-              bg: '$menuBg',
+              borderBottom: '1px solid $border_bright',
+              bg: '$surface_default',
             }}
           >
             <Text variant="md" css={{ flex: '1 1 0' }}>

package/src/Prebuilt/components/Playlist/PlaylistControls.jsx

@@ -103,7 +103,7 @@ const VolumeControl = () => {
   const sliderVolume = active ? volume : audioTrackVolume;
 
   return (
-    <Flex align="center" css={{ color: '$white' }}>
+    <Flex align="center" css={{ color: '$on_primary_high' }}>
       <SpeakerIcon />
       <Slider
         css={{ mx: '$4', w: '$20' }}
@@ -134,8 +134,8 @@ export const AudioPlaylistControls = ({ onToggle }) => {
     <Box
       css={{
         p: '$8',
-        borderTop: '1px solid $borderLight',
-        bg: '$menuBg',
+        borderTop: '1px solid $border_bright',
+        bg: '$surface_default',
       }}
     >
       <Controls type={HMSPlaylistType.audio} />

package/src/Prebuilt/components/Playlist/PlaylistItem.jsx

@@ -27,16 +27,16 @@ export const PlaylistItem = React.memo(({ name, metadata, duration, selected, on
         p: '$8',
         '&:hover': {
           cursor: 'pointer',
-          bg: '$menuBg',
+          bg: '$surface_default',
         },
         '&:focus-visible': {
-          bg: '$menuBg',
+          bg: '$surface_default',
         },
       }}
       onClick={onClick}
     >
       <Flex align="center" justify="between" css={{ width: '100%', minHeight: 0 }}>
-        <Text variant="md" css={{ color: selected ? '$brandDefault' : '$textPrimary' }}>
+        <Text variant="md" css={{ color: selected ? '$primary_default' : '$on_primary_high' }}>
           {name}
         </Text>
         <Text variant="xs">{formatDuration(duration)}</Text>

package/src/Prebuilt/components/Playlist/VideoPlayer.jsx

@@ -34,16 +34,16 @@ export const VideoPlayer = React.memo(({ peerId }) => {
           justify="between"
           align="center"
           css={{
-            bg: '$menuBg',
+            bg: '$surface_default',
             p: '$2 $2 $2 $6',
             borderTopLeftRadius: '$1',
             borderTopRightRadius: '$1',
           }}
         >
-          <Text css={{ color: '$textPrimary' }}>{active.name}</Text>
+          <Text css={{ color: '$on_primary_high' }}>{active.name}</Text>
           <IconButton
             css={{
-              color: '$white',
+              color: '$on_primary_high',
             }}
             onClick={() => {
               hmsActions.videoPlaylist.stop();
@@ -80,7 +80,7 @@ export const VideoPlayer = React.memo(({ peerId }) => {
           <IconButton
             onClick={() => toggle()}
             css={{
-              color: '$white',
+              color: '$on_primary_high',
               height: 'max-content',
               alignSelf: 'center',
               cursor: 'pointer',

package/src/Prebuilt/components/PostLeave.jsx

@@ -26,18 +26,18 @@ const PostLeave = () => {
         justify="center"
         direction="column"
         align="center"
-        css={{ bg: '$mainBg', flex: '1 1 0', position: 'relative' }}
+        css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}
       >
         <Text variant="h2" css={{ fontWeight: '$semiBold' }}>
           👋
         </Text>
-        <Text variant="h4" css={{ color: '$textHighEmp', fontWeight: '$semiBold', mt: '$12' }}>
+        <Text variant="h4" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>
           You left the {getRoutePrefix() ? 'stream' : 'room'}
         </Text>
         <Text
           variant="body1"
           css={{
-            color: '$textMedEmp',
+            color: '$on_surface_medium',
             mt: '$8',
             fontWeight: '$regular',
             textAlign: 'center',
@@ -52,7 +52,7 @@ const PostLeave = () => {
           !
         </Text>
         <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>
-          <Text variant="body1" css={{ color: '$textMedEmp', fontWeight: '$regular' }}>
+          <Text variant="body1" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>
             Left by mistake?
           </Text>
           <Button

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
-import { Box, Flex, Loading } from '../../../';
+import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { Box, Flex } from '../../../';
 import SidePane from '../../layouts/SidePane';
+import FullPageProgress from '../FullPageProgress';
 import { Header } from '../Header';
 import PreviewJoin from './PreviewJoin';
 import { useAuthToken } from '../AppData/useUISettings';
@@ -18,6 +20,9 @@ const PreviewContainer = () => {
   const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
   const authToken = useAuthToken();
 
+  const roomState = useHMSStore(selectRoomState);
+  const isPreview = roomState === HMSRoomState.Preview;
+
   const onJoin = () => {
     let meetingURL = `/meeting/${urlRoomId}`;
     if (userRole) {
@@ -27,14 +32,20 @@ const PreviewContainer = () => {
   };
   return (
     <Flex direction="column" css={{ size: '100%' }}>
-      <Box css={{ h: '$18', '@md': { h: '$17', flexShrink: 0 } }} data-testid="header">
-        <Header />
-      </Box>
-      <Flex css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto' }} justify="center" align="center">
+      {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"
+        align="center"
+      >
         {authToken ? (
           <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole} onJoin={onJoin} />
         ) : (
-          <Loading size={100} />
+          <FullPageProgress />
         )}
         <SidePane
           css={{

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

@@ -0,0 +1,74 @@
+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';
+
+const PreviewForm = ({
+  name,
+  onChange,
+  onJoin,
+  enableJoin,
+  cannotPublishVideo = false,
+  cannotPublishAudio = false,
+}) => {
+  const formSubmit = e => {
+    e.preventDefault();
+  };
+  const mediaQueryLg = cssConfig.media.md;
+  const isMobile = useMedia(mediaQueryLg);
+  const { isHLSRunning } = useRecordingStreaming();
+  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;
+
+  return (
+    <Form
+      css={{ flexDirection: cannotPublishVideo ? 'column' : 'row', '@md': { flexDirection: 'row' } }}
+      onSubmit={formSubmit}
+    >
+      <Flex align="center" css={{ gap: '$8', w: '100%' }}>
+        <Input
+          required
+          id="name"
+          css={{ w: '100%', boxSizing: 'border-box' }}
+          value={name}
+          onChange={e => onChange(e.target.value.trimStart())}
+          placeholder="Enter name"
+          autoFocus
+          autoComplete="name"
+        />
+        {cannotPublishAudio && cannotPublishVideo && !isMobile ? <PreviewSettings /> : null}
+      </Flex>
+
+      {Object.keys(joinForm).length > 0 ? (
+        <Button type="submit" icon disabled={!name || !enableJoin} onClick={onJoin}>
+          {/* Conditions to show go live: The first broadcaster joins a streaming kit that is not live */}
+          {showGoLive ? <RadioIcon height={18} width={18} /> : null}
+          {showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label}
+        </Button>
+      ) : null}
+    </Form>
+  );
+};
+
+const Form = styled('form', {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$8',
+  mt: '$10',
+  mb: '$10',
+  '@md': {
+    gap: '$4',
+  },
+});
+
+export default PreviewForm;