feat: add tap to unmute for autoplay on mweb

100mslive · Feb 28, 2024 · 6479b59 · 6479b59
1 parent fc3423a
commit 6479b59
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import { Button, Dialog, Text } from '../../..';
+import { useMedia } from 'react-use';
+import { VolumeTwoIcon } from '@100mslive/react-icons';
+import { Button, config, Dialog, IconButton, Text } from '../../..';
 // @ts-ignore
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+import { useIsLandscape } from '../../common/hooks';
 
 export function HLSAutoplayBlockedPrompt({
   open,
@@ -10,6 +13,33 @@ export function HLSAutoplayBlockedPrompt({
   open: boolean;
   unblockAutoPlay: () => Promise<void>;
 }) {
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia(config.media.md);
+  if ((isMobile || isLandscape) && open) {
+    return (
+      <IconButton
+        css={{
+          border: '1px solid white',
+          bg: 'white',
+          color: '#000',
+          r: '$2',
+        }}
+        onClick={async () => await unblockAutoPlay()}
+      >
+        <VolumeTwoIcon width="32" height="32" />
+        <Text
+          variant="body1"
+          css={{
+            fontWeight: '$semiBold',
+            px: '$2',
+            color: '#000',
+          }}
+        >
+          Tap To Unmute
+        </Text>
+      </IconButton>
+    );
+  }
   return (
     <Dialog.Root
       open={open}

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -372,7 +372,9 @@ const HLSView = () => {
                 margin: '0 auto',
               }}
             >
-              <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+              {!(isMobile || isLandscape) && (
+                <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+              )}
               {showLoader && (
                 <Flex
                   align="center"
@@ -465,8 +467,10 @@ const HLSView = () => {
                           </HMSVideoPlayer.Controls.Left>
                           <HMSVideoPlayer.Controls.Right>
                             {isLandscape && <ChatToggle />}
-                            {hasCaptions && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
-                            {availableLayers.length > 0 ? (
+                            {hasCaptions && !isHlsAutoplayBlocked && (
+                              <HLSCaptionSelector isEnabled={isCaptionEnabled} />
+                            )}
+                            {availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                               <HLSQualitySelector
                                 layers={availableLayers}
                                 onOpenChange={setQualityDropDownOpen}
@@ -476,6 +480,7 @@ const HLSView = () => {
                                 isAuto={isUserSelectedAuto}
                               />
                             ) : null}
+                            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
                           </HMSVideoPlayer.Controls.Right>
                         </HMSVideoPlayer.Controls.Root>
                       </Flex>