@azure/communication-react 1.29.0-alpha-202506140018 → 1.29.0-alpha-202506190019

package/dist/dist-esm/calling-stateful-client/src/TeamsCallDeclarative.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamsCallDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/TeamsCallDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAe1D,MAAM,cAAe,SAAQ,eAAe;IACnC,GAAG,CAA4B,MAAiB,EAAE,IAAO;QAC9D,QAAQ,IAAI,EAAE,CAAC;YACb,8DAA8D;YAC9D,KAAK,gBAAgB,CAAC,CAAC,CAAC;gBACtB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,yBAAyB,CAAC,UACjD,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBAC9C,CAAC;iBAAA,EAAE,0BAA0B,CAAC,CAAC;YACjC,CAAC;YACD;gBACE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAW,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAW,CAAC,CAAC;IACxC,CAAC;CACF;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAe,EAAE,OAAoB,EAAwB,EAAE;IAClG,MAAM,SAAS,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,WAAW,EAAE,CAAC;IACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE;QACzC,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,WAAW,EAAE;KACrC,CAAC,CAAC;IAEH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS,CAAyB,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ProxyCallCommon } from './CallDeclarativeCommon';\nimport { CallContext } from './CallContext';\nimport { TeamsCall } from './BetaToStableTypes';\n\n/**\n *\n * @public\n */\nexport type DeclarativeTeamsCall = TeamsCall & {\n  /**\n   * Stop any declarative specific subscriptions and remove declarative subscribers.\n   */\n  unsubscribe(): void;\n};\n\nclass ProxyTeamsCall extends ProxyCallCommon implements ProxyHandler<TeamsCall> {\n  public get<P extends keyof TeamsCall>(target: TeamsCall, prop: P): any {\n    switch (prop) {\n      /* @conditional-compile-remove(teams-identity-support-beta) */\n      case 'addParticipant': {\n        return this.getContext().withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsCall['addParticipant']>\n        ) {\n          return await target.addParticipant(...args);\n        }, 'TeamsCall.addParticipant');\n      }\n      default:\n        return super.get(target, prop as any);\n    }\n    return super.get(target, prop as any);\n  }\n}\n\n/**\n * Creates a declarative Call by proxying Call with ProxyCall.\n * This should only be used with CallAgentDeclarative as CallAgentDeclarative will add that\n * call to the context properly (need to have the Call in context to update it - CallAgentDeclarative will add Call to\n * context)\n *\n * @param call - TeamsCall from SDK\n * @param context - CallContext from StatefulCallClient\n */\nexport const teamsCallDeclaratify = (call: TeamsCall, context: CallContext): DeclarativeTeamsCall => {\n  const proxyCall = new ProxyTeamsCall(context);\n  proxyCall.unsubscribe();\n  Object.defineProperty(call, 'unsubscribe', {\n    configurable: false,\n    value: () => proxyCall.unsubscribe()\n  });\n\n  return new Proxy(call, proxyCall) as DeclarativeTeamsCall;\n};\n"]}
+{"version":3,"file":"TeamsCallDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/TeamsCallDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAe1D,MAAM,cAAe,SAAQ,eAAe;IAC1C,8DAA8D;IACvD,GAAG,CAA4B,MAAiB,EAAE,IAAO;QAC9D,QAAQ,IAAI,EAAE,CAAC;YACb,8DAA8D;YAC9D,KAAK,gBAAgB,CAAC,CAAC,CAAC;gBACtB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,yBAAyB,CAAC,UACjD,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBAC9C,CAAC;iBAAA,EAAE,0BAA0B,CAAC,CAAC;YACjC,CAAC;YACD;gBACE,8DAA8D;gBAC9D,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAW,CAAC,CAAC;QAC1C,CAAC;QACD,8DAA8D;QAC9D,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAW,CAAC,CAAC;IACxC,CAAC;CACF;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAe,EAAE,OAAoB,EAAwB,EAAE;IAClG,MAAM,SAAS,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,WAAW,EAAE,CAAC;IACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE;QACzC,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,WAAW,EAAE;KACrC,CAAC,CAAC;IAEH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS,CAAyB,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ProxyCallCommon } from './CallDeclarativeCommon';\nimport { CallContext } from './CallContext';\nimport { TeamsCall } from './BetaToStableTypes';\n\n/**\n *\n * @public\n */\nexport type DeclarativeTeamsCall = TeamsCall & {\n  /**\n   * Stop any declarative specific subscriptions and remove declarative subscribers.\n   */\n  unsubscribe(): void;\n};\n\nclass ProxyTeamsCall extends ProxyCallCommon implements ProxyHandler<TeamsCall> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public get<P extends keyof TeamsCall>(target: TeamsCall, prop: P): any {\n    switch (prop) {\n      /* @conditional-compile-remove(teams-identity-support-beta) */\n      case 'addParticipant': {\n        return this.getContext().withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsCall['addParticipant']>\n        ) {\n          return await target.addParticipant(...args);\n        }, 'TeamsCall.addParticipant');\n      }\n      default:\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return super.get(target, prop as any);\n    }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    return super.get(target, prop as any);\n  }\n}\n\n/**\n * Creates a declarative Call by proxying Call with ProxyCall.\n * This should only be used with CallAgentDeclarative as CallAgentDeclarative will add that\n * call to the context properly (need to have the Call in context to update it - CallAgentDeclarative will add Call to\n * context)\n *\n * @param call - TeamsCall from SDK\n * @param context - CallContext from StatefulCallClient\n */\nexport const teamsCallDeclaratify = (call: TeamsCall, context: CallContext): DeclarativeTeamsCall => {\n  const proxyCall = new ProxyTeamsCall(context);\n  proxyCall.unsubscribe();\n  Object.defineProperty(call, 'unsubscribe', {\n    configurable: false,\n    value: () => proxyCall.unsubscribe()\n  });\n\n  return new Proxy(call, proxyCall) as DeclarativeTeamsCall;\n};\n"]}

