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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/{HLSView-HNVYG5VE.js → HLSView-HL455FYH.js} +3 -3
  2. package/dist/Prebuilt/components/Footer/ChatToggle.d.ts +1 -3
  3. package/dist/Prebuilt/components/Leave/DesktopLeaveRoom.d.ts +2 -1
  4. package/dist/Prebuilt/components/Leave/MwebLeaveRoom.d.ts +2 -1
  5. package/dist/Prebuilt/components/SidePaneTabs.d.ts +7 -0
  6. package/dist/{VirtualBackground-UM2FOUHQ.js → VirtualBackground-6EP3X7MO.js} +6 -6
  7. package/dist/VirtualBackground-6EP3X7MO.js.map +7 -0
  8. package/dist/{chunk-LYSAET4G.js → chunk-6JF3GAOH.js} +109 -127
  9. package/dist/chunk-6JF3GAOH.js.map +7 -0
  10. package/dist/{chunk-POE7H4IE.js → chunk-KAJJ56J4.js} +2 -2
  11. package/dist/{chunk-POE7H4IE.js.map → chunk-KAJJ56J4.js.map} +1 -1
  12. package/dist/{chunk-364HP22I.js → chunk-UXBTLGWY.js} +2 -2
  13. package/dist/{conference-UWLJHMB2.js → conference-MPZNWHV5.js} +472 -415
  14. package/dist/conference-MPZNWHV5.js.map +7 -0
  15. package/dist/index.cjs.js +714 -678
  16. package/dist/index.cjs.js.map +4 -4
  17. package/dist/index.js +2 -2
  18. package/dist/meta.cjs.json +153 -153
  19. package/dist/meta.esbuild.json +185 -184
  20. package/package.json +6 -6
  21. package/src/Button/Button.tsx +6 -6
  22. package/src/Prebuilt/components/Chat/Chat.jsx +3 -9
  23. package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js +1 -0
  24. package/src/Prebuilt/components/Footer/ChatToggle.tsx +2 -9
  25. package/src/Prebuilt/components/Footer/Footer.tsx +23 -7
  26. package/src/Prebuilt/components/Footer/ParticipantList.jsx +4 -5
  27. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +1 -1
  28. package/src/Prebuilt/components/Header/HeaderComponents.jsx +10 -9
  29. package/src/Prebuilt/components/InsetTile.tsx +1 -0
  30. package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +7 -9
  31. package/src/Prebuilt/components/Leave/LeaveRoom.tsx +6 -2
  32. package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx +7 -4
  33. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +1 -1
  34. package/src/Prebuilt/components/Notifications/Notifications.jsx +4 -3
  35. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +2 -3
  36. package/src/Prebuilt/components/RoleChangeRequestModal.tsx +4 -3
  37. package/src/Prebuilt/components/ScreenshareTile.jsx +15 -7
  38. package/src/Prebuilt/components/SidePaneTabs.tsx +141 -0
  39. package/src/Prebuilt/components/conference.jsx +9 -1
  40. package/src/Prebuilt/components/hooks/useMetadata.jsx +7 -25
  41. package/src/Prebuilt/layouts/SidePane.tsx +12 -10
  42. package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx +3 -3
  43. package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts +2 -2
  44. package/dist/VirtualBackground-UM2FOUHQ.js.map +0 -7
  45. package/dist/chunk-LYSAET4G.js.map +0 -7
  46. package/dist/conference-UWLJHMB2.js.map +0 -7
  47. package/src/Prebuilt/components/Chat/ChatParticipantHeader.jsx +0 -84
  48. /package/dist/{HLSView-HNVYG5VE.js.map → HLSView-HL455FYH.js.map} +0 -0
  49. /package/dist/{chunk-364HP22I.js.map → chunk-UXBTLGWY.js.map} +0 -0
@@ -9,7 +9,7 @@ import {
9
9
  Slider,
10
10
  ToastManager,
11
11
  useTheme
12
- } from "./chunk-LYSAET4G.js";
12
+ } from "./chunk-6JF3GAOH.js";
13
13
  import {
14
14
  Box,
15
15
  Flex,
@@ -23,7 +23,7 @@ import {
23
23
  __spreadValues,
24
24
  config,
25
25
  styled
26
- } from "./chunk-POE7H4IE.js";
26
+ } from "./chunk-KAJJ56J4.js";
27
27
 
28
28
  // src/Prebuilt/layouts/HLSView.jsx
