From dc1c34778cbf21b6b798114d9b606dafc935680d Mon Sep 17 00:00:00 2001 From: Deepankar Bhade Date: Fri, 10 Jun 2022 17:01:15 +0530 Subject: [PATCH 1/3] fix: handle ios safari autoplay issue --- package.json | 10 +- src/components/AutoPlayModal.jsx | 43 + src/components/Modal.jsx | 76 ++ src/components/Room.jsx | 3 + yarn.lock | 1648 +++++++++++++++--------------- 5 files changed, 932 insertions(+), 848 deletions(-) create mode 100644 src/components/AutoPlayModal.jsx create mode 100644 src/components/Modal.jsx diff --git a/package.json b/package.json index 39b56b6..8c93026 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,14 @@ "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", "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 +41,7 @@ "postcss": "^7", "tailwindcss": "npm:@tailwindcss/postcss7-compat" }, - "resolutions": { + "resolutions": { "iconv-lite": "^0.6.3" } } 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/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/Room.jsx b/src/components/Room.jsx index 934cd0b..95cd2ec 100644 --- a/src/components/Room.jsx +++ b/src/components/Room.jsx @@ -2,6 +2,8 @@ import { selectPeers, useHMSStore } from '@100mslive/hms-video-react'; 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 = () => { +