@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/LeaveScreen.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ExitIcon } from '@100mslive/react-icons';
-import { Feedback } from './EndCallFeedback/Feedback';
-// @ts-ignore: No implicit Any
-import { ToastManager } from './Toast/ToastManager';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { useHMSAppStateContext } from '../AppStateContext';
-import { Header } from './Header';
-// @ts-ignore: No implicit Any
-import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
-import { textEllipsis } from '../../utils';
-
-export const LeaveScreen = () => {
-  const { rejoin } = useHMSAppStateContext();
-  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-  return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid="header">
-        <Header />
-      </Box>
-      <Flex
-        justify="center"
-        direction="column"
-        align="center"
-        css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}
-      >
-        <Text variant="h2" css={{ fontWeight: '$semiBold' }}>
-          👋
-        </Text>
-        <Text variant="h4" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>
-          You left the room
-        </Text>
-        <Text
-          variant="body1"
-          css={{
-            color: '$on_surface_medium',
-            mt: '$8',
-            fontWeight: '$regular',
-            textAlign: 'center',
-          }}
-        >
-          Have a nice day
-          {previewPreference.name && (
-            <Box as="span" css={{ ...textEllipsis(100) }}>
-              , {previewPreference.name}
-            </Box>
-          )}
-          !
-        </Text>
-        <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>
-          <Text variant="body1" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>
-            Left by mistake?
-          </Text>
-          <Button
-            onClick={() => {
-              rejoin();
-              ToastManager.clearAllToast();
-            }}
-            data-testid="join_again_btn"
-          >
-            <ExitIcon />
-            <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>
-          </Button>
-        </Flex>
-        <Feedback />
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { styled } from '../../../Theme';
-
-const ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (
-  <Flex
-    {...props}
-    css={{
-      flexDirection: 'column',
-      alignItems: 'center',
-      p: '$4 $2',
-      position: 'relative',
-      bg: active ? '$surface_bright' : '',
-      color: disabled ? '$on_surface_low' : '$on_surface_high',
-      gap: '$4',
-      r: '$1',
-      '&:hover': {
-        bg: '$surface_bright',
-      },
-    }}
-    onClick={() => {
-      if (!disabled) {
-        onClick();
-      }
-    }}
-  >
-    {children}
-  </Flex>
-);
-
-const ActionTileCount = styled(Text, {
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  fontWeight: '$semiBold',
-  color: '$on_surface_high',
-  p: '$1 $2',
-  minWidth: '$9',
-  textAlign: 'center',
-  boxSizing: 'border-box',
-  bg: '$surface_bright',
-  r: '$round',
-  letterSpacing: '1.5px',
-  fontSize: '$tiny !important',
-  lineHeight: '$tiny !important',
-});
-
-const ActionTileTitle = styled(Text, {
-  fontWeight: '$semiBold',
-  color: 'inherit',
-  textAlign: 'center',
-  fontSize: '$xs !important',
-});
-
-export const ActionTile = {
-  Root: ActionTileRoot,
-  Title: ActionTileTitle,
-  Count: ActionTileCount,
-};

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

@@ -1,139 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { AlertTriangleIcon, ChangeRoleIcon, CheckIcon } from '@100mslive/react-icons';
-import { Button, Checkbox, Dialog, Dropdown, Flex, Loading, Text } from '../../../';
-import { DialogContent, DialogRow } from '../../primitives/DialogContent';
-import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
-import { useFilteredRoles } from '../../common/hooks';
-
-export const BulkRoleChangeModal = ({ onOpenChange }) => {
-  const roles = useFilteredRoles();
-  const hmsActions = useHMSActions();
-  const ref = useRef(null);
-  const roleRef = useRef(null);
-  const [selectedBulkRole, setBulkRole] = useState([]);
-  const [selectedRole, setRole] = useState('');
-  const [bulkRoleDialog, setBulkRoleDialog] = useState(false);
-  const [roleDialog, setRoleDialog] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-  const [isSubmiting, setIsSubmiting] = useState(false);
-
-  const changeBulkRole = useCallback(async () => {
-    if (selectedBulkRole.length > 0 && selectedRole) {
-      try {
-        setIsSubmiting(true);
-        await hmsActions.changeRoleOfPeersWithRoles(selectedBulkRole, selectedRole);
-        setIsSubmiting(false);
-        setErrorMessage('');
-        onOpenChange(false);
-      } catch (err) {
-        setErrorMessage(err?.message ? err?.message : 'Unknown error');
-        setIsSubmiting(false);
-      }
-    }
-  }, [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <DialogContent title="Bulk Role Change" Icon={ChangeRoleIcon}>
-        <DialogRow>
-          <Text>For Roles: </Text>
-          <Dropdown.Root
-            open={bulkRoleDialog}
-            onOpenChange={value => {
-              if (value) {
-                setBulkRoleDialog(value);
-              }
-            }}
-            modal={false}
-          >
-            <DialogDropdownTrigger
-              ref={ref}
-              title={selectedBulkRole.length === 0 ? 'Select Multiple Roles' : selectedBulkRole.toString()}
-              css={{
-                w: '70%',
-                p: '$8',
-              }}
-              open={bulkRoleDialog}
-            />
-            <Dropdown.Content
-              css={{ w: ref.current?.clientWidth, zIndex: 1000 }}
-              onInteractOutside={() => {
-                if (bulkRoleDialog) {
-                  setBulkRoleDialog(false);
-                }
-              }}
-            >
-              {roles &&
-                roles.map(role => {
-                  return (
-                    <Dropdown.CheckboxItem
-                      key={role}
-                      checked={selectedBulkRole.includes(role)}
-                      onCheckedChange={value => {
-                        setBulkRole(selection => {
-                          return value ? [...selection, role] : selection.filter(selectedRole => selectedRole !== role);
-                        });
-                        setErrorMessage('');
-                      }}
-                    >
-                      <Checkbox.Root css={{ margin: '$2' }} checked={selectedBulkRole.includes(role)}>
-                        <Checkbox.Indicator>
-                          <CheckIcon width={16} height={16} />
-                        </Checkbox.Indicator>
-                      </Checkbox.Root>
-                      {role}
-                    </Dropdown.CheckboxItem>
-                  );
-                })}
-            </Dropdown.Content>
-          </Dropdown.Root>
-        </DialogRow>
-        <DialogRow>
-          <Text>To Role: </Text>
-          <Dropdown.Root open={roleDialog} onOpenChange={value => setRoleDialog(value)}>
-            <DialogDropdownTrigger
-              ref={roleRef}
-              title={selectedRole || 'Select Role'}
-              css={{
-                w: '70%',
-                p: '$8',
-              }}
-              open={roleDialog}
-            />
-            <Dropdown.Content css={{ w: roleRef.current?.clientWidth, zIndex: 1000 }}>
-              {roles &&
-                roles.map(role => {
-                  return (
-                    <Dropdown.Item
-                      key={role}
-                      onSelect={() => {
-                        setRole(role);
-                        setErrorMessage('');
-                      }}
-                    >
-                      {role}
-                    </Dropdown.Item>
-                  );
-                })}
-            </Dropdown.Content>
-          </Dropdown.Root>
-        </DialogRow>
-        <DialogRow>
-          {errorMessage && (
-            <Flex gap={2} css={{ c: '$alert_error_default', w: '70%', ml: 'auto' }}>
-              <AlertTriangleIcon />
-              <Text css={{ c: 'inherit' }}>{errorMessage}</Text>
-            </Flex>
-          )}
-        </DialogRow>
-        <DialogRow justify="end">
-          <Button variant="primary" onClick={changeBulkRole} disabled={!(selectedRole && selectedBulkRole.length > 0)}>
-            {isSubmiting && <Loading css={{ color: '$on_primary_medium' }} />}
-            Apply
-          </Button>
-        </DialogRow>
-      </DialogContent>
-    </Dialog.Root>
-  );
-};

package/src/Prebuilt/components/MoreSettings/CaptionContent.tsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Box, Flex } from '../../../Layout';
-import { Loading } from '../../../Loading';
-import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey, useSetIsCaptionEnabled } from '../AppData/useUISettings';
-import { CAPTION_TOAST } from '../../common/constants';
-
-export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => {
-  const DURATION = 2000;
-  const actions = useHMSActions();
-  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
-  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
-
-  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
-
-  return (
-    <>
-      <Text
-        variant={isMobile ? 'md' : 'lg'}
-        css={{
-          color: '$on_surface_high',
-          fontWeight: '$semiBold',
-          display: 'flex',
-          '@md': { px: '$8' },
-        }}
-      >
-        {isTranscriptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session?
-        <Box
-          css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
-          onClick={onExit}
-        >
-          <CrossIcon />
-        </Box>
-      </Text>
-      {!isMobile ? (
-        <Text variant="sm" css={{ color: '$on_surface_medium', mt: '$4', '@md': { px: '$8' } }}>
-          This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You
-          can&nbsp;
-          {isTranscriptionEnabled ? 'enable' : 'disable'} it later.
-        </Text>
-      ) : null}
-
-      <Flex
-        justify="between"
-        align="center"
-        css={{
-          width: '100%',
-          gap: '$md',
-          mt: '$10',
-          '@md': { px: '$4' },
-        }}
-      >
-        {isMobile ? null : (
-          <Button variant="standard" css={{ w: '100%' }} outlined onClick={onExit}>
-            Cancel
-          </Button>
-        )}
-        <Flex
-          direction="column"
-          justify="between"
-          align="center"
-          css={{
-            width: '100%',
-            '@md': { px: '$4' },
-          }}
-        >
-          {isMobile && isTranscriptionEnabled ? (
-            <Button
-              variant="standard"
-              css={{ w: '100%', mb: '$4' }}
-              outlined
-              onClick={() => {
-                setIsCaptionEnabled(!isCaptionEnabled);
-                onExit();
-              }}
-            >
-              {isCaptionEnabled ? 'Hide For Me' : 'Show For Me'}
-            </Button>
-          ) : null}
-          <Button
-            variant={isTranscriptionEnabled ? 'danger' : 'primary'}
-            css={{ width: '100%' }}
-            data-testid="popup_change_btn"
-            onClick={async () => {
-              try {
-                if (isTranscriptionEnabled) {
-                  await actions.stopTranscription({
-                    mode: HMSTranscriptionMode.CAPTION,
-                  });
-                  setIsCaptionEnabled(false);
-                  const id = ToastManager.replaceToast(toastId, {
-                    title: `Disabling Closed Caption for everyone.`,
-                    variant: 'standard',
-                    duration: DURATION,
-                    icon: <Loading color="currentColor" />,
-                  });
-                  setToastId(id);
-                  onExit();
-                  return;
-                }
-                await actions.startTranscription({
-                  mode: HMSTranscriptionMode.CAPTION,
-                });
-                const id = ToastManager.replaceToast(toastId, {
-                  title: `Enabling Closed Caption for everyone.`,
-                  variant: 'standard',
-                  duration: DURATION,
-                  icon: <Loading color="currentColor" />,
-                });
-                setToastId(id);
-              } catch (err) {
-                const id = ToastManager.replaceToast(toastId, {
-                  title: `Failed to ${isTranscriptionEnabled ? 'disable' : 'enable'} closed caption`,
-                  variant: 'error',
-                  icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
-                });
-                setToastId(id);
-              } finally {
-                setIsCaptionEnabled(true);
-              }
-              onExit();
-            }}
-          >
-            {isTranscriptionEnabled ? 'Disable' : 'Enable'} for Everyone
-          </Button>
-        </Flex>
-      </Flex>
-      {isMobile && (
-        <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$4', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
-          This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You
-          can&nbsp;
-          {isTranscriptionEnabled ? 'enable' : 'disable'} it later.
-        </Text>
-      )}
-    </>
-  );
-};

package/src/Prebuilt/components/MoreSettings/CaptionModal.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { config as cssConfig, Dialog } from '../../..';
-import { Sheet } from '../../../Sheet';
-import { CaptionContent } from './CaptionContent';
-
-export const CaptionModal = ({ onOpenChange }: { onOpenChange: (value: boolean) => void }) => {
-  const isMobile = useMedia(cssConfig.media.md);
-
-  const props = {
-    isMobile,
-    onExit: () => {
-      onOpenChange(false);
-    },
-  };
-
-  if (isMobile) {
-    return (
-      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }}>
-          <CaptionContent {...props} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
-          <CaptionContent {...props} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

package/src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Input } from '../../../Input';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-export const ChangeNameContent = ({
-  changeName,
-  setCurrentName,
-  currentName,
-  localPeerName,
-  isMobile,
-  onExit,
-  onBackClick,
-}: {
-  changeName: () => Promise<void>;
-  setCurrentName: (name: string) => void;
-  currentName?: string;
-  localPeerName?: string;
-  isMobile: boolean;
-  onExit: () => void;
-  onBackClick: () => void;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isMobile) {
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-    }
-  }, [isMobile]);
-
-  return (
-    <form
-      onSubmit={async e => {
-        e.preventDefault();
-        await changeName();
-      }}
-    >
-      <Text
-        variant={isMobile ? 'md' : 'lg'}
-        css={{
-          color: '$on_surface_high',
-          fontWeight: '$semiBold',
-          display: 'flex',
-          pb: '$4',
-          '@md': { px: '$8', borderBottom: '1px solid $border_default' },
-        }}
-      >
-        {isMobile ? <ChevronLeftIcon onClick={onBackClick} style={{ marginRight: '0.5rem' }} /> : null}
-        Change Name
-        <Box
-          css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
-          onClick={onExit}
-        >
-          <CrossIcon />
-        </Box>
-      </Text>
-      <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
-        Your name will be visible to other participants in the session.
-      </Text>
-      <Flex justify="center" align="center" css={{ my: '$8', w: '100%', '@md': { px: '$8' } }}>
-        <Input
-          ref={inputRef}
-          css={{ width: '100%', bg: '$surface_default' }}
-          value={currentName}
-          type="text"
-          onChange={e => {
-            setCurrentName(e.target.value);
-          }}
-          autoComplete="name"
-          required
-          data-testid="change_name_field"
-          onKeyDown={async e => {
-            if (e.key === 'Enter' && currentName && currentName.trim().length > 0 && currentName !== localPeerName) {
-              e.preventDefault();
-              if (isMobile) {
-                return;
-              }
-              changeName();
-            }
-          }}
-        />
-      </Flex>
-
-      <Flex
-        justify="between"
-        align="center"
-        css={{
-          width: '100%',
-          gap: '$md',
-          mt: '$10',
-          '@md': { px: '$4' },
-        }}
-      >
-        {isMobile ? null : (
-          <Button
-            variant="standard"
-            css={{ w: '100%' }}
-            outlined
-            type="submit"
-            disabled={!localPeerName}
-            onClick={onExit}
-          >
-            Cancel
-          </Button>
-        )}
-
-        <Button
-          variant="primary"
-          css={{ width: '100%' }}
-          type="submit"
-          disabled={!currentName?.trim() || currentName?.trim() === localPeerName}
-          data-testid="popup_change_btn"
-        >
-          Change
-        </Button>
-      </Flex>
-    </form>
-  );
-};

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Dialog } from '../../..';
-import { Sheet } from '../../../Sheet';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { ChangeNameContent } from './ChangeNameContent';
-// @ts-ignore: No implicit Any
-import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-
-export const ChangeNameModal = ({
-  onOpenChange,
-  openParentSheet = undefined,
-}: {
-  onOpenChange: (value: boolean) => void;
-  openParentSheet?: () => void;
-}) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions();
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState(localPeerName);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  const changeName = async () => {
-    const name = currentName?.trim() || '';
-    if (!name || name === localPeerName) {
-      return;
-    }
-    try {
-      await hmsActions.changeName(name);
-      setPreviewPreference({
-        ...(previewPreference || {}),
-        name,
-      });
-    } catch (error) {
-      console.error('failed to update name', error);
-      ToastManager.addToast({ title: (error as Error).message });
-    } finally {
-      onOpenChange(false);
-    }
-  };
-
-  const props = {
-    changeName,
-    setCurrentName,
-    currentName,
-    localPeerName,
-    isMobile,
-    onExit: () => onOpenChange(false),
-    onBackClick: () => {
-      onOpenChange(false);
-      openParentSheet?.();
-    },
-  };
-
-  if (isMobile) {
-    return (
-      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }} onOpenAutoFocus={e => e.preventDefault()}>
-          <ChangeNameContent {...props} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
-          <ChangeNameContent {...props} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};