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

package/dist/meta.esbuild.json

@@ -26,7 +26,7 @@
       "format": "esm"
     },
     "src/Prebuilt/common/constants.ts": {
-      "bytes": 4444,
+      "bytes": 4466,
       "imports": [
         {
           "path": "@100mslive/react-sdk",
@@ -1961,7 +1961,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/useUISettings.js": {
-      "bytes": 6029,
+      "bytes": 6326,
       "imports": [
         {
           "path": "react",
@@ -2241,7 +2241,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5935,
+      "bytes": 5963,
       "imports": [
         {
           "path": "react",
@@ -2909,6 +2909,47 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/CaptionIcon.tsx": {
+      "bytes": 980,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Tooltip/index.ts",
+          "kind": "import-statement",
+          "original": "../../Tooltip"
+        },
+        {
+          "path": "src/Prebuilt/IconButton.tsx",
+          "kind": "import-statement",
+          "original": "../IconButton"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "kind": "import-statement",
+          "original": "./AppData/useUISettings.js"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/Footer/EmojiCard.jsx": {
       "bytes": 1189,
       "imports": [
@@ -4701,18 +4742,8 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 331528,
+      "bytes": 332228,
       "imports": [
-        {
-          "path": "../../node_modules/reselect/es/index.js",
-          "kind": "import-statement",
-          "original": "reselect"
-        },
-        {
-          "path": "../../node_modules/reselect/es/index.js",
-          "kind": "import-statement",
-          "original": "reselect"
-        },
         {
           "path": "../../node_modules/reselect/es/index.js",
           "kind": "import-statement",
@@ -4778,6 +4809,16 @@
           "kind": "import-statement",
           "original": "reselect"
         },
+        {
+          "path": "../../node_modules/reselect/es/index.js",
+          "kind": "import-statement",
+          "original": "reselect"
+        },
+        {
+          "path": "../../node_modules/reselect/es/index.js",
+          "kind": "import-statement",
+          "original": "reselect"
+        },
         {
           "path": "../../node_modules/immer/dist/immer.esm.mjs",
           "kind": "import-statement",
@@ -5206,7 +5247,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 12214,
+      "bytes": 13062,
       "imports": [
         {
           "path": "react",
@@ -6057,7 +6098,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-      "bytes": 5728,
+      "bytes": 5743,
       "imports": [
         {
           "path": "react",
@@ -6352,7 +6393,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/Footer.tsx": {
-      "bytes": 3811,
+      "bytes": 3926,
       "imports": [
         {
           "path": "react",
@@ -6384,6 +6425,11 @@
           "kind": "import-statement",
           "original": "../AudioVideoToggle"
         },
+        {
+          "path": "src/Prebuilt/components/CaptionIcon.tsx",
+          "kind": "import-statement",
+          "original": "../CaptionIcon"
+        },
         {
           "path": "src/Prebuilt/components/EmojiReaction.jsx",
           "kind": "import-statement",
@@ -11659,7 +11705,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
-      "bytes": 4494,
+      "bytes": 4493,
       "imports": [
         {
           "path": "react",
@@ -11974,14 +12020,50 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/plugins/CaptionsViewer.tsx": {
+      "bytes": 5541,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Layout/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Layout"
+        },
+        {
+          "path": "src/Text/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Text"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8044,
+      "bytes": 9357,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/types-prebuilt",
           "kind": "import-statement",
@@ -12032,6 +12114,11 @@
           "kind": "import-statement",
           "original": "../../Layout"
         },
+        {
+          "path": "src/Theme/index.tsx",
+          "kind": "import-statement",
+          "original": "../../Theme"
+        },
         {
           "path": "src/Prebuilt/AppContext.tsx",
           "kind": "import-statement",
@@ -12067,11 +12154,21 @@
           "kind": "import-statement",
           "original": "./RaiseHand"
         },
+        {
+          "path": "src/Prebuilt/plugins/CaptionsViewer.tsx",
+          "kind": "import-statement",
+          "original": "../plugins/CaptionsViewer"
+        },
         {
           "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
           "kind": "import-statement",
           "original": "../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
         },
+        {
+          "path": "src/Prebuilt/components/AppData/useSidepane.js",
+          "kind": "import-statement",
+          "original": "./AppData/useSidepane"
+        },
         {
           "path": "src/Prebuilt/components/AppData/useUISettings.js",
           "kind": "import-statement",
@@ -13800,7 +13897,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-IDAPJGWC.js",
+          "path": "dist/chunk-SQPIZNW2.js",
           "kind": "import-statement"
         }
       ],
@@ -13873,16 +13970,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-HUMJOIWO.js.map": {
+    "dist/HLSView-XZDT3RRC.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100708
     },
-    "dist/HLSView-HUMJOIWO.js": {
+    "dist/HLSView-XZDT3RRC.js": {
       "imports": [
         {
-          "path": "dist/chunk-IDAPJGWC.js",
+          "path": "dist/chunk-SQPIZNW2.js",
           "kind": "import-statement"
         },
         {
@@ -14118,13 +14215,13 @@
       },
       "bytes": 61939
     },
-    "dist/chunk-IDAPJGWC.js.map": {
+    "dist/chunk-SQPIZNW2.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3200609
+      "bytes": 3218955
     },
-    "dist/chunk-IDAPJGWC.js": {
+    "dist/chunk-SQPIZNW2.js": {
       "imports": [
         {
           "path": "react",
@@ -14541,6 +14638,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "uuid",
           "kind": "import-statement",
@@ -14676,6 +14778,21 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react-use",
           "kind": "import-statement",
@@ -16512,7 +16629,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-HUMJOIWO.js",
+          "path": "dist/HLSView-XZDT3RRC.js",
           "kind": "dynamic-import"
         },
         {
@@ -16575,6 +16692,16 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-icons",
           "kind": "import-statement",
@@ -16993,25 +17120,25 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18287
+          "bytesInOutput": 18290
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224310
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
-          "bytesInOutput": 42491
+          "bytesInOutput": 42482
         },
         "../../node_modules/lodash.isequal/index.js": {
           "bytesInOutput": 26591
         },
         "../../node_modules/sdp/sdp.js": {
-          "bytesInOutput": 22292
+          "bytesInOutput": 22275
         },
         "../../node_modules/sdp-transform/lib/grammar.js": {
           "bytesInOutput": 16120
         },
         "../../node_modules/sdp-transform/lib/parser.js": {
-          "bytesInOutput": 3492
+          "bytesInOutput": 3488
         },
         "../../node_modules/sdp-transform/lib/writer.js": {
           "bytesInOutput": 3068
@@ -17041,7 +17168,7 @@
           "bytesInOutput": 5061
         },
         "src/Prebuilt/common/constants.ts": {
-          "bytesInOutput": 3585
+          "bytesInOutput": 3607
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 1926
@@ -17248,7 +17375,7 @@
           "bytesInOutput": 7828
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 5511
+          "bytesInOutput": 5539
         },
         "src/Prebuilt/components/Settings/LayoutSettings.tsx": {
           "bytesInOutput": 2705
@@ -17257,7 +17384,7 @@
           "bytesInOutput": 973
         },
         "src/Prebuilt/components/AppData/useUISettings.js": {
-          "bytesInOutput": 5280
+          "bytesInOutput": 5558
         },
         "src/Prebuilt/components/hooks/useUserPreferences.jsx": {
           "bytesInOutput": 748
@@ -17278,7 +17405,7 @@
           "bytesInOutput": 1486
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3208
+          "bytesInOutput": 3211
         },
         "src/Prebuilt/components/AppData/useSidepane.js": {
           "bytesInOutput": 2499
@@ -17293,10 +17420,10 @@
           "bytesInOutput": 4698
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7207
+          "bytesInOutput": 8351
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 3209
+          "bytesInOutput": 3306
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
           "bytesInOutput": 10284
@@ -17334,6 +17461,9 @@
         "src/Prebuilt/components/Toast/ToastManager.js": {
           "bytesInOutput": 1028
         },
+        "src/Prebuilt/components/CaptionIcon.tsx": {
+          "bytesInOutput": 915
+        },
         "src/Prebuilt/components/EmojiReaction.jsx": {
           "bytesInOutput": 2580
         },
@@ -17344,7 +17474,7 @@
           "bytesInOutput": 606
         },
         "src/Prebuilt/common/hooks.ts": {
-          "bytesInOutput": 5950
+          "bytesInOutput": 5956
         },
         "src/Prebuilt/components/Leave/LeaveRoom.tsx": {
           "bytesInOutput": 2454
@@ -17401,7 +17531,7 @@
           "bytesInOutput": 7700
         },
         "src/Prebuilt/components/StatsForNerds.jsx": {
-          "bytesInOutput": 9842
+          "bytesInOutput": 9845
         },
         "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
           "bytesInOutput": 5008
@@ -17425,16 +17555,16 @@
           "bytesInOutput": 1826
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 10876
+          "bytesInOutput": 11746
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
           "bytesInOutput": 9480
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 49010
+          "bytesInOutput": 49345
         },
         "../../node_modules/reselect/es/index.js": {
-          "bytesInOutput": 2537
+          "bytesInOutput": 2539
         },
         "../../node_modules/webrtc-adapter/src/js/adapter_core.js": {
           "bytesInOutput": 118
@@ -17446,10 +17576,10 @@
           "bytesInOutput": 6313
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/chrome_shim.js": {
-          "bytesInOutput": 22693
+          "bytesInOutput": 22682
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6102
+          "bytesInOutput": 6082
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1256
@@ -17458,16 +17588,16 @@
           "bytesInOutput": 9143
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getusermedia.js": {
-          "bytesInOutput": 2122
+          "bytesInOutput": 2125
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getdisplaymedia.js": {
           "bytesInOutput": 842
         },
         "../../node_modules/webrtc-adapter/src/js/safari/safari_shim.js": {
-          "bytesInOutput": 11875
+          "bytesInOutput": 11868
         },
         "../../node_modules/webrtc-adapter/src/js/common_shim.js": {
-          "bytesInOutput": 12470
+          "bytesInOutput": 12460
         },
         "src/Prebuilt/components/Header/AdditionalRoomState.jsx": {
           "bytesInOutput": 6823
@@ -17545,7 +17675,7 @@
           "bytesInOutput": 1290
         },
         "src/Prebuilt/components/Footer/RoleAccordion.tsx": {
-          "bytesInOutput": 5214
+          "bytesInOutput": 5231
         },
         "src/Prebuilt/components/Footer/RoleOptions.tsx": {
           "bytesInOutput": 7326
@@ -17578,7 +17708,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 7995
+          "bytesInOutput": 7999
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -17635,7 +17765,7 @@
           "bytesInOutput": 1874
         },
         "src/Prebuilt/components/Polls/Voting/Voting.tsx": {
-          "bytesInOutput": 3356
+          "bytesInOutput": 3372
         },
         "src/Prebuilt/components/Polls/Voting/StandardVoting.tsx": {
           "bytesInOutput": 1221
@@ -17788,7 +17918,7 @@
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3834
+          "bytesInOutput": 3831
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
           "bytesInOutput": 2183
@@ -17847,6 +17977,9 @@
         "src/Prebuilt/components/PreviousRoleInMetadata.tsx": {
           "bytesInOutput": 754
         },
+        "src/Prebuilt/plugins/CaptionsViewer.tsx": {
+          "bytesInOutput": 5070
+        },
         "src/Prebuilt/components/ErrorBoundary.jsx": {
           "bytesInOutput": 3509
         },
@@ -17875,7 +18008,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7974
+          "bytesInOutput": 7971
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17953,7 +18086,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1310169
+      "bytes": 1318999
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.8-alpha.1",
+  "version": "0.3.8-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.8-alpha.1",
+    "@100mslive/hls-player": "0.3.8-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@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/hms-virtual-background": "1.13.8-alpha.2",
+    "@100mslive/react-icons": "0.10.8-alpha.2",
+    "@100mslive/react-sdk": "0.10.8-alpha.2",
     "@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": "569f8b3923f8f47aaf9ecd7d91b9fe1e52c39695"
+  "gitHead": "43ee35cc85faabb5a827f7f41a5affebffcfca18"
 }

package/src/Prebuilt/common/constants.ts

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

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

@@ -68,6 +68,7 @@ const initialAppData = {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
   },
+  [APP_DATA.caption]: true,
 };
 
 export const AppData = React.memo(() => {

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -107,6 +107,16 @@ export const useSetSubscribedNotifications = notificationKey => {
   return [value, setValue];
 };
 
+export const useIsCaptionEnabled = () => {
+  const isCaptionEnabled = useHMSStore(selectAppDataByPath(APP_DATA.caption));
+  return isCaptionEnabled;
+};
+
+export const useSetIsCaptionEnabled = () => {
+  const [value, setValue] = useSetAppDataByKey(APP_DATA.caption);
+  return [value, setValue];
+};
+
 export const useSubscribeChatSelector = chatSelectorKey => {
   const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));
   return chatSelectorPreference;

package/src/Prebuilt/components/CaptionIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { selectIsTranscriptionEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../Tooltip';
+// @ts-ignore: No implicit Any
+import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { useSetIsCaptionEnabled } from './AppData/useUISettings.js';
+
+export const CaptionIcon = () => {
+  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
+  const [isCaption, setIsCaption] = useSetIsCaptionEnabled();
+
+  const onClick = () => {
+    setIsCaption(!isCaption);
+  };
+  if (!isCaptionPresent) {
+    return null;
+  }
+  return (
+    <Tooltip title={isCaption ? 'Disable caption' : 'Enable caption'}>
+      <IconButton data-testid="caption_btn" onClick={onClick}>
+        {isCaption ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
+      </IconButton>
+    </Tooltip>
+  );
+};