@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/TileMenu.jsx

@@ -0,0 +1,275 @@
+import React, { Fragment, useState } from 'react';
+import {
+  selectLocalPeerID,
+  selectPermissions,
+  selectSessionStore,
+  selectTemplateAppData,
+  selectTrackByID,
+  selectVideoTrackByPeerID,
+  useCustomEvent,
+  useHMSActions,
+  useHMSStore,
+  useRemoteAVToggle,
+} from '@100mslive/react-sdk';
+import {
+  HorizontalMenuIcon,
+  MicOffIcon,
+  MicOnIcon,
+  PinIcon,
+  RemoveUserIcon,
+  ShareScreenIcon,
+  SpeakerIcon,
+  StarIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { ToastManager } from './Toast/ToastManager';
+import { Box, Flex } from '../../Layout';
+import { Slider } from '../../Slider';
+import { Text } from '../../Text';
+import { StyledMenuTile } from '../../TileMenu';
+import { useSetAppDataByKey } from './AppData/useUISettings';
+import { useDropdownList } from './hooks/useDropdownList';
+import { useDropdownSelection } from './hooks/useDropdownSelection';
+import { useIsFeatureEnabled } from './hooks/useFeatures';
+import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../common/constants';
+
+const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
+  trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
+
+const SpotlightActions = ({ audioTrackID, videoTrackID }) => {
+  const hmsActions = useHMSActions();
+  const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const isTileSpotlighted = isSameTile({
+    trackId: spotlightTrackId,
+    videoTrackID,
+    audioTrackID,
+  });
+
+  const setSpotlightTrackId = trackId =>
+    hmsActions.sessionStore
+      .set(SESSION_STORE_KEY.SPOTLIGHT, trackId)
+      .catch(err => ToastManager.addToast({ title: err.description }));
+
+  return (
+    <StyledMenuTile.ItemButton
+      onClick={() => (isTileSpotlighted ? setSpotlightTrackId() : setSpotlightTrackId(videoTrackID || audioTrackID))}
+    >
+      <StarIcon />
+      <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
+    </StyledMenuTile.ItemButton>
+  );
+};
+
+const PinActions = ({ audioTrackID, videoTrackID }) => {
+  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+
+  const isTilePinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID,
+    audioTrackID,
+  });
+
+  return (
+    <>
+      <StyledMenuTile.ItemButton
+        onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
+      >
+        <PinIcon />
+        <span>{`${isTilePinned ? 'Unpin' : 'Pin'}`} Tile for myself</span>
+      </StyledMenuTile.ItemButton>
+    </>
+  );
+};
+
+const showSpotlight = process.env.REACT_APP_ENV === 'qa';
+
+/**
+ * Taking peerID as peer won't necesarilly have tracks
+ */
+const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false }) => {
+  const [open, setOpen] = useState(false);
+  const actions = useHMSActions();
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const isLocal = localPeerID === peerID;
+  const { removeOthers } = useHMSStore(selectPermissions);
+  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
+    audioTrackID,
+    videoTrackID,
+  );
+  const { sendEvent } = useCustomEvent({
+    type: REMOTE_STOP_SCREENSHARE_TYPE,
+  });
+
+  const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
+  const uiMode = useHMSStore(selectTemplateAppData).uiMode;
+  const isInset = uiMode === 'inset';
+
+  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
+  const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset;
+
+  const track = useHMSStore(selectTrackByID(videoTrackID));
+  const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
+
+  useDropdownList({ open, name: 'TileMenu' });
+
+  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
+    return null;
+  }
+
+  if (isInset && isLocal) {
+    return null;
+  }
+
+  return (
+    <StyledMenuTile.Root open={open} onOpenChange={setOpen}>
+      <StyledMenuTile.Trigger data-testid="participant_menu_btn" onClick={e => e.stopPropagation()}>
+        <HorizontalMenuIcon />
+      </StyledMenuTile.Trigger>
+      <StyledMenuTile.Content side="top" align="end">
+        {isLocal ? (
+          showPinAction && (
+            <>
+              <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
+              {showSpotlight && <SpotlightActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
+            </>
+          )
+        ) : (
+          <>
+            {toggleVideo ? (
+              <StyledMenuTile.ItemButton
+                onClick={toggleVideo}
+                data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
+              >
+                {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
+                <span>{`${isVideoEnabled ? 'Mute' : 'Request Unmute'}`}</span>
+              </StyledMenuTile.ItemButton>
+            ) : null}
+            {toggleAudio ? (
+              <StyledMenuTile.ItemButton
+                onClick={toggleAudio}
+                data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
+              >
+                {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
+                <span>{`${isAudioEnabled ? 'Mute' : 'Request Unmute'}`}</span>
+              </StyledMenuTile.ItemButton>
+            ) : null}
+            {audioTrackID ? (
+              <StyledMenuTile.VolumeItem data-testid="participant_volume_slider">
+                <Flex align="center" gap={1}>
+                  <SpeakerIcon />
+                  <Box as="span" css={{ ml: '$4' }}>
+                    Volume ({volume})
+                  </Box>
+                </Flex>
+                <Slider css={{ my: '0.5rem' }} step={5} value={[volume]} onValueChange={e => setVolume(e[0])} />
+              </StyledMenuTile.VolumeItem>
+            ) : null}
+            {showPinAction && (
+              <>
+                <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
+                {showSpotlight && <SpotlightActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
+              </>
+            )}
+            <SimulcastLayers trackId={videoTrackID} />
+            {removeOthers ? (
+              <StyledMenuTile.RemoveItem
+                onClick={async () => {
+                  try {
+                    await actions.removePeer(peerID, '');
+                  } catch (error) {
+                    // TODO: Toast here
+                  }
+                }}
+                data-testid="remove_participant_btn"
+              >
+                <RemoveUserIcon />
+                <span>Remove Participant</span>
+              </StyledMenuTile.RemoveItem>
+            ) : null}
+
+            {removeOthers && isScreenshare ? (
+              <StyledMenuTile.RemoveItem onClick={() => sendEvent({})}>
+                <ShareScreenIcon />
+                <span>Stop Screenshare</span>
+              </StyledMenuTile.RemoveItem>
+            ) : null}
+          </>
+        )}
+      </StyledMenuTile.Content>
+    </StyledMenuTile.Root>
+  );
+};
+
+const SimulcastLayers = ({ trackId }) => {
+  const track = useHMSStore(selectTrackByID(trackId));
+  const actions = useHMSActions();
+  const bg = useDropdownSelection();
+  if (!track?.layerDefinitions?.length || track.degraded || !track.enabled) {
+    return null;
+  }
+  const currentLayer = track.layerDefinitions.find(layer => layer.layer === track.layer);
+  return (
+    <Fragment>
+      <StyledMenuTile.ItemButton css={{ color: '$textMedEmp', cursor: 'default' }}>
+        Select maximum resolution
+      </StyledMenuTile.ItemButton>
+      {track.layerDefinitions.map(layer => {
+        return (
+          <StyledMenuTile.ItemButton
+            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',
+              }}
+            >
+              {layer.layer}
+            </Text>
+            <Text as="span" variant="xs" css={{ color: '$textMedEmp' }}>
+              {layer.resolution.width}x{layer.resolution.height}
+            </Text>
+          </StyledMenuTile.ItemButton>
+        );
+      })}
+      <StyledMenuTile.ItemButton>
+        <Text as="span" variant="xs" css={{ color: '$textMedEmp' }}>
+          Currently streaming:
+          <Text
+            as="span"
+            variant="xs"
+            css={{
+              fontWeight: '$semiBold',
+              textTransform: 'capitalize',
+              color: '$textMedEmp',
+              ml: '$2',
+            }}
+          >
+            {currentLayer ? (
+              <>
+                {track.layer} ({currentLayer.resolution.width}x{currentLayer.resolution.height})
+              </>
+            ) : (
+              '-'
+            )}
+          </Text>
+        </Text>
+      </StyledMenuTile.ItemButton>
+    </Fragment>
+  );
+};
+
+export default TileMenu;

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,57 @@
+import { ToastConfig } from './ToastConfig';
+import { ToastManager } from './ToastManager';
+
+export const ToastBatcher = {
+  toastsType: new Map(),
+  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 {
+      this.showToastInternal({ notification, duration, type });
+    } 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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { selectAppData } from '@100mslive/react-sdk';
+import { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { hmsActions, hmsStore } from '../../hms';
+import { APP_DATA, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+const isChatOpen = () => {
+  return hmsStore.getState(selectAppData(APP_DATA.sidePane)) === SIDE_PANE_OPTIONS.CHAT;
+};
+
+const ChatAction = React.forwardRef((_, ref) => {
+  return (
+    <Button
+      outlined
+      as="div"
+      variant="standard"
+      css={{ w: 'max-content' }}
+      onClick={() => {
+        hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT);
+      }}
+      ref={ref}
+    >
+      Open Chat
+    </Button>
+  );
+});
+
+export const ToastConfig = {
+  PEER_LIST: {
+    single: function (notification) {
+      if (notification.data.length === 1) {
+        return {
+          title: `${notification.data[0]?.name} joined`,
+          icon: <PersonIcon />,
+        };
+      }
+      return {
+        title: `${notification.data[notification.data.length - 1]?.name} and ${
+          notification.data.length - 1
+        } others joined`,
+        icon: <PersonIcon />,
+      };
+    },
+    multiple: notifications => {
+      return {
+        title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
+        icon: <PersonIcon />,
+      };
+    },
+  },
+  PEER_JOINED: {
+    single: function (notification) {
+      return {
+        title: `${notification.data?.name} joined`,
+        icon: <PersonIcon />,
+      };
+    },
+    multiple: function (notifications) {
+      return {
+        title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
+        icon: <PersonIcon />,
+      };
+    },
+  },
+  PEER_LEFT: {
+    single: function (notification) {
+      return {
+        title: `${notification.data?.name} left`,
+        icon: <PersonIcon />,
+      };
+    },
+    multiple: function (notifications) {
+      return {
+        title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
+        icon: <PersonIcon />,
+      };
+    },
+  },
+  METADATA_UPDATED: {
+    single: notification => {
+      return {
+        title: `${notification.data?.name} raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+    multiple: notifications => {
+      return {
+        title: `${notifications[notifications.length - 1].data?.name} and ${
+          notifications.length - 1
+        } others raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+  },
+  NEW_MESSAGE: {
+    single: notification => {
+      return {
+        title: `New message from ${notification.data?.senderName}`,
+        icon: <ChatIcon />,
+        action: isChatOpen() ? null : <ChatAction />,
+      };
+    },
+    multiple: notifications => {
+      return {
+        title: `${notifications.length} new messages`,
+        icon: <ChatIcon />,
+        action: isChatOpen() ? null : <ChatAction />,
+      };
+    },
+  },
+  RECONNECTED: {
+    single: () => {
+      return {
+        title: `You are now 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

@@ -0,0 +1,30 @@
+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>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { v4 } from 'uuid';
+
+export const ToastManager = {
+  toasts: new Map(),
+  listeners: new Map(),
+  addToast(toast) {
+    const id = toast.id ? toast.id : v4();
+    this.toasts.set(id, { ...toast, id });
+    this.onChange();
+    return id;
+  },
+
+  clearAllToast() {
+    this.toasts.clear();
+    this.onChange();
+  },
+
+  removeToast(id) {
+    this.toasts.delete(id);
+    this.onChange();
+  },
+  replaceToast(id, toast) {
+    if (this.isActive(id)) {
+      this.toasts.set(id, { ...this.toasts.get(id), ...toast });
+      this.onChange();
+      return id;
+    } else {
+      return this.addToast(toast);
+    }
+  },
+  addListener(cb) {
+    this.listeners.set(cb, cb);
+  },
+  removeListener(cb) {
+    this.listeners.delete(cb);
+  },
+  isActive(id) {
+    return this.toasts.has(id);
+  },
+  onChange() {
+    const toasts = Array.from(this.toasts.values());
+    this.listeners.forEach(listener => listener(toasts));
+  },
+};

package/src/Prebuilt/components/VideoList.jsx

@@ -0,0 +1,101 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { selectLocalPeerID, useHMSStore, useVideoList } from '@100mslive/react-sdk';
+import { useTheme } from '../../Theme';
+import { StyledVideoList } from '../../VideoList';
+import { Pagination } from './Pagination';
+import ScreenshareTile from './ScreenshareTile';
+import VideoTile from './VideoTile';
+import useSortedPeers from '../common/useSortedPeers';
+import { useAppConfig } from './AppData/useAppConfig';
+import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { UI_SETTINGS } from '../common/constants';
+
+const List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShareForPeer }) => {
+  const { aspectRatio } = useTheme();
+  const tileOffset = useAppConfig('headlessConfig', 'tileOffset');
+  const isHeadless = useIsHeadless();
+  const hideLocalVideo = useUISettings(UI_SETTINGS.hideLocalVideo);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  let sortedPeers = useSortedPeers({ peers, maxTileCount });
+  if (hideLocalVideo && sortedPeers.length > 1) {
+    sortedPeers = filterPeerId(sortedPeers, localPeerId);
+  }
+  const { ref, pagesWithTiles } = useVideoList({
+    peers: sortedPeers,
+    maxTileCount,
+    maxColCount,
+    maxRowCount,
+    includeScreenShareForPeer,
+    aspectRatio,
+    offsetY: getOffset({ isHeadless, tileOffset }),
+  });
+  const [page, setPage] = useState(0);
+  useEffect(() => {
+    // currentPageIndex should not exceed pages length
+    if (page >= pagesWithTiles.length) {
+      setPage(0);
+    }
+  }, [pagesWithTiles.length, page]);
+  return (
+    <StyledVideoList.Root ref={ref}>
+      <StyledVideoList.Container css={{ flexWrap: 'wrap', placeContent: 'center' }}>
+        {pagesWithTiles && pagesWithTiles.length > 0
+          ? pagesWithTiles[page]?.map(tile => {
+              if (tile.width === 0 || tile.height === 0) {
+                return null;
+              }
+              return (
+                <Fragment key={tile.track?.id || tile.peer.id}>
+                  {tile.track?.source === 'screen' ? (
+                    <ScreenshareTile width={tile.width} height={tile.height} peerId={tile.peer.id} />
+                  ) : (
+                    <VideoTile
+                      width={tile.width}
+                      height={tile.height}
+                      peerId={tile.peer?.id}
+                      trackId={tile.track?.id}
+                    />
+                  )}
+                </Fragment>
+              );
+            })
+          : null}
+      </StyledVideoList.Container>
+      {!isHeadless && pagesWithTiles.length > 1 ? (
+        <Pagination page={page} setPage={setPage} numPages={pagesWithTiles.length} />
+      ) : null}
+    </StyledVideoList.Root>
+  );
+};
+
+const VideoList = React.memo(List);
+
+/**
+ * returns a new array of peers with the peer with peerId removed,
+ * keeps the reference same if peer is not found
+ */
+function filterPeerId(peers, peerId) {
+  const oldPeers = peers; // to keep the reference same if peer is not found
+  let foundPeerToFilterOut = false;
+  peers = [];
+  for (let i = 0; i < oldPeers.length; i++) {
+    if (oldPeers[i].id === peerId) {
+      foundPeerToFilterOut = true;
+    } else {
+      peers.push(oldPeers[i]);
+    }
+  }
+  if (!foundPeerToFilterOut) {
+    peers = oldPeers;
+  }
+  return peers;
+}
+
+const getOffset = ({ tileOffset, isHeadless }) => {
+  if (!isHeadless || isNaN(Number(tileOffset))) {
+    return 32;
+  }
+  return Number(tileOffset);
+};
+
+export default VideoList;