@100mslive/roomkit-react 0.3.12 → 0.3.13-alpha.1

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.
@@ -26,7 +26,7 @@
26
26
  "format": "esm"
27
27
  },
28
28
  "src/Prebuilt/common/constants.ts": {
29
- "bytes": 4521,
29
+ "bytes": 4563,
30
30
  "imports": [
31
31
  {
32
32
  "path": "@100mslive/react-sdk",
@@ -1997,7 +1997,7 @@
1997
1997
  "format": "esm"
1998
1998
  },
1999
1999
  "src/Prebuilt/components/AppData/useUISettings.js": {
2000
- "bytes": 6214,
2000
+ "bytes": 6649,
2001
2001
  "imports": [
2002
2002
  {
2003
2003
  "path": "react",
@@ -2277,7 +2277,7 @@
2277
2277
  "format": "esm"
2278
2278
  },
2279
2279
  "src/Prebuilt/components/AppData/AppData.tsx": {
2280
- "bytes": 5935,
2280
+ "bytes": 6297,
2281
2281
  "imports": [
2282
2282
  {
2283
2283
  "path": "react",
@@ -2850,7 +2850,7 @@
2850
2850
  "format": "esm"
2851
2851
  },
2852
2852
  "src/Prebuilt/components/AudioVideoToggle.tsx": {
2853
- "bytes": 9981,
2853
+ "bytes": 10776,
2854
2854
  "imports": [
2855
2855
  {
2856
2856
  "path": "react",
@@ -2922,6 +2922,11 @@
2922
2922
  "kind": "import-statement",
2923
2923
  "original": "../provider/roomLayoutProvider/hooks/useRoomLayoutScreen"
2924
2924
  },
2925
+ {
2926
+ "path": "src/Prebuilt/components/AppData/useUISettings.js",
2927
+ "kind": "import-statement",
2928
+ "original": "./AppData/useUISettings"
2929
+ },
2925
2930
  {
2926
2931
  "path": "src/Prebuilt/components/hooks/useAudioOutputTest.tsx",
2927
2932
  "kind": "import-statement",
@@ -4104,7 +4109,7 @@
4104
4109
  "format": "esm"
4105
4110
  },
4106
4111
  "src/Prebuilt/components/MoreSettings/CaptionContent.tsx": {
4107
- "bytes": 5092,
4112
+ "bytes": 5207,
4108
4113
  "imports": [
4109
4114
  {
4110
4115
  "path": "react",
@@ -4890,7 +4895,7 @@
4890
4895
  "format": "cjs"
4891
4896
  },
4892
4897
  "../hms-video-store/dist/index.js": {
4893
- "bytes": 338116,
4898
+ "bytes": 339952,
4894
4899
  "imports": [
4895
4900
  {
4896
4901
  "path": "../../node_modules/reselect/es/index.js",
@@ -6769,7 +6774,7 @@
6769
6774
  "format": "esm"
6770
6775
  },
6771
6776
  "src/Prebuilt/components/Streaming/Common.jsx": {
6772
- "bytes": 3964,
6777
+ "bytes": 4034,
6773
6778
  "imports": [
6774
6779
  {
6775
6780
  "path": "react",
@@ -10944,7 +10949,7 @@
10944
10949
  ],
10945
10950
  "format": "esm"
10946
10951
  },
10947
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe903153d2/tldraw.css": {
10952
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c222/tldraw.css": {
10948
10953
  "bytes": 80111,
10949
10954
  "imports": [
10950
10955
  {
@@ -10994,7 +10999,7 @@
10994
10999
  }
10995
11000
  ]
10996
11001
  },
10997
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe90314cd0/index.css": {
11002
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c0a1/index.css": {
10998
11003
  "bytes": 597,
10999
11004
  "imports": [
11000
11005
  {
@@ -11003,7 +11008,7 @@
11003
11008
  "external": true
11004
11009
  },
11005
11010
  {
11006
- "path": "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe903153d2/tldraw.css",
11011
+ "path": "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c222/tldraw.css",
11007
11012
  "kind": "import-rule",
11008
11013
  "original": "@tldraw/tldraw/tldraw.css"
11009
11014
  }
@@ -11078,7 +11083,7 @@
11078
11083
  "original": "../../common/constants"
11079
11084
  },
11080
11085
  {
11081
- "path": "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe90314cd0/index.css",
11086
+ "path": "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c0a1/index.css",
11082
11087
  "kind": "import-statement",
11083
11088
  "original": "@100mslive/hms-whiteboard/index.css"
11084
11089
  },
@@ -11275,13 +11280,18 @@
11275
11280
  "format": "esm"
11276
11281
  },
11277
11282
  "src/Prebuilt/plugins/CaptionsViewer.tsx": {
11278
- "bytes": 7075,
11283
+ "bytes": 7689,
11279
11284
  "imports": [
11280
11285
  {
11281
11286
  "path": "react",
11282
11287
  "kind": "import-statement",
11283
11288
  "external": true
11284
11289
  },
11290
+ {
11291
+ "path": "react-draggable",
11292
+ "kind": "import-statement",
11293
+ "external": true
11294
+ },
11285
11295
  {
11286
11296
  "path": "react-use",
11287
11297
  "kind": "import-statement",
@@ -12095,13 +12105,18 @@
12095
12105
  "format": "esm"
12096
12106
  },
12097
12107
  "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
12098
- "bytes": 5826,
12108
+ "bytes": 6017,
12099
12109
  "imports": [
12100
12110
  {
12101
12111
  "path": "react",
12102
12112
  "kind": "import-statement",
12103
12113
  "external": true
12104
12114
  },
12115
+ {
12116
+ "path": "react-draggable",
12117
+ "kind": "import-statement",
12118
+ "external": true
12119
+ },
12105
12120
  {
12106
12121
  "path": "@100mslive/types-prebuilt",
12107
12122
  "kind": "import-statement",
@@ -14302,7 +14317,7 @@
14302
14317
  "dist/index.js": {
14303
14318
  "imports": [
14304
14319
  {
14305
- "path": "dist/chunk-K7H5ZUXQ.js",
14320
+ "path": "dist/chunk-ESKXLCLX.js",
14306
14321
  "kind": "import-statement"
14307
14322
  }
14308
14323
  ],
@@ -14376,16 +14391,16 @@
14376
14391
  "inputs": {},
14377
14392
  "bytes": 1822
14378
14393
  },
14379
- "dist/HLSView-C2U74KCJ.js.map": {
14394
+ "dist/HLSView-KYYL6BSY.js.map": {
14380
14395
  "imports": [],
14381
14396
  "exports": [],
14382
14397
  "inputs": {},
14383
14398
  "bytes": 100275
14384
14399
  },
14385
- "dist/HLSView-C2U74KCJ.js": {
14400
+ "dist/HLSView-KYYL6BSY.js": {
14386
14401
  "imports": [
14387
14402
  {
14388
- "path": "dist/chunk-K7H5ZUXQ.js",
14403
+ "path": "dist/chunk-ESKXLCLX.js",
14389
14404
  "kind": "import-statement"
14390
14405
  },
14391
14406
  {
@@ -14563,7 +14578,7 @@
14563
14578
  "default"
14564
14579
  ],
14565
14580
  "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
14566
- "cssBundle": "dist/HLSView-ZPNPCOF2.css",
14581
+ "cssBundle": "dist/HLSView-RVU2AEOU.css",
14567
14582
  "inputs": {
14568
14583
  "src/Prebuilt/layouts/HLSView.jsx": {
14569
14584
  "bytesInOutput": 27671
@@ -14622,13 +14637,13 @@
14622
14637
  },
14623
14638
  "bytes": 61702
14624
14639
  },
14625
- "dist/chunk-K7H5ZUXQ.js.map": {
14640
+ "dist/chunk-ESKXLCLX.js.map": {
14626
14641
  "imports": [],
14627
14642
  "exports": [],
14628
14643
  "inputs": {},
14629
- "bytes": 3271885
14644
+ "bytes": 3280559
14630
14645
  },
14631
- "dist/chunk-K7H5ZUXQ.js": {
14646
+ "dist/chunk-ESKXLCLX.js": {
14632
14647
  "imports": [
14633
14648
  {
14634
14649
  "path": "react",
@@ -17080,6 +17095,11 @@
17080
17095
  "kind": "import-statement",
17081
17096
  "external": true
17082
17097
  },
17098
+ {
17099
+ "path": "react-draggable",
17100
+ "kind": "import-statement",
17101
+ "external": true
17102
+ },
17083
17103
  {
17084
17104
  "path": "react-use",
17085
17105
  "kind": "import-statement",
@@ -17101,7 +17121,7 @@
17101
17121
  "external": true
17102
17122
  },
17103
17123
  {
17104
- "path": "dist/HLSView-C2U74KCJ.js",
17124
+ "path": "dist/HLSView-KYYL6BSY.js",
17105
17125
  "kind": "dynamic-import"
17106
17126
  },
17107
17127
  {
@@ -17603,7 +17623,7 @@
17603
17623
  ],
17604
17624
  "inputs": {
17605
17625
  "<define:process.env>": {
17606
- "bytesInOutput": 17823
17626
+ "bytesInOutput": 17840
17607
17627
  },
17608
17628
  "../../node_modules/lodash/lodash.js": {
17609
17629
  "bytesInOutput": 224310
@@ -17651,7 +17671,7 @@
17651
17671
  "bytesInOutput": 5061
17652
17672
  },
17653
17673
  "src/Prebuilt/common/constants.ts": {
17654
- "bytesInOutput": 3571
17674
+ "bytesInOutput": 3613
17655
17675
  },
17656
17676
  "src/Theme/ThemeProvider.tsx": {
17657
17677
  "bytesInOutput": 1926
@@ -17801,7 +17821,7 @@
17801
17821
  "bytesInOutput": 8580
17802
17822
  },
17803
17823
  "src/Stats/formatBytes.ts": {
17804
- "bytesInOutput": 470
17824
+ "bytesInOutput": 468
17805
17825
  },
17806
17826
  "src/Stats/StyledStats.tsx": {
17807
17827
  "bytesInOutput": 708
@@ -17861,7 +17881,7 @@
17861
17881
  "bytesInOutput": 7828
17862
17882
  },
17863
17883
  "src/Prebuilt/components/AppData/AppData.tsx": {
17864
- "bytesInOutput": 5542
17884
+ "bytesInOutput": 6004
17865
17885
  },
17866
17886
  "src/Prebuilt/components/Settings/LayoutSettings.tsx": {
17867
17887
  "bytesInOutput": 2705
@@ -17870,7 +17890,7 @@
17870
17890
  "bytesInOutput": 973
17871
17891
  },
17872
17892
  "src/Prebuilt/components/AppData/useUISettings.js": {
17873
- "bytesInOutput": 5454
17893
+ "bytesInOutput": 5870
17874
17894
  },
17875
17895
  "src/Prebuilt/components/hooks/useUserPreferences.jsx": {
17876
17896
  "bytesInOutput": 748
@@ -17912,7 +17932,7 @@
17912
17932
  "bytesInOutput": 3306
17913
17933
  },
17914
17934
  "src/Prebuilt/components/AudioVideoToggle.tsx": {
17915
- "bytesInOutput": 10280
17935
+ "bytesInOutput": 11007
17916
17936
  },
17917
17937
  "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
17918
17938
  "bytesInOutput": 3173
@@ -18017,7 +18037,7 @@
18017
18037
  "bytesInOutput": 7700
18018
18038
  },
18019
18039
  "src/Prebuilt/components/StatsForNerds.jsx": {
18020
- "bytesInOutput": 9844
18040
+ "bytesInOutput": 9842
18021
18041
  },
18022
18042
  "src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx": {
18023
18043
  "bytesInOutput": 5008
@@ -18026,7 +18046,7 @@
18026
18046
  "bytesInOutput": 1015
18027
18047
  },
18028
18048
  "src/Prebuilt/components/MoreSettings/CaptionContent.tsx": {
18029
- "bytesInOutput": 4981
18049
+ "bytesInOutput": 5090
18030
18050
  },
18031
18051
  "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx": {
18032
18052
  "bytesInOutput": 628
@@ -18053,7 +18073,7 @@
18053
18073
  "bytesInOutput": 9482
18054
18074
  },
18055
18075
  "../hms-video-store/dist/index.js": {
18056
- "bytesInOutput": 49490
18076
+ "bytesInOutput": 49655
18057
18077
  },
18058
18078
  "../../node_modules/reselect/es/index.js": {
18059
18079
  "bytesInOutput": 2537
@@ -18206,7 +18226,7 @@
18206
18226
  "bytesInOutput": 8166
18207
18227
  },
18208
18228
  "src/Prebuilt/components/Streaming/Common.jsx": {
18209
- "bytesInOutput": 2247
18229
+ "bytesInOutput": 2317
18210
18230
  },
18211
18231
  "src/Prebuilt/components/Polls/common/StatusIndicator.tsx": {
18212
18232
  "bytesInOutput": 795
@@ -18392,7 +18412,7 @@
18392
18412
  "bytesInOutput": 2206
18393
18413
  },
18394
18414
  "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
18395
- "bytesInOutput": 5024
18415
+ "bytesInOutput": 5199
18396
18416
  },
18397
18417
  "src/Prebuilt/components/VideoLayouts/GridLayout.tsx": {
18398
18418
  "bytesInOutput": 4550
@@ -18445,7 +18465,7 @@
18445
18465
  "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
18446
18466
  "bytesInOutput": 2793
18447
18467
  },
18448
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe90314cd0/index.css": {
18468
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c0a1/index.css": {
18449
18469
  "bytesInOutput": 0
18450
18470
  },
18451
18471
  "src/Prebuilt/common/PeersSorter.ts": {
@@ -18458,7 +18478,7 @@
18458
18478
  "bytesInOutput": 1536
18459
18479
  },
18460
18480
  "src/Prebuilt/plugins/CaptionsViewer.tsx": {
18461
- "bytesInOutput": 6381
18481
+ "bytesInOutput": 6888
18462
18482
  },
18463
18483
  "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
18464
18484
  "bytesInOutput": 619
@@ -18587,7 +18607,7 @@
18587
18607
  "bytesInOutput": 651
18588
18608
  }
18589
18609
  },
18590
- "bytes": 1342648
18610
+ "bytes": 1345334
18591
18611
  },
18592
18612
  "dist/index.css.map": {
18593
18613
  "imports": [],
@@ -18649,22 +18669,22 @@
18649
18669
  }
18650
18670
  ],
18651
18671
  "inputs": {
18652
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe903153d2/tldraw.css": {
18672
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c222/tldraw.css": {
18653
18673
  "bytesInOutput": 75223
18654
18674
  },
18655
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe90314cd0/index.css": {
18675
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c0a1/index.css": {
18656
18676
  "bytesInOutput": 401
18657
18677
  }
18658
18678
  },
18659
18679
  "bytes": 75901
18660
18680
  },
18661
- "dist/HLSView-ZPNPCOF2.css.map": {
18681
+ "dist/HLSView-RVU2AEOU.css.map": {
18662
18682
  "imports": [],
18663
18683
  "exports": [],
18664
18684
  "inputs": {},
18665
18685
  "bytes": 122402
18666
18686
  },
18667
- "dist/HLSView-ZPNPCOF2.css": {
18687
+ "dist/HLSView-RVU2AEOU.css": {
18668
18688
  "imports": [
18669
18689
  {
18670
18690
  "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -18718,10 +18738,10 @@
18718
18738
  }
18719
18739
  ],
18720
18740
  "inputs": {
18721
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe903153d2/tldraw.css": {
18741
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c222/tldraw.css": {
18722
18742
  "bytesInOutput": 75223
18723
18743
  },
18724
- "../../../../../../../tmp/tmp-2885-87IK8KcEQhMu/18fe90314cd0/index.css": {
18744
+ "../../../../../../../tmp/tmp-2790-h68IXZ7OlyIF/19010900c0a1/index.css": {
18725
18745
  "bytesInOutput": 401
18726
18746
  }
18727
18747
  },
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "prebuilt",
11
11
  "roomkit"
12
12
  ],
13
- "version": "0.3.12",
13
+ "version": "0.3.13-alpha.1",
14
14
  "author": "100ms",
15
15
  "license": "MIT",
16
16
  "repository": {
@@ -74,13 +74,13 @@
74
74
  "react": ">=17.0.2 <19.0.0"
75
75
  },
76
76
  "dependencies": {
77
- "@100mslive/hls-player": "0.3.12",
77
+ "@100mslive/hls-player": "0.3.13-alpha.1",
78
78
  "@100mslive/hms-noise-cancellation": "0.0.1",
79
- "@100mslive/hms-virtual-background": "1.13.12",
80
- "@100mslive/hms-whiteboard": "0.0.2",
81
- "@100mslive/react-icons": "0.10.12",
82
- "@100mslive/react-sdk": "0.10.12",
83
- "@100mslive/types-prebuilt": "0.12.8",
79
+ "@100mslive/hms-virtual-background": "1.13.13-alpha.1",
80
+ "@100mslive/hms-whiteboard": "0.0.3-alpha.1",
81
+ "@100mslive/react-icons": "0.10.13-alpha.1",
82
+ "@100mslive/react-sdk": "0.10.13-alpha.1",
83
+ "@100mslive/types-prebuilt": "0.12.9",
84
84
  "@emoji-mart/data": "^1.0.6",
85
85
  "@emoji-mart/react": "^1.0.1",
86
86
  "@radix-ui/react-accordion": "1.0.0",
@@ -115,5 +115,5 @@
115
115
  "uuid": "^8.3.2",
116
116
  "worker-timers": "^7.0.40"
117
117
  },
118
- "gitHead": "c1b1df2d10e69653f9edee4c00742b842bad96c7"
118
+ "gitHead": "bb6605c7147547550e46be6a5108dae4efe81eb8"
119
119
  }
@@ -47,6 +47,7 @@ export const APP_DATA = {
47
47
  sheet: 'sheet',
48
48
  caption: 'caption',
49
49
  loadingEffects: 'loadingEffects',
50
+ noiseCancellation: 'noiseCancellation',
50
51
  };
51
52
 
52
53
  export const UI_SETTINGS = {
@@ -17,7 +17,7 @@ import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPrefere
17
17
  // @ts-ignore
18
18
  import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
19
19
  // @ts-ignore
20
- import { useSetAppDataByKey } from './useUISettings';
20
+ import { useSetAppDataByKey, useSetNoiseCancellationEnabled } from './useUISettings';
21
21
  import {
22
22
  APP_DATA,
23
23
  CHAT_SELECTOR,
@@ -68,6 +68,7 @@ const initialAppData = {
68
68
  },
69
69
  // by default on because of on demand now, for beam disabled
70
70
  [APP_DATA.caption]: false,
71
+ [APP_DATA.noiseCancellation]: false,
71
72
  };
72
73
 
73
74
  export const AppData = React.memo(() => {
@@ -78,6 +79,13 @@ export const AppData = React.memo(() => {
78
79
  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
79
80
  const { isLocalVideoEnabled } = useAVToggle();
80
81
  const sidepaneOpenedRef = useRef(false);
82
+ const [, setNoiseCancellationEnabled] = useSetNoiseCancellationEnabled();
83
+
84
+ useEffect(() => {
85
+ if (elements?.noise_cancellation?.enabled_by_default) {
86
+ setNoiseCancellationEnabled(true);
87
+ }
88
+ }, [elements?.noise_cancellation?.enabled_by_default, setNoiseCancellationEnabled]);
81
89
 
82
90
  const defaultMediaURL = useMemo(() => {
83
91
  const media = elements?.virtual_background?.background_media || [];
@@ -201,3 +201,13 @@ export const usePollViewState = () => {
201
201
  view: pollState?.view,
202
202
  };
203
203
  };
204
+
205
+ export const useIsNoiseCancellationEnabled = () => {
206
+ const IsNoiseCancellationEnabled = useHMSStore(selectAppDataByPath(APP_DATA.noiseCancellation));
207
+ return IsNoiseCancellationEnabled;
208
+ };
209
+
210
+ export const useSetNoiseCancellationEnabled = () => {
211
+ const [isNoiseCancellationEnabled, setNoiseCancellationEnabled] = useSetAppDataByKey(APP_DATA.noiseCancellation);
212
+ return [isNoiseCancellationEnabled, setNoiseCancellationEnabled];
213
+ };
@@ -37,6 +37,8 @@ import { Text } from '../../Text';
37
37
  import { Tooltip } from '../../Tooltip';
38
38
  import IconButton from '../IconButton';
39
39
  import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
40
+ // @ts-ignore: No implicit Any
41
+ import { useIsNoiseCancellationEnabled, useSetNoiseCancellationEnabled } from './AppData/useUISettings';
40
42
  import { useAudioOutputTest } from './hooks/useAudioOutputTest';
41
43
  import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
42
44
 
@@ -97,8 +99,8 @@ const OptionLabel = ({ children, icon }: { children: React.ReactNode; icon: Reac
97
99
  const plugin = new HMSKrispPlugin();
98
100
  const NoiseCancellation = () => {
99
101
  const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID);
102
+ const [enabled, setEnabled] = useSetNoiseCancellationEnabled();
100
103
  const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
101
- const [active, setActive] = useState(isPluginAdded);
102
104
  const [inProgress, setInProgress] = useState(false);
103
105
  const actions = useHMSActions();
104
106
  const room = useHMSStore(selectRoom);
@@ -106,15 +108,15 @@ const NoiseCancellation = () => {
106
108
  useEffect(() => {
107
109
  (async () => {
108
110
  setInProgress(true);
109
- if (active && !isPluginAdded) {
111
+ if (enabled && !isPluginAdded) {
110
112
  await actions.addPluginToAudioTrack(plugin);
111
113
  }
112
- if (!active && isPluginAdded) {
114
+ if (!enabled && isPluginAdded) {
113
115
  await actions.removePluginFromAudioTrack(plugin);
114
116
  }
115
117
  setInProgress(false);
116
118
  })();
117
- }, [actions, active, isPluginAdded]);
119
+ }, [actions, enabled, isPluginAdded]);
118
120
 
119
121
  if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
120
122
  return null;
@@ -132,7 +134,7 @@ const NoiseCancellation = () => {
132
134
  }}
133
135
  onClick={e => {
134
136
  e.preventDefault();
135
- setActive(value => !value);
137
+ setEnabled(!enabled);
136
138
  }}
137
139
  >
138
140
  <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
@@ -141,11 +143,11 @@ const NoiseCancellation = () => {
141
143
  </Text>
142
144
  <Switch
143
145
  id="noise_cancellation"
144
- checked={active}
146
+ checked={enabled && isPluginAdded}
145
147
  disabled={inProgress}
146
148
  onClick={e => e.stopPropagation()}
147
149
  onCheckedChange={value => {
148
- setActive(value);
150
+ setEnabled(value);
149
151
  }}
150
152
  />
151
153
  </Dropdown.Item>
@@ -216,11 +218,28 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
216
218
  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype && Number(audioOutput?.length) > 0;
217
219
  const { screenType } = useRoomLayoutConferencingScreen();
218
220
  const [showSettings, setShowSettings] = useState(false);
221
+ const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
222
+ const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
223
+
224
+ useEffect(() => {
225
+ (async () => {
226
+ if (isNoiseCancellationEnabled && !isPluginAdded) {
227
+ await actions.addPluginToAudioTrack(plugin);
228
+ }
229
+ if (isNoiseCancellationEnabled && isPluginAdded) {
230
+ ToastManager.addToast({
231
+ title: `Noise Reduction Enabled`,
232
+ variant: 'standard',
233
+ duration: 2000,
234
+ icon: <AudioLevelIcon />,
235
+ });
236
+ }
237
+ })();
238
+ }, [actions, isNoiseCancellationEnabled, isPluginAdded]);
219
239
 
220
240
  if (!toggleAudio && !toggleVideo) {
221
241
  return null;
222
242
  }
223
-
224
243
  return (
225
244
  <Fragment>
226
245
  {toggleAudio ? (
@@ -93,6 +93,7 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
93
93
  await actions.stopTranscription({
94
94
  mode: HMSTranscriptionMode.CAPTION,
95
95
  });
96
+ setIsCaptionEnabled(false);
96
97
  const id = ToastManager.replaceToast(toastId, {
97
98
  title: `Disabling Closed Caption for everyone.`,
98
99
  variant: 'standard',
@@ -120,6 +121,8 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
120
121
  icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
121
122
  });
122
123
  setToastId(id);
124
+ } finally {
125
+ setIsCaptionEnabled(true);
123
126
  }
124
127
  onExit();
125
128
  }}
@@ -43,18 +43,19 @@ export const ContentHeader = ({ onBack, onClose, title = '', content }) => {
43
43
  css={{ w: '100%', py: '$8', px: '$10', cursor: 'pointer', borderBottom: '1px solid $border_bright', mb: '$8' }}
44
44
  >
45
45
  {onBack ? (
46
- <Text
46
+ <Flex
47
+ align="center"
47
48
  css={{
48
- alignSelf: 'center',
49
49
  mr: '$8',
50
+ color: '$on_surface_high',
50
51
  }}
51
52
  onClick={onBack}
52
53
  data-testid="go_back"
53
54
  >
54
55
  <ChevronLeftIcon />
55
- </Text>
56
+ </Flex>
56
57
  ) : null}
57
- <Box css={{ flex: '1 1 0' }}>
58
+ <Box css={{ flex: '1 1 0', display: 'flex', alignItems: 'center' }}>
58
59
  {title ? (
59
60
  <Text
60
61
  variant="tiny"
@@ -1,4 +1,5 @@
1
- import React, { Suspense, useEffect } from 'react';
1
+ import React, { Suspense, useEffect, useState } from 'react';
2
+ import { ControlPosition } from 'react-draggable';
2
3
  import {
3
4
  ConferencingScreen,
4
5
  DefaultConferencingScreen_Elements,
@@ -25,11 +26,7 @@ import SidePane from './SidePane';
25
26
  import { WaitingView } from './WaitingView';
26
27
  import { CaptionsViewer } from '../plugins/CaptionsViewer';
27
28
  // @ts-ignore: No implicit Any
28
- import {
29
- usePDFConfig,
30
- useUrlToEmbed,
31
- // @ts-ignore: No implicit Any
32
- } from '../components/AppData/useUISettings';
29
+ import { usePDFConfig, useUrlToEmbed } from '../components/AppData/useUISettings';
33
30
  import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
34
31
  import { useLandscapeHLSStream, useMobileHLSStream, useWaitingRoomInfo } from '../common/hooks';
35
32
  import { SESSION_STORE_KEY } from '../common/constants';
@@ -54,6 +51,7 @@ export const VideoStreamingSection = ({
54
51
  const pdfAnnotatorActive = usePDFConfig();
55
52
  const isMobileHLSStream = useMobileHLSStream();
56
53
  const isLandscapeHLSStream = useLandscapeHLSStream();
54
+ const [captionPosition, setCaptionPosition] = useState<ControlPosition>({ x: -200, y: 0 });
57
55
  useCloseScreenshareWhiteboard();
58
56
 
59
57
  const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
@@ -140,7 +138,7 @@ export const VideoStreamingSection = ({
140
138
  // @ts-ignore
141
139
  return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
142
140
  })}
143
- <CaptionsViewer />
141
+ <CaptionsViewer setDefaultPosition={setCaptionPosition} defaultPosition={captionPosition} />
144
142
  <Box
145
143
  css={{
146
144
  flex: match({ isLandscapeHLSStream, isMobileHLSStream })