[Release-blocker] composite audio context updates (#4539)

* move audio context to react context to minimize hook usage

* fix build

* Change files

* Fix test

change-beta/@azure-communication-react-fda0563f-1d07-44a9-b28f-c1e635e0b286.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Calling Sounds",
+  "comment": "Move internal CallComposite AudioContext to a react context to avoid over creation of audio contexts",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-fda0563f-1d07-44a9-b28f-c1e635e0b286.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Calling Sounds",
+  "comment": "Move internal CallComposite AudioContext to a react context to avoid over creation of audio contexts",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

common/config/jest/jestSetup.js

@@ -10,6 +10,8 @@ console.error = (...args) => {
 console.warning = (...args) => {
   throw args;
 };
-
+window.AudioContext = jest.fn().mockImplementation(() => {
+  return {};
+});
 // Add `ResizeObserver` to globals. Without this GridLayout jest tests fail with "ReferenceError: ResizeObserver is not defined"
 global.ResizeObserver = require('resize-observer-polyfill');

packages/react-components/src/components/Dialpad/Dialpad.test.tsx

@@ -14,10 +14,6 @@ const onSendDtmfTone = (dtmfTone: DtmfTone): Promise<void> => {
   return Promise.resolve();
 };
 
-window.AudioContext = jest.fn().mockImplementation(() => {
-  return {};
-});
-
 describe('Dialpad tests', () => {
   beforeAll(() => {
     registerIcons({

packages/react-composites/src/composites/CallComposite/CallComposite.test.tsx

@@ -7,10 +7,6 @@ import { _MockCallAdapter } from './MockCallAdapter';
 import { CallComposite } from './CallComposite';
 import { render } from '@testing-library/react';
 
-window.AudioContext = jest.fn().mockImplementation(() => {
-  return {};
-});
-
 describe('CallComposite device permission test for different roles', () => {
   let audioDevicePermissionRequests = 0;
   let videoDevicePermissionRequests = 0;

packages/react-composites/src/composites/CallComposite/CallComposite.tsx

@@ -61,6 +61,7 @@ import { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilit
 import { useEndedCallConsoleErrors } from './utils/useConsoleErrors';
 /* @conditional-compile-remove(end-of-call-survey) */
 import { SurveyPage } from './pages/SurveyPage';
+import { useAudio } from '../common/AudioProvider';
 
 /**
  * Props for {@link CallComposite}.
@@ -411,7 +412,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
     };
   }, [adapter]);
 
-  const compositeAudioContext = useRef<AudioContext>(new AudioContext());
+  const compositeAudioContext = useAudio();
 
   const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);
 
@@ -593,7 +594,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
           pinnedParticipants={pinnedParticipants}
           setPinnedParticipants={setPinnedParticipants}
-          compositeAudioContext={compositeAudioContext.current}
+          compositeAudioContext={compositeAudioContext}
         />
       );
       break;

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.test.tsx

@@ -10,10 +10,6 @@ import { CallWithChatComposite } from './CallWithChatComposite';
 import { CallWithChatAdapterState } from './state/CallWithChatAdapterState';
 import { registerIcons } from '@fluentui/react';
 
-window.AudioContext = jest.fn().mockImplementation(() => {
-  return {};
-});
-
 function createMockCallWithChatAdapter(): CallWithChatAdapter {
   const callWithChatAdapter = {} as CallWithChatAdapter;
   callWithChatAdapter.onStateChange = jest.fn();

packages/react-composites/src/composites/common/AudioProvider.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useContext, createContext } from 'react';
+
+/**
+ * @private
+ */
+export interface ACSAudioProviderProps {
+  audioContext: AudioContext;
+  children: JSX.Element;
+}
+
+/**
+ *
+ * @param props
+ * @returns
+ */
+export const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {
+  const { audioContext, children } = props;
+  const alreadyWrapped = useAudio();
+  if (alreadyWrapped) {
+    return <>{children}</>;
+  }
+  return <ACSAudioContext.Provider value={audioContext}>{props.children}</ACSAudioContext.Provider>;
+};
+
+/**
+ * @private
+ */
+const ACSAudioContext = createContext<AudioContext>(new AudioContext());
+
+/**
+ * @private
+ */
+export const useAudio = (): AudioContext => useContext(ACSAudioContext);

packages/react-composites/src/composites/common/BaseComposite.tsx

@@ -18,6 +18,7 @@ import { AvatarPersonaDataCallback } from './AvatarPersona';
 import { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';
 import { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';
 import { useId } from '@fluentui/react-hooks';
+import { ACSAudioProvider } from './AudioProvider';
 /**
  * Properties common to all composites exported from this library.
  *
@@ -106,13 +107,19 @@ export const BaseProvider = (
    */
   registerIcons({ icons: { ...iconsToRegister, ...props.icons } });
 
+  /**
+   * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.
+   */
+  const compositeAudioContext = new AudioContext();
   // we use Customizer to override default LayerHost injected to <body />
   // which stop polluting global dom tree and increase compatibility with react-full-screen
   const CompositeElement = (
     <FluentThemeProvider fluentTheme={fluentTheme} rtl={rtl}>
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
       <Customizer scopedSettings={{ Layer: { hostId: globalLayerHostId } }}>
-        <WithBackgroundColor>{props.children}</WithBackgroundColor>
+        <ACSAudioProvider audioContext={compositeAudioContext}>
+          <WithBackgroundColor>{props.children}</WithBackgroundColor>
+        </ACSAudioProvider>
       </Customizer>
       <LayerHost id={globalLayerHostId} className={mergeStyles(globalLayerHostStyle)} />
     </FluentThemeProvider>