diff --git a/example.env b/example.env index 3acb7c8..0e37463 100644 --- a/example.env +++ b/example.env @@ -1,2 +1,3 @@ REACT_APP_TOKEN_ENDPOINT= -REACT_APP_ROOM_ID= \ No newline at end of file +REACT_APP_ROOM_ID= +REACT_APP_LOGROCKET_ID= \ No newline at end of file diff --git a/package.json b/package.json index 39b56b6..e326afd 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.jsx b/src/App.jsx index d02cecb..7fca753 100644 --- a/src/App.jsx +++ b/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'; diff --git a/src/components/AutoPlayModal.jsx b/src/components/AutoPlayModal.jsx new file mode 100644 index 0000000..4d34c2b --- /dev/null +++ b/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 ( + { + if (!value) { + unblockAudio(); + } + resetError(); + }} + > + + + + The browser wants us to get a confirmation for playing the Audio. + Please allow audio to proceed. + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/Chat/ChatContainer.jsx b/src/components/Chat/ChatContainer.jsx index 6cf9b98..4d7b156 100644 --- a/src/components/Chat/ChatContainer.jsx +++ b/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'; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 1a427b9..d83c735 100644 --- a/src/components/Footer/Footer.jsx +++ b/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(); diff --git a/src/components/Join.jsx b/src/components/Join.jsx index ad06321..308c240 100644 --- a/src/components/Join.jsx +++ b/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(); diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx new file mode 100644 index 0000000..ceca325 --- /dev/null +++ b/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 ( + <> + + + + + + {Icon ? ( + + + + ) : null} + + {title} + + + {closeable && ( + + )} + + + + {children} + + + ); +}; + +/** + * 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 ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/components/Roles/Roles.jsx b/src/components/Roles/Roles.jsx index 726bf80..ac53fef 100644 --- a/src/components/Roles/Roles.jsx +++ b/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(); diff --git a/src/components/Room.jsx b/src/components/Room.jsx index 934cd0b..90cb674 100644 --- a/src/components/Room.jsx +++ b/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 = () => { +