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

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -1,393 +0,0 @@
-import React, { Fragment } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSException,
-  HMSSimulcastLayerDefinition,
-  HMSTrackID,
-  HMSVideoTrack,
-  selectAvailableRoleNames,
-  selectPermissions,
-  selectSessionStore,
-  selectTrackByID,
-  useCustomEvent,
-  useHMSActions,
-  useHMSStore,
-  useRemoteAVToggle,
-} from '@100mslive/react-sdk';
-import {
-  MicOffIcon,
-  MicOnIcon,
-  PencilIcon,
-  PersonSettingsIcon,
-  PinIcon,
-  RemoveUserIcon,
-  ShareScreenIcon,
-  ShrinkIcon,
-  SpeakerIcon,
-  StarIcon,
-  VideoOffIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Slider } from '../../../Slider';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { StyledMenuTile } from '../../../TileMenu';
-import { useHMSPrebuiltContext } from '../../AppContext';
-// @ts-ignore
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-// @ts-ignore
-import { useDropdownSelection } from '../hooks/useDropdownSelection';
-import { getDragClassName } from './utils';
-import { APP_DATA, isIOS, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
-
-export const isSameTile = ({
-  trackId,
-  videoTrackID,
-  audioTrackID,
-}: {
-  trackId: HMSTrackID;
-  videoTrackID?: string;
-  audioTrackID?: string;
-}) => !!trackId && ((!!videoTrackID && videoTrackID === trackId) || (!!audioTrackID && audioTrackID === trackId));
-
-const spacingCSS = { '@md': { my: '$8', fontWeight: '$semiBold', fontSize: 'sm' } };
-
-const SpotlightActions = ({
-  peerId,
-  onSpotLightClick = () => {
-    return;
-  },
-}: {
-  peerId: string;
-  onSpotLightClick: () => void;
-}) => {
-  const hmsActions = useHMSActions();
-  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const isTileSpotlighted = spotlightPeerId === peerId;
-  const dragClassName = getDragClassName();
-
-  const setSpotlightPeerId = (peerIdToSpotlight?: string) =>
-    hmsActions.sessionStore
-      .set(SESSION_STORE_KEY.SPOTLIGHT, peerIdToSpotlight)
-      .catch((err: HMSException) => ToastManager.addToast({ title: err.description }));
-
-  return (
-    <StyledMenuTile.ItemButton
-      className={dragClassName}
-      css={spacingCSS}
-      onClick={() => {
-        if (isTileSpotlighted) {
-          setSpotlightPeerId();
-        } else {
-          setSpotlightPeerId(peerId);
-        }
-        onSpotLightClick();
-      }}
-    >
-      <StarIcon height={20} width={20} />
-      <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
-    </StyledMenuTile.ItemButton>
-  );
-};
-
-const PinActions = ({ audioTrackID, videoTrackID }: { videoTrackID: string; audioTrackID: string }) => {
-  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-  const dragClassName = getDragClassName();
-
-  const isTilePinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID,
-    audioTrackID,
-  });
-
-  return (
-    <>
-      <StyledMenuTile.ItemButton
-        className={dragClassName}
-        css={spacingCSS}
-        onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
-      >
-        <PinIcon height={20} width={20} />
-        <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
-      </StyledMenuTile.ItemButton>
-    </>
-  );
-};
-
-const MinimiseInset = () => {
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const dragClassName = getDragClassName();
-
-  return (
-    <>
-      <StyledMenuTile.ItemButton className={dragClassName} css={spacingCSS} onClick={() => setMinimised(!minimised)}>
-        <ShrinkIcon height={20} width={20} />
-        <span>{minimised ? 'Show' : 'Minimise'} your video</span>
-      </StyledMenuTile.ItemButton>
-    </>
-  );
-};
-
-const SimulcastLayers = ({ trackId }: { trackId: HMSTrackID }) => {
-  const track: HMSVideoTrack = useHMSStore(selectTrackByID(trackId)) as HMSVideoTrack;
-  const actions = useHMSActions();
-  const bg = useDropdownSelection();
-  if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
-    return null;
-  }
-  const currentLayer = track.layerDefinitions.find((layer: HMSSimulcastLayerDefinition) => layer.layer === track.layer);
-  const dragClassName = getDragClassName();
-  return (
-    <Fragment>
-      <StyledMenuTile.ItemButton className={dragClassName} css={{ color: '$on_surface_medium', cursor: 'default' }}>
-        Select maximum resolution
-      </StyledMenuTile.ItemButton>
-      {track.layerDefinitions.map((layer: HMSSimulcastLayerDefinition) => {
-        return (
-          <StyledMenuTile.ItemButton
-            className={dragClassName}
-            key={layer.layer}
-            onClick={async () => {
-              await actions.setPreferredLayer(trackId, layer.layer);
-            }}
-            css={{
-              justifyContent: 'space-between',
-              bg: track.preferredLayer === layer.layer ? bg : undefined,
-              '&:hover': {
-                bg: track.preferredLayer === layer.layer ? bg : undefined,
-              },
-            }}
-          >
-            <Text
-              as="span"
-              css={{
-                textTransform: 'capitalize',
-                mr: '$2',
-                fontWeight: track.preferredLayer === layer.layer ? '$semiBold' : '$regular',
-                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
-              }}
-            >
-              {layer.layer}
-            </Text>
-            <Text
-              as="span"
-              variant="xs"
-              css={{
-                color: track.preferredLayer === layer.layer ? '$on_primary_high' : '$on_surface_high',
-              }}
-            >
-              {layer.resolution.width}x{layer.resolution.height}
-            </Text>
-          </StyledMenuTile.ItemButton>
-        );
-      })}
-      <StyledMenuTile.ItemButton className={dragClassName}>
-        <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
-          Currently streaming:
-          <Text
-            as="span"
-            variant="xs"
-            css={{
-              fontWeight: '$semiBold',
-              textTransform: 'capitalize',
-              color: '$on_surface_medium',
-              ml: '$2',
-            }}
-          >
-            {currentLayer ? (
-              <>
-                {track.layer} ({currentLayer.resolution.width}x{currentLayer.resolution.height})
-              </>
-            ) : (
-              '-'
-            )}
-          </Text>
-        </Text>
-      </StyledMenuTile.ItemButton>
-    </Fragment>
-  );
-};
-
-export const TileMenuContent = ({
-  videoTrackID,
-  audioTrackID,
-  isLocal,
-  isScreenshare,
-  showSpotlight,
-  showPinAction,
-  peerID,
-  canMinimise,
-  closeSheetOnClick = () => {
-    return;
-  },
-  openNameChangeModal = () => {
-    return;
-  },
-  openRoleChangeModal = () => {
-    return;
-  },
-}: {
-  videoTrackID: string;
-  audioTrackID: string;
-  isLocal: boolean;
-  isScreenshare: boolean;
-  showSpotlight: boolean;
-  showPinAction: boolean;
-  peerID: string;
-  canMinimise?: boolean;
-  closeSheetOnClick?: () => void;
-  openNameChangeModal?: () => void;
-  openRoleChangeModal?: () => void;
-}) => {
-  const actions = useHMSActions();
-  const dragClassName = getDragClassName();
-  const permissions = useHMSStore(selectPermissions);
-  const canChangeRole = !!permissions?.changeRole;
-  const removeOthers = !!permissions?.removeOthers;
-  const { userName } = useHMSPrebuiltContext();
-  const roles = useHMSStore(selectAvailableRoleNames);
-
-  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
-    audioTrackID,
-    videoTrackID,
-  );
-
-  const { sendEvent } = useCustomEvent({
-    type: REMOTE_STOP_SCREENSHARE_TYPE,
-  });
-
-  const isMobile = useMedia(cssConfig.media.md);
-
-  if (isLocal) {
-    return showPinAction || canMinimise || !userName || showSpotlight ? (
-      <>
-        {showPinAction && <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
-        {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
-        {canMinimise && <MinimiseInset />}
-        {!userName && (
-          <StyledMenuTile.ItemButton
-            className={dragClassName}
-            onClick={() => {
-              openNameChangeModal();
-              closeSheetOnClick();
-            }}
-          >
-            <PencilIcon height={20} width={20} />
-            <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
-              Change Name
-            </Text>
-          </StyledMenuTile.ItemButton>
-        )}
-      </>
-    ) : null;
-  }
-
-  return (
-    <>
-      {toggleVideo ? (
-        <StyledMenuTile.ItemButton
-          className={dragClassName}
-          css={spacingCSS}
-          onClick={() => {
-            toggleVideo();
-            closeSheetOnClick();
-          }}
-          data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
-        >
-          {isVideoEnabled ? <VideoOnIcon height={20} width={20} /> : <VideoOffIcon height={20} width={20} />}
-          <span>{isVideoEnabled ? 'Mute Video' : 'Request to Unmute Video'}</span>
-        </StyledMenuTile.ItemButton>
-      ) : null}
-
-      {toggleAudio ? (
-        <StyledMenuTile.ItemButton
-          css={spacingCSS}
-          className={dragClassName}
-          onClick={() => {
-            toggleAudio();
-            closeSheetOnClick();
-          }}
-          data-testid={isAudioEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
-        >
-          {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
-          <span>{isAudioEnabled ? 'Mute Audio' : 'Request to Unmute Audio'}</span>
-        </StyledMenuTile.ItemButton>
-      ) : null}
-
-      {!isScreenshare && canChangeRole && roles.length > 1 ? (
-        <StyledMenuTile.ItemButton
-          className={dragClassName}
-          css={spacingCSS}
-          onClick={() => {
-            openRoleChangeModal();
-            closeSheetOnClick();
-          }}
-          data-testid="change_role_btn"
-        >
-          <PersonSettingsIcon height={20} width={20} />
-          <span>Switch Role</span>
-        </StyledMenuTile.ItemButton>
-      ) : null}
-
-      {!isIOS && audioTrackID ? (
-        <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
-          <Flex align="center" gap={1}>
-            <SpeakerIcon height={20} width={20} />
-            <Box as="span" css={{ ml: '$4' }}>
-              Volume ({volume})
-            </Box>
-          </Flex>
-          <Slider
-            css={{ my: '0.5rem' }}
-            step={5}
-            value={[typeof volume === 'number' ? volume : 100]}
-            onValueChange={e => setVolume?.(e[0])}
-          />
-        </StyledMenuTile.VolumeItem>
-      ) : null}
-
-      {showPinAction && (
-        <>
-          <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
-          {showSpotlight && <SpotlightActions peerId={peerID} onSpotLightClick={() => closeSheetOnClick()} />}
-        </>
-      )}
-
-      {isMobile ? null : <SimulcastLayers trackId={videoTrackID} />}
-
-      {removeOthers ? (
-        <StyledMenuTile.RemoveItem
-          css={{ ...spacingCSS, borderTop: 'none' }}
-          onClick={async () => {
-            try {
-              await actions.removePeer(peerID, '');
-            } catch (error) {
-              // TODO: Toast here
-            }
-            closeSheetOnClick();
-          }}
-          data-testid="remove_participant_btn"
-        >
-          <RemoveUserIcon height={20} width={20} />
-          <span>Remove Participant</span>
-        </StyledMenuTile.RemoveItem>
-      ) : null}
-
-      {removeOthers && isScreenshare ? (
-        <StyledMenuTile.RemoveItem
-          onClick={() => {
-            sendEvent({});
-            closeSheetOnClick();
-          }}
-          css={spacingCSS}
-        >
-          <ShareScreenIcon height={20} width={20} />
-          <span>Stop Screenshare</span>
-        </StyledMenuTile.RemoveItem>
-      ) : null}
-    </>
-  );
-};

package/src/Prebuilt/components/TileMenu/utils.ts

@@ -1,7 +0,0 @@
-/**
- * Add __cancel-drag-event for the menu to open on touch devices on the draggdable element
- *
- */
-export const getDragClassName = () => {
-  return navigator?.maxTouchPoints > 0 ? '__cancel-drag-event' : '';
-};

package/src/Prebuilt/components/Toast/Toast.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Toast as ToastPrimitive } from '../../../Toast';
-
-export const Toast = ({ title, description, close = true, open, duration, onOpenChange, icon, ...props }) => {
-  return (
-    <ToastPrimitive.HMSToast
-      title={title}
-      description={description}
-      open={open}
-      isClosable={close}
-      onOpenChange={onOpenChange}
-      duration={!close ? 600000 : duration}
-      icon={icon}
-      {...props}
-    />
-  );
-};

package/src/Prebuilt/components/Toast/ToastBatcher.js

@@ -1,64 +0,0 @@
-import { ToastConfig } from './ToastConfig';
-import { ToastManager } from './ToastManager';
-
-export const ToastBatcher = {
-  toastsType: new Map(),
-  toastCache: {},
-  showToastInternal({ notification, duration, type }) {
-    let notificationType = type;
-    if (!type) {
-      notificationType = notification.type;
-    }
-    const toastType = this.toastsType.has(notificationType);
-    if (toastType) {
-      let { notifications } = this.toastsType.get(notificationType);
-      const { id } = this.toastsType.get(notificationType);
-      notifications.push(notification);
-      const toastObject = ToastConfig[notificationType].multiple(notifications);
-      const toastId = ToastManager.replaceToast(id, {
-        ...toastObject,
-        duration: duration,
-      });
-      this.toastsType.set(notificationType, {
-        id: toastId,
-        notifications: notifications,
-        duration: duration,
-      });
-    } else {
-      const toastObject = ToastConfig[notificationType].single(notification);
-      const toastId = ToastManager.addToast({
-        ...toastObject,
-        duration: duration,
-      });
-      let notifications = [];
-      notifications.push(notification);
-      this.toastsType.set(notificationType, {
-        id: toastId,
-        notifications: [...notifications],
-        duration: duration,
-      });
-    }
-  },
-  showToast({ notification, duration = 3000, type }) {
-    try {
-      if (!this.toastCache[notification.id]) {
-        this.showToastInternal({ notification, duration, type });
-      }
-      this.toastCache[notification.id] = true;
-      if (Object.keys(this.toastCache).length > 100) {
-        this.toastCache = {};
-      }
-    } catch (err) {
-      console.debug('Notifications', err);
-    }
-  },
-  syncUItoast(toastsDisplaying) {
-    for (const [toastType, toastInfo] of this.toastsType.entries()) {
-      if (!toastsDisplaying.find(toast => toast.id === toastInfo.id)) {
-        this.toastsType.delete(toastType);
-      }
-    }
-  },
-};
-
-ToastManager.addListener(ToastBatcher.syncUItoast.bind(ToastBatcher));

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -1,177 +0,0 @@
-import React, { useCallback } from 'react';
-import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import {
-  ChatUnreadIcon,
-  ConnectivityIcon,
-  HandIcon,
-  PeopleAddIcon,
-  PeopleRemoveIcon,
-  PoorConnectivityIcon,
-} from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { SIDE_PANE_OPTIONS } from '../../common/constants';
-
-const ChatAction = React.forwardRef((_, ref) => {
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-
-  if (isChatOpen) {
-    return null;
-  }
-
-  return (
-    <Button outlined as="div" variant="standard" css={{ w: 'max-content' }} onClick={toggleChat} ref={ref}>
-      Open Chat
-    </Button>
-  );
-});
-
-const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true }, ref) => {
-  const hmsActions = useHMSActions();
-  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const peer = useHMSStore(selectPeerByID(id));
-  const layout = useRoomLayout();
-  const {
-    bring_to_stage_label,
-    on_stage_role,
-    off_stage_roles = [],
-    skip_preview_for_role_change = false,
-  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
-
-  const onClickHandler = useCallback(async () => {
-    if (isSingleHandRaise) {
-      hmsActions.changeRoleOfPeer(id, on_stage_role, skip_preview_for_role_change);
-      if (skip_preview_for_role_change) {
-        await hmsActions.lowerRemotePeerHand(id);
-      }
-    } else {
-      !isParticipantsOpen && toggleSidepane();
-    }
-  }, [
-    hmsActions,
-    id,
-    isParticipantsOpen,
-    isSingleHandRaise,
-    on_stage_role,
-    toggleSidepane,
-    skip_preview_for_role_change,
-  ]);
-
-  // show nothing if handRaise is single and peer role is not hls
-  if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
-    return null;
-  }
-  return (
-    <Button outlined as="div" variant="standard" css={{ w: 'max-content' }} onClick={onClickHandler} ref={ref}>
-      {isSingleHandRaise ? bring_to_stage_label : 'View'}
-    </Button>
-  );
-});
-
-export const ToastConfig = {
-  PEER_JOINED: {
-    single: function (notification) {
-      return {
-        title: `${notification.data?.name} joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-    multiple: function (notifications) {
-      return {
-        title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-  },
-  PEER_LEFT: {
-    single: function (notification) {
-      return {
-        title: `${notification.data?.name} left`,
-        icon: <PeopleRemoveIcon />,
-      };
-    },
-    multiple: function (notifications) {
-      return {
-        title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-        icon: <PeopleRemoveIcon />,
-      };
-    },
-  },
-  RAISE_HAND: {
-    single: notification => {
-      return {
-        title: `${notification.data?.name} raised hand`,
-        icon: <HandIcon />,
-      };
-    },
-    multiple: notifications => {
-      const count = new Set(notifications.map(notification => notification.data?.id)).size;
-      return {
-        title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `and ${count} others` : ''
-        } raised hand`,
-        icon: <HandIcon />,
-      };
-    },
-  },
-  RAISE_HAND_HLS: {
-    single: notification => {
-      return {
-        title: `${notification.data?.name} raised hand`,
-        icon: <HandIcon />,
-        action: <HandRaiseAction id={notification.data?.id} />,
-      };
-    },
-    multiple: notifications => {
-      const count = new Set(notifications.map(notification => notification.data?.id)).size;
-      return {
-        title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `and ${count} others` : ''
-        } raised hand`,
-        icon: <HandIcon />,
-        action: <HandRaiseAction isSingleHandRaise={false} />,
-      };
-    },
-  },
-  NEW_MESSAGE: {
-    single: notification => {
-      return {
-        title: `New message from ${notification.data?.senderName}`,
-        icon: <ChatUnreadIcon />,
-        action: <ChatAction />,
-      };
-    },
-    multiple: notifications => {
-      return {
-        title: `${notifications.length} new messages`,
-        icon: <ChatUnreadIcon />,
-        action: <ChatAction />,
-      };
-    },
-  },
-  RECONNECTED: {
-    single: online => {
-      return {
-        title: `You are now ${online ? 'online' : 'connected'}`,
-        icon: <ConnectivityIcon />,
-        variant: 'success',
-        duration: 3000,
-      };
-    },
-  },
-  RECONNECTING: {
-    single: message => {
-      return {
-        title: `You are offline for now. while we try to reconnect, please check
-        your internet connection. ${message}.
-      `,
-        icon: <PoorConnectivityIcon />,
-        variant: 'warning',
-        duration: 30000,
-      };
-    },
-  },
-};

package/src/Prebuilt/components/Toast/ToastContainer.jsx

@@ -1,30 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
-import { Toast as ToastPrimitive } from '../../../Toast';
-import { Toast } from './Toast';
-import { ToastManager } from './ToastManager';
-import { MAX_TOASTS } from '../../common/constants';
-
-export const ToastContainer = () => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const [toasts, setToast] = useState([]);
-  useEffect(() => {
-    ToastManager.addListener(setToast);
-    return () => {
-      ToastManager.removeListener(setToast);
-    };
-  }, []);
-  return (
-    <ToastPrimitive.Provider swipeDirection="left" duration={3000}>
-      {toasts.slice(0, MAX_TOASTS).map(toast => {
-        return <Toast key={toast.id} {...toast} onOpenChange={value => !value && ToastManager.removeToast(toast.id)} />;
-      })}
-      <ToastPrimitive.Viewport
-        css={{
-          position: 'absolute',
-          ...(!isConnected ? {} : { bottom: '$24' }),
-        }}
-      />
-    </ToastPrimitive.Provider>
-  );
-};