@100mslive/roomkit-react 0.1.4-alpha.1 → 0.1.5

package/src/Prebuilt/components/MoreSettings/MoreSettings.jsx

@@ -1,226 +1,10 @@
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import { useMedia } from 'react-use';
-import Hls from 'hls.js';
-import {
-  selectAppData,
-  selectIsAllowedToPublish,
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import {
-  ChangeRoleIcon,
-  CheckIcon,
-  InfoIcon,
-  MicOffIcon,
-  PencilIcon,
-  RecordIcon,
-  SettingsIcon,
-  VerticalMenuIcon,
-} from '@100mslive/react-icons';
-import { Box, Checkbox, config as cssConfig, Dropdown, Flex, Text, Tooltip } from '../../../';
-import IconButton from '../../IconButton';
-import { RoleChangeModal } from '../RoleChangeModal';
-import SettingsModal from '../Settings/SettingsModal';
-import StartRecording from '../Settings/StartRecording';
-import { StatsForNerds } from '../StatsForNerds';
-import { BulkRoleChangeModal } from './BulkRoleChangeModal';
-import { ChangeNameModal } from './ChangeNameModal';
-import { ChangeSelfRole } from './ChangeSelfRole';
-import { EmbedUrl, EmbedUrlModal } from './EmbedUrl';
-import { FullScreenItem } from './FullScreenItem';
-import { MuteAllModal } from './MuteAllModal';
-import { useDropdownList } from '../hooks/useDropdownList';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { FeatureFlags } from '../../services/FeatureFlags';
-import { APP_DATA, FEATURE_LIST, isAndroid, isIOS, isMacOS } from '../../common/constants';
-
-const isMobileOS = isAndroid || isIOS;
-
-const MODALS = {
-  CHANGE_NAME: 'changeName',
-  SELF_ROLE_CHANGE: 'selfRoleChange',
-  MORE_SETTINGS: 'moreSettings',
-  START_RECORDING: 'startRecording',
-  DEVICE_SETTINGS: 'deviceSettings',
-  STATS_FOR_NERDS: 'statsForNerds',
-  BULK_ROLE_CHANGE: 'bulkRoleChange',
-  MUTE_ALL: 'muteAll',
-  EMBED_URL: 'embedUrl',
-};
+import { DesktopOptions } from './SplitComponents/DesktopOptions';
+import { MwebOptions } from './SplitComponents/MwebOptions';
+import { config as cssConfig } from '../../../';
 
 export const MoreSettings = () => {
-  const permissions = useHMSStore(selectPermissions);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const hmsActions = useHMSActions();
-  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const isMobile = useMedia(cssConfig.media.md);
-  const { isBrowserRecordingOn } = useRecordingStreaming();
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
-  const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL);
-  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
-  const [openModals, setOpenModals] = useState(new Set());
-  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
-
-  const updateState = (modalName, value) => {
-    setOpenModals(modals => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-
-  return (
-    <Fragment>
-      <Dropdown.Root
-        open={openModals.has(MODALS.MORE_SETTINGS)}
-        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
-      >
-        <Dropdown.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
-              <Box>
-                <VerticalMenuIcon />
-              </Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-
-        <Dropdown.Content
-          sideOffset={5}
-          align="center"
-          css={{
-            py: '$0',
-            maxHeight: '$96',
-            '@md': { w: '$64' },
-            "div[role='separator']:first-child": {
-              display: 'none',
-            },
-          }}
-        >
-          {isMobile && permissions?.browserRecording ? (
-            <>
-              <Dropdown.Item onClick={() => updateState(MODALS.START_RECORDING, true)}>
-                <RecordIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  {isBrowserRecordingOn ? 'Stop' : 'Start'} Recording
-                </Text>
-              </Dropdown.Item>
-              <Dropdown.ItemSeparator />
-            </>
-          ) : null}
-          {isChangeNameEnabled && (
-            <Dropdown.Item onClick={() => updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn">
-              <PencilIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Change Name
-              </Text>
-            </Dropdown.Item>
-          )}
-          <ChangeSelfRole onClick={() => updateState(MODALS.SELF_ROLE_CHANGE, true)} />
-          {permissions?.changeRole && (
-            <Dropdown.Item
-              onClick={() => updateState(MODALS.BULK_ROLE_CHANGE, true)}
-              data-testid="bulk_role_change_btn"
-            >
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Bulk Role Change
-              </Text>
-            </Dropdown.Item>
-          )}
-          <FullScreenItem />
-          {isAllowedToPublish.screen && isEmbedEnabled && (
-            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
-          )}
-          {permissions.mute && (
-            <Dropdown.Item onClick={() => updateState(MODALS.MUTE_ALL, true)} data-testid="mute_all_btn">
-              <MicOffIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Mute All
-              </Text>
-            </Dropdown.Item>
-          )}
-          <Dropdown.ItemSeparator />
-          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
-            <SettingsIcon />
-            <Text variant="sm" css={{ ml: '$4' }}>
-              Settings
-            </Text>
-          </Dropdown.Item>
-          {FeatureFlags.enableStatsForNerds &&
-            isSFNEnabled &&
-            (localPeerRole === 'hls-viewer' ? (
-              Hls.isSupported() ? (
-                <Dropdown.Item
-                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  data-testid="hls_stats"
-                >
-                  <Checkbox.Root
-                    css={{ margin: '$2' }}
-                    checked={enablHlsStats}
-                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  >
-                    <Checkbox.Indicator>
-                      <CheckIcon width={16} height={16} />
-                    </Checkbox.Indicator>
-                  </Checkbox.Root>
-                  <Flex justify="between" css={{ width: '100%' }}>
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      Show HLS Stats
-                    </Text>
-                    {!isMobileOS ? (
-                      <Text variant="sm" css={{ ml: '$4' }}>
-                        {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                      </Text>
-                    ) : null}
-                  </Flex>
-                </Dropdown.Item>
-              ) : null
-            ) : (
-              <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nreds_btn"
-              >
-                <InfoIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  Stats for Nerds
-                </Text>
-              </Dropdown.Item>
-            ))}
-        </Dropdown.Content>
-      </Dropdown.Root>
-      {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
-        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
-      )}
-      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
-      {openModals.has(MODALS.CHANGE_NAME) && (
-        <ChangeNameModal onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)} />
-      )}
-      {openModals.has(MODALS.DEVICE_SETTINGS) && (
-        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
-      )}
-      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
-        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
-      )}
-      {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
-        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
-      )}
-      {openModals.has(MODALS.START_RECORDING) && (
-        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
-      )}
-      {openModals.has(MODALS.EMBED_URL) && (
-        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
-      )}
-    </Fragment>
-  );
+  return isMobile ? <MwebOptions /> : <DesktopOptions />;
 };

package/src/Prebuilt/components/MoreSettings/MuteAllContent.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button } from '../../../Button';
+import { Label } from '../../../Label';
+import { Flex } from '../../../Layout';
+import { RadioGroup } from '../../../RadioGroup';
+import { Text } from '../../../Text';
+import { DialogRow, DialogSelect } from '../../primitives/DialogContent';
+
+export const MuteAllContent = props => {
+  const roles = props.roles || [];
+  return (
+    <>
+      <DialogSelect
+        title="Role"
+        options={[{ label: 'All Roles', value: '' }, ...roles.map(role => ({ label: role, value: role }))]}
+        selected={props.selectedRole}
+        keyField="value"
+        labelField="label"
+        onChange={props.setRole}
+      />
+      <DialogSelect
+        title="Track type"
+        options={props.trackTypeOptions}
+        selected={props.trackType}
+        onChange={props.setTrackType}
+        keyField="value"
+        labelField="label"
+      />
+      <DialogSelect
+        title="Track source"
+        options={props.trackSourceOptions}
+        selected={props.selectedSource}
+        onChange={props.setSource}
+        keyField="value"
+        labelField="label"
+      />
+      <DialogRow>
+        <Text variant="md">Track status</Text>
+        <RadioGroup.Root value={props.enabled} onValueChange={props.setEnabled}>
+          <Flex align="center" css={{ mr: '$8' }}>
+            <RadioGroup.Item value={false} id="trackDisableRadio" css={{ mr: '$4' }}>
+              <RadioGroup.Indicator />
+            </RadioGroup.Item>
+            <Label htmlFor="trackDisableRadio">Mute</Label>
+          </Flex>
+          <Flex align="center" css={{ cursor: 'pointer' }}>
+            <RadioGroup.Item value={true} id="trackEnableRadio" css={{ mr: '$4' }}>
+              <RadioGroup.Indicator />
+            </RadioGroup.Item>
+            <Label htmlFor="trackEnableRadio">Request Unmute</Label>
+          </Flex>
+        </RadioGroup.Root>
+      </DialogRow>
+      <DialogRow justify="end">
+        <Button variant="primary" onClick={props.muteAll} css={{ w: props?.isMobile ? '100%' : '' }}>
+          Apply
+        </Button>
+      </DialogRow>
+    </>
+  );
+};

package/src/Prebuilt/components/MoreSettings/MuteAllModal.jsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useState } from 'react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { MicOffIcon } from '@100mslive/react-icons';
-import { Button, Dialog, Flex, Label, RadioGroup, Text } from '../../../';
-import { DialogContent, DialogRow, DialogSelect } from '../../primitives/DialogContent';
+import { Dialog } from '../../../';
+import { Sheet } from '../../../Sheet';
+import { DialogContent } from '../../primitives/DialogContent';
+import { MuteAllContent } from './MuteAllContent';
 import { useFilteredRoles } from '../../common/hooks';
 
 const trackSourceOptions = [
@@ -17,7 +19,7 @@ const trackTypeOptions = [
   { label: 'audio', value: 'audio' },
   { label: 'video', value: 'video' },
 ];
-export const MuteAllModal = ({ onOpenChange }) => {
+export const MuteAllModal = ({ onOpenChange, isMobile = false }) => {
   const roles = useFilteredRoles();
   const hmsActions = useHMSActions();
   const [enabled, setEnabled] = useState(false);
@@ -35,55 +37,36 @@ export const MuteAllModal = ({ onOpenChange }) => {
     onOpenChange(false);
   }, [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
 
+  const props = {
+    muteAll,
+    roles,
+    enabled,
+    setEnabled,
+    trackType,
+    setTrackType,
+    selectedRole,
+    setRole,
+    selectedSource,
+    setSource,
+    trackSourceOptions,
+    trackTypeOptions,
+    isMobile,
+  };
+
+  if (isMobile) {
+    return (
+      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ px: '$10' }}>
+          <MuteAllContent {...props} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
       <DialogContent title="Mute/Unmute Remote Tracks" Icon={MicOffIcon}>
-        <DialogSelect
-          title="Role"
-          options={[{ label: 'All Roles', value: '' }, ...roles.map(role => ({ label: role, value: role }))]}
-          selected={selectedRole}
-          keyField="value"
-          labelField="label"
-          onChange={setRole}
-        />
-        <DialogSelect
-          title="Track type"
-          options={trackTypeOptions}
-          selected={trackType}
-          onChange={setTrackType}
-          keyField="value"
-          labelField="label"
-        />
-        <DialogSelect
-          title="Track source"
-          options={trackSourceOptions}
-          selected={selectedSource}
-          onChange={setSource}
-          keyField="value"
-          labelField="label"
-        />
-        <DialogRow>
-          <Text variant="md">Track status</Text>
-          <RadioGroup.Root value={enabled} onValueChange={setEnabled}>
-            <Flex align="center" css={{ mr: '$8' }}>
-              <RadioGroup.Item value={false} id="trackDisableRadio" css={{ mr: '$4' }}>
-                <RadioGroup.Indicator />
-              </RadioGroup.Item>
-              <Label htmlFor="trackDisableRadio">Mute</Label>
-            </Flex>
-            <Flex align="center" css={{ cursor: 'pointer' }}>
-              <RadioGroup.Item value={true} id="trackEnableRadio" css={{ mr: '$4' }}>
-                <RadioGroup.Indicator />
-              </RadioGroup.Item>
-              <Label htmlFor="trackEnableRadio">Request Unmute</Label>
-            </Flex>
-          </RadioGroup.Root>
-        </DialogRow>
-        <DialogRow justify="end">
-          <Button variant="primary" onClick={muteAll}>
-            Apply
-          </Button>
-        </DialogRow>
+        <MuteAllContent {...props} />
       </DialogContent>
     </Dialog.Root>
   );

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopLeaveRoom.jsx

@@ -0,0 +1,129 @@
+import React, { Fragment, useState } from 'react';
+import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../../Dropdown';
+import { Box, Flex } from '../../../../Layout';
+import { Dialog } from '../../../../Modal';
+import { Tooltip } from '../../../../Tooltip';
+import { EndSessionContent } from '../../EndSessionContent';
+import { LeaveCard } from '../../LeaveCard';
+import { useDropdownList } from '../../hooks/useDropdownList';
+import { useShowStreamingUI } from '../../../common/hooks';
+
+export const DesktopLeaveRoom = ({
+  menuTriggerButton: MenuTriggerButton,
+  leaveIconButton: LeaveIconButton,
+  leaveRoom,
+  stopStream,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const { isStreamingOn } = useRecordingStreaming();
+  const showStreamingUI = useShowStreamingUI();
+
+  const showStream = showStreamingUI && isStreamingOn;
+
+  useDropdownList({ open, name: 'LeaveRoom' });
+
+  if (!permissions || !isConnected) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {permissions.hlsStreaming ? (
+        <Flex>
+          <LeaveIconButton
+            variant="danger"
+            key="LeaveRoom"
+            data-testid="leave_room_btn"
+            css={{
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            }}
+            onClick={leaveRoom}
+          >
+            <Tooltip title="Leave Room">
+              <Box>
+                <ExitIcon style={{ transform: 'rotate(180deg)' }} />
+              </Box>
+            </Tooltip>
+          </LeaveIconButton>
+          <Dropdown.Root open={open} onOpenChange={setOpen} modal={false}>
+            <Dropdown.Trigger
+              asChild
+              css={{
+                '&[data-state="open"]': {
+                  bg: '$alert_error_dim',
+                },
+              }}
+            >
+              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
+                <VerticalMenuIcon />
+              </MenuTriggerButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
+              <Dropdown.Item css={{ bg: '$surface_default' }} onClick={leaveRoom} data-testid="just_leave_btn">
+                <LeaveCard
+                  title={showStream ? 'Leave Stream' : 'Leave Session'}
+                  subtitle={`Others will continue after you leave. You can join the ${
+                    showStream ? 'stream' : 'session'
+                  } again.`}
+                  bg=""
+                  titleColor="$on_surface_high"
+                  subtitleColor="$on_surface_low"
+                  icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
+                  onClick={leaveRoom}
+                  css={{ p: 0 }}
+                />
+              </Dropdown.Item>
+              {isStreamingOn && permissions?.hlsStreaming ? (
+                <Dropdown.Item css={{ bg: '$alert_error_dim' }} data-testid="end_room_btn">
+                  <LeaveCard
+                    title={showStream ? 'End Stream' : 'End Session'}
+                    subtitle={`The ${
+                      showStream ? 'stream' : 'session'
+                    } will end for everyone. You can't undo this action.`}
+                    bg=""
+                    titleColor="$alert_error_brighter"
+                    subtitleColor="$alert_error_bright"
+                    icon={<StopIcon height={24} width={24} />}
+                    onClick={() => {
+                      setOpen(false);
+                      setShowEndStreamAlert(true);
+                    }}
+                    css={{ p: 0 }}
+                  />
+                </Dropdown.Item>
+              ) : null}
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Flex>
+      ) : (
+        <LeaveIconButton onClick={leaveRoom} variant="danger" key="LeaveRoom" data-testid="leave_room_btn">
+          <Tooltip title="Leave Room">
+            <Box>
+              <ExitIcon style={{ transform: 'rotate(180deg)' }} />
+            </Box>
+          </Tooltip>
+        </LeaveIconButton>
+      )}
+
+      <Dialog.Root open={showEndStreamAlert} modal={false}>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+            <EndSessionContent
+              setShowEndStreamAlert={setShowEndStreamAlert}
+              stopStream={stopStream}
+              leaveRoom={leaveRoom}
+              isModal
+            />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </Fragment>
+  );
+};