refactor app

example.env

@@ -1,2 +1,3 @@
 REACT_APP_TOKEN_ENDPOINT=
-REACT_APP_ROOM_ID=
+REACT_APP_ROOM_ID=
+REACT_APP_LOGROCKET_ID=

package.json

@@ -3,14 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@100mslive/hms-video": "^0.0.148",
-    "@100mslive/hms-video-react": "^0.3.32",
+    "@100mslive/react-sdk": "^0.1.1",
+    "@100mslive/react-ui": "^0.1.1",
     "@craco/craco": "^6.2.0",
     "boring-avatars": "^1.5.8",
+    "iconv-lite": "^0.6.3",
+    "logrocket": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "iconv-lite": "^0.6.3"
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "craco start",
@@ -41,7 +42,7 @@
     "postcss": "^7",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
-    "resolutions": {
+  "resolutions": {
     "iconv-lite": "^0.6.3"
   }
 }

src/App.jsx

@@ -2,7 +2,7 @@ import {
   HMSRoomProvider,
   useHMSStore,
   selectIsConnectedToRoom,
-} from '@100mslive/hms-video-react';
+} from '@100mslive/react-sdk';
 import Join from './components/Join';
 import Room from './components/Room';
 import './App.css';

src/components/AutoPlayModal.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useAutoplayError } from "@100mslive/react-sdk";
+import { Dialog, Text, Button } from "@100mslive/react-ui";
+import { DialogContent, DialogRow } from "./Modal";
+
+/**
+ * Detects if AutoPlay is blocked
+ * Eg: on iOS Safari
+ */
+export function AutoplayBlockedModal() {
+  const { error, resetError, unblockAudio } = useAutoplayError();
+  return (
+    <Dialog.Root
+      open={!!error}
+      onOpenChange={value => {
+        if (!value) {
+          unblockAudio();
+        }
+        resetError();
+      }}
+    >
+      <DialogContent title="Autoplay Error" closeable={false}>
+        <DialogRow>
+          <Text variant="md">
+            The browser wants us to get a confirmation for playing the Audio.
+            Please allow audio to proceed.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={() => {
+              unblockAudio();
+              resetError();
+            }}
+          >
+            Allow Audio
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+} 

src/components/Chat/ChatContainer.jsx

@@ -2,7 +2,7 @@ import {
   useHMSStore,
   selectHMSMessages,
   useHMSActions,
-} from '@100mslive/hms-video-react';
+} from '@100mslive/react-sdk';
 import React from 'react';
 import ChatFeed from './ChatFeed';
 import ChatInput from './ChatInput';

src/components/Footer/Footer.jsx

@@ -6,7 +6,7 @@ import {
   useHMSActions,
   useHMSStore,
   selectIsLocalAudioEnabled,
-} from '@100mslive/hms-video-react';
+} from '@100mslive/react-sdk';
 
 const Footer = ({ count }) => {
   const hmsActions = useHMSActions();

src/components/Join.jsx

@@ -4,7 +4,7 @@ import JoinButton from './Join/JoinButton';
 import Avatar from 'boring-avatars';
 import Select from './Join/Select';
 import getToken from '../utils/getToken';
-import { useHMSActions } from '@100mslive/hms-video-react';
+import { useHMSActions } from '@100mslive/react-sdk';
 
 const Join = () => {
   const hmsActions = useHMSActions();

src/components/Modal.jsx

@@ -0,0 +1,76 @@
+
+import React from "react";
+import {
+  Dialog,
+  Flex,
+  HorizontalDivider,
+  Text,
+  Box,
+} from "@100mslive/react-ui";
+
+export const DialogContent = ({
+  Icon,
+  title,
+  closeable = true,
+  children,
+  css,
+  iconCSS = {},
+  ...props
+}) => {
+  return (
+    <>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ width: "min(600px, 100%)", ...css }} {...props}>
+        <Dialog.Title>
+          <Flex justify="between">
+            <Flex align="center" css={{ mb: "$1" }}>
+              {Icon ? (
+                <Box css={{ mr: "$2", color: "$textPrimary", ...iconCSS }}>
+                  <Icon />
+                </Box>
+              ) : null}
+              <Text variant="h6" inline>
+                {title}
+              </Text>
+            </Flex>
+            {closeable && (
+              <Dialog.DefaultClose data-testid="dialoge_cross_icon" />
+            )}
+          </Flex>
+        </Dialog.Title>
+        <HorizontalDivider css={{ mt: "0.8rem" }} />
+        <Box>{children}</Box>
+      </Dialog.Content>
+    </>
+  );
+};
+
+/**
+ * a row of items which breaks into column on small screen. For e.g. title on left and options to select
+ * from on right for select component.
+ */
+ export const DialogRow = ({
+  children,
+  breakSm = false,
+  css,
+  justify = "between",
+}) => {
+  let finalCSS = {
+    margin: "$10 0",
+    w: "100%",
+  };
+  if (breakSm) {
+    finalCSS["@sm"] = {
+      flexDirection: "column",
+      alignItems: "flex-start",
+    };
+  }
+  if (css) {
+    finalCSS = Object.assign(finalCSS, css);
+  }
+  return (
+    <Flex align="center" justify={justify} css={finalCSS}>
+      {children}
+    </Flex>
+  );
+};

src/components/Roles/Roles.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MenuIcon from '../../icons/MenuIcon';
-import { useHMSActions } from '@100mslive/hms-video-react';
+import { useHMSActions } from '@100mslive/react-sdk';
 
 const Permission = ({ audioTrack, id }) => {
   const hmsActions = useHMSActions();

src/components/Room.jsx

@@ -1,7 +1,9 @@
-import { selectPeers, useHMSStore } from '@100mslive/hms-video-react';
+import { selectPeers, useHMSStore } from '@100mslive/react-sdk';
 import Footer from '../components/Footer/Footer';
 import User from '../components/Tile/User';
 import ChatContainer from './Chat/ChatContainer';
+import { AutoplayBlockedModal } from './AutoPlayModal'
+
 
 const Room = () => {
   const peers = useHMSStore(selectPeers);
@@ -15,6 +17,7 @@ const Room = () => {
         </div>
         <ChatContainer />
       </div>
+      <AutoplayBlockedModal />
       <Footer count={peers.length} />
     </div>
   );

src/components/Tile/User.jsx

@@ -7,7 +7,7 @@ import {
   selectPeerAudioByID,
   selectIsPeerAudioEnabled,
   selectLocalPeer,
-} from '@100mslive/hms-video-react';
+} from '@100mslive/react-sdk';
 import Permission from '../Roles/Roles';
 
 const User = ({ peer }) => {

src/index.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import LogRocket from 'logrocket'
+
+if (process.env.REACT_APP_LOGROCKET_ID){
+  LogRocket.init(process.env.REACT_APP_LOGROCKET_ID)
+}
 
 ReactDOM.render(
   <React.StrictMode>