package/dist/dist-esm/calling-stateful-client/src/TeamsIncomingCallDeclarative.js

@@ -16,6 +16,7 @@ export class ProxyTeamsIncomingCall {
     constructor(context) {
         this._context = context;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get(target, prop) {
         switch (prop) {
             case 'accept': {

package/dist/dist-esm/calling-stateful-client/src/TeamsIncomingCallDeclarative.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamsIncomingCallDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/TeamsIncomingCallDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,OAAoB;QAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAEM,GAAG,CAAoC,MAAyB,EAAE,IAAO;QAC9E,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,UAC7C,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;oBACtC,CAAC;iBAAA,EAAE,qBAAqB,CAAC,CAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,UAC7C,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;oBACtC,CAAC;iBAAA,EAAE,qBAAqB,CAAC,CAAC;YAC5B,CAAC;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;CACF;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,YAA+B,EAC/B,OAAoB,EACD,EAAE;IACrB,MAAM,iBAAiB,GAAG,IAAI,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAC9D,OAAO,IAAI,KAAK,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;AACpD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { TeamsIncomingCall } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyTeamsIncomingCall implements ProxyHandler<TeamsIncomingCall> {\n  private _context: CallContext;\n\n  constructor(context: CallContext) {\n    this._context = context;\n  }\n\n  public get<P extends keyof TeamsIncomingCall>(target: TeamsIncomingCall, prop: P): any {\n    switch (prop) {\n      case 'accept': {\n        return this._context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsIncomingCall['accept']>\n        ) {\n          return await target.accept(...args);\n        }, 'IncomingCall.accept');\n      }\n      case 'reject': {\n        return this._context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsIncomingCall['reject']>\n        ) {\n          return await target.reject(...args);\n        }, 'IncomingCall.reject');\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative TeamsIncomingCall by proxying TeamsIncomingCall using ProxyIncomingCall.\n * @param incomingCall - TeamsIncomingCall from SDK\n * @returns proxied TeamsIncomingCall\n */\nexport const teamsIncomingCallDeclaratify = (\n  incomingCall: TeamsIncomingCall,\n  context: CallContext\n): TeamsIncomingCall => {\n  const proxyIncomingCall = new ProxyTeamsIncomingCall(context);\n  return new Proxy(incomingCall, proxyIncomingCall);\n};\n"]}
+{"version":3,"file":"TeamsIncomingCallDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/TeamsIncomingCallDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,OAAoB;QAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAED,8DAA8D;IACvD,GAAG,CAAoC,MAAyB,EAAE,IAAO;QAC9E,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,UAC7C,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;oBACtC,CAAC;iBAAA,EAAE,qBAAqB,CAAC,CAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,OAAO,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC,UAC7C,GAAG,IAA6C;;wBAEhD,OAAO,MAAM,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;oBACtC,CAAC;iBAAA,EAAE,qBAAqB,CAAC,CAAC;YAC5B,CAAC;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;CACF;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,YAA+B,EAC/B,OAAoB,EACD,EAAE;IACrB,MAAM,iBAAiB,GAAG,IAAI,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAC9D,OAAO,IAAI,KAAK,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;AACpD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { TeamsIncomingCall } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyTeamsIncomingCall implements ProxyHandler<TeamsIncomingCall> {\n  private _context: CallContext;\n\n  constructor(context: CallContext) {\n    this._context = context;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public get<P extends keyof TeamsIncomingCall>(target: TeamsIncomingCall, prop: P): any {\n    switch (prop) {\n      case 'accept': {\n        return this._context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsIncomingCall['accept']>\n        ) {\n          return await target.accept(...args);\n        }, 'IncomingCall.accept');\n      }\n      case 'reject': {\n        return this._context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<TeamsIncomingCall['reject']>\n        ) {\n          return await target.reject(...args);\n        }, 'IncomingCall.reject');\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative TeamsIncomingCall by proxying TeamsIncomingCall using ProxyIncomingCall.\n * @param incomingCall - TeamsIncomingCall from SDK\n * @returns proxied TeamsIncomingCall\n */\nexport const teamsIncomingCallDeclaratify = (\n  incomingCall: TeamsIncomingCall,\n  context: CallContext\n): TeamsIncomingCall => {\n  const proxyIncomingCall = new ProxyTeamsIncomingCall(context);\n  return new Proxy(incomingCall, proxyIncomingCall);\n};\n"]}

package/dist/dist-esm/calling-stateful-client/src/VideoStreamRendererViewDeclarative.js

@@ -19,6 +19,7 @@ export class ProxyVideoStreamRendererView {
         this._participantId = participantId;
         this._streamId = _streamId;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {

package/dist/dist-esm/calling-stateful-client/src/VideoStreamRendererViewDeclarative.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoStreamRendererViewDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/VideoStreamRendererViewDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAMvC,YAAY,OAAoB,EAAE,MAAc,EAAE,aAAqB,EAAE,SAAiB;QACxF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAEM,GAAG,CAA0C,MAA+B,EAAE,IAAO;QAC1F,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,mBAAmB,CAAC,CAAC,CAAC;gBACzB,OAAO,CAAO,GAAG,IAA8D,EAAE,EAAE;oBACjF,MAAM,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxC,IAAI,CAAC,QAAQ,CAAC,mCAAmC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChH,CAAC,CAAA,CAAC;YACJ,CAAC;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,IAA6B,EAC7B,OAAoB,EACpB,MAAc,EACd,aAAqB,EACrB,QAAgB,EACS,EAAE;IAC3B,MAAM,4BAA4B,GAAG,IAAI,4BAA4B,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;IAChH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,4BAA4B,CAA4B,CAAC;AAClF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoStreamRendererView } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyVideoStreamRendererView implements ProxyHandler<VideoStreamRendererView> {\n  private _context: CallContext;\n  private _callId: string;\n  private _participantId: string;\n  private _streamId: number;\n\n  constructor(context: CallContext, callId: string, participantId: string, _streamId: number) {\n    this._context = context;\n    this._callId = callId;\n    this._participantId = participantId;\n    this._streamId = _streamId;\n  }\n\n  public get<P extends keyof VideoStreamRendererView>(target: VideoStreamRendererView, prop: P): any {\n    switch (prop) {\n      case 'updateScalingMode': {\n        return async (...args: Parameters<VideoStreamRendererView['updateScalingMode']>) => {\n          await target.updateScalingMode(...args);\n          this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);\n        };\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative VideoStreamRendererView that is backed by a VideoStreamRendererView from the SDK.\n * Calling methods on this declarative object triggers state updates in the stateful client.\n */\nexport const videoStreamRendererViewDeclaratify = (\n  view: VideoStreamRendererView,\n  context: CallContext,\n  callId: string,\n  participantId: string,\n  streamId: number\n): VideoStreamRendererView => {\n  const proxyVideoStreamRendererView = new ProxyVideoStreamRendererView(context, callId, participantId, streamId);\n  return new Proxy(view, proxyVideoStreamRendererView) as VideoStreamRendererView;\n};\n"]}
+{"version":3,"file":"VideoStreamRendererViewDeclarative.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/VideoStreamRendererViewDeclarative.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAKlC;;GAEG;AACH,MAAM,OAAO,4BAA4B;IAMvC,YAAY,OAAoB,EAAE,MAAc,EAAE,aAAqB,EAAE,SAAiB;QACxF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,8DAA8D;IACvD,GAAG,CAA0C,MAA+B,EAAE,IAAO;QAC1F,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,mBAAmB,CAAC,CAAC,CAAC;gBACzB,OAAO,CAAO,GAAG,IAA8D,EAAE,EAAE;oBACjF,MAAM,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxC,IAAI,CAAC,QAAQ,CAAC,mCAAmC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChH,CAAC,CAAA,CAAC;YACJ,CAAC;YACD;gBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,IAA6B,EAC7B,OAAoB,EACpB,MAAc,EACd,aAAqB,EACrB,QAAgB,EACS,EAAE;IAC3B,MAAM,4BAA4B,GAAG,IAAI,4BAA4B,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;IAChH,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,4BAA4B,CAA4B,CAAC;AAClF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoStreamRendererView } from '@azure/communication-calling';\nimport { CallContext } from './CallContext';\n\n/**\n * @private\n */\nexport class ProxyVideoStreamRendererView implements ProxyHandler<VideoStreamRendererView> {\n  private _context: CallContext;\n  private _callId: string;\n  private _participantId: string;\n  private _streamId: number;\n\n  constructor(context: CallContext, callId: string, participantId: string, _streamId: number) {\n    this._context = context;\n    this._callId = callId;\n    this._participantId = participantId;\n    this._streamId = _streamId;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public get<P extends keyof VideoStreamRendererView>(target: VideoStreamRendererView, prop: P): any {\n    switch (prop) {\n      case 'updateScalingMode': {\n        return async (...args: Parameters<VideoStreamRendererView['updateScalingMode']>) => {\n          await target.updateScalingMode(...args);\n          this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);\n        };\n      }\n      default:\n        return Reflect.get(target, prop);\n    }\n  }\n}\n\n/**\n * Creates a declarative VideoStreamRendererView that is backed by a VideoStreamRendererView from the SDK.\n * Calling methods on this declarative object triggers state updates in the stateful client.\n */\nexport const videoStreamRendererViewDeclaratify = (\n  view: VideoStreamRendererView,\n  context: CallContext,\n  callId: string,\n  participantId: string,\n  streamId: number\n): VideoStreamRendererView => {\n  const proxyVideoStreamRendererView = new ProxyVideoStreamRendererView(context, callId, participantId, streamId);\n  return new Proxy(view, proxyVideoStreamRendererView) as VideoStreamRendererView;\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsAndRTTAnnouncer.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { CaptionsInformation, RealTimeTextInformation } from './CaptionsBanner';
+/** @internal */
+export type _CaptionsAndRTTAnnouncerProps = {
+    /**
+     * Array of captions to be displayed
+     */
+    captions: CaptionsInformation[];
+    /**
+     * Array of finalized and partial real time text messages
+     */
+    realTimeTexts?: {
+        completedMessages?: RealTimeTextInformation[];
+        currentInProgress?: RealTimeTextInformation[];
+        myInProgress?: RealTimeTextInformation;
+    };
+    /**
+     * Title for the real time text messages
+     */
+    realTimeTextTitle: string;
+    /**
+     * Title for the captions
+     */
+    captionsTitle: string;
+};
+/** @internal */
+export declare const _CaptionsAndRTTAnnouncer: (props: _CaptionsAndRTTAnnouncerProps) => JSX.Element;
+//# sourceMappingURL=CaptionsAndRTTAnnouncer.d.ts.map

package/dist/dist-esm/react-components/src/components/CaptionsAndRTTAnnouncer.js

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useEffect, useState } from 'react';
+import { hiddenAnnouncementClassName } from './styles/Captions.style';
+/** @internal */
+export const _CaptionsAndRTTAnnouncer = (props) => {
+    const { captions, realTimeTexts, realTimeTextTitle, captionsTitle } = props;
+    const [announcedRTT, setAnnouncedRTT] = useState([]);
+    const [announcedCaption, setAnnouncedCaption] = useState([]);
+    const [captionAnnouncementText, setCaptionAnnouncementText] = useState([]);
+    const [rttAnnouncementText, setRTTAnnouncementText] = useState([]);
+    useEffect(() => {
+        if (realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) {
+            //filter out the messages that have already been announced
+            const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter((message) => !announcedRTT.includes(message.id));
+            if (rTTMessagesToAnnounce.length > 0) {
+                setRTTAnnouncementText(rTTMessagesToAnnounce);
+                setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
+            }
+        }
+        if (captions.length > 0) {
+            // filter out the captions that have already been announced
+            const captionsToAnnounce = captions.filter((caption) => !announcedCaption.includes(caption.id) && caption.isFinalized);
+            if (captionsToAnnounce.length > 0) {
+                setCaptionAnnouncementText(captionsToAnnounce);
+                setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
+            }
+        }
+    }, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages, announcedRTT, announcedCaption]);
+    return (React.createElement(React.Fragment, null, (rttAnnouncementText.length > 0 || (captionAnnouncementText === null || captionAnnouncementText === void 0 ? void 0 : captionAnnouncementText.length) > 0) && (React.createElement("div", { "aria-live": "assertive", role: "alert", "aria-atomic": "true", className: hiddenAnnouncementClassName },
+        React.createElement("span", null, rttAnnouncementText.map((text) => (React.createElement("span", null,
+            realTimeTextTitle,
+            " ",
+            text.displayName,
+            ": ",
+            text.message)))),
+        React.createElement("span", null, captionAnnouncementText.map((text) => (React.createElement("span", null,
+            captionsTitle,
+            " ",
+            text.displayName,
+            ": ",
+            text.captionText))))))));
+};
+//# sourceMappingURL=CaptionsAndRTTAnnouncer.js.map

package/dist/dist-esm/react-components/src/components/CaptionsAndRTTAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsAndRTTAnnouncer.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsAndRTTAnnouncer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useEffect, useState } from 'react';\nimport { hiddenAnnouncementClassName } from './styles/Captions.style';\nimport { CaptionsInformation, RealTimeTextInformation } from './CaptionsBanner';\n\n/** @internal */\nexport type _CaptionsAndRTTAnnouncerProps = {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Title for the real time text messages\n   */\n  realTimeTextTitle: string;\n  /**\n   * Title for the captions\n   */\n  captionsTitle: string;\n};\n\n/** @internal */\nexport const _CaptionsAndRTTAnnouncer = (props: _CaptionsAndRTTAnnouncerProps): JSX.Element => {\n  const { captions, realTimeTexts, realTimeTextTitle, captionsTitle } = props;\n  const [announcedRTT, setAnnouncedRTT] = useState<number[]>([]);\n  const [announcedCaption, setAnnouncedCaption] = useState<string[]>([]);\n  const [captionAnnouncementText, setCaptionAnnouncementText] = useState<CaptionsInformation[]>([]);\n  const [rttAnnouncementText, setRTTAnnouncementText] = useState<RealTimeTextInformation[]>([]);\n\n  useEffect(() => {\n    if (realTimeTexts?.completedMessages) {\n      //filter out the messages that have already been announced\n      const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter(\n        (message) => !announcedRTT.includes(message.id)\n      );\n      if (rTTMessagesToAnnounce.length > 0) {\n        setRTTAnnouncementText(rTTMessagesToAnnounce);\n        setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);\n      }\n    }\n    if (captions.length > 0) {\n      // filter out the captions that have already been announced\n      const captionsToAnnounce = captions.filter(\n        (caption) => !announcedCaption.includes(caption.id) && caption.isFinalized\n      );\n      if (captionsToAnnounce.length > 0) {\n        setCaptionAnnouncementText(captionsToAnnounce);\n        setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);\n      }\n    }\n  }, [captions, realTimeTexts?.completedMessages, announcedRTT, announcedCaption]);\n  return (\n    <>\n      {(rttAnnouncementText.length > 0 || captionAnnouncementText?.length > 0) && (\n        <div aria-live=\"assertive\" role=\"alert\" aria-atomic=\"true\" className={hiddenAnnouncementClassName}>\n          <span>\n            {rttAnnouncementText.map((text) => (\n              <span>\n                {realTimeTextTitle} {text.displayName}: {text.message}\n              </span>\n            ))}\n          </span>\n          <span>\n            {captionAnnouncementText.map((text) => (\n              <span>\n                {captionsTitle} {text.displayName}: {text.captionText}\n              </span>\n            ))}\n          </span>\n        </div>\n      )}\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js

@@ -5,7 +5,7 @@ import { TextField } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useMemo } from 'react';
 import { _Caption } from './Caption';
-import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, hiddenAnnouncementClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
+import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
 import { rttDisclosureBannerClassName } from './styles/Captions.style';
 import { useLocale } from '../localization';
 import { RealTimeText } from './RealTimeText';
@@ -14,13 +14,14 @@ import { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTex
 import { expandIconClassName, bannerTitleContainerClassName, realTimeTextInputBoxStyles } from './styles/Captions.style';
 import { titleClassName } from './styles/CaptionsSettingsModal.styles';
 import { Text, IconButton } from '@fluentui/react';
+import { _CaptionsAndRTTAnnouncer } from './CaptionsAndRTTAnnouncer';
 const SCROLL_OFFSET_ALLOWANCE = 20;
 /**
  * @public
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 export const CaptionsBanner = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { captions, realTimeTexts, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, formFactor = 'default', captionsOptions, isRealTimeTextOn, onSendRealTimeText, latestLocalRealTimeText } = props;
     const localeStrings = useLocale().strings.captionsBanner;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -28,10 +29,6 @@ export const CaptionsBanner = (props) => {
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const theme = useTheme();
     const [expandBannerHeight, setExpandBannerHeight] = useState(false);
-    const [announcedRTT, setAnnouncedRTT] = useState([]);
-    const [announcedCaption, setAnnouncedCaption] = useState([]);
-    const [captionAnnouncementText, setCaptionAnnouncementText] = useState([]);
-    const [rttAnnouncementText, setRTTAnnouncementText] = useState([]);
     const getTitle = () => {
         var _a, _b, _c;
         if (isCaptionsOn && isRealTimeTextOn) {
@@ -88,24 +85,6 @@ export const CaptionsBanner = (props) => {
             setTextFieldValue('');
         }
     }, [latestLocalRealTimeText]);
-    useEffect(() => {
-        if (realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) {
-            //filter out the messages that have already been announced
-            const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter((message) => !announcedRTT.includes(message.id));
-            if (rTTMessagesToAnnounce.length > 0) {
-                setRTTAnnouncementText(rTTMessagesToAnnounce);
-                setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
-            }
-        }
-        if (captions.length > 0) {
-            // filter out the captions that have already been announced
-            const captionsToAnnounce = captions.filter((caption) => !announcedCaption.includes(caption.id) && caption.isFinalized);
-            if (captionsToAnnounce.length > 0) {
-                setCaptionAnnouncementText(captionsToAnnounce);
-                setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
-            }
-        }
-    }, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages, announcedRTT, announcedCaption]);
     const handleKeyDown = (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
@@ -133,19 +112,7 @@ export const CaptionsBanner = (props) => {
         })));
     };
     return (React.createElement(React.Fragment, null, (startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
-        (rttAnnouncementText.length > 0 || (captionAnnouncementText === null || captionAnnouncementText === void 0 ? void 0 : captionAnnouncementText.length) > 0) && (React.createElement("div", { "aria-live": "assertive", role: "alert", "aria-atomic": "true", className: hiddenAnnouncementClassName },
-            React.createElement("span", null, rttAnnouncementText.map((text) => (React.createElement("span", null,
-                strings.realTimeTextBannerTitle,
-                " ",
-                text.displayName,
-                ": ",
-                text.message)))),
-            React.createElement("span", null, captionAnnouncementText.map((text) => (React.createElement("span", null,
-                strings.captionsOnlyContainerTitle,
-                " ",
-                text.displayName,
-                ": ",
-                text.captionText)))))),
+        React.createElement(_CaptionsAndRTTAnnouncer, { captions: captions, realTimeTexts: realTimeTexts, realTimeTextTitle: (_d = strings.realTimeTextBannerTitle) !== null && _d !== void 0 ? _d : '', captionsTitle: (_e = strings.captionsOnlyContainerTitle) !== null && _e !== void 0 ? _e : '' }),
         (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: bannerTitleContainerClassName },
             React.createElement(Text, { className: titleClassName }, getTitle()),
             React.createElement(IconButton, { "data-ui-id": "captions-banner-expand-icon", iconProps: { iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }, ariaLabel: expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel, onClick: () => setExpandBannerHeight(!expandBannerHeight), styles: expandIconClassName(theme) }))),

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  hiddenAnnouncementClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n  /**\n   * If caption is finalized\n   */\n  isFinalized?: boolean;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n  const [announcedRTT, setAnnouncedRTT] = useState<number[]>([]);\n  const [announcedCaption, setAnnouncedCaption] = useState<string[]>([]);\n  const [captionAnnouncementText, setCaptionAnnouncementText] = useState<CaptionsInformation[]>([]);\n  const [rttAnnouncementText, setRTTAnnouncementText] = useState<RealTimeTextInformation[]>([]);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  useEffect(() => {\n    if (realTimeTexts?.completedMessages) {\n      //filter out the messages that have already been announced\n      const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter(\n        (message) => !announcedRTT.includes(message.id)\n      );\n      if (rTTMessagesToAnnounce.length > 0) {\n        setRTTAnnouncementText(rTTMessagesToAnnounce);\n        setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);\n      }\n    }\n    if (captions.length > 0) {\n      // filter out the captions that have already been announced\n      const captionsToAnnounce = captions.filter(\n        (caption) => !announcedCaption.includes(caption.id) && caption.isFinalized\n      );\n      if (captionsToAnnounce.length > 0) {\n        setCaptionAnnouncementText(captionsToAnnounce);\n        setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);\n      }\n    }\n  }, [captions, realTimeTexts?.completedMessages, announcedRTT, announcedCaption]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <div\n                  key={`RealTimeText - ${caption.id}`}\n                  className={captionContainerClassName}\n                  data-is-focusable={true}\n                >\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </div>\n              );\n            }\n            return (\n              <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </div>\n            );\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {/* ARIA live region */}\n          {(rttAnnouncementText.length > 0 || captionAnnouncementText?.length > 0) && (\n            <div aria-live=\"assertive\" role=\"alert\" aria-atomic=\"true\" className={hiddenAnnouncementClassName}>\n              <span>\n                {rttAnnouncementText.map((text) => (\n                  <span>\n                    {strings.realTimeTextBannerTitle} {text.displayName}: {text.message}\n                  </span>\n                ))}\n              </span>\n              <span>\n                {captionAnnouncementText.map((text) => (\n                  <span>\n                    {strings.captionsOnlyContainerTitle} {text.displayName}: {text.captionText}\n                  </span>\n                ))}\n              </span>\n            </div>\n          )}\n\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <div\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>\n              )}\n              {captionsAndRealTimeText()}\n            </div>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\nimport { _CaptionsAndRTTAnnouncer } from './CaptionsAndRTTAnnouncer';\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n  /**\n   * If caption is finalized\n   */\n  isFinalized?: boolean;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <div\n                  key={`RealTimeText - ${caption.id}`}\n                  className={captionContainerClassName}\n                  data-is-focusable={true}\n                >\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </div>\n              );\n            }\n            return (\n              <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </div>\n            );\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          <_CaptionsAndRTTAnnouncer\n            captions={captions}\n            realTimeTexts={realTimeTexts}\n            realTimeTextTitle={strings.realTimeTextBannerTitle ?? ''}\n            captionsTitle={strings.captionsOnlyContainerTitle ?? ''}\n          />\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <div\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>\n              )}\n              {captionsAndRealTimeText()}\n            </div>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts

@@ -73,6 +73,13 @@ export interface DevicesButtonStrings {
      * Tooltip of microphone menu
      */
     microphoneMenuTooltip: string;
+    /**
+     * Default label for the microphone button in the device selection menu.
+     *
+     * @remarks
+     * This is only used when the default microphone has no label already set.
+     */
+    defaultMicrophoneLabelFallback?: string;
     /**
      * Tooltip of speaker menu
      */
@@ -160,13 +167,13 @@ export interface DeviceMenuStrings {
     /**
      * Title for Audio Device section in the contextual menu
      *
-     * @remark Used in place of microphoneMenuTitle when speakers can be enumerated
+     * @remarks Used in place of microphoneMenuTitle when speakers can be enumerated
      */
     audioDeviceMenuTitle?: string;
     /**
      * Title for Microphone section in the contextual menu
      *
-     * @remark Used when speakers can be enumerated
+     * @remarks Used when speakers can be enumerated
      */
     microphoneMenuTitle?: string;
     /**
@@ -180,19 +187,26 @@ export interface DeviceMenuStrings {
     /**
      * Tooltip label for Audio Device section in the contextual menu
      *
-     * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated
+     * @remarks Used in place of microphoneMenuTooltip when speakers can be enumerated
      */
     audioDeviceMenuTooltip?: string;
     /**
      * Tooltip label for Microphone section in the contextual menu
      *
-     * @remark Used when speakers can be enumerated
+     * @remarks Used when speakers can be enumerated
      */
     microphoneMenuTooltip?: string;
     /**
      * Tooltip label for Speaker section in the contextual menu
      */
     speakerMenuTooltip?: string;
+    /**
+     * Default label for the microphone button in the device selection menu.
+     *
+     * @remarks
+     * This is only used when the default microphone has no label already set.
+     */
+    defaultMicrophoneLabelFallback?: string;
 }
 /**
  * Styles for flyouts used by various buttons for device selection flyouts.

package/dist/dist-esm/react-components/src/components/DevicesButton.js

@@ -18,7 +18,7 @@ const defaultLocalVideoViewOptions = {
  * @internal
  */
 export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
     const defaultMenuProps = {
         items: [],
@@ -84,6 +84,10 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
         const speakersAvailable = speakers && speakers.length > 0;
         const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';
         const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;
+        const defaultMicrophoneLabelFallback = (_c = strings.defaultMicrophoneLabelFallback) !== null && _c !== void 0 ? _c : 'Default';
+        // If the default microphone has no name, use the default fallback label. This occurs on Android WebViews.
+        const selectedMicIsDefault = selectedMicrophone.id === ((_d = microphones[0]) === null || _d === void 0 ? void 0 : _d.id);
+        const selectedMicrophoneName = selectedMicIsDefault && !selectedMicrophone.name ? defaultMicrophoneLabelFallback : selectedMicrophone.name;
         defaultMenuProps.items.push({
             key: 'microphones',
             itemType: ContextualMenuItemType.Section,
@@ -97,27 +101,35 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                             calloutProps: {
                                 preventDismissOnEvent
                             },
-                            items: microphones.map((microphone) => ({
-                                key: microphone.id,
-                                text: microphone.name,
-                                title: microphone.name,
-                                itemProps: {
-                                    styles: menuItemStyles
-                                },
-                                iconProps: {
-                                    iconName: 'ContextMenuMicIcon',
-                                    styles: { root: { lineHeight: 0 } }
-                                },
-                                canCheck: true,
-                                isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
-                                onClick: () => {
-                                    if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
-                                        onSelectMicrophone(microphone);
-                                    }
+                            items: microphones.map((microphone, i) => {
+                                const microphoneIsDefault = i === 0;
+                                // If the default microphone has no name, use the default fallback label. This occurs on Android WebViews.
+                                const micLabel = microphoneIsDefault && !microphone.name ? defaultMicrophoneLabelFallback : microphone.name;
+                                if (microphoneIsDefault) {
+                                    console.log('Default microphone is set to:', micLabel, 'This may be due to the default microphone having no name set.');
                                 }
-                            }))
+                                return {
+                                    key: microphone.id,
+                                    text: micLabel,
+                                    title: micLabel,
+                                    itemProps: {
+                                        styles: menuItemStyles
+                                    },
+                                    iconProps: {
+                                        iconName: 'ContextMenuMicIcon',
+                                        styles: { root: { lineHeight: 0 } }
+                                    },
+                                    canCheck: true,
+                                    isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
+                                    onClick: () => {
+                                        if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
+                                            onSelectMicrophone(microphone);
+                                        }
+                                    }
+                                };
+                            })
                         },
-                        text: selectedMicrophone.name
+                        text: selectedMicrophoneName
                     }
                 ]
             }

package/dist/dist-esm/react-components/src/components/DevicesButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice, options?: VideoStreamOptions) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @internal\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @internal\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                iconProps: {\n                  iconName: 'ContextMenuCameraIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera, defaultLocalVideoViewOptions);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuMicIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuSpeakerIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n"]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Default label for the microphone button in the device selection menu.\n   *\n   * @remarks\n   * This is only used when the default microphone has no label already set.\n   */\n  defaultMicrophoneLabelFallback?: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice, options?: VideoStreamOptions) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @internal\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remarks Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remarks Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remarks Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remarks Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n  /**\n   * Default label for the microphone button in the device selection menu.\n   *\n   * @remarks\n   * This is only used when the default microphone has no label already set.\n   */\n  defaultMicrophoneLabelFallback?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @internal\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @internal\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                iconProps: {\n                  iconName: 'ContextMenuCameraIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera, defaultLocalVideoViewOptions);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    const defaultMicrophoneLabelFallback = strings.defaultMicrophoneLabelFallback ?? 'Default';\n\n    // If the default microphone has no name, use the default fallback label. This occurs on Android WebViews.\n    const selectedMicIsDefault = selectedMicrophone.id === microphones[0]?.id;\n    const selectedMicrophoneName =\n      selectedMicIsDefault && !selectedMicrophone.name ? defaultMicrophoneLabelFallback : selectedMicrophone.name;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone, i) => {\n                const microphoneIsDefault = i === 0;\n                // If the default microphone has no name, use the default fallback label. This occurs on Android WebViews.\n                const micLabel =\n                  microphoneIsDefault && !microphone.name ? defaultMicrophoneLabelFallback : microphone.name;\n                if (microphoneIsDefault) {\n                  console.log(\n                    'Default microphone is set to:',\n                    micLabel,\n                    'This may be due to the default microphone having no name set.'\n                  );\n                }\n                return {\n                  key: microphone.id,\n                  text: micLabel,\n                  title: micLabel,\n                  itemProps: {\n                    styles: menuItemStyles\n                  },\n                  iconProps: {\n                    iconName: 'ContextMenuMicIcon',\n                    styles: { root: { lineHeight: 0 } }\n                  },\n                  canCheck: true,\n                  isChecked: microphone.id === selectedMicrophone?.id,\n                  onClick: () => {\n                    if (microphone.id !== selectedMicrophone?.id) {\n                      onSelectMicrophone(microphone);\n                    }\n                  }\n                };\n              })\n            },\n            text: selectedMicrophoneName\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                iconProps: {\n                  iconName: 'ContextMenuSpeakerIcon',\n                  styles: { root: { lineHeight: 0 } }\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -156,6 +156,7 @@
         "onSplitButtonMicrophonePrimaryAction": "Mute mic",
         "microphonePrimaryActionSplitButtonTitle": "Use microphone",
         "microphoneAriaDescription": "Audio options",
+        "defaultMicrophoneLabelFallback": "Default",
         "deepNoiseSuppressionTitle": "Noise suppression",
         "deepNoiseSuppressionOnAnnouncement": "Deep noise suppression has been turned on",
         "deepNoiseSuppressionOffAnnouncement": "Deep noise suppression has been turned off"
@@ -169,6 +170,7 @@
         "audioDeviceMenuTooltip": "Choose audio device",
         "microphoneMenuTitle": "Microphone",
         "microphoneMenuTooltip": "Choose microphone",
+        "defaultMicrophoneLabelFallback": "Default",
         "speakerMenuTitle": "Speaker",
         "speakerMenuTooltip": "Choose speaker"
     },