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

package/dist/meta.esbuild.json

@@ -26,7 +26,7 @@
       "format": "esm"
     },
     "src/Prebuilt/common/constants.ts": {
-      "bytes": 4408,
+      "bytes": 4444,
       "imports": [
         {
           "path": "@100mslive/react-sdk",
@@ -2241,7 +2241,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5899,
+      "bytes": 5935,
       "imports": [
         {
           "path": "react",
@@ -2962,7 +2962,7 @@
       "format": "esm"
     },
     "src/Prebuilt/common/hooks.ts": {
-      "bytes": 5233,
+      "bytes": 7493,
       "imports": [
         {
           "path": "react",
@@ -2989,6 +2989,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Prebuilt/components/Toast/ToastManager.js",
+          "kind": "import-statement",
+          "original": "../components/Toast/ToastManager"
+        },
         {
           "path": "src/Theme/index.tsx",
           "kind": "import-statement",
@@ -2999,6 +3004,11 @@
           "kind": "import-statement",
           "original": "../provider/roomLayoutProvider"
         },
+        {
+          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "kind": "import-statement",
+          "original": "../components/AppData/useUISettings"
+        },
         {
           "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
           "kind": "import-statement",
@@ -3829,7 +3839,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Settings/StartRecording.jsx": {
-      "bytes": 4630,
+      "bytes": 3609,
       "imports": [
         {
           "path": "react",
@@ -3862,9 +3872,9 @@
           "original": "../Toast/ToastManager"
         },
         {
-          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "path": "src/Prebuilt/common/hooks.ts",
           "kind": "import-statement",
-          "original": "../AppData/useUISettings"
+          "original": "../../common/hooks"
         },
         {
           "path": "src/Prebuilt/common/constants.ts",
@@ -4930,7 +4940,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Header/StreamActions.tsx": {
-      "bytes": 9392,
+      "bytes": 8719,
       "imports": [
         {
           "path": "react",
@@ -4983,20 +4993,15 @@
           "original": "../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
         },
         {
-          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "path": "src/Prebuilt/common/hooks.ts",
           "kind": "import-statement",
-          "original": "../AppData/useUISettings"
+          "original": "../../common/hooks"
         },
         {
           "path": "src/Prebuilt/common/utils.js",
           "kind": "import-statement",
           "original": "../../common/utils"
         },
-        {
-          "path": "src/Prebuilt/common/constants.ts",
-          "kind": "import-statement",
-          "original": "../../common/constants"
-        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -5201,7 +5206,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 13075,
+      "bytes": 12214,
       "imports": [
         {
           "path": "react",
@@ -5765,7 +5770,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-      "bytes": 1063,
+      "bytes": 1253,
       "imports": [
         {
           "path": "react",
@@ -5782,6 +5787,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Loading/index.ts",
+          "kind": "import-statement",
+          "original": "../../../Loading"
+        },
         {
           "path": "src/Tooltip/index.ts",
           "kind": "import-statement",
@@ -9213,7 +9223,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBOption.tsx": {
-      "bytes": 1231,
+      "bytes": 1246,
       "imports": [
         {
           "path": "react",
@@ -9285,7 +9295,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2687,
+      "bytes": 2732,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -9317,13 +9327,18 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 7273,
+      "bytes": 7852,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "../hms-video-store/dist/index.js",
           "kind": "import-statement",
@@ -9549,8 +9564,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/FullPageProgress.jsx": {
-      "bytes": 524,
+    "src/Prebuilt/components/FullPageProgress.tsx": {
+      "bytes": 625,
       "imports": [
         {
           "path": "react",
@@ -9572,6 +9587,11 @@
           "kind": "import-statement",
           "original": "../../Text"
         },
+        {
+          "path": "../../Theme",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -9637,7 +9657,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 9969,
+      "bytes": 9876,
       "imports": [
         {
           "path": "react",
@@ -9700,7 +9720,7 @@
           "original": "../Connection/TileConnection"
         },
         {
-          "path": "src/Prebuilt/components/FullPageProgress.jsx",
+          "path": "src/Prebuilt/components/FullPageProgress.tsx",
           "kind": "import-statement",
           "original": "../FullPageProgress"
         },
@@ -11639,7 +11659,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
-      "bytes": 4556,
+      "bytes": 4494,
       "imports": [
         {
           "path": "react",
@@ -11662,7 +11682,7 @@
           "external": true
         },
         {
-          "path": "src/Prebuilt/components/FullPageProgress.jsx",
+          "path": "src/Prebuilt/components/FullPageProgress.tsx",
           "kind": "import-statement",
           "original": "../components/FullPageProgress"
         },
@@ -11955,7 +11975,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8106,
+      "bytes": 8044,
       "imports": [
         {
           "path": "react",
@@ -12028,7 +12048,7 @@
           "original": "./EmojiReaction"
         },
         {
-          "path": "src/Prebuilt/components/FullPageProgress.jsx",
+          "path": "src/Prebuilt/components/FullPageProgress.tsx",
           "kind": "import-statement",
           "original": "./FullPageProgress"
         },
@@ -12486,7 +12506,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-      "bytes": 5843,
+      "bytes": 5213,
       "imports": [
         {
           "path": "react",
@@ -12635,7 +12655,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/PeerNotifications.tsx": {
-      "bytes": 1842,
+      "bytes": 1643,
       "imports": [
         {
           "path": "react",
@@ -12971,7 +12991,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewScreen.tsx": {
-      "bytes": 1690,
+      "bytes": 1597,
       "imports": [
         {
           "path": "react",
@@ -12999,7 +13019,7 @@
           "original": "../../provider/roomLayoutProvider"
         },
         {
-          "path": "src/Prebuilt/components/FullPageProgress.jsx",
+          "path": "src/Prebuilt/components/FullPageProgress.tsx",
           "kind": "import-statement",
           "original": "../FullPageProgress"
         },
@@ -13780,7 +13800,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-NDLMRKFR.js",
+          "path": "dist/chunk-IDAPJGWC.js",
           "kind": "import-statement"
         }
       ],
@@ -13853,16 +13873,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-CTZXD762.js.map": {
+    "dist/HLSView-HUMJOIWO.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100708
     },
-    "dist/HLSView-CTZXD762.js": {
+    "dist/HLSView-HUMJOIWO.js": {
       "imports": [
         {
-          "path": "dist/chunk-NDLMRKFR.js",
+          "path": "dist/chunk-IDAPJGWC.js",
           "kind": "import-statement"
         },
         {
@@ -14098,13 +14118,13 @@
       },
       "bytes": 61939
     },
-    "dist/chunk-NDLMRKFR.js.map": {
+    "dist/chunk-IDAPJGWC.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3201090
+      "bytes": 3200609
     },
-    "dist/chunk-NDLMRKFR.js": {
+    "dist/chunk-IDAPJGWC.js": {
       "imports": [
         {
           "path": "react",
@@ -16141,6 +16161,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/hms-virtual-background",
           "kind": "import-statement",
@@ -16487,7 +16512,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-CTZXD762.js",
+          "path": "dist/HLSView-HUMJOIWO.js",
           "kind": "dynamic-import"
         },
         {
@@ -16968,7 +16993,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18306
+          "bytesInOutput": 18287
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224310
@@ -17016,7 +17041,7 @@
           "bytesInOutput": 5061
         },
         "src/Prebuilt/common/constants.ts": {
-          "bytesInOutput": 3549
+          "bytesInOutput": 3585
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 1926
@@ -17223,7 +17248,7 @@
           "bytesInOutput": 7828
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 5475
+          "bytesInOutput": 5511
         },
         "src/Prebuilt/components/Settings/LayoutSettings.tsx": {
           "bytesInOutput": 2705
@@ -17268,7 +17293,7 @@
           "bytesInOutput": 4698
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7205
+          "bytesInOutput": 7207
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 3209
@@ -17319,7 +17344,7 @@
           "bytesInOutput": 606
         },
         "src/Prebuilt/common/hooks.ts": {
-          "bytesInOutput": 4136
+          "bytesInOutput": 5950
         },
         "src/Prebuilt/components/Leave/LeaveRoom.tsx": {
           "bytesInOutput": 2454
@@ -17352,7 +17377,7 @@
           "bytesInOutput": 178
         },
         "src/Prebuilt/components/PIP/PIPComponent.jsx": {
-          "bytesInOutput": 2357
+          "bytesInOutput": 2359
         },
         "src/Prebuilt/components/PIP/PIPManager.js": {
           "bytesInOutput": 9164
@@ -17367,7 +17392,7 @@
           "bytesInOutput": 6098
         },
         "src/Prebuilt/components/Settings/StartRecording.jsx": {
-          "bytesInOutput": 4547
+          "bytesInOutput": 3629
         },
         "src/Prebuilt/components/Streaming/ResolutionInput.jsx": {
           "bytesInOutput": 2942
@@ -17400,10 +17425,10 @@
           "bytesInOutput": 1826
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 11560
+          "bytesInOutput": 10876
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
-          "bytesInOutput": 10031
+          "bytesInOutput": 9480
         },
         "../hms-video-store/dist/index.js": {
           "bytesInOutput": 49010
@@ -17502,7 +17527,7 @@
           "bytesInOutput": 823
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-          "bytesInOutput": 985
+          "bytesInOutput": 1179
         },
         "src/Prebuilt/components/Footer/ChatToggle.tsx": {
           "bytesInOutput": 1445
@@ -17544,7 +17569,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9625
+          "bytesInOutput": 9772
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 6436
@@ -17715,16 +17740,16 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 7244
+          "bytesInOutput": 7825
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
         },
         "src/Prebuilt/components/VirtualBackground/VBOption.tsx": {
-          "bytesInOutput": 1161
+          "bytesInOutput": 1154
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3427
+          "bytesInOutput": 3443
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -17732,8 +17757,8 @@
         "src/Prebuilt/components/Chip.tsx": {
           "bytesInOutput": 778
         },
-        "src/Prebuilt/components/FullPageProgress.jsx": {
-          "bytesInOutput": 574
+        "src/Prebuilt/components/FullPageProgress.tsx": {
+          "bytesInOutput": 580
         },
         "src/Prebuilt/components/Preview/PreviewForm.tsx": {
           "bytesInOutput": 2721
@@ -17796,7 +17821,7 @@
           "bytesInOutput": 3099
         },
         "src/Prebuilt/layouts/EmbedView.jsx": {
-          "bytesInOutput": 2785
+          "bytesInOutput": 2787
         },
         "src/Prebuilt/layouts/PDFView.jsx": {
           "bytesInOutput": 1457
@@ -17865,13 +17890,13 @@
           "bytesInOutput": 1983
         },
         "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-          "bytesInOutput": 7229
+          "bytesInOutput": 6413
         },
         "src/Prebuilt/components/Notifications/InitErrorModal.tsx": {
           "bytesInOutput": 1596
         },
         "src/Prebuilt/components/Notifications/PeerNotifications.tsx": {
-          "bytesInOutput": 1627
+          "bytesInOutput": 1428
         },
         "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx": {
           "bytesInOutput": 4534
@@ -17928,7 +17953,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1310527
+      "bytes": 1310169
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.8-alpha.0",
+  "version": "0.3.8-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.8-alpha.0",
+    "@100mslive/hls-player": "0.3.8-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.8-alpha.0",
-    "@100mslive/react-icons": "0.10.8-alpha.0",
-    "@100mslive/react-sdk": "0.10.8-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.8-alpha.1",
+    "@100mslive/react-icons": "0.10.8-alpha.1",
+    "@100mslive/react-sdk": "0.10.8-alpha.1",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "01f2b5f23cc814beb7f077b46b6736f1e00ceaad"
+  "gitHead": "569f8b3923f8f47aaf9ecd7d91b9fe1e52c39695"
 }

package/src/Prebuilt/common/constants.ts

@@ -47,6 +47,7 @@ export const APP_DATA = {
   pollState: 'pollState',
   background: 'background',
   sheet: 'sheet',
+  loadingEffects: 'loadingEffects',
 };
 
 export const UI_SETTINGS = {

package/src/Prebuilt/common/hooks.ts

@@ -3,20 +3,27 @@ import { useMedia } from 'react-use';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  HMSRecording,
   parsedUserAgent,
   selectAvailableRoleNames,
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
+  selectRecordingState,
   selectRemotePeers,
+  useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit any
+import { ToastManager } from '../components/Toast/ToastManager';
 import { config } from '../../Theme';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
+// @ts-ignore
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { CHAT_SELECTOR } from './constants';
+import { APP_DATA, CHAT_SELECTOR, RTMP_RECORD_DEFAULT_RESOLUTION } from './constants';
 /**
  * Hook to execute a callback when alone in room(after a certain 5d of time)
  * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
@@ -147,3 +154,67 @@ export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) =
 
   return handleKeyEvent;
 };
+export interface RTMPRecordingResolution {
+  width: number;
+  height: number;
+}
+export const useRecordingHandler = () => {
+  const hmsActions = useHMSActions();
+  const recordingState: HMSRecording = useHMSStore(selectRecordingState);
+  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  useEffect(() => {
+    if (recordingState.browser.error && recordingStarted) {
+      setRecordingState(false);
+    }
+  }, [recordingStarted, recordingState.browser.error, setRecordingState]);
+  const startRecording = useCallback(
+    async (resolution: RTMPRecordingResolution | null = null) => {
+      try {
+        setRecordingState(true);
+        setIsRecordingLoading(true);
+        await hmsActions.startRTMPOrRecording({
+          resolution: getResolution(resolution),
+          record: true,
+        });
+      } catch (error) {
+        const err = error as Error;
+        if (err.message.includes('stream already running')) {
+          ToastManager.addToast({
+            title: 'Recording already running',
+            variant: 'error',
+          });
+        } else {
+          ToastManager.addToast({
+            title: err.message,
+            variant: 'error',
+          });
+        }
+        setRecordingState(false);
+      }
+      setIsRecordingLoading(false);
+    },
+    [hmsActions, setRecordingState],
+  );
+  return {
+    recordingStarted,
+    startRecording,
+    isRecordingLoading,
+  };
+};
+
+export function getResolution(
+  recordingResolution: RTMPRecordingResolution | null,
+): RTMPRecordingResolution | undefined {
+  if (!recordingResolution) {
+    return undefined;
+  }
+  const resolution: RTMPRecordingResolution = RTMP_RECORD_DEFAULT_RESOLUTION;
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  return resolution;
+}

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -62,6 +62,7 @@ const initialAppData = {
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
+  [APP_DATA.loadingEffects]: false,
   [APP_DATA.background]: 'none',
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -22,7 +22,6 @@ import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
 import { EmojiReaction } from './EmojiReaction';
-// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
@@ -34,7 +33,6 @@ import {
 // @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-// @ts-ignore: No implicit Any
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 export const ConferenceScreen = () => {

package/src/Prebuilt/components/{FullPageProgress.jsx → FullPageProgress.tsx}

@@ -2,8 +2,17 @@ import React from 'react';
 import { Flex } from '../../Layout';
 import { Loading } from '../../Loading';
 import { Text } from '../../Text';
+import { CSS } from '../../Theme';
 
-const FullPageProgress = ({ loaderColor = '$primary_default', text = '', css = {} }) => (
+const FullPageProgress = ({
+  loaderColor = '$primary_default',
+  text = '',
+  css = {},
+}: {
+  loaderColor?: string;
+  text?: string;
+  css?: CSS;
+}) => (
   <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor, ...css }}>
     <Loading color="currentColor" size={100} />
     {text ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{text}</Text> : null}