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

package/src/Prebuilt/components/AppData/useSheet.ts

@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
-
-export const useIsSheetTypeOpen = (sheetType: string) => {
-  if (!sheetType) {
-    throw Error('Pass one of the sheet options');
-  }
-  return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType;
-};
-
-export const useSheetState = () => {
-  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
-  return sheet;
-};
-
-export const useSheetToggle = (sheetType: string) => {
-  const hmsActions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
-  const toggleSheet = useCallback(() => {
-    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType;
-    hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : '');
-  }, [vanillaStore, hmsActions, sheetType]);
-  return toggleSheet;
-};
-
-export const useSheetReset = () => {
-  const hmsActions = useHMSActions();
-  const resetSheet = useCallback(() => {
-    hmsActions.setAppData(APP_DATA.sheet, '');
-  }, [hmsActions]);
-  return resetSheet;
-};

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/Header/RoomDetailsHeader.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { ChevronRightIcon } from '@100mslive/react-icons';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSheetToggle } from '../AppData/useSheet';
-// @ts-ignore
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const RoomDetailsHeader = () => {
-  const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia(cssConfig.media.md);
-  const clipLength = 80;
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-
-  if ((!title && !description) || (isMobile && !title)) {
-    return null;
-  }
-
-  return (
-    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>
-      <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
-        {title}
-      </Text>
-      {!isMobile && (
-        <Flex align="end" css={{ color: '$on_surface_high' }}>
-          <Text variant="xs" css={{ c: '$on_surface_medium' }}>
-            {description.slice(0, clipLength)}
-          </Text>
-          {description.length > clipLength ? (
-            <span
-              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}
-              onClick={toggleDetailsPane}
-            >
-              &nbsp;...more
-            </span>
-          ) : null}
-        </Flex>
-      )}
-      {isMobile && description ? (
-        <Flex css={{ color: '$on_surface_medium' }}>
-          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />
-        </Flex>
-      ) : null}
-    </Flex>
-  );
-};

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>
-  );
-};

package/src/Prebuilt/components/RoomDetails/Duration.tsx

@@ -1,26 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { getFormattedTime } from '../Polls/common/utils';
-
-export const Duration = ({ timestamp }: { timestamp: Date }) => {
-  const [elapsedTime, setElapsedTime] = useState(getFormattedTime(Date.now() - timestamp.getTime(), false));
-
-  useEffect(() => {
-    const timerAdded = setInterval(() => {
-      setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
-    }, 1000);
-
-    return () => {
-      clearInterval(timerAdded);
-    };
-  }, [timestamp]);
-
-  return (
-    <Flex css={{ color: '$on_surface_medium' }}>
-      <Text variant="xs" css={{ color: 'inherit' }}>
-        Started {elapsedTime} ago
-      </Text>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { RoomDetailsRow } from './RoomDetailsRow';
-import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const RoomDetailsPane = () => {
-  const { title, description, details } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  return (
-    <Box css={{ flex: '1 1 0' }}>
-      <Flex justify="between" align="center" css={{ w: '100%' }}>
-        <Text variant="h6">{title}</Text>
-        <Flex
-          onClick={toggleDetailsPane}
-          css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
-        >
-          <CrossIcon />
-        </Flex>
-      </Flex>
-
-      <RoomDetailsRow details={details} />
-
-      <Box css={{ mt: '$10' }}>
-        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
-        <Text variant="sm" css={{ c: '$on_surface_medium' }}>
-          {description}
-        </Text>
-      </Box>
-    </Box>
-  );
-};

package/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { Duration } from './Duration';
-
-export const RoomDetailsRow = ({ details }: { details: (string | Date)[] }) => {
-  return (
-    <Flex align="center" css={{ w: '100%' }}>
-      {details.map((detail, index) => (
-        <React.Fragment key={detail.toString()}>
-          {index > 0 && <Box css={{ h: '$2', w: '$2', r: '$round', bg: '$on_surface_medium', m: '0 $2' }} />}
-          {typeof detail !== 'string' ? (
-            <Duration timestamp={detail} />
-          ) : (
-            <Text variant="xs" css={{ c: '$on_surface_medium' }}>
-              {detail}
-            </Text>
-          )}
-        </React.Fragment>
-      ))}
-    </Flex>
-  );
-};

package/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-// @ts-ignore
-import { Logo } from '../Header/HeaderComponents';
-import { RoomDetailsRow } from './RoomDetailsRow';
-import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsSheetTypeOpen, useSheetToggle } from '../AppData/useSheet';
-import { SHEET_OPTIONS } from '../../common/constants';
-
-export const RoomDetailsSheet = () => {
-  const { title, description, details } = useRoomLayoutHeader();
-  const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
-  return (
-    <Sheet.Root open={showRoomDetailsSheet} onOpenChange={toggleSheet}>
-      <Sheet.Content css={{ py: '$8', pb: '$12' }}>
-        <Flex
-          justify="between"
-          align="center"
-          css={{ w: '100%', borderBottom: '1px solid $border_bright', pb: '$4', mb: '$4', px: '$8' }}
-        >
-          <Text css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>Description</Text>
-          <Sheet.Close css={{ color: '$on_surface_high' }}>
-            <CrossIcon />
-          </Sheet.Close>
-        </Flex>
-        <Flex align="center" css={{ w: '100%', gap: '$4', pb: '$8', px: '$8' }}>
-          <Logo />
-          <Box>
-            <Text variant="sm" css={{ c: '$on_secondary_high', fontWeight: '$semiBold' }}>
-              {title}
-            </Text>
-            <RoomDetailsRow details={details} />
-          </Box>
-        </Flex>
-        <Text variant="sm" css={{ color: '$on_surface_medium', px: '$8' }}>
-          {description}
-        </Text>
-      </Sheet.Content>
-    </Sheet.Root>
-  );
-};

package/src/Prebuilt/layouts/Sheet.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
-import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet';
-import { Box } from '../../Layout';
-import { APP_DATA, SHEET_OPTIONS } from '../common/constants';
-
-export const Sheet = () => {
-  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
-  let ViewComponent;
-  if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
-    ViewComponent = <RoomDetailsSheet />;
-  }
-  return <Box>{ViewComponent}</Box>;
-};