@100mslive/roomkit-react 0.2.8-alpha.0 → 0.2.8-alpha.10

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -7,9 +7,7 @@ import {
   selectIsConnectedToRoom,
   selectLocalPeerID,
   useCustomEvent,
-  // useHMSActions,
   useHMSStore,
-  // useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
@@ -20,11 +18,12 @@ import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useDropdownList } from './hooks/useDropdownList';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
-export const EmojiReaction = () => {
+export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
@@ -33,6 +32,9 @@ export const EmojiReaction = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useMedia(cssConfig.media.ls);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
@@ -65,24 +67,32 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return isMobile ? (
-    <EmojiCard sendReaction={sendReaction} />
-  ) : (
-    <Fragment>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
-          <IconButton>
-            <Tooltip title="Emoji reaction">
-              <Box>
-                <EmojiIcon />
-              </Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
-          <EmojiCard sendReaction={sendReaction} />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Fragment>
+
+  if (showCard) {
+    return <EmojiCard sendReaction={sendReaction} />;
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
+        <IconButton
+          css={
+            isMobile || isLandscape ? { bg: '$surface_default', r: '$round', border: '1px solid $border_bright' } : {}
+          }
+        >
+          <Tooltip title="Emoji reaction">
+            <Box>
+              <EmojiIcon />
+            </Box>
+          </Tooltip>
+        </IconButton>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        sideOffset={5}
+        align={isMobileHLSStream || isLandscapeStream ? 'end' : 'center'}
+        css={{ p: '$8', bg: '$surface_default' }}
+      >
+        <EmojiCard sendReaction={sendReaction} />
+      </Dropdown.Content>
+    </Dropdown.Root>
   );
 };

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -12,7 +12,6 @@ import { EmojiReaction } from '../EmojiReaction';
 import { LeaveRoom } from '../Leave/LeaveRoom';
 // @ts-ignore: No implicit Any
 import { MoreSettings } from '../MoreSettings/MoreSettings';
-// @ts-ignore: No implicit Any
 import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';

package/src/Prebuilt/components/Footer/RoleOptions.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   HMSPeer,
   selectPermissions,
   selectRoleByRoleName,
+  selectTracksMap,
   useHMSActions,
   useHMSStore,
-  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import {
   MicOffIcon,
@@ -25,26 +26,75 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { getMetadata } from '../../common/utils';
 
 const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
-const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
+const optionTextCSS = {
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  textTransform: 'none',
+  whiteSpace: 'nowrap',
+};
 
-const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleName: string }) => {
-  const vanillaStore = useHMSVanillaStore();
-  const store = vanillaStore.getState();
-  const hmsActions = useHMSActions();
+const DropdownWrapper = ({ children }: { children: React.ReactNode }) => {
+  const [openOptions, setOpenOptions] = useState(false);
+  if (React.Children.toArray(children).length === 0) {
+    return null;
+  }
+  return (
+    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
+      <Dropdown.Trigger
+        data-testid="role_group_options"
+        onClick={e => e.stopPropagation()}
+        className="role_actions"
+        asChild
+        css={{
+          p: '$1',
+          r: '$0',
+          c: '$on_surface_high',
+          visibility: openOptions ? 'visible' : 'hidden',
+          '&:hover': {
+            c: '$on_surface_medium',
+          },
+          '@md': {
+            visibility: 'visible',
+          },
+        }}
+      >
+        <Flex>
+          <VerticalMenuIcon />
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        onClick={e => e.stopPropagation()}
+        css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
+        align="end"
+      >
+        {children}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};
+
+export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
   const permissions = useHMSStore(selectPermissions);
+  const hmsActions = useHMSActions();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
+  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
   const role = useHMSStore(selectRoleByRoleName(roleName));
+  const canPublishAudio = role.publishParams.allowed.includes('audio');
+  const canPublishVideo = role.publishParams.allowed.includes('video');
+  const tracks = useHMSStore(selectTracksMap);
 
-  let allPeersHaveVideoOn = true;
-  let allPeersHaveAudioOn = true;
+  let isVideoOnForSomePeers = false;
+  let isAudioOnForSomePeers = false;
 
   peerList.forEach(peer => {
     if (peer.isLocal) {
       return;
     }
-    const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
-    const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
-    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
-    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+    const isAudioOn = !!peer.audioTrack && tracks[peer.audioTrack]?.enabled;
+    const isVideoOn = !!peer.videoTrack && tracks[peer.videoTrack]?.enabled;
+    isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
+    isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
   });
 
   const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
@@ -55,68 +105,16 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     }
   };
 
-  return (
-    <>
-      {role.publishParams.allowed?.includes('audio') && (
-        <>
-          {allPeersHaveAudioOn && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
-              <MicOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Audio
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!allPeersHaveAudioOn && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
-              <MicOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Unmute Audio
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </>
-      )}
-
-      {role.publishParams.allowed?.includes('audio') && (
-        <>
-          {allPeersHaveVideoOn && permissions?.mute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
-              <VideoOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Video
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-
-          {!allPeersHaveVideoOn && permissions?.unmute ? (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
-              <VideoOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Unmute Video
-              </Text>
-            </Dropdown.Item>
-          ) : null}
-        </>
-      )}
-    </>
-  );
-};
-
-export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
-  const [openOptions, setOpenOptions] = useState(false);
-  const permissions = useHMSStore(selectPermissions);
-  const hmsActions = useHMSActions();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
-  const canMuteOrUnmute = permissions?.mute || permissions?.unmute;
-  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
   // on stage and off stage roles
   const canRemoveRoleFromRoom =
     permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
 
-  if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
+  if (
+    peerList.length === 0 ||
+    // if only local peer is present no need to show any options
+    (peerList.length === 1 && peerList[0].isLocal) ||
+    !role
+  ) {
     return null;
   }
 
@@ -140,60 +138,75 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   };
 
   return (
-    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
-      <Dropdown.Trigger
-        data-testid="role_group_options"
-        onClick={e => e.stopPropagation()}
-        className="role_actions"
-        asChild
-        css={{
-          p: '$1',
-          r: '$0',
-          c: '$on_surface_high',
-          visibility: openOptions ? 'visible' : 'hidden',
-          '&:hover': {
-            c: '$on_surface_medium',
-          },
-          '@md': {
-            visibility: 'visible',
-          },
-        }}
-      >
-        <Flex>
-          <VerticalMenuIcon />
-        </Flex>
-      </Dropdown.Trigger>
-      <Dropdown.Content
-        onClick={e => e.stopPropagation()}
-        css={{ w: 'max-content', maxWidth: '$64', bg: '$surface_default', py: 0 }}
-        align="end"
-      >
-        {canRemoveRoleFromStage && (
-          <Dropdown.Item
-            css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
-            onClick={removeAllFromStage}
-          >
-            <PersonRectangleIcon />
-            <Text variant="sm" css={optionTextCSS}>
-              Remove all from Stage
-            </Text>
-          </Dropdown.Item>
-        )}
-
-        {canMuteOrUnmute && <MuteUnmuteOption peerList={peerList} roleName={roleName} />}
-
-        {canRemoveRoleFromRoom && (
-          <Dropdown.Item
-            css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
-            onClick={removePeersFromRoom}
-          >
-            <RemoveUserIcon />
-            <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
-              Remove all from Room
-            </Text>
-          </Dropdown.Item>
-        )}
-      </Dropdown.Content>
-    </Dropdown.Root>
+    <DropdownWrapper>
+      {canRemoveRoleFromStage ? (
+        <Dropdown.Item
+          css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
+          onClick={removeAllFromStage}
+        >
+          <PersonRectangleIcon />
+          <Text variant="sm" css={optionTextCSS}>
+            Remove all from Stage
+          </Text>
+        </Dropdown.Item>
+      ) : null}
+
+      {match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
+        .with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
+              <MicOffIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Mute Audio for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
+              <MicOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Request to Unmute Audio for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .otherwise(() => null)}
+      {match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
+        .with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
+              <VideoOffIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Mute Video for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
+          return (
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
+              <VideoOnIcon />
+              <Text variant="sm" css={optionTextCSS}>
+                Request to Unmute Video for All
+              </Text>
+            </Dropdown.Item>
+          );
+        })
+        .otherwise(() => null)}
+
+      {canRemoveRoleFromRoom ? (
+        <Dropdown.Item
+          css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
+          onClick={removePeersFromRoom}
+        >
+          <RemoveUserIcon />
+          <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
+            Remove all from Room
+          </Text>
+        </Dropdown.Item>
+      ) : null}
+    </DropdownWrapper>
   );
 };

package/src/Prebuilt/components/HMSVideo/Controls.jsx

@@ -1,4 +1,4 @@
-import { Flex, styled } from '../../../';
+import { Flex, styled } from '../../..';
 
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',

package/src/Prebuilt/components/HMSVideo/FullscreenButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { Flex, IconButton, Tooltip } from '../../..';
+
+export const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => {
+  return (
+    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side="top">
+      <IconButton css={{ margin: '0px' }} onClick={onToggle} key="fullscreen_btn" data-testid="fullscreen_btn">
+        <Flex>{isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}</Flex>
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+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,
+  unblockAutoPlay,
+}: {
+  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}
+      onOpenChange={async value => {
+        if (!value) {
+          await unblockAutoPlay();
+        }
+      }}
+    >
+      <DialogContent title="Attention" closeable={false}>
+        <DialogRow>
+          <Text variant="md">
+            The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to
+            proceed.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={async () => {
+              await unblockAutoPlay();
+            }}
+          >
+            Play stream
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}

package/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
 import { IconButton, Tooltip } from '../../../';
+import { useHMSPlayerContext } from './PlayerContext';
 
-export function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {
+export function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) {
+  const { hlsPlayer } = useHMSPlayerContext();
   return (
     <Tooltip title="Subtitles/closed captions" side="top">
-      <IconButton css={{ p: '$2' }} onClick={() => onClick()}>
+      <IconButton css={{ p: '$2' }} onClick={() => hlsPlayer?.toggleCaption()}>
         {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
       </IconButton>
     </Tooltip>