@100mslive/roomkit-react 0.1.6-alpha.1 → 0.1.6-alpha.3

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { CrossIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
+import { Chat } from './Chat/Chat';
+// @ts-ignore: No implicit Any
+import { ParticipantList } from './Footer/ParticipantList';
+import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+// @ts-ignore: No implicit Any
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../common/constants';
+
+const tabTriggerCSS = {
+  color: '$on_surface_high',
+  p: '$4',
+  fontWeight: '$semiBold',
+  fontSize: '$sm',
+  w: '100%',
+  justifyContent: 'center',
+};
+
+export const SidePaneTabs = React.memo<{
+  active: 'Participants | Chat';
+  screenType: keyof ConferencingScreen;
+  hideControls?: boolean;
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const resetSidePane = useSidepaneReset();
+  const [activeTab, setActiveTab] = useState(active);
+  const peerCount = useHMSStore(selectPeerCount);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const showChat = !!elements?.chat;
+  const showParticipants = !!elements?.participant_list;
+  const hideTabs = !(showChat && showParticipants);
+  const isMobile = useMedia(cssConfig.media.md);
+  const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+
+  useEffect(() => {
+    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
+      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+    } else if (!showChat && !showParticipants) {
+      resetSidePane();
+    }
+  }, [showChat, activeTab, showParticipants, resetSidePane]);
+
+  useEffect(() => {
+    setActiveTab(active);
+  }, [active]);
+
+  return (
+    <Flex
+      direction="column"
+      css={{
+        color: '$on_primary_high',
+        h: '100%',
+        marginTop: hideControls && isOverlayChat ? '$17' : '0',
+        transition: 'margin 0.3s ease-in-out',
+      }}
+    >
+      {isOverlayChat && isChatOpen && showChat ? (
+        <Chat screenType={screenType} />
+      ) : (
+        <>
+          {hideTabs ? (
+            <>
+              <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
+                {showChat ? 'Chat' : `Participants (${peerCount})`}
+              </Text>
+
+              {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
+            </>
+          ) : (
+            <Tabs.Root
+              value={activeTab}
+              onValueChange={setActiveTab}
+              css={{
+                flexDirection: 'column',
+                size: '100%',
+              }}
+            >
+              <Tabs.List css={{ w: 'calc(100% - $12)', p: '$2', borderRadius: '$2', bg: '$surface_default' }}>
+                <Tabs.Trigger
+                  value={SIDE_PANE_OPTIONS.CHAT}
+                  onClick={toggleChat}
+                  css={{
+                    ...tabTriggerCSS,
+                    color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+                  }}
+                >
+                  Chat
+                </Tabs.Trigger>
+                <Tabs.Trigger
+                  value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+                  onClick={toggleParticipants}
+                  css={{
+                    ...tabTriggerCSS,
+                    color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                  }}
+                >
+                  Participants ({peerCount})
+                </Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
+                <ParticipantList />
+              </Tabs.Content>
+              <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
+                <Chat screenType={screenType} />
+              </Tabs.Content>
+            </Tabs.Root>
+          )}
+        </>
+      )}
+
+      {isOverlayChat && isChatOpen ? null : (
+        <IconButton
+          css={{ position: 'absolute', right: '$10', top: '$11', '@md': { top: '$8', right: '$8' } }}
+          onClick={e => {
+            e.stopPropagation();
+            if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+              toggleChat();
+            } else {
+              toggleParticipants();
+            }
+          }}
+          data-testid="close_chat"
+        >
+          <CrossIcon />
+        </IconButton>
+      )}
+    </Flex>
+  );
+});

package/src/Prebuilt/components/conference.jsx

@@ -49,6 +49,7 @@ const Conference = () => {
       setHideControls(value => !value);
     }
   };
