@100mslive/roomkit-react 0.2.6 → 0.2.7-alpha.1

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -1,171 +0,0 @@
-import React, { Fragment } from 'react';
-import {
-  DeviceType,
-  HMSRoomState,
-  selectLocalVideoTrackID,
-  selectRoomState,
-  selectVideoTrackByID,
-  useAVToggle,
-  useDevices,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';
-import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
-import { ToastManager } from './Toast/ToastManager';
-import { Text } from '../../Text';
-import { Tooltip } from '../../Tooltip';
-import IconButton from '../IconButton';
-import { isMacOS } from '../common/constants';
-
-const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
-
-export const AudioVideoToggle = ({ hideOptions = false }) => {
-  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
-  const { videoInput, audioInput } = allDevices;
-
-  const formattedVideoInputList = videoInput?.map(videoInput => ({
-    active: selectedDeviceIDs.videoInput === videoInput.deviceId,
-    content: (
-      <Text
-        variant="sm"
-        onClick={() =>
-          updateDevice({
-            deviceType: DeviceType.videoInput,
-            deviceId: videoInput.deviceId,
-          })
-        }
-        css={optionsCSS}
-      >
-        {videoInput.label}
-      </Text>
-    ),
-    title: videoInput.label,
-  }));
-
-  const formattedAudioInputList = audioInput?.map(audioInput => ({
-    active: selectedDeviceIDs.audioInput === audioInput.deviceId,
-    content: (
-      <Text
-        variant="sm"
-        onClick={() =>
-          updateDevice({
-            deviceType: DeviceType.audioInput,
-            deviceId: audioInput.deviceId,
-          })
-        }
-        css={optionsCSS}
-      >
-        {audioInput.label}
-      </Text>
-    ),
-    title: audioInput.label,
-  }));
-
-  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
-  const actions = useHMSActions();
-  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-  const roomState = useHMSStore(selectRoomState);
-  const hasAudioDevices = audioInput?.length > 0;
-  const hasVideoDevices = videoInput?.length > 0;
-
-  return (
-    <Fragment>
-      {toggleAudio ? (
-        hideOptions || !hasAudioDevices ? (
-          <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
-            <IconButton
-              active={isLocalAudioEnabled}
-              disabled={!toggleAudio}
-              onClick={toggleAudio}
-              key="toggleAudio"
-              data-testid="audio_btn"
-              className="__cancel-drag-event"
-            >
-              {!isLocalAudioEnabled ? (
-                <MicOffIcon data-testid="audio_off_btn" />
-              ) : (
-                <MicOnIcon data-testid="audio_on_btn" />
-              )}
-            </IconButton>
-          </Tooltip>
-        ) : (
-          <IconButtonWithOptions
-            options={formattedAudioInputList}
-            disabled={!toggleAudio}
-            onDisabledClick={toggleAudio}
-            tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
-            icon={
-              !isLocalAudioEnabled ? (
-                <MicOffIcon data-testid="audio_off_btn" />
-              ) : (
-                <MicOnIcon data-testid="audio_on_btn" />
-              )
-            }
-            active={isLocalAudioEnabled}
-            onClick={toggleAudio}
-            key="toggleAudio"
-          />
-        )
-      ) : null}
-
-      {toggleVideo ? (
-        hideOptions || !hasVideoDevices ? (
-          <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
-            <IconButton
-              key="toggleVideo"
-              active={isLocalVideoEnabled}
-              disabled={!toggleVideo}
-              onClick={toggleVideo}
-              data-testid="video_btn"
-              className="__cancel-drag-event"
-            >
-              {!isLocalVideoEnabled ? (
-                <VideoOffIcon data-testid="video_off_btn" />
-              ) : (
-                <VideoOnIcon data-testid="video_on_btn" />
-              )}
-            </IconButton>
-          </Tooltip>
-        ) : (
-          <IconButtonWithOptions
-            disabled={!toggleVideo}
-            onDisabledClick={toggleVideo}
-            options={formattedVideoInputList}
-            tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
-            icon={
-              !isLocalVideoEnabled ? (
-                <VideoOffIcon data-testid="video_off_btn" />
-              ) : (
-                <VideoOnIcon data-testid="video_on_btn" />
-              )
-            }
-            key="toggleVideo"
-            active={isLocalVideoEnabled}
-            onClick={toggleVideo}
-          />
-        )
-      ) : null}
-
-      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
-        <Tooltip title="Switch Camera" key="switchCamera">
-          <IconButton
-            onClick={async () => {
-              try {
-                await actions.switchCamera();
-              } catch (e) {
-                ToastManager.addToast({
-                  title: `Error while flipping camera ${e.message || ''}`,
-                  variant: 'error',
-                });
-              }
-            }}
-          >
-            <CameraFlipIcon />
-          </IconButton>
-        </Tooltip>
-      ) : null}
-    </Fragment>
-  );
-};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { VerticalMenuIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Box, Flex } from '../../../Layout';
-import { styled } from '../../../Theme';
-import { Tooltip } from '../../../Tooltip';
-import IconButton from '../../IconButton';
-
-const IconSection = styled(IconButton, {
-  w: 'unset',
-  h: '$14',
-  p: '$4',
-  r: '$1',
-  borderTopRightRadius: 0,
-  borderColor: '$border_bright',
-  borderBottomRightRadius: 0,
-  position: 'relative',
-  '&:not([disabled]):focus-visible': {
-    zIndex: 1,
-  },
-  '@md': {
-    mx: 0,
-    borderTopRightRadius: '$1',
-    borderBottomRightRadius: '$1',
-  },
-});
-
-const OptionsSection = styled(IconButton, {
-  w: 'unset',
-  h: '$14',
-  p: '$4 $2',
-  r: '$1',
-  borderTopLeftRadius: 0,
-  borderColor: '$border_bright',
-  borderBottomLeftRadius: 0,
-  borderLeftWidth: 0,
-  position: 'relative',
-  '&:not([disabled]):focus-visible': {
-    zIndex: 1,
-  },
-  '@md': {
-    display: 'none',
-  },
-});
-
-export const IconButtonWithOptions = ({
-  disabled = false,
-  onDisabledClick = () => {
-    return;
-  },
-  tooltipMessage = '',
-  icon,
-  options = [],
-  active,
-  onClick = () => {
-    return;
-  },
-}) => {
-  const bgCss = { backgroundColor: disabled ? '$surface_brighter' : active ? '$transparent' : '$secondary_dim' };
-  const iconCss = { color: disabled ? '$on_surface_low' : active ? '$on_surface_high' : '$on_primary_high' };
-
-  return (
-    <Flex>
-      <IconSection css={bgCss} onClick={onClick}>
-        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
-          <Flex align="center" justify="center" css={iconCss}>
-            {icon}
-          </Flex>
-        </Tooltip>
-      </IconSection>
-      <Dropdown.Root>
-        <Dropdown.Trigger
-          asChild
-          // onClick does not work
-          onPointerDown={e => {
-            if (disabled) {
-              e.preventDefault();
-              onDisabledClick();
-            }
-          }}
-        >
-          <OptionsSection css={bgCss}>
-            <Tooltip title="View Options">
-              <Box css={iconCss}>
-                <VerticalMenuIcon />
-              </Box>
-            </Tooltip>
-          </OptionsSection>
-        </Dropdown.Trigger>
-        <Dropdown.Content
-          sideOffset={5}
-          align="center"
-          css={{
-            w: '$64',
-            maxHeight: '$96',
-            p: 0,
-            border: 'none',
-          }}
-        >
-          {options.map((option, index) => (
-            <Dropdown.Item
-              key={option.title}
-              css={{
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                backgroundColor: option.active ? '$surface_bright' : '$surface_dim',
-                borderTop: index === 0 ? 'none' : '1px solid $border_default',
-                '&:hover': {
-                  cursor: 'pointer',
-                },
-                p: '0',
-              }}
-            >
-              {option.content}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Flex>
-  );
-};