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

package/src/Prebuilt/components/RoleChangeModal.tsx

@@ -1,188 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { HMSPeer, selectAvailableRoleNames, selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Dropdown } from '../../Dropdown';
-import { Box, Flex } from '../../Layout';
-import { Dialog } from '../../Modal';
-import { Sheet } from '../../Sheet';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-import { Tooltip } from '../../Tooltip';
-
-const HighlightTerm = ({ value }: { value: string | undefined }) => {
-  return value ? (
-    <Tooltip side="top" title={value}>
-      <Text
-        variant="body2"
-        css={{
-          color: '$on_surface_medium',
-          fontWeight: '$semiBold',
-        }}
-      >
-        '{value.slice(0, 100)}
-        {value.length > 100 ? '...' : ''}'
-      </Text>
-    </Tooltip>
-  ) : (
-    <></>
-  );
-};
-
-const RoleChangeContent = ({
-  peer,
-  onOpenChange,
-  isMobile = false,
-}: {
-  peer: HMSPeer;
-  onOpenChange: (open: boolean) => void;
-  isMobile?: boolean;
-}) => {
-  const roles = useHMSStore(selectAvailableRoleNames).filter(
-    role => role !== peer?.roleName && role !== '__internal_recorder',
-  );
-  const [selectedRole, setRole] = useState(roles.filter(role => role !== peer?.roleName)?.[0] || peer?.roleName);
-  const hmsActions = useHMSActions();
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement | undefined>();
-
-  return (
-    <>
-      <Flex align="center" justify="between" css={{ w: '100%' }}>
-        <Text as="h6" variant="h6">
-          Switch Role
-        </Text>
-        {isMobile && <CrossIcon onClick={() => onOpenChange(false)} />}
-      </Flex>
-
-      <Box>
-        <Text
-          variant="sm"
-          css={{
-            mt: '$4',
-            mb: '$8',
-            c: '$on_surface_medium',
-            display: 'flex',
-            flexWrap: 'wrap',
-            columnGap: '4px',
-          }}
-        >
-          Switch the role of
-          <HighlightTerm value={peer.name} />
-          from <HighlightTerm value={peer.roleName} /> to
-        </Text>
-      </Box>
-      <Flex
-        align="center"
-        css={{
-          w: '100%',
-          mb: '$10',
-        }}
-      >
-        <Box
-          css={{
-            position: 'relative',
-            flex: '1 1 0',
-            minWidth: 0,
-          }}
-        >
-          <Dropdown.Root open={open} onOpenChange={setOpen} css={{ width: '100%' }}>
-            <Dropdown.Trigger
-              // @ts-ignore
-              ref={triggerRef}
-              data-testid="open_role_selection_dropdown"
-              asChild
-              css={{
-                bg: '$surface_default',
-                r: '$1',
-                p: '$6 $9',
-              }}
-            >
-              <Flex align="center" justify="between" css={{ width: '100%' }}>
-                <Text>{selectedRole}</Text>
-                {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-              </Flex>
-            </Dropdown.Trigger>
-
-            <Dropdown.Content align="start" sideOffset={8} css={{ zIndex: 1000, w: '100%' }}>
-              {roles.map(role => (
-                <Dropdown.Item
-                  data-testid={role}
-                  key={role}
-                  onSelect={() => setRole(role)}
-                  css={{ w: `${triggerRef.current?.clientWidth}px` }}
-                >
-                  {role}
-                </Dropdown.Item>
-              ))}
-            </Dropdown.Content>
-          </Dropdown.Root>
-        </Box>
-      </Flex>
-      <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
-        {!isMobile && (
-          <Button
-            variant="standard"
-            outlined
-            css={{ width: '100%' }}
-            onClick={() => onOpenChange(false)}
-            data-testid="cancel_button"
-          >
-            Cancel
-          </Button>
-        )}
-
-        <Button
-          data-testid="change_button"
-          variant="primary"
-          css={{ width: '100%' }}
-          onClick={async () => {
-            if (selectedRole) {
-              await hmsActions.changeRoleOfPeer(peer.id, selectedRole, true);
-              onOpenChange(false);
-            }
-          }}
-        >
-          Switch Role
-        </Button>
-      </Flex>
-    </>
-  );
-};
-
-export const RoleChangeModal = ({
-  peerId,
-  onOpenChange,
-}: {
-  peerId: string;
-  onOpenChange: (open: boolean) => void;
-}) => {
-  const peer = useHMSStore(selectPeerByID(peerId));
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (!peer) {
-    return null;
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet.Root open={true} onOpenChange={onOpenChange} css={{ borderRadius: '$0 $0 0 0' }}>
-        <Sheet.Content css={{ p: '$10 $8', background: '$surface_dim', border: '1px solid $border_default' }}>
-          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} isMobile />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10', overflow: 'visible' }}>
-          <RoleChangeContent peer={peer} onOpenChange={onOpenChange} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
-import { Sheet } from '../../../Sheet';
-
-export const RequestPrompt = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = 'Accept',
-  onAction,
-  disableActions = false,
-}: {
-  open?: boolean;
-  onOpenChange: (value: boolean) => void;
-  title: string;
-  body: React.ReactNode;
-  actionText?: string;
-  onAction: () => void;
-  disableActions?: boolean;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (isMobile) {
-    return (
-      <Sheet.Root open={open} onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ py: '$8' }}>
-          <Text css={{ fontWeight: '$semiBold', c: '$on_surface_high', '@md': { px: '$8' } }}>{title}</Text>
-          {body}
-          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root open={open} modal={false} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Content css={{ p: '$10' }} onInteractOutside={e => e.preventDefault()}>
-          <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
-            <Text variant="h6">{title}</Text>
-          </Dialog.Title>
-          <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
-          <RequestActions actionText={actionText} onAction={onAction} disabled={disableActions} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-const RequestActions = ({
-  onAction,
-  actionText,
-  disabled = false,
-}: {
-  actionText?: string;
-  onAction: () => void;
-  disabled?: boolean;
-}) => (
-  <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
-    <Box css={{ width: '50%' }}>
-      <Dialog.Close css={{ width: '100%', height: '100%' }} asChild>
-        <Button variant="standard" outlined css={{ width: '100%', p: '$4 $8' }} disabled={disabled}>
-          Decline
-        </Button>
-      </Dialog.Close>
-    </Box>
-    <Box css={{ width: '50%' }}>
-      <Button variant="primary" css={{ width: '100%' }} onClick={onAction} disabled={disabled}>
-        {actionText}
-      </Button>
-    </Box>
-  </Flex>
-);

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  selectIsInPreview,
-  selectLocalPeerName,
-  selectLocalPeerRoleName,
-  selectRoleChangeRequest,
-  useCustomEvent,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { Flex, Text } from '../../..';
-// @ts-ignore: No implicit Any
-import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
-import { RequestPrompt } from './RequestPrompt';
-import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useMyMetadata } from '../hooks/useMetadata';
-// @ts-ignore: No implicit Any
-import { ROLE_CHANGE_DECLINED } from '../../common/constants';
-
-export const RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions();
-  const { updateMetaData } = useMyMetadata();
-  const isPreview = useHMSStore(selectIsInPreview);
-  const currentRole = useHMSStore(selectLocalPeerRoleName);
-  const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
-  const name = useHMSStore(selectLocalPeerName);
-  const { sendEvent } = useCustomEvent({ type: ROLE_CHANGE_DECLINED });
-  const { elements = {} } = useRoomLayoutPreviewScreen();
-  const { virtual_background } = elements || {};
-
-  useEffect(() => {
-    if (!roleChangeRequest?.role) {
-      return;
-    }
-    (async () => {
-      await hmsActions.preview({ asRole: roleChangeRequest.role.name });
-    })();
-  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
-
-  if (!roleChangeRequest?.role) {
-    return null;
-  }
-
-  const body = (
-    <>
-      <Text
-        variant="xs"
-        css={{
-          c: '$on_surface_medium',
-          textAlign: 'center',
-          '@md': { textAlign: 'left', borderBottom: '1px solid $border_bright', pb: '$4', px: '$8' },
-        }}
-      >
-        Setup your audio and video before joining
-      </Text>
-      <Flex
-        align="center"
-        justify="center"
-        css={{
-          '@sm': { width: '100%' },
-          flexDirection: 'column',
-          mt: '$6',
-          '@md': { px: '$8' },
-        }}
-      >
-        <PreviewTile name={name || ''} />
-
-        <PreviewControls hideSettings={true} vbEnabled={!!virtual_background} />
-      </Flex>
-    </>
-  );
-
-  return (
-    <RequestPrompt
-      title="You're invited to join the stage"
-      onOpenChange={async value => {
-        if (!value) {
-          hmsActions.rejectChangeRole(roleChangeRequest);
-          sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
-          await hmsActions.cancelMidCallPreview();
-          await hmsActions.lowerLocalPeerHand();
-        }
-      }}
-      body={body}
-      onAction={async () => {
-        await hmsActions.acceptChangeRole(roleChangeRequest);
-        await updateMetaData({ prevRole: currentRole });
-        await hmsActions.lowerLocalPeerHand();
-      }}
-      actionText="Accept"
-      disableActions={!isPreview}
-    />
-  );
-};

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,63 +0,0 @@
-import React from 'react';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-// @ts-ignore: No implicit any
-import { Logo } from '../Header/HeaderComponents';
-import { RoomDetailsRow } from './RoomDetailsRow';
-import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { useMobileHLSStream } from '../../common/hooks';
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-export const RoomDetailsPane = () => {
-  const { description } = useRoomLayoutHeader();
-  const isMwebHLSStream = useMobileHLSStream();
-  return (
-    <Box css={{ flex: '1 1 0', position: 'relative' }}>
-      {isMwebHLSStream ? (
-        <Flex direction="row" align="center" gap="2">
-          <Logo />
-          <ShowRoomDetailHeader />
-        </Flex>
-      ) : (
-        <ShowRoomDetailHeader />
-      )}
-      <Box css={{ mt: '$10' }}>
-        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold', display: isMwebHLSStream ? 'none' : '' }}>
-          Description
-        </Text>
-        <Text variant="sm" css={{ c: '$on_surface_medium' }}>
-          {description}
-        </Text>
-      </Box>
-    </Box>
-  );
-};
-
-const ShowRoomDetailHeader = () => {
-  const { title, details } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  const isMwebHLSStream = useMobileHLSStream();
-  return (
-    <Flex direction="column" css={{ position: 'sticky', top: 0, bg: '$surface_dim' }}>
-      <Flex justify="between" align="center" css={{ w: '100%' }}>
-        <Text variant="h6">{title}</Text>
-        {!isMwebHLSStream && (
-          <Flex
-            onClick={toggleDetailsPane}
-            css={{
-              color: '$on_surface_high',
-              cursor: 'pointer',
-              '&:hover': { opacity: '0.8' },
-            }}
-          >
-            <CrossIcon />
-          </Flex>
-        )}
-      </Flex>
-      <RoomDetailsRow details={details} />
-    </Flex>
-  );
-};

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/components/ScreenShareToggle.jsx

@@ -1,58 +0,0 @@
-import React, { Fragment } from 'react';
-import { selectIsAllowedToPublish, useAwayNotifications, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
-import { ShareScreenIcon } from '@100mslive/react-icons';
-import { ShareScreenOptions } from './pdfAnnotator/shareScreenOptions';
-import { ToastManager } from './Toast/ToastManager';
-import { Box, Flex } from '../../Layout';
-import { Tooltip } from '../../Tooltip';
-import { ScreenShareButton } from './ShareMenuIcon';
-import { useUISettings } from './AppData/useUISettings';
-import { isScreenshareSupported } from '../common/utils';
-import { UI_SETTINGS } from '../common/constants';
-
-export const ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-
-  const {
-    amIScreenSharing,
-    screenShareVideoTrackId: video,
-    toggleScreenShare,
-  } = useScreenShare(error => {
-    ToastManager.addToast({
-      title: error.message,
-      variant: 'error',
-      duration: 2000,
-    });
-  });
-  const { requestPermission } = useAwayNotifications();
-  const isVideoScreenshare = amIScreenSharing && !!video;
-  if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <Flex direction="row">
-        <ScreenShareButton
-          variant="standard"
-          key="ShareScreen"
-          active={!isVideoScreenshare}
-          css={css}
-          disabled={isAudioOnly}
-          onClick={async () => {
-            await toggleScreenShare();
-            await requestPermission();
-          }}
-        >
-          <Tooltip title={`${!isVideoScreenshare ? 'Start' : 'Stop'} screen sharing`}>
-            <Box>
-              <ShareScreenIcon />
-            </Box>
-          </Tooltip>
-        </ScreenShareButton>
-        <ShareScreenOptions />
-      </Flex>
-    </Fragment>
-  );
-};

package/src/Prebuilt/components/ScreenshareDisplay.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { CrossIcon, ShareScreenIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Flex } from '../../Layout';
-import { Text } from '../../Text';
-
-export const ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions();
-
-  return (
-    <Flex
-      direction="column"
-      align="center"
-      justify="center"
-      css={{
-        size: '100%',
-        bg: '$background_default',
-        color: '$on_surface_high',
-      }}
-    >
-      <ShareScreenIcon width={48} height={48} />
-      <Text variant="h5" css={{ m: '$8 0' }}>
-        You are sharing your screen
-      </Text>
-      <Button
-        variant="danger"
-        css={{ fontWeight: '$semiBold' }}
-        onClick={async () => {
-          await hmsActions.setScreenShareEnabled(false);
-        }}
-        data-testid="stop_screen_share_btn"
-      >
-        <CrossIcon width={18} height={18} />
-        &nbsp; Stop screen share
-      </Button>
-    </Flex>
-  );
-};