29
29
  import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
@@ -840,4 +840,4 @@ var HLSView_default = HLSView;
840
840
  export {
841
841
  HLSView_default as default
842
842
  };
843
- //# sourceMappingURL=HLSView-HNVYG5VE.js.map
843
+ //# sourceMappingURL=HLSView-HL455FYH.js.map
@@ -1,4 +1,2 @@
1
1
  import React from 'react';
2
- export declare const ChatToggle: ({ openByDefault }: {
3
- openByDefault: boolean;
4
- }) => React.JSX.Element;
2
+ export declare const ChatToggle: () => React.JSX.Element;
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
2
  import { ConferencingScreen } from '@100mslive/types-prebuilt';
3
- export declare const DesktopLeaveRoom: ({ leaveRoom, screenType, }: {
3
+ export declare const DesktopLeaveRoom: ({ leaveRoom, screenType, endRoom, }: {
4
4
  leaveRoom: (args: {
5
5
  endstream: boolean;
6
6
  }) => void;
7
7
  screenType: keyof ConferencingScreen;
8
+ endRoom: () => void;
8
9
  }) => React.JSX.Element | null;
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
2
  import { ConferencingScreen } from '@100mslive/types-prebuilt';
3
- export declare const MwebLeaveRoom: ({ leaveRoom, screenType, }: {
3
+ export declare const MwebLeaveRoom: ({ leaveRoom, screenType, endRoom, }: {
4
4
  leaveRoom: (args: {
5
5
  endstream: boolean;
6
6
  }) => void;
7
7
  screenType: keyof ConferencingScreen;
8
+ endRoom: () => void;
8
9
  }) => React.JSX.Element | null;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { ConferencingScreen } from '@100mslive/types-prebuilt';
3
+ export declare const SidePaneTabs: React.NamedExoticComponent<{
4
+ active: 'Participants | Chat';
5
+ screenType: keyof ConferencingScreen;
6
+ hideControls?: boolean | undefined;
7
+ }>;
@@ -1,18 +1,18 @@
1
1
  import {
2
2
  ActionTile
3
- } from "./chunk-364HP22I.js";
3
+ } from "./chunk-UXBTLGWY.js";
4
4
  import {
5
5
  IconButton_default,
6
6
  Loading,
7
7
  Tooltip,
8
8
  __async
9
- } from "./chunk-POE7H4IE.js";
9
+ } from "./chunk-KAJJ56J4.js";
10
10
 
11
11
  // src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
12
12
  import React, { useEffect, useRef, useState } from "react";
13
13
  import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background";
14
14
  import {
15
- selectIsAllowedToPublish,
15
+ selectIsLocalVideoEnabled,
16
16
  selectIsLocalVideoPluginPresent,
17
17
  selectLocalPeerRole,
18
18
  selectLocalVideoTrackID,
@@ -82,8 +82,8 @@ var VirtualBackground = ({
82
82
  }) => {
83
83
  const pluginRef = useRef(null);
84
84
  const hmsActions = useHMSActions();
85
- const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
86
85
  const role = useHMSStore(selectLocalPeerRole);
86
+ const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
87
87
  const [isVBLoading, setIsVBLoading] = useState(false);
88
88
  const [isVBSupported, setIsVBSupported] = useState(false);
89
89
  const [isVBOn, setIsVBOn] = useState(false);
@@ -129,7 +129,7 @@ var VirtualBackground = ({
129
129
  }
130
130
  });
131
131
  }
132
- if (!isAllowedToPublish.video || !isVBSupported) {
132
+ if (!isVBSupported || !isVideoOn) {
133
133
  return null;
134
134
  }
135
135
  if (asActionTile) {
@@ -174,4 +174,4 @@ export {
174
174
  VirtualBackground,
175
175
  VirtualBackground_default as default
176
176
  };
177
- //# sourceMappingURL=VirtualBackground-UM2FOUHQ.js.map
177
+ //# sourceMappingURL=VirtualBackground-6EP3X7MO.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx", "../src/Prebuilt/plugins/VirtualBackground/vbutils.js"],
4
+ "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nimport {\n selectIsLocalVideoEnabled,\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 role = useHMSStore(selectLocalPeerRole);\n const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\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 (!isVBSupported || !isVideoOn) {\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"],
5
+ "mappings": "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",
6
+ "names": ["HMSVirtualBackgroundTypes", "HMSVirtualBackgroundTypes"]
7
+ }