@100mslive/roomkit-react 0.1.4-alpha.0 → 0.1.4

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -2,11 +2,18 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { selectLocalPeerRoleName, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Dialog, Flex, IconButton, Tabs, Text } from '../../../';
+import { HorizontalDivider } from '../../../Divider';
+import { IconButton } from '../../../IconButton';
+import { Box, Flex } from '../../../Layout';
+import { Dialog } from '../../../Modal';
+import { Sheet } from '../../../Sheet';
+import { Tabs } from '../../../Tabs';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
 import { useHLSViewerRole } from '../AppData/useUISettings';
 import { settingContent, settingsList } from './common.js';
 
-const SettingsModal = ({ open, onOpenChange, children }) => {
+const SettingsModal = ({ open, onOpenChange, children = <></> }) => {
   const mediaQueryLg = cssConfig.media.md;
   const isMobile = useMedia(mediaQueryLg);
 
@@ -43,6 +50,145 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
     }
   }, [isMobile, showSetting]);
 
+  return isMobile ? (
+    <MobileSettingModal
+      open={open}
+      onOpenChange={onOpenChange}
+      selection={selection}
+      setSelection={setSelection}
+      showSetting={showSetting}
+      hideSettingByTabName={hideSettingByTabName}
+      resetSelection={resetSelection}
+      children={children}
+    />
+  ) : (
+    <DesktopSettingModal
+      open={open}
+      onOpenChange={onOpenChange}
+      selection={selection}
+      setSelection={setSelection}
+      showSetting={showSetting}
+      hideSettingByTabName={hideSettingByTabName}
+      resetSelection={resetSelection}
+      children={children}
+    />
+  );
+};
+
+const MobileSettingModal = ({
+  open,
+  onOpenChange,
+  selection,
+  setSelection,
+  showSetting,
+  hideSettingByTabName,
+  resetSelection,
+  children = <></>,
+}) => {
+  return (
+    <Sheet.Root open={open} onOpenChange={onOpenChange}>
+      <Sheet.Trigger asChild>{children}</Sheet.Trigger>
+      <Sheet.Content
+        css={{
+          bg: '$surface_dim',
+          overflowY: 'auto',
+        }}
+      >
+        <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
+          <Flex direction="row" justify="between" css={{ w: '100%' }}>
+            {!selection ? (
+              <Text variant="h6" css={{ display: 'flex' }}>
+                Settings
+              </Text>
+            ) : (
+              <Text variant="h6" css={{ display: 'flex' }}>
+                <Box as="span" css={{ r: '$round', mr: '$2' }} onClick={resetSelection}>
+                  <ChevronLeftIcon />
+                </Box>
+                {selection?.charAt(0).toUpperCase() + selection.slice(1)}
+              </Text>
+            )}
+            <Sheet.Close>
+              <IconButton as="div" data-testid="dialog_cross_icon">
+                <CrossIcon />
+              </IconButton>
+            </Sheet.Close>
+          </Flex>
+        </Sheet.Title>
+        <HorizontalDivider />
+        {!selection ? (
+          <Flex
+            direction="column"
+            css={{
+              px: '$8',
+              pb: '$8',
+              overflowY: 'auto',
+            }}
+          >
+            {settingsList
+              .filter(({ tabName }) => showSetting[tabName])
+              .map(({ icon: Icon, tabName, title }) => {
+                return (
+                  <Box
+                    key={tabName}
+                    value={tabName}
+                    onClick={() => {
+                      setSelection(tabName);
+                    }}
+                    as="div"
+                    css={{
+                      all: 'unset',
+                      fontFamily: '$sans',
+                      py: '$10',
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: '$sm',
+                      lineHeight: '$sm',
+                      color: '$on_surface_high',
+                      userSelect: 'none',
+                      gap: '$8',
+                      cursor: 'pointer',
+                      '&:hover': {
+                        bg: '$surface_brighter',
+                        r: '$1',
+                        gap: '$8',
+                        border: 'none',
+                      },
+                      borderBottom: '1px solid $border_default',
+                    }}
+                  >
+                    <Icon />
+                    {title}
+                  </Box>
+                );
+              })}
+          </Flex>
+        ) : (
+          <Box
+            direction="column"
+            css={{ overflowY: 'scroll', px: '$8', py: '$10', maxHeight: '70vh', overflowX: 'hidden' }}
+          >
+            {settingsList
+              .filter(({ tabName }) => showSetting[tabName] && selection === tabName)
+              .map(({ content: Content, title, tabName }) => {
+                return <Content key={title} setHide={hideSettingByTabName(tabName)} />;
+              })}
+          </Box>
+        )}
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+};
+const DesktopSettingModal = ({
+  open,
+  onOpenChange,
+  selection,
+  setSelection,
+  showSetting,
+  hideSettingByTabName,
+  resetSelection,
+  children = <></>,
+}) => {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
@@ -58,13 +204,13 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
         >
           <Tabs.Root
             value={selection}
-            activationMode={isMobile ? 'manual' : 'automatic'}
+            activationMode="automatic"
             onValueChange={setSelection}
             css={{ size: '100%', position: 'relative' }}
           >
             <Tabs.List
               css={{
-                w: isMobile ? '100%' : '18.625rem',
+                w: '18.625rem',
                 flexDirection: 'column',
                 bg: '$background_default',
                 p: '$14 $10',
@@ -73,7 +219,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
               }}
             >
               <Text variant="h5">Settings </Text>
-              <Flex direction="column" css={{ mx: isMobile ? '-$8' : 0, overflowY: 'auto', pt: '$10' }}>
+              <Flex direction="column" css={{ mx: 0, overflowY: 'auto', pt: '$10' }}>
                 {settingsList
                   .filter(({ tabName }) => showSetting[tabName])
                   .map(({ icon: Icon, tabName, title }) => {
@@ -93,16 +239,6 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
                   flex: '1 1 0',
                   minWidth: 0,
                   mr: '$4',
-                  ...(isMobile
-                    ? {
-                        position: 'absolute',
-                        left: 0,
-                        right: 0,
-                        bg: '$surface_default',
-                        width: '100%',
-                        height: '100%',
-                      }
-                    : {}),
                 }}
               >
                 {settingsList
@@ -110,7 +246,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
                   .map(({ content: Content, title, tabName }) => {
                     return (
                       <Tabs.Content key={tabName} value={tabName} className={settingContent()}>
-                        <SettingsContentHeader onBack={resetSelection} isMobile={isMobile}>
+                        <SettingsContentHeader onBack={resetSelection} isMobile={false}>
                           {title}
                         </SettingsContentHeader>
                         <Content setHide={hideSettingByTabName(tabName)} />
@@ -130,7 +266,6 @@ const SettingsModal = ({ open, onOpenChange, children }) => {
     </Dialog.Root>
   );
 };
-
 const SettingsContentHeader = ({ children, isMobile, onBack }) => {
   return (
     <Text variant="h6" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>

package/src/Prebuilt/components/ShareMenuIcon.jsx

@@ -21,6 +21,7 @@ export const ShareMenuIcon = styled(ScreenShareButton, {
   borderLeftWidth: 0,
   w: '$4',
   '@md': {
+    w: 'unset',
     px: '$2',
   },
 });

package/src/Prebuilt/components/TileMenu/TileMenu.jsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { useMedia } from 'react-use';
+import {
+  selectLocalPeerID,
+  selectPeerByID,
+  selectPermissions,
+  selectTemplateAppData,
+  selectTrackByID,
+  selectVideoTrackByPeerID,
+  useHMSStore,
+  useRemoteAVToggle,
+} from '@100mslive/react-sdk';
+import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+import { config as cssConfig, useTheme } from '../../../Theme';
+import { StyledMenuTile } from '../../../TileMenu';
+import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
+import { TileMenuContent } from './TileMenuContent';
+import { useDropdownList } from '../hooks/useDropdownList';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { FEATURE_LIST } from '../../common/constants';
+
+/**
+ * Taking peerID as peer won't necesarilly have tracks
+ */
+const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, canMinimise }) => {
+  const [open, setOpen] = useState(false);
+  const { theme } = useTheme();
+
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const isLocal = localPeerID === peerID;
+  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
+  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle(audioTrackID, videoTrackID);
+  const showSpotlight = changeRole;
+
+  const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
+  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
+  const isInset = uiMode === 'inset';
+
+  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
+  const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset;
+
+  const track = useHMSStore(selectTrackByID(videoTrackID));
+  const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
+  const isMobile = useMedia(cssConfig.media.md);
+  const peer = useHMSStore(selectPeerByID(peerID));
+  const [showNameChangeModal, setShowNameChangeModal] = useState(false);
+  useDropdownList({ open, name: 'TileMenu' });
+
+  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
+    return null;
+  }
+
+  if (isInset && isLocal) {
+    return null;
+  }
+  const openNameChangeModal = () => setShowNameChangeModal(true);
+
+  const props = {
+    isLocal,
+    isScreenshare,
+    audioTrackID,
+    videoTrackID,
+    peerID,
+    isPrimaryVideoTrack,
+    showSpotlight,
+    showPinAction,
+    canMinimise,
+    openNameChangeModal,
+  };
+
+  return (
+    <>
+      <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
+        <StyledMenuTile.Trigger
+          data-testid="participant_menu_btn"
+          css={{ bg: `${theme.colors.background_dim.value}A3` }}
+          onClick={e => e.stopPropagation()}
+          className={isMobile ? '__cancel-drag-event' : ''}
+        >
+          <VerticalMenuIcon width={20} height={20} />
+        </StyledMenuTile.Trigger>
+
+        {isMobile ? (
+          <Sheet.Root open={open} onOpenChange={setOpen}>
+            <Sheet.Content css={{ bg: '$surface_dim', pt: '$8' }}>
+              <Flex
+                css={{
+                  color: '$on_surface_high',
+                  display: 'flex',
+                  w: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  px: '$10',
+                  pb: '$8',
+                  borderBottom: '1px solid $border_default',
+                }}
+              >
+                <Box>
+                  <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                    {peer.name}
+                    {isLocal ? ` (You)` : null}
+                  </Text>
+                  {peer?.roleName ? (
+                    <Text variant="xs" css={{ color: '$on_surface_low', mt: '$2' }}>
+                      {peer.roleName}
+                    </Text>
+                  ) : null}
+                </Box>
+
+                <Sheet.Close css={{ color: 'inherit' }}>
+                  <CrossIcon />
+                </Sheet.Close>
+              </Flex>
+              <Box css={{ px: '$8', pb: '$10' }}>
+                <TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
+              </Box>
+            </Sheet.Content>
+          </Sheet.Root>
+        ) : (
+          <StyledMenuTile.Content side="top" align="end">
+            <TileMenuContent {...props} />
+          </StyledMenuTile.Content>
+        )}
+      </StyledMenuTile.Root>
+      {showNameChangeModal && <ChangeNameModal onOpenChange={setShowNameChangeModal} />}
+    </>
+  );
+};
+
+export default TileMenu;

package/src/Prebuilt/components/TileMenu/TileMenuContent.jsx

@@ -0,0 +1,313 @@
+import React, { Fragment } from 'react';
+import {
+  selectPermissions,
+  selectSessionStore,
+  selectTrackByID,
+  useCustomEvent,
+  useHMSActions,
+  useHMSStore,
+  useRemoteAVToggle,
+} from '@100mslive/react-sdk';
+import {
+  MicOffIcon,
+  MicOnIcon,
+  PencilIcon,
+  PinIcon,
+  RemoveUserIcon,
+  ShareScreenIcon,
+  ShrinkIcon,
+  SpeakerIcon,
+  StarIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Slider } from '../../../Slider';
+import { Text } from '../../../Text';
+import { StyledMenuTile } from '../../../TileMenu';
+import { ToastManager } from '../Toast/ToastManager';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { useDropdownSelection } from '../hooks/useDropdownSelection';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
+
+const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
+  trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
+
+const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
+
+const SpotlightActions = ({
+  peerId,
+  onSpotLightClick = () => {
+    return;
+  },
+}) => {
+  const hmsActions = useHMSActions();
+  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const isTileSpotlighted = spotlightPeerId === peerId;
+
+  const setSpotlightPeerId = peer =>
+    hmsActions.sessionStore
+      .set(SESSION_STORE_KEY.SPOTLIGHT, peer)
+      .catch(err => ToastManager.addToast({ title: err.description }));
+
+  return (
+    <StyledMenuTile.ItemButton
+      css={spacingCSS}
+      onClick={() => {
+        if (isTileSpotlighted) {
+          setSpotlightPeerId();
+        } else {
+          setSpotlightPeerId(peerId);
+        }
+        onSpotLightClick();
+      }}
+    >
+      <StarIcon />
+      <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
+    </StyledMenuTile.ItemButton>
+  );
+};
+
+const PinActions = ({ audioTrackID, videoTrackID }) => {
+  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+
+  const isTilePinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID,
+    audioTrackID,
+  });
+
+  return (
+    <>
+      <StyledMenuTile.ItemButton
+        css={spacingCSS}
+        onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
+      >
+        <PinIcon />
+        <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
+      </StyledMenuTile.ItemButton>
+    </>
+  );
+};
+
+const MinimiseInset = () => {
+  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
+
+  return (
+    <>
+      <StyledMenuTile.ItemButton css={spacingCSS} onClick={() => setMinimised(!minimised)}>
+        <ShrinkIcon />
+        <span>{minimised ? 'Show' : 'Minimise'} your video</span>
+      </StyledMenuTile.ItemButton>
+    </>
+  );
+};
+
+const SimulcastLayers = ({ trackId }) => {
+  const track = useHMSStore(selectTrackByID(trackId));
+  const actions = useHMSActions();
+  const bg = useDropdownSelection();
+  if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
+    return null;
+  }
+  const currentLayer = track.layerDefinitions.find(layer => layer.layer === track.layer);
+  return (
+    <Fragment>
+      <StyledMenuTile.ItemButton css={{ color: '$on_surface_medium', cursor: 'default' }}>
+        Select maximum resolution
+      </StyledMenuTile.ItemButton>
+      {track.layerDefinitions.map(layer => {
+        return (
+          <StyledMenuTile.ItemButton
+            key={layer.layer}
+            onClick={async () => {
+              await actions.setPreferredLayer(trackId, layer.layer);
+            }}
+            css={{
+              justifyContent: 'space-between',
+              bg: track.preferredLayer === layer.layer ? bg : undefined,
+              '&:hover': {
+                bg: track.preferredLayer === layer.layer ? bg : undefined,
+              },
+            }}
+          >
+            <Text
+              as="span"
+              css={{
+                textTransform: 'capitalize',
+                mr: '$2',
+                fontWeight: track.preferredLayer === layer.layer ? '$semiBold' : '$regular',
+              }}
+            >
+              {layer.layer}
+            </Text>
+            <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
+              {layer.resolution.width}x{layer.resolution.height}
+            </Text>
+          </StyledMenuTile.ItemButton>
+        );
+      })}
+      <StyledMenuTile.ItemButton>
+        <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
+          Currently streaming:
+          <Text
+            as="span"
+            variant="xs"
+            css={{
+              fontWeight: '$semiBold',
+              textTransform: 'capitalize',
+              color: '$on_surface_medium',
+              ml: '$2',
+            }}
+          >
+            {currentLayer ? (
+              <>
+                {track.layer} ({currentLayer.resolution.width}x{currentLayer.resolution.height})
+              </>
+            ) : (
+              '-'
+            )}
+          </Text>
+        </Text>
+      </StyledMenuTile.ItemButton>
+    </Fragment>
+  );
+};
+
+export const TileMenuContent = props => {
+  const actions = useHMSActions();
+  const { removeOthers } = useHMSStore(selectPermissions);
+  const {
+    videoTrackID,
+    audioTrackID,
+    isLocal,
+    isScreenshare,
+    showSpotlight,
+    showPinAction,
+    peerID,
+    canMinimise,
+    closeSheetOnClick = () => {
+      return;
+    },
+    openNameChangeModal = () => {
+      return;
+    },
+  } = props;
+
+  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
+    audioTrackID,
+    videoTrackID,
+  );
+
+  const { sendEvent } = useCustomEvent({
+    type: REMOTE_STOP_SCREENSHARE_TYPE,
+  });
+
+  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
+
+  return isLocal ? (
+    (showPinAction || canMinimise) && (
+      <>
+        {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
+        {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
+        {canMinimise && <MinimiseInset />}
+        {isChangeNameEnabled ? (
+          <StyledMenuTile.ItemButton
+            onClick={() => {
+              openNameChangeModal();
+              closeSheetOnClick();
+            }}
+          >
+            <PencilIcon />
+            <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+              Change Name
+            </Text>
+          </StyledMenuTile.ItemButton>
+        ) : null}
+      </>
+    )
+  ) : (
+    <>
+      {toggleVideo ? (
+        <StyledMenuTile.ItemButton
+          css={spacingCSS}
+          onClick={() => {
+            toggleVideo();
+            closeSheetOnClick();
+          }}
+          data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
+        >
+          {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
+          <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
+        </StyledMenuTile.ItemButton>
+      ) : null}
+
+      {toggleAudio ? (
+        <StyledMenuTile.ItemButton
+          css={spacingCSS}
+          onClick={() => {
+            toggleAudio();
+            closeSheetOnClick();
+          }}
+          data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
+        >
+          {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
+          <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
+        </StyledMenuTile.ItemButton>
+      ) : null}
+
+      {audioTrackID ? (
+        <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
+          <Flex align="center" gap={1}>
+            <SpeakerIcon />
+            <Box as="span" css={{ ml: '$4' }}>
+              Volume ({volume})
+            </Box>
+          </Flex>
+          <Slider css={{ my: '0.5rem' }} step={5} value={[volume]} onValueChange={e => setVolume(e[0])} />
+        </StyledMenuTile.VolumeItem>
+      ) : null}
+
+      {showPinAction && (
+        <>
+          <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
+          {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
+        </>
+      )}
+
+      <SimulcastLayers trackId={videoTrackID} />
+
+      {removeOthers ? (
+        <StyledMenuTile.RemoveItem
+          css={{ ...spacingCSS, borderTop: 'none' }}
+          onClick={async () => {
+            try {
+              await actions.removePeer(peerID, '');
+            } catch (error) {
+              // TODO: Toast here
+            }
+            closeSheetOnClick();
+          }}
+          data-testid="remove_participant_btn"
+        >
+          <RemoveUserIcon />
+          <span>Remove Participant</span>
+        </StyledMenuTile.RemoveItem>
+      ) : null}
+
+      {removeOthers && isScreenshare ? (
+        <StyledMenuTile.RemoveItem
+          onClick={() => {
+            sendEvent({});
+            closeSheetOnClick();
+          }}
+          css={spacingCSS}
+        >
+          <ShareScreenIcon />
+          <span>Stop Screenshare</span>
+        </StyledMenuTile.RemoveItem>
+      ) : null}
+    </>
+  );
+};