+  const autoRoomJoined = useRef(isPreviewScreenEnabled);
 
   useEffect(() => {
     let timeout = null;
@@ -84,7 +85,13 @@ const Conference = () => {
   }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
 
   useEffect(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
+    if (
+      authTokenInAppData &&
+      !isConnectedToRoom &&
+      !isPreviewScreenEnabled &&
+      roomState !== HMSRoomState.Connecting &&
+      !autoRoomJoined.current
+    ) {
       hmsActions
         .join({
           userName,
@@ -97,6 +104,7 @@ const Conference = () => {
           },
         })
         .catch(console.error);
+      autoRoomJoined.current = true;
     }
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import {
   selectLocalPeerID,
   selectPeerMetadata,
@@ -12,8 +12,6 @@ export const useMyMetadata = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   const vanillaStore = useHMSVanillaStore();
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
-  const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);
-  const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back
 
   const update = async updatedFields => {
     try {
@@ -27,28 +25,12 @@ export const useMyMetadata = () => {
   };
 
   const toggleHandRaise = useCallback(async () => {
-    const brbUpdate = !isHandRaised ? false : isBRBOn;
-    const success = await update({
-      isHandRaised: !isHandRaised,
-      isBRBOn: brbUpdate,
-    });
-    if (success) {
-      setBRBOn(brbUpdate);
-      setHandRaised(!isHandRaised);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isHandRaised: !metaData?.isHandRaised, isBRBOn: false });
+  }, [metaData?.isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
-    const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
-    const success = await update({
-      isHandRaised: handRaiseUpdate,
-      isBRBOn: !isBRBOn,
-    });
-    if (success) {
-      setBRBOn(!isBRBOn);
-      setHandRaised(handRaiseUpdate);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isBRBOn: !metaData?.isBRBOn, isHandRaised: false });
+  }, [metaData?.isBRBOn]); //eslint-disable-line
 
   const setPrevRole = async role => {
     await update({
@@ -57,8 +39,8 @@ export const useMyMetadata = () => {
   };
 
   return {
-    isHandRaised,
-    isBRBOn,
+    isHandRaised: !!metaData?.isHandRaised,
+    isBRBOn: !!metaData?.isBRBOn,
     metaData,
     updateMetaData: update,
     toggleHandRaise,

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { Chat } from '../components/Chat/Chat';
-// @ts-ignore: No implicit Any
-import { ParticipantList } from '../components/Footer/ParticipantList';
+import { SidePaneTabs } from '../components/SidePaneTabs';
 // @ts-ignore: No implicit Any
 import { StreamingLanding } from '../components/Streaming/StreamingLanding';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
@@ -32,10 +29,8 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   let ViewComponent;
-  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
-    ViewComponent = <ParticipantList />;
-  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = <Chat screenType={screenType} hideControls={hideControls} />;
+  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
+    ViewComponent = <SidePaneTabs screenType={screenType} hideControls={hideControls} active={sidepane} />;
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
     ViewComponent = <StreamingLanding />;
   }
@@ -43,6 +38,14 @@ const SidePane = ({
     return null;
   }
 
+  const tileLayout = {
+    hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
+    roundedVideoTile: tileProps?.rounded_video_tile,
+    hideAudioMuteOnTile: tileProps?.hide_audio_mute_on_tile,
+    hideMetadataOnTile: tileProps?.hide_metadata_on_tile,
+    objectFit: tileProps?.video_object_fit,
+  };
+
   const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
 
   return (
@@ -64,8 +67,7 @@ const SidePane = ({
           width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
-          objectFit="contain"
-          {...tileProps}
+          {...tileLayout}
         />
       )}
       {!!ViewComponent && (

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import {
-  selectIsAllowedToPublish,
+  selectIsLocalVideoEnabled,
   selectIsLocalVideoPluginPresent,
   selectLocalPeerRole,
   selectLocalVideoTrackID,
@@ -23,8 +23,8 @@ export const VirtualBackground = ({
 }) => {
   const pluginRef = useRef(null);
   const hmsActions = useHMSActions();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
   const role = useHMSStore(selectLocalPeerRole);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const [isVBLoading, setIsVBLoading] = useState(false);
   const [isVBSupported, setIsVBSupported] = useState(false);
   const [isVBOn, setIsVBOn] = useState(false);
@@ -69,7 +69,7 @@ export const VirtualBackground = ({
     }
   }
 
-  if (!isAllowedToPublish.video || !isVBSupported) {
+  if (!isVBSupported || !isVideoOn) {
     return null;
   }
   if (asActionTile) {

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts

@@ -29,7 +29,7 @@ export type useFetchRoomLayoutResponse = {
 };
 
 export const useFetchRoomLayout = ({
-  endpoint = 'https://api.100ms.live/v2/layouts/ui',
+  endpoint = '',
   authToken = '',
 }: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
   const [layout, setLayout] = useState<Layout | undefined>(undefined);
@@ -51,7 +51,7 @@ export const useFetchRoomLayout = ({
       }
       isFetchInProgress.current = true;
       try {
-        const resp = await fetchWithRetry(endpoint, {
+        const resp = await fetchWithRetry(endpoint || 'https://api.100ms.live/v2/layouts/ui', {
           headers: {
             Authorization: `Bearer ${authToken}`,
           },

package/dist/VirtualBackground-UM2FOUHQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx", "../src/Prebuilt/plugins/VirtualBackground/vbutils.js"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nimport {\n  selectIsAllowedToPublish,\n  selectIsLocalVideoPluginPresent,\n  selectLocalPeerRole,\n  selectLocalVideoTrackID,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { VirtualBackgroundIcon } from '@100mslive/react-icons';\nimport { ActionTile } from '../../components/MoreSettings/ActionTile';\nimport { Loading } from '../../../Loading';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\nimport { getRandomVirtualBackground } from './vbutils';\n\nexport const VirtualBackground = ({\n  asActionTile = false,\n  onVBClick = () => {\n    return;\n  },\n}) => {\n  const pluginRef = useRef(null);\n  const hmsActions = useHMSActions();\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n  const role = useHMSStore(selectLocalPeerRole);\n  const [isVBLoading, setIsVBLoading] = useState(false);\n  const [isVBSupported, setIsVBSupported] = useState(false);\n  const [isVBOn, setIsVBOn] = useState(false);\n  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);\n  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));\n\n  async function createPlugin() {\n    if (!pluginRef.current) {\n      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');\n      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);\n    }\n  }\n  useEffect(() => {\n    if (!localPeerVideoTrackID) {\n      return;\n    }\n    createPlugin().then(() => {\n      //check support of plugin\n      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);\n      setIsVBSupported(pluginSupport.isSupported);\n    });\n  }, [hmsActions, localPeerVideoTrackID]);\n\n  async function addPlugin() {\n    setIsVBLoading(true);\n    try {\n      await createPlugin();\n      window.HMS.virtualBackground = pluginRef.current;\n      const { background, backgroundType } = getRandomVirtualBackground();\n      await pluginRef.current.setBackground(background, backgroundType);\n      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));\n    } catch (err) {\n      console.error('add virtual background plugin failed', err);\n    }\n    setIsVBLoading(false);\n  }\n\n  async function removePlugin() {\n    if (pluginRef.current) {\n      await hmsActions.removePluginFromVideoTrack(pluginRef.current);\n      pluginRef.current = null;\n    }\n  }\n\n  if (!isAllowedToPublish.video || !isVBSupported) {\n    return null;\n  }\n  if (asActionTile) {\n    return (\n      <ActionTile.Root\n        data-testid=\"virtual_bg_btn\"\n        active={isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          setIsVBOn(!isVBOn);\n          !isVBPresent ? addPlugin() : removePlugin();\n          onVBClick();\n        }}\n      >\n        <VirtualBackgroundIcon />\n        <ActionTile.Title>Virtual Background</ActionTile.Title>\n      </ActionTile.Root>\n    );\n  }\n\n  return (\n    <Tooltip\n      boxCss={{ zIndex: '100' }}\n      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}\n    >\n      <IconButton\n        active={!isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          !isVBPresent ? addPlugin() : removePlugin();\n        }}\n        data-testid=\"virtual_bg_btn\"\n      >\n        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default VirtualBackground;\n", "/* eslint-disable no-case-declarations */\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nexport function getRandomVirtualBackground() {\n  const backgroundList = [\n    {\n      background: HMSVirtualBackgroundTypes.BLUR,\n      backgroundType: HMSVirtualBackgroundTypes.BLUR,\n    },\n  ];\n\n  const images = [\n    'https://www.100ms.live/images/vb-1.jpeg',\n    'https://www.100ms.live/images/vb-2.jpg',\n    'https://www.100ms.live/images/vb-3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.IMAGE,\n  }));\n\n  backgroundList.push(...images);\n\n  /* \n   //TODO: update with a better quality gif.\n  const gifList = [\n    {\n      background: \"https://www.100ms.live/images/vb-1.gif\",\n      backgroundType: HMSVirtualBackgroundTypes.GIF,\n    },\n  ];\n  backgroundList.push(...gifList); \n  */\n\n  const videoList = [\n    'https://www.100ms.live/images/video-1.mp4',\n    'https://www.100ms.live/images/video-2.mp4',\n    'https://www.100ms.live/images/video-5.mp4',\n    'https://www.100ms.live/images/video-7.mp4',\n    'https://www.100ms.live/images/video-8.mp4',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.VIDEO,\n  }));\n  backgroundList.push(...videoList);\n\n  const randomIdx = Math.floor(Math.random() * backgroundList.length);\n  const virtualBackground = backgroundList[randomIdx];\n  switch (virtualBackground.backgroundType) {\n    case HMSVirtualBackgroundTypes.IMAGE:\n      const img = document.createElement('img');\n      img.alt = 'VB';\n      img.src = backgroundList[randomIdx].background;\n      virtualBackground.background = img;\n      return virtualBackground;\n    case HMSVirtualBackgroundTypes.VIDEO:\n      const videoEl = document.createElement('video');\n      videoEl.src = backgroundList[randomIdx].background;\n      virtualBackground.background = videoEl;\n      return virtualBackground;\n    default:\n      return virtualBackground;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["HMSVirtualBackgroundTypes", "HMSVirtualBackgroundTypes"]
-}