@100mslive/roomkit-react 0.1.13-alpha.0 → 0.1.13

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -48,8 +48,9 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
   const addedPluginToVideoTrack = useRef(false);
   const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
 
+  const inPreview = roomState === HMSRoomState.Preview;
   // Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen
-  const showVideoTile = isVideoOn && isLargeRoom && roomState !== HMSRoomState.Preview;
+  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
   const clearVBState = () => {
     setBackground(HMSVirtualBackgroundTypes.NONE);
@@ -116,8 +117,8 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
   }
 
   return (
-    <Box css={{ maxHeight: '100%', overflowY: 'auto', pr: '$6' }}>
-      <Flex align="center" justify="between" css={{ w: '100%', position: 'sticky', top: 0 }}>
+    <Flex css={{ pr: '$6', size: '100%' }} direction="column">
+      <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
         <Text variant="h6" css={{ color: '$on_surface_high' }}>
           Virtual Background
         </Text>
@@ -134,41 +135,51 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
           mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
           trackId={localPeer?.videoTrack}
           data-testid="preview_tile"
-          css={{ width: '100%', height: '16rem', position: 'sticky', top: '$17' }}
+          css={{ width: '100%', height: '16rem' }}
         />
       ) : null}
 
-      <VBCollection
-        title="Effects"
-        options={[
-          {
-            title: 'No effect',
-            icon: <CrossCircleIcon style={iconDims} />,
-            type: HMSVirtualBackgroundTypes.NONE,
-            onClick: async () => await disableEffects(),
-          },
-          {
-            title: 'Blur',
-            icon: <BlurPersonHighIcon style={iconDims} />,
-            type: HMSVirtualBackgroundTypes.BLUR,
-            onClick: async () => await addPlugin({ blurPower: 0.5 }),
-          },
-        ]}
-        activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
-        // @ts-ignore
-        activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
-      />
+      <Box
+        css={{
+          mt: '$4',
+          overflowY: 'auto',
+          flex: '1 1 0',
+          mr: '-$10',
+          pr: '$10',
+        }}
+      >
+        <VBCollection
+          title="Effects"
+          options={[
+            {
+              title: 'No effect',
+              icon: <CrossCircleIcon style={iconDims} />,
+              type: HMSVirtualBackgroundTypes.NONE,
+              onClick: async () => await disableEffects(),
+            },
+            {
+              title: 'Blur',
+              icon: <BlurPersonHighIcon style={iconDims} />,
+              type: HMSVirtualBackgroundTypes.BLUR,
+              onClick: async () => await addPlugin({ blurPower: 0.5 }),
+            },
+          ]}
+          activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
+          // @ts-ignore
+          activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
+        />
 
-      <VBCollection
-        title="Backgrounds"
-        options={mediaList.map(mediaURL => ({
-          type: HMSVirtualBackgroundTypes.IMAGE,
-          mediaURL,
-          onClick: async () => await addPlugin({ mediaURL }),
-        }))}
-        activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
-        activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
-      />
-    </Box>
+        <VBCollection
+          title="Backgrounds"
+          options={mediaList.map(mediaURL => ({
+            type: HMSVirtualBackgroundTypes.IMAGE,
+            mediaURL,
+            onClick: async () => await addPlugin({ mediaURL }),
+          }))}
+          activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
+          activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
+        />
+      </Box>
+    </Flex>
   );
 };

package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts

@@ -18,12 +18,11 @@ type PinnedMessage = {
 export const useSetPinnedMessages = () => {
   const hmsActions = useHMSActions();
   const vanillaStore = useHMSVanillaStore();
-  // const pinnedMessages: PinnedMessage[] = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
 
   const setPinnedMessages = useCallback(
     async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
       const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
-      const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.sender || '' };
+      const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.senderUserId || '' };
 
       if (message && peerName) {
         newPinnedMessage['text'] = `${peerName}: ${message.message}`;

package/src/Prebuilt/components/hooks/useUserPreferences.jsx

@@ -6,6 +6,7 @@ export const UserPreferencesKeys = {
   NOTIFICATIONS: 'notifications',
   UI_SETTINGS: 'uiSettings',
   RTMP_URLS: 'rtmpUrls',
+  USER_ID: 'userId',
 };
 
 export const defaultPreviewPreference = {

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -4,21 +4,11 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
-import { v4 as uuid } from 'uuid';
-import {
-  selectIsConnectedToRoom,
-  selectLocalPeerName,
-  selectLocalPeerRoleName,
-  selectSessionStore,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
-// @ts-ignore: No implicit Any
-import { ToastBatcher } from '../components/Toast/ToastBatcher';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
-import { Flex } from '../../Layout';
+import { Box, Flex } from '../../Layout';
 // @ts-ignore: No implicit Any
 import { EmbedView } from './EmbedView';
 // @ts-ignore: No implicit Any
@@ -56,9 +46,6 @@ export const VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
-    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
 
   useEffect(() => {
     if (!isConnected) {
@@ -74,15 +61,6 @@ export const VideoStreamingSection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, hmsActions]);
 
-  useEffect(() => {
-    if (!chatStateUpdatedBy || chatStateUpdatedBy === localPeerName) {
-      return;
-    }
-    const type = isChatEnabled ? 'CHAT_RESUMED' : 'CHAT_PAUSED';
-    const notification = { id: uuid(), message: '', type, data: { name: localPeerName } };
-    ToastBatcher.showToast({ notification, type });
-  }, [isChatEnabled, chatStateUpdatedBy, localPeerName]);
-
   if (!localPeerRole) {
     // we don't know the role yet to decide how to render UI
     return null;
@@ -112,12 +90,14 @@ export const VideoStreamingSection = ({
         }}
       >
         {ViewComponent}
-        <SidePane
-          screenType={screenType}
-          // @ts-ignore
-          tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
-          hideControls={hideControls}
-        />
+        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip' }}>
+          <SidePane
+            screenType={screenType}
+            // @ts-ignore
+            tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
+            hideControls={hideControls}
+          />
+        </Box>
       </Flex>
     </Suspense>
   );