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

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

@@ -1,301 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { ChevronLeftIcon, CrossIcon, GridFourIcon, NotificationsIcon, SettingsIcon } from '@100mslive/react-icons';
-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 DeviceSettings from './DeviceSettings';
-import { LayoutSettings } from './LayoutSettings';
-import { NotificationSettings } from './NotificationSettings';
-import { settingContent } from './common';
-
-const settingsList = [
-  {
-    tabName: 'devices',
-    title: 'Device Settings',
-    icon: SettingsIcon,
-    content: DeviceSettings,
-  },
-  {
-    tabName: 'notifications',
-    title: 'Notifications',
-    icon: NotificationsIcon,
-    content: NotificationSettings,
-  },
-  {
-    tabName: 'layout',
-    title: 'Layout',
-    icon: GridFourIcon,
-    content: LayoutSettings,
-  },
-];
-
-const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
-  const mediaQueryLg = cssConfig.media.md;
-  const isMobile = useMedia(mediaQueryLg);
-
-  const [showSetting, setShowSetting] = useState(() =>
-    settingsList.reduce((obj, { tabName }) => ({ ...obj, [tabName]: true }), {}),
-  );
-
-  const hideSettingByTabName = useCallback(
-    key => hide => setShowSetting(prev => ({ ...prev, [key]: !hide })),
-    [setShowSetting],
-  );
-
-  useEffect(() => {
-    if (screenType === 'hls_live_streaming') {
-      hideSettingByTabName('layout')(true);
-    }
-  }, [screenType, hideSettingByTabName]);
-
-  const [selection, setSelection] = useState(() => Object.keys(showSetting).find(key => showSetting[key]) ?? '');
-  const resetSelection = useCallback(() => {
-    setSelection('');
-  }, []);
-
-  useEffect(() => {
-    if (isMobile) {
-      setSelection('');
-    } else {
-      const firstNotHiddenTabName = Object.keys(showSetting).find(key => showSetting[key]) ?? '';
-      setSelection(firstNotHiddenTabName);
-    }
-  }, [isMobile, showSetting]);
-
-  return isMobile ? (
-    <MobileSettingModal
-      open={open}
-      onOpenChange={onOpenChange}
-      selection={selection}
-      setSelection={setSelection}
-      showSetting={showSetting}
-      hideSettingByTabName={hideSettingByTabName}
-      resetSelection={resetSelection}
-    >
-      {children}
-    </MobileSettingModal>
-  ) : (
-    <DesktopSettingModal
-      open={open}
-      onOpenChange={onOpenChange}
-      selection={selection}
-      setSelection={setSelection}
-      showSetting={showSetting}
-      hideSettingByTabName={hideSettingByTabName}
-      resetSelection={resetSelection}
-    >
-      {children}
-    </DesktopSettingModal>
-  );
-};
-
-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={{
-              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',
-                      p: '$10 $8',
-                      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>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            w: 'min(800px, 90%)',
-            height: 'min(656px, 90%)',
-            p: 0,
-            r: '$4',
-          }}
-        >
-          <Tabs.Root
-            value={selection}
-            activationMode="automatic"
-            onValueChange={setSelection}
-            css={{ size: '100%', position: 'relative' }}
-          >
-            <Tabs.List
-              css={{
-                w: '18.625rem',
-                flexDirection: 'column',
-                bg: '$background_default',
-                p: '$14 $10',
-                borderTopLeftRadius: '$4',
-                borderBottomLeftRadius: '$4',
-              }}
-            >
-              <Text variant="h5">Settings </Text>
-              <Flex direction="column" css={{ mx: 0, overflowY: 'auto', pt: '$10' }}>
-                {settingsList
-                  .filter(({ tabName }) => showSetting[tabName])
-                  .map(({ icon: Icon, tabName, title }) => {
-                    return (
-                      <Tabs.Trigger key={tabName} value={tabName} css={{ gap: '$8' }}>
-                        <Icon />
-                        {title}
-                      </Tabs.Trigger>
-                    );
-                  })}
-              </Flex>
-            </Tabs.List>
-            {selection && (
-              <Flex
-                direction="column"
-                css={{
-                  flex: '1 1 0',
-                  minWidth: 0,
-                  mr: '$4',
-                }}
-              >
-                {settingsList
-                  .filter(({ tabName }) => showSetting[tabName])
-                  .map(({ content: Content, title, tabName }) => {
-                    return (
-                      <Tabs.Content key={tabName} value={tabName} className={settingContent()}>
-                        <SettingsContentHeader onBack={resetSelection} isMobile={false}>
-                          {title}
-                        </SettingsContentHeader>
-                        <Content setHide={hideSettingByTabName(tabName)} />
-                      </Tabs.Content>
-                    );
-                  })}
-              </Flex>
-            )}
-          </Tabs.Root>
-          <Dialog.Close css={{ position: 'absolute', right: '$10', top: '$10' }}>
-            <IconButton as="div" data-testid="dialog_cross_icon">
-              <CrossIcon />
-            </IconButton>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-const SettingsContentHeader = ({ children, isMobile, onBack }) => {
-  return (
-    <Text variant="h6" css={{ mb: '$12', display: 'flex', alignItems: 'center' }}>
-      {isMobile && (
-        <Box as="span" css={{ bg: '$surface_bright', mr: '$4', r: '$round', p: '$2' }} onClick={onBack}>
-          <ChevronLeftIcon />
-        </Box>
-      )}
-      {children}
-    </Text>
-  );
-};
-
-export default SettingsModal;

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

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-import { AlertTriangleIcon } from '@100mslive/react-icons';
-import { Button, Dialog, Flex, Text } from '../../../';
-import { ResolutionInput } from '../Streaming/ResolutionInput';
-import { ToastManager } from '../Toast/ToastManager';
-import { useRecordingHandler } from '../../common/hooks';
-import { RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
-
-const StartRecording = ({ open, onOpenChange }) => {
-  const permissions = useHMSStore(selectPermissions);
-  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const { startRecording, recordingStarted } = useRecordingHandler();
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const hmsActions = useHMSActions();
-  if (!permissions?.browserRecording || isHLSRunning) {
-    return null;
-  }
-  if (isBrowserRecordingOn) {
-    return (
-      <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <Dialog.Portal>
-          <Dialog.Content
-            css={{
-              width: 'min(400px,80%)',
-              p: '$10',
-              bg: '#201617',
-            }}
-          >
-            <Dialog.Title>
-              <Flex gap={2} css={{ c: '$alert_error_default' }}>
-                <AlertTriangleIcon />
-                <Text css={{ c: 'inherit' }} variant="h6">
-                  End Recording
-                </Text>
-              </Flex>
-            </Dialog.Title>
-            <Text variant="sm" css={{ c: '$on_surface_medium', my: '$8' }}>
-              Are you sure you want to end recording? You can’t undo this action.
-            </Text>
-            <Flex justify="end" css={{ mt: '$12' }}>
-              <Dialog.Close asChild>
-                <Button outlined css={{ borderColor: '$secondary_bright', mr: '$4' }}>
-                  Don't end
-                </Button>
-              </Dialog.Close>
-              <Button
-                data-testid="stop_recording_confirm_mobile"
-                variant="danger"
-                icon
-                onClick={async () => {
-                  try {
-                    await hmsActions.stopRTMPAndRecording();
-                  } catch (error) {
-                    ToastManager.addToast({
-                      title: error.message,
-                      variant: 'error',
-                    });
-                  }
-                  onOpenChange(false);
-                }}
-              >
-                End recording
-              </Button>
-            </Flex>
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-    );
-  }
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
-        <Dialog.Title>
-          <Text variant="h6">Start Recording</Text>
-        </Dialog.Title>
-        <ResolutionInput
-          testId="recording_resolution_mobile"
-          css={{ flexDirection: 'column', alignItems: 'start' }}
-          onResolutionChange={setResolution}
-        />
-        <Button
-          data-testid="start_recording_confirm_mobile"
-          variant="primary"
-          icon
-          css={{ ml: 'auto' }}
-          type="submit"
-          disabled={recordingStarted || isStreamingOn}
-          onClick={async () => {
-            await startRecording(resolution);
-            onOpenChange(false);
-          }}
-        >
-          Start
-        </Button>
-      </Dialog.Content>
-    </Dialog.Root>
-  );
-};
-
-export default StartRecording;

package/src/Prebuilt/components/Settings/SwitchWithLabel.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Label } from '../../../Label';
-import { Flex } from '../../../Layout';
-import { Switch } from '../../../Switch';
-
-const SwitchWithLabel = ({
-  label,
-  icon,
-  id,
-  onChange,
-  checked,
-  hide = false,
-}: {
-  label: string;
-  icon?: React.ReactNode;
-  id: string;
-  onChange: (value: boolean) => void;
-  checked: boolean;
-  hide?: boolean;
-}) => {
-  return (
-    <Flex
-      align="center"
-      css={{
-        my: '$2',
-        py: '$8',
-        w: '100%',
-        borderBottom: '1px solid $border_default',
-        display: hide ? 'none' : 'flex',
-      }}
-    >
-      <Label
-        htmlFor={id}
-        css={{
-          fontSize: '$md',
-          fontWeight: '$semiBold',
-          color: checked ? '$on_surface_high' : '$on_surface_low',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '$8',
-          flex: '1 1 0',
-        }}
-      >
-        {icon}
-        {label}
-      </Label>
-      <Switch id={id} checked={checked} onCheckedChange={onChange} />
-    </Flex>
-  );
-};
-
-export default SwitchWithLabel;

package/src/Prebuilt/components/Settings/common.ts

@@ -1,16 +0,0 @@
-import { css } from '../../..';
-
-export const settingOverflow = css({
-  flex: '1 1 0',
-  pr: '$12',
-  mr: '-$12',
-  overflowY: 'auto',
-});
-
-export const settingContent = css({
-  display: 'flex',
-  flexDirection: 'column',
-  '&[hidden]': {
-    display: 'none',
-  },
-});

package/src/Prebuilt/components/ShareMenuIcon.jsx

@@ -1,27 +0,0 @@
-import { styled } from '../../Theme';
-import IconButton from '../IconButton';
-
-export const ScreenShareButton = styled(IconButton, {
-  h: '$14',
-  px: '$8',
-  r: '$1',
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0,
-  '@md': {
-    px: '$4',
-    mx: 0,
-  },
-});
-
-export const ShareMenuIcon = styled(ScreenShareButton, {
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  borderTopRightRadius: '$1',
-  borderBottomRightRadius: '$1',
-  borderLeftWidth: 0,
-  w: '$4',
-  '@md': {
-    w: 'unset',
-    px: '$2',
-  },
-});