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

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

@@ -38,6 +38,7 @@ import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 // @ts-ignore
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
+import { getDragClassName } from './utils';
 import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
 
 export const isSameTile = ({
@@ -64,6 +65,7 @@ const SpotlightActions = ({
   const hmsActions = useHMSActions();
   const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
   const isTileSpotlighted = spotlightPeerId === peerId;
+  const dragClassName = getDragClassName();
 
   const setSpotlightPeerId = (peerIdToSpotlight?: string) =>
     hmsActions.sessionStore
@@ -72,6 +74,7 @@ const SpotlightActions = ({
 
   return (
     <StyledMenuTile.ItemButton
+      className={dragClassName}
       css={spacingCSS}
       onClick={() => {
         if (isTileSpotlighted) {
@@ -90,6 +93,7 @@ const SpotlightActions = ({
 
 const PinActions = ({ audioTrackID, videoTrackID }: { videoTrackID: string; audioTrackID: string }) => {
   const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+  const dragClassName = getDragClassName();
 
   const isTilePinned = isSameTile({
     trackId: pinnedTrackId,
@@ -100,6 +104,7 @@ const PinActions = ({ audioTrackID, videoTrackID }: { videoTrackID: string; audi
   return (
     <>
       <StyledMenuTile.ItemButton
+        className={dragClassName}
         css={spacingCSS}
         onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
       >
@@ -112,10 +117,11 @@ const PinActions = ({ audioTrackID, videoTrackID }: { videoTrackID: string; audi
 
 const MinimiseInset = () => {
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
+  const dragClassName = getDragClassName();
 
   return (
     <>
-      <StyledMenuTile.ItemButton css={spacingCSS} onClick={() => setMinimised(!minimised)}>
+      <StyledMenuTile.ItemButton className={dragClassName} css={spacingCSS} onClick={() => setMinimised(!minimised)}>
         <ShrinkIcon height={20} width={20} />
         <span>{minimised ? 'Show' : 'Minimise'} your video</span>
       </StyledMenuTile.ItemButton>
@@ -131,14 +137,16 @@ const SimulcastLayers = ({ trackId }: { trackId: HMSTrackID }) => {
     return null;
   }
   const currentLayer = track.layerDefinitions.find((layer: HMSSimulcastLayerDefinition) => layer.layer === track.layer);
+  const dragClassName = getDragClassName();
   return (
     <Fragment>
-      <StyledMenuTile.ItemButton css={{ color: '$on_surface_medium', cursor: 'default' }}>
+      <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);
@@ -174,7 +182,7 @@ const SimulcastLayers = ({ trackId }: { trackId: HMSTrackID }) => {
           </StyledMenuTile.ItemButton>
         );
       })}
-      <StyledMenuTile.ItemButton>
+      <StyledMenuTile.ItemButton className={dragClassName}>
         <Text as="span" variant="xs" css={{ color: '$on_surface_medium' }}>
           Currently streaming:
           <Text
@@ -229,6 +237,7 @@ export const TileMenuContent = ({
   openNameChangeModal: () => void;
 }) => {
   const actions = useHMSActions();
+  const dragClassName = getDragClassName();
   const removeOthers: boolean | undefined = useHMSStore(selectPermissions)?.removeOthers;
   const { userName } = useHMSPrebuiltContext();
 
@@ -251,6 +260,7 @@ export const TileMenuContent = ({
         {canMinimise && <MinimiseInset />}
         {!userName && (
           <StyledMenuTile.ItemButton
+            className={dragClassName}
             onClick={() => {
               openNameChangeModal();
               closeSheetOnClick();
@@ -268,6 +278,7 @@ export const TileMenuContent = ({
     <>
       {toggleVideo ? (
         <StyledMenuTile.ItemButton
+          className={dragClassName}
           css={spacingCSS}
           onClick={() => {
             toggleVideo();
@@ -283,6 +294,7 @@ export const TileMenuContent = ({
       {toggleAudio ? (
         <StyledMenuTile.ItemButton
           css={spacingCSS}
+          className={dragClassName}
           onClick={() => {
             toggleAudio();
             closeSheetOnClick();

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

@@ -0,0 +1,7 @@
+/**
+ * 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/VideoLayouts/GridLayout.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
+  selectLocalPeerID,
   selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
@@ -42,6 +43,8 @@ export const GridLayout = ({
   const pinnedTrack = usePinnedTrack();
   const peers = useHMSStore(selectPeers);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+
   const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const isRoleProminence =
     (prominentRoles.length &&
@@ -55,15 +58,16 @@ export const GridLayout = ({
       return peers.filter(peer => peer.id !== activeScreensharePeerId);
     }
     if (isInsetEnabled) {
-      // if localPeer role is prominent role, it shows up in the center, so allow it in active speaker sorting
-      if (localPeerRole && prominentRoles.includes(localPeerRole)) {
+      const isLocalPeerPinned = localPeerID === pinnedTrack?.peerId;
+      // if localPeer role is prominent role, it shows up in the center or local peer is pinned, so allow it in active speaker sorting
+      if ((localPeerRole && prominentRoles.includes(localPeerRole)) || isLocalPeerPinned) {
         return peers;
       } else {
         return peers.filter(peer => !peer.isLocal);
       }
     }
     return peers;
-  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, prominentRoles, peers]);
+  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { useMeasure, useMedia } from 'react-use';
+import { useMeasure } from 'react-use';
 import {
   selectAudioTrackByPeerID,
   selectHasPeerHandRaised,
@@ -18,7 +18,6 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { AudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
@@ -44,7 +43,6 @@ const Tile = ({
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
-  const isMobile = useMedia(cssConfig.media.md);
   const peerName = useHMSStore(selectPeerNameByID(peerId));
   const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
   const localPeerID = useHMSStore(selectLocalPeerID);
@@ -141,7 +139,7 @@ const Tile = ({
               {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
             </>
           ) : null}
-          {isMouseHovered || (isDragabble && isMobile) ? (
+          {isMouseHovered || (isDragabble && navigator.maxTouchPoints > 0) ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}

package/src/Prebuilt/components/hooks/usePinnedBy.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { PinnedMessage } from './usePinnedMessages';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export const usePinnedBy = (messageId: string) => {
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
+  const [pinnedBy, setPinnedBy] = useState('');
+
+  useEffect(() => {
+    let match = '';
+    pinnedMessages?.forEach((pinnedMessage: PinnedMessage) => {
+      if (pinnedMessage.id === messageId) {
+        match = pinnedMessage.pinnedBy;
+      }
+    });
+
+    setPinnedBy(match);
+  }, [messageId, pinnedMessages]);
+
+  return pinnedBy;
+};

package/src/Prebuilt/components/hooks/{useSetPinnedMessages.ts → usePinnedMessages.ts}

@@ -11,7 +11,7 @@ import { ToastManager } from '../Toast/ToastManager';
 // @ts-ignore
 import { SESSION_STORE_KEY } from '../../common/constants';
 
-type PinnedMessage = {
+export type PinnedMessage = {
   text: string;
   id: string;
   pinnedBy: string;
@@ -20,7 +20,7 @@ type PinnedMessage = {
 /**
  * set pinned chat message by updating the session store
  */
-export const useSetPinnedMessages = () => {
+export const usePinnedMessages = () => {
   const hmsActions = useHMSActions();
   const vanillaStore = useHMSVanillaStore();
 

package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx

@@ -4,16 +4,13 @@ import { HMSNotificationTypes, useHMSNotifications, useHMSStore } from '@100msli
 
 export const useUnreadPollQuizPresent = () => {
   const localPeerID = useHMSStore(selectLocalPeerID);
-  const notification = useHMSNotifications();
+  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STARTED);
   const [unreadPollQuiz, setUnreadPollQuiz] = useState(false);
 
   useEffect(() => {
     if (!notification) {
       return;
     }
-    if (notification.type !== HMSNotificationTypes.POLL_STARTED) {
-      return;
-    }
     setUnreadPollQuiz(notification.data.startedBy !== localPeerID);
   }, [localPeerID, notification]);
   return { unreadPollQuiz, setUnreadPollQuiz };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -34,7 +34,6 @@ import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScree
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
-// const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
 

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,30 @@
+import { styled } from '../Theme';
+
+export const TextArea = styled('textarea', {
+  fontFamily: '$sans',
+  lineHeight: 'inherit',
+  backgroundColor: '$surface_default',
+  borderRadius: '8px',
+  outline: 'none',
+  border: '1px solid $border_default',
+  padding: '0.5rem 0.75rem',
+  minHeight: '30px',
+  color: '$on_surface_high',
+  fontSize: '$md',
+  '&:focus': {
+    boxShadow: '0 0 0 1px $colors$primary_default',
+    border: '1px solid transparent',
+  },
+  '&::placeholder': {
+    color: '$on_surface_medium',
+  },
+  variants: {
+    error: {
+      true: {
+        '&:focus': {
+          boxShadow: '0 0 0 3px $colors$alert_error_default',
+        },
+      },
+    },
+  },
+});

package/src/TextArea/index.tsx

@@ -0,0 +1 @@
+export { TextArea } from './TextArea';

package/src/TileMenu/StyledMenuTile.tsx

@@ -49,6 +49,7 @@ const styledItem = {
 const StyledItemButton = styled('button', {
   ...styledItem,
   height: '$14',
+  border: 'none',
   '&:hover': {
     backgroundColor: '$surface_brighter',
   },

package/src/index.ts

@@ -37,3 +37,4 @@ export * from './Collapsible';
 export * from './Prebuilt';
 export * from './Progress';
 export * from './context/DialogContext';
+export * from './TextArea';

package/src/store/StorybookSDK.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { HMSFrameworkInfo } from '@100mslive/hms-video';
+import { HMSFrameworkInfo } from '@100mslive/hms-video-store';
 import {
   HMSActions,
   HMSAudioTrackSettings,
@@ -87,6 +87,7 @@ export class StoryBookSDK implements Partial<HMSActions> {
         isLocal: true,
         id: String(this.randomNumber()),
         auxiliaryTracks: [],
+        isHandRaised: false,
       };
       store.room.peers.push(this.localPeer.id);
       store.peers[this.localPeer.id] = this.localPeer;
@@ -111,6 +112,7 @@ export class StoryBookSDK implements Partial<HMSActions> {
           isLocal: true,
           id: String(this.randomNumber()),
           auxiliaryTracks: [],
+          isHandRaised: false,
         };
         store.room.peers.push(this.localPeer.id);
         store.peers[this.localPeer.id] = this.localPeer;

package/dist/Prebuilt/plugins/whiteboard/ToggleWhiteboard.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
-export declare const ToggleWhiteboard: ({ screenType }: {
-    screenType: keyof ConferencingScreen;
-}) => React.JSX.Element | null;