npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202305250013 → 1.5.1-alpha-202305260013 - Mend

@azure/communication-react 1.5.1-alpha-202305250013 → 1.5.1-alpha-202305260013

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/dist/dist-esm/calling-stateful-client/src/CallDeclarativeCommon.js CHANGED Viewed

@@ -113,8 +113,8 @@ class ProxyTeamsCaptionsFeature {
             case 'startCaptions':
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter(this, void 0, void 0, function* () {
                     var _a, _b;
+                    this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
-                    this._context.setIsCaptionActive(this._call.id, true);
                     this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
                     return ret;
                 }), 'Call.feature');
@@ -123,6 +123,7 @@ class ProxyTeamsCaptionsFeature {
                 return this._context.withAsyncErrorTeedToState((...args) => __awaiter(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
+                    this._context.setStartCaptionsInProgress(this._call.id, false);
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':

package/dist/dist-esm/calling-stateful-client/src/CallDeclarativeCommon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallDeclarativeCommon.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallDeclarativeCommon.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallContext } from './CallContext';\nimport { CallCommon } from './BetaToStableTypes';\n/* @conditional-compile-remove(close-captions) /\nimport { Features } from '@azure/communication-calling';\n/ @conditional-compile-remove(close-captions) /\nimport { TeamsCaptionsCallFeature } from '@azure/communication-calling';\n/\n @private\n /\nexport abstract class ProxyCallCommon implements ProxyHandler<CallCommon> {\n private _context: CallContext;\n\n constructor(context: CallContext) {\n this._context = context;\n }\n\n public unsubscribe(): void {\n /* No subscriptions yet. But there will be one for transfer feature soon. /\n }\n\n protected getContext(): CallContext {\n return this._context;\n }\n\n public get<P extends keyof CallCommon>(target: CallCommon, prop: P): any {\n switch (prop) {\n case 'mute': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['mute']>) {\n return await target.mute(...args);\n }, 'Call.mute');\n }\n case 'unmute': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['unmute']>) {\n return await target.unmute(...args);\n }, 'Call.unmute');\n }\n case 'startVideo': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['startVideo']>) {\n return await target.startVideo(...args);\n }, 'Call.startVideo');\n }\n case 'stopVideo': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['stopVideo']>) {\n return await target.stopVideo(...args);\n }, 'Call.stopVideo');\n }\n case 'startScreenSharing': {\n return this._context.withAsyncErrorTeedToState(async function (\n ...args: Parameters<CallCommon['startScreenSharing']>\n ) {\n return await target.startScreenSharing(...args);\n },\n 'Call.startScreenSharing');\n }\n case 'stopScreenSharing': {\n return this._context.withAsyncErrorTeedToState(async function (\n ...args: Parameters<CallCommon['stopScreenSharing']>\n ) {\n return await target.stopScreenSharing(...args);\n },\n 'Call.stopScreenSharing');\n }\n case 'hold': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['hold']>) {\n return await target.hold(...args);\n }, 'Call.hold');\n }\n case 'resume': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['resume']>) {\n return await target.resume(...args);\n }, 'Call.resume');\n }\n case 'feature': {\n // these are mini version of Proxy object - if it grows too big, a real Proxy object should be used.\n return this._context.withErrorTeedToState((...args: Parameters<CallCommon['feature']>) => {\n / @conditional-compile-remove(close-captions) /\n if (args[0] === Features.TeamsCaptions) {\n const captionsFeature = target.feature(Features.TeamsCaptions);\n const proxyFeature = new ProxyTeamsCaptionsFeature(this._context, target);\n return new Proxy(captionsFeature, proxyFeature);\n }\n return target.feature(...args);\n }, 'Call.feature');\n }\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n\n/ @conditional-compile-remove(close-captions) /\n/\n @private\n */\nclass ProxyTeamsCaptionsFeature implements ProxyHandler<TeamsCaptionsCallFeature> {\n private _context: CallContext;\n private _call: CallCommon;\n\n constructor(context: CallContext, call: CallCommon) {\n this._context = context;\n this._call = call;\n }\n\n public get<P extends keyof TeamsCaptionsCallFeature>(target: TeamsCaptionsCallFeature, prop: P): any {\n switch (prop) {\n case 'startCaptions':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['startCaptions']>) => {\n const ret = await target.startCaptions(...args);\n this._context.setIsCaptionActive(this._call.id, true);\n this._context.setSelectedSpokenLanguage(this._call.id, args[0]?.spokenLanguage ?? 'en-us');\n return ret;\n },\n 'Call.feature'\n );\n break;\n case 'stopCaptions':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['stopCaptions']>) => {\n const ret = await target.stopCaptions(...args);\n this._context.setIsCaptionActive(this._call.id, false);\n return ret;\n },\n 'Call.feature'\n );\n case 'setSpokenLanguage':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['setSpokenLanguage']>) => {\n const ret = await target.setSpokenLanguage(...args);\n this._context.setSelectedSpokenLanguage(this._call.id, args[0]);\n return ret;\n },\n 'Call.feature'\n );\n case 'setCaptionLanguage':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['setCaptionLanguage']>) => {\n const ret = await target.setCaptionLanguage(...args);\n this._context.setSelectedCaptionLanguage(this._call.id, args[0]);\n return ret;\n },\n 'Call.feature'\n );\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n"]}
1	+ {"version":3,"file":"CallDeclarativeCommon.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallDeclarativeCommon.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallContext } from './CallContext';\nimport { CallCommon } from './BetaToStableTypes';\n/* @conditional-compile-remove(close-captions) /\nimport { Features } from '@azure/communication-calling';\n/ @conditional-compile-remove(close-captions) /\nimport { TeamsCaptionsCallFeature } from '@azure/communication-calling';\n/\n @private\n /\nexport abstract class ProxyCallCommon implements ProxyHandler<CallCommon> {\n private _context: CallContext;\n\n constructor(context: CallContext) {\n this._context = context;\n }\n\n public unsubscribe(): void {\n /* No subscriptions yet. But there will be one for transfer feature soon. /\n }\n\n protected getContext(): CallContext {\n return this._context;\n }\n\n public get<P extends keyof CallCommon>(target: CallCommon, prop: P): any {\n switch (prop) {\n case 'mute': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['mute']>) {\n return await target.mute(...args);\n }, 'Call.mute');\n }\n case 'unmute': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['unmute']>) {\n return await target.unmute(...args);\n }, 'Call.unmute');\n }\n case 'startVideo': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['startVideo']>) {\n return await target.startVideo(...args);\n }, 'Call.startVideo');\n }\n case 'stopVideo': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['stopVideo']>) {\n return await target.stopVideo(...args);\n }, 'Call.stopVideo');\n }\n case 'startScreenSharing': {\n return this._context.withAsyncErrorTeedToState(async function (\n ...args: Parameters<CallCommon['startScreenSharing']>\n ) {\n return await target.startScreenSharing(...args);\n },\n 'Call.startScreenSharing');\n }\n case 'stopScreenSharing': {\n return this._context.withAsyncErrorTeedToState(async function (\n ...args: Parameters<CallCommon['stopScreenSharing']>\n ) {\n return await target.stopScreenSharing(...args);\n },\n 'Call.stopScreenSharing');\n }\n case 'hold': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['hold']>) {\n return await target.hold(...args);\n }, 'Call.hold');\n }\n case 'resume': {\n return this._context.withAsyncErrorTeedToState(async function (...args: Parameters<CallCommon['resume']>) {\n return await target.resume(...args);\n }, 'Call.resume');\n }\n case 'feature': {\n // these are mini version of Proxy object - if it grows too big, a real Proxy object should be used.\n return this._context.withErrorTeedToState((...args: Parameters<CallCommon['feature']>) => {\n / @conditional-compile-remove(close-captions) /\n if (args[0] === Features.TeamsCaptions) {\n const captionsFeature = target.feature(Features.TeamsCaptions);\n const proxyFeature = new ProxyTeamsCaptionsFeature(this._context, target);\n return new Proxy(captionsFeature, proxyFeature);\n }\n return target.feature(...args);\n }, 'Call.feature');\n }\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n\n/ @conditional-compile-remove(close-captions) /\n/\n @private\n */\nclass ProxyTeamsCaptionsFeature implements ProxyHandler<TeamsCaptionsCallFeature> {\n private _context: CallContext;\n private _call: CallCommon;\n\n constructor(context: CallContext, call: CallCommon) {\n this._context = context;\n this._call = call;\n }\n\n public get<P extends keyof TeamsCaptionsCallFeature>(target: TeamsCaptionsCallFeature, prop: P): any {\n switch (prop) {\n case 'startCaptions':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['startCaptions']>) => {\n this._context.setStartCaptionsInProgress(this._call.id, true);\n const ret = await target.startCaptions(...args);\n this._context.setSelectedSpokenLanguage(this._call.id, args[0]?.spokenLanguage ?? 'en-us');\n\n return ret;\n },\n 'Call.feature'\n );\n break;\n case 'stopCaptions':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['stopCaptions']>) => {\n const ret = await target.stopCaptions(...args);\n this._context.setIsCaptionActive(this._call.id, false);\n this._context.setStartCaptionsInProgress(this._call.id, false);\n return ret;\n },\n 'Call.feature'\n );\n case 'setSpokenLanguage':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['setSpokenLanguage']>) => {\n const ret = await target.setSpokenLanguage(...args);\n this._context.setSelectedSpokenLanguage(this._call.id, args[0]);\n return ret;\n },\n 'Call.feature'\n );\n case 'setCaptionLanguage':\n return this._context.withAsyncErrorTeedToState(\n async (...args: Parameters<TeamsCaptionsCallFeature['setCaptionLanguage']>) => {\n const ret = await target.setCaptionLanguage(...args);\n this._context.setSelectedCaptionLanguage(this._call.id, args[0]);\n return ret;\n },\n 'Call.feature'\n );\n default:\n return Reflect.get(target, prop);\n }\n }\n}\n"]}

package/dist/dist-esm/calling-stateful-client/src/Converter.js CHANGED Viewed

@@ -96,7 +96,8 @@ export function convertSdkCallToDeclarativeCall(call) {
             supportedCaptionLanguages: [],
             currentCaptionLanguage: '',
             currentSpokenLanguage: '',
-            isCaptionsFeatureActive: false
+            isCaptionsFeatureActive: false,
+            startCaptionsInProgress: false
         }
     };
 }

package/dist/dist-esm/calling-stateful-client/src/Converter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAYlC,OAAO,EAAE,6BAA6B,EAAE,gCAAgC;AAYxE,yDAAyD;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,2DAA2D;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAMxD;;GAEG;AACH,MAAM,UAAU,6CAA6C,CAC3D,MAA2B;IAE3B,2DAA2D;IAC3D,MAAM,0BAA0B,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEzE,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,eAAe,EAAE,MAAM,CAAC,eAAe;QACvC,IAAI,EAAE,SAAS;QACf,2DAA2D;QAC3D,YAAY,EAAE,kDAAkD,CAAC,0BAA0B,CAAC,aAAa,CAAC;KAC3G,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,+CAA+C,CAC7D,MAA4B;IAE5B,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,eAAe,EAAE,MAAM,CAAC,eAAe;QACvC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,iEAAiE;QACjE,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,IAAI,EAAE,SAAS;KAChB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,6CAA6C,CAC3D,WAAiC;IAEjC,MAAM,uBAAuB,GAAG,EAAE,CAAC;IACnC,KAAK,MAAM,WAAW,IAAI,WAAW,CAAC,YAAY,EAAE;QAClD,uBAAuB,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,+CAA+C,CAAC,WAAW,CAAC,CAAC;KACxG;IACD,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,UAAU;QAClC,WAAW,EAAE,WAAW,CAAC,WAAW;QACpC,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,aAAa,EAAE,WAAW,CAAC,aAAa;QACxC,YAAY,EAAE,uBAAuB;QACrC,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,UAAU,EAAE,WAAW,CAAC,UAAU;KACnC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,+BAA+B,CAAC,IAAgB;IAC9D,MAAM,6BAA6B,GAAG,EAAE,CAAC;IACzC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,WAAiC,EAAE,EAAE;QACpE,6BAA6B,CAAC,6BAA6B,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAClF,6CAA6C,CAAC,WAAW,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IACH,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,yDAAyD;QACzD,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAE,MAAmB,CAAC,CAAC,CAAE,WAAwB;QACzE,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,EAAE;aACX;SACF;QACD,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;QACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,6CAA6C,CAAC;QAC5F,kBAAkB,EAAE,6BAA6B;QACjD,uBAAuB,EAAE,EAAE;QAC3B,SAAS,EAAE,EAAE,iBAAiB,EAAE,KAAK,EAAE;QACvC,aAAa,EAAE,EAAE,qBAAqB,EAAE,KAAK,EAAE;QAC/C,4BAA4B,EAAE,SAAS;QACvC,SAAS,EAAE,IAAI,IAAI,EAAE;QACrB,OAAO,EAAE,SAAS;QAClB,wCAAwC;QACxC,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,iDAAiD;QACjD,eAAe,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,wBAAwB,EAAE,EAAE;YAC5B,yBAAyB,EAAE,EAAE;YAC7B,sBAAsB,EAAE,EAAE;YAC1B,qBAAqB,EAAE,EAAE;YACzB,uBAAuB,EAAE,KAAK;SAC/B;KACF,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,+CAA+C,CAAC,IAAwB;IACtF,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,SAAS,EAAE,IAAI,IAAI,EAAE;QACrB,OAAO,EAAE,SAAS;KACnB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kDAAkD,CAChE,IAA6B;IAE7B,OAAO;QACL,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,MAAM,EAAE,IAAI,CAAC,MAAM;KACpB,CAAC;AACJ,CAAC;AAED,iDAAiD;AACjD;;GAEG;AACH,MAAM,UAAU,gCAAgC,CAAC,OAA0B;IACzE,yBACK,OAAO,EACV;AACJ,CAAC;AAED,2DAA2D;AAC3D,eAAe;AACf,MAAM,UAAU,kDAAkD,CAChE,YAA+B;IAE/B,OAAO;QACL,aAAa,EAAE,YAAY;KAC5B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n RemoteParticipant as SdkRemoteParticipant,\n RemoteVideoStream as SdkRemoteVideoStream,\n LocalVideoStream as SdkLocalVideoStream,\n VideoStreamRendererView\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(close-captions) /\nimport { TeamsCaptionsInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(teams-identity-support) /\nimport { CallKind } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallState,\n RemoteParticipantState as DeclarativeRemoteParticipant,\n RemoteVideoStreamState as DeclarativeRemoteVideoStream,\n LocalVideoStreamState as DeclarativeLocalVideoStream,\n IncomingCallState as DeclarativeIncomingCall,\n VideoStreamRendererViewState as DeclarativeVideoStreamRendererView\n} from './CallClientState';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsInfo } from './CallClientState';\n\n/ @conditional-compile-remove(teams-identity-support) /\nimport { _isACSCall } from './TypeGuards';\nimport { CallCommon, IncomingCallCommon } from './BetaToStableTypes';\n\n/ @conditional-compile-remove(video-background-effects) /\nimport { Features } from '@azure/communication-calling';\n/ @conditional-compile-remove(video-background-effects) /\nimport { VideoEffectName } from '@azure/communication-calling';\n/ @conditional-compile-remove(video-background-effects) /\nimport { LocalVideoStreamVideoEffectsState } from './CallClientState';\n\n/\n @private\n /\nexport function convertSdkLocalStreamToDeclarativeLocalStream(\n stream: SdkLocalVideoStream\n): DeclarativeLocalVideoStream {\n / @conditional-compile-remove(video-background-effects) /\n const localVideoStreamEffectsAPI = stream.feature(Features.VideoEffects);\n\n return {\n source: stream.source,\n mediaStreamType: stream.mediaStreamType,\n view: undefined,\n / @conditional-compile-remove(video-background-effects) /\n videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)\n };\n}\n\n/\n @private\n /\nexport function convertSdkRemoteStreamToDeclarativeRemoteStream(\n stream: SdkRemoteVideoStream\n): DeclarativeRemoteVideoStream {\n return {\n id: stream.id,\n mediaStreamType: stream.mediaStreamType,\n isAvailable: stream.isAvailable,\n / @conditional-compile-remove(video-stream-is-receiving-flag) /\n isReceiving: stream.isReceiving,\n view: undefined\n };\n}\n\n/\n @private\n /\nexport function convertSdkParticipantToDeclarativeParticipant(\n participant: SdkRemoteParticipant\n): DeclarativeRemoteParticipant {\n const declarativeVideoStreams = {};\n for (const videoStream of participant.videoStreams) {\n declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);\n }\n return {\n identifier: participant.identifier,\n displayName: participant.displayName,\n state: participant.state,\n callEndReason: participant.callEndReason,\n videoStreams: declarativeVideoStreams,\n isMuted: participant.isMuted,\n isSpeaking: participant.isSpeaking\n };\n}\n\n/\n @private\n \n Note at the time of writing only one LocalVideoStream is supported by the SDK.\n /\nexport function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {\n const declarativeRemoteParticipants = {};\n call.remoteParticipants.forEach((participant: SdkRemoteParticipant) => {\n declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =\n convertSdkParticipantToDeclarativeParticipant(participant);\n });\n return {\n id: call.id,\n / @conditional-compile-remove(teams-identity-support) /\n kind: _isACSCall(call) ? ('Call' as CallKind) : ('TeamsCall' as CallKind),\n callerInfo: call.callerInfo,\n state: call.state,\n callEndReason: call.callEndReason,\n diagnostics: {\n network: {\n latest: {}\n },\n media: {\n latest: {}\n }\n },\n direction: call.direction,\n isMuted: call.isMuted,\n isScreenSharingOn: call.isScreenSharingOn,\n localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),\n remoteParticipants: declarativeRemoteParticipants,\n remoteParticipantsEnded: {},\n recording: { isRecordingActive: false },\n transcription: { isTranscriptionActive: false },\n screenShareRemoteParticipant: undefined,\n startTime: new Date(),\n endTime: undefined,\n / @conditional-compile-remove(rooms) /\n role: call.role,\n / @conditional-compile-remove(close-captions) /\n captionsFeature: {\n captions: [],\n supportedSpokenLanguages: [],\n supportedCaptionLanguages: [],\n currentCaptionLanguage: '',\n currentSpokenLanguage: '',\n isCaptionsFeatureActive: false\n }\n };\n}\n\n/\n @private\n /\nexport function convertSdkIncomingCallToDeclarativeIncomingCall(call: IncomingCallCommon): DeclarativeIncomingCall {\n return {\n id: call.id,\n callerInfo: call.callerInfo,\n startTime: new Date(),\n endTime: undefined\n };\n}\n\n/\n @private\n /\nexport function convertFromSDKToDeclarativeVideoStreamRendererView(\n view: VideoStreamRendererView\n): DeclarativeVideoStreamRendererView {\n return {\n scalingMode: view.scalingMode,\n isMirrored: view.isMirrored,\n target: view.target\n };\n}\n\n/ @conditional-compile-remove(close-captions) /\n/\n @private\n /\nexport function convertFromSDKToCaptionInfoState(caption: TeamsCaptionsInfo): CaptionsInfo {\n return {\n ...caption\n };\n}\n\n/ @conditional-compile-remove(video-background-effects) /\n/* @private */\nexport function convertFromSDKToDeclarativeVideoStreamVideoEffects(\n videoEffects: VideoEffectName[]\n): LocalVideoStreamVideoEffectsState {\n return {\n activeEffects: videoEffects\n };\n}\n\"../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n RemoteParticipant as SdkRemoteParticipant,\n RemoteVideoStream as SdkRemoteVideoStream,\n LocalVideoStream as SdkLocalVideoStream,\n VideoStreamRendererView\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(close-captions) /\nimport { TeamsCaptionsInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(teams-identity-support) /\nimport { CallKind } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallState,\n RemoteParticipantState as DeclarativeRemoteParticipant,\n RemoteVideoStreamState as DeclarativeRemoteVideoStream,\n LocalVideoStreamState as DeclarativeLocalVideoStream,\n IncomingCallState as DeclarativeIncomingCall,\n VideoStreamRendererViewState as DeclarativeVideoStreamRendererView\n} from './CallClientState';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsInfo } from './CallClientState';\n\n/ @conditional-compile-remove(teams-identity-support) /\nimport { _isACSCall } from './TypeGuards';\nimport { CallCommon, IncomingCallCommon } from './BetaToStableTypes';\n\n/ @conditional-compile-remove(video-background-effects) /\nimport { Features } from '@azure/communication-calling';\n/ @conditional-compile-remove(video-background-effects) /\nimport { VideoEffectName } from '@azure/communication-calling';\n/ @conditional-compile-remove(video-background-effects) /\nimport { LocalVideoStreamVideoEffectsState } from './CallClientState';\n\n/\n @private\n /\nexport function convertSdkLocalStreamToDeclarativeLocalStream(\n stream: SdkLocalVideoStream\n): DeclarativeLocalVideoStream {\n / @conditional-compile-remove(video-background-effects) /\n const localVideoStreamEffectsAPI = stream.feature(Features.VideoEffects);\n\n return {\n source: stream.source,\n mediaStreamType: stream.mediaStreamType,\n view: undefined,\n / @conditional-compile-remove(video-background-effects) /\n videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)\n };\n}\n\n/\n @private\n /\nexport function convertSdkRemoteStreamToDeclarativeRemoteStream(\n stream: SdkRemoteVideoStream\n): DeclarativeRemoteVideoStream {\n return {\n id: stream.id,\n mediaStreamType: stream.mediaStreamType,\n isAvailable: stream.isAvailable,\n / @conditional-compile-remove(video-stream-is-receiving-flag) /\n isReceiving: stream.isReceiving,\n view: undefined\n };\n}\n\n/\n @private\n /\nexport function convertSdkParticipantToDeclarativeParticipant(\n participant: SdkRemoteParticipant\n): DeclarativeRemoteParticipant {\n const declarativeVideoStreams = {};\n for (const videoStream of participant.videoStreams) {\n declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);\n }\n return {\n identifier: participant.identifier,\n displayName: participant.displayName,\n state: participant.state,\n callEndReason: participant.callEndReason,\n videoStreams: declarativeVideoStreams,\n isMuted: participant.isMuted,\n isSpeaking: participant.isSpeaking\n };\n}\n\n/\n @private\n \n Note at the time of writing only one LocalVideoStream is supported by the SDK.\n /\nexport function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {\n const declarativeRemoteParticipants = {};\n call.remoteParticipants.forEach((participant: SdkRemoteParticipant) => {\n declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =\n convertSdkParticipantToDeclarativeParticipant(participant);\n });\n return {\n id: call.id,\n / @conditional-compile-remove(teams-identity-support) /\n kind: _isACSCall(call) ? ('Call' as CallKind) : ('TeamsCall' as CallKind),\n callerInfo: call.callerInfo,\n state: call.state,\n callEndReason: call.callEndReason,\n diagnostics: {\n network: {\n latest: {}\n },\n media: {\n latest: {}\n }\n },\n direction: call.direction,\n isMuted: call.isMuted,\n isScreenSharingOn: call.isScreenSharingOn,\n localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),\n remoteParticipants: declarativeRemoteParticipants,\n remoteParticipantsEnded: {},\n recording: { isRecordingActive: false },\n transcription: { isTranscriptionActive: false },\n screenShareRemoteParticipant: undefined,\n startTime: new Date(),\n endTime: undefined,\n / @conditional-compile-remove(rooms) /\n role: call.role,\n / @conditional-compile-remove(close-captions) /\n captionsFeature: {\n captions: [],\n supportedSpokenLanguages: [],\n supportedCaptionLanguages: [],\n currentCaptionLanguage: '',\n currentSpokenLanguage: '',\n isCaptionsFeatureActive: false,\n startCaptionsInProgress: false\n }\n };\n}\n\n/\n @private\n /\nexport function convertSdkIncomingCallToDeclarativeIncomingCall(call: IncomingCallCommon): DeclarativeIncomingCall {\n return {\n id: call.id,\n callerInfo: call.callerInfo,\n startTime: new Date(),\n endTime: undefined\n };\n}\n\n/\n @private\n /\nexport function convertFromSDKToDeclarativeVideoStreamRendererView(\n view: VideoStreamRendererView\n): DeclarativeVideoStreamRendererView {\n return {\n scalingMode: view.scalingMode,\n isMirrored: view.isMirrored,\n target: view.target\n };\n}\n\n/ @conditional-compile-remove(close-captions) /\n/\n @private\n /\nexport function convertFromSDKToCaptionInfoState(caption: TeamsCaptionsInfo): CaptionsInfo {\n return {\n ...caption\n };\n}\n\n/ @conditional-compile-remove(video-background-effects) /\n/* @private */\nexport function convertFromSDKToDeclarativeVideoStreamVideoEffects(\n videoEffects: VideoEffectName[]\n): LocalVideoStreamVideoEffectsState {\n return {\n activeEffects: videoEffects\n };\n}\n\"../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts CHANGED Viewed

@@ -10,6 +10,13 @@ export declare type _CaptionsInfo = {
     captionText: string;
     userId?: string;
 };
+/**
+ * @internal
+ * strings for captions banneer
+ */
+export interface _CaptionsBannerStrings {
+    captionsBannerSpinnerText?: string;
+}
 /**
  * @internal
  * _CaptionsBanner Component Props.
@@ -17,12 +24,14 @@ export declare type _CaptionsInfo = {
 export interface _CaptionsBannerProps {
     captions: _CaptionsInfo[];
     isCaptionsOn?: boolean;
+    startCaptionsInProgress?: boolean;
     /**
      * Optional callback to override render of the avatar.
      *
      * @param userId - user Id
      */
     onRenderAvatar?: OnRenderAvatarCallback;
+    strings?: _CaptionsBannerStrings;
 }
 /**
  * @internal

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

@@ -1,16 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { Stack, FocusZone } from '@fluentui/react';
+import { Stack, FocusZone, Spinner } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Ref } from "../../../northstar-wrapper/src";
 import { _Caption } from './Caption';
-import { captionContainerClassName, captionsBannerClassName, captionsContainerClassName } from './styles/Captions.style';
+import { captionContainerClassName, captionsBannerClassName, captionsContainerClassName, loadingBannerClassName } from './styles/Captions.style';
 /**
  * @internal
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 export const _CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, onRenderAvatar } = props;
+    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
     const captionsScrollDivRef = useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const scrollToBottom = () => {
@@ -39,11 +39,13 @@ export const _CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return (React.createElement(React.Fragment, null, isCaptionsOn && (React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
-        React.createElement(Ref, { innerRef: captionsScrollDivRef },
+    return (React.createElement(React.Fragment, null, startCaptionsInProgress && (React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
+        isCaptionsOn && (React.createElement(Ref, { innerRef: captionsScrollDivRef },
             React.createElement(Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
                 return (React.createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
-            })))))));
+            })))),
+        !isCaptionsOn && (React.createElement(Stack, { verticalAlign: "center", className: loadingBannerClassName, "data-is-focusable": true },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 //# sourceMappingURL=CaptionsBanner.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;~~AACnD~~,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,GAAG,EAAE,uCAAoC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,0BAA0B,~~EAC3B~~,MAAM,yBAAyB,CAAC;~~AA6BjC~~;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;~~IACzD~~,MAAM,oBAAoB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAE5E,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,oBAAoB,CAAC,OAAO,EAAE;YAChC,oBAAoB,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;SACpF;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAS,EAAE;QACrD,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE;YACjC,OAAO;SACR;QACD,MAAM,QAAQ,GACZ,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC;YACjD,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;QAExF,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC;QACvD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,gBAAgB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,mBAAmB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,kBAAkB,EAAE;YACtB,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACG,~~YAAY~~,IAAI,~~CACf~~,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,0BAA0B;~~QACtD~~,oBAAC,GAAG,IAAC,QAAQ,EAAE,oBAAoB;YACjC,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,uBAAuB,IAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;gBACxB,OAAO,CACL,6BAAK,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,yBAAyB,uBAAqB,IAAI;oBACjF,oBAAC,QAAQ,oBAAK,OAAO,IAAE,cAAc,EAAE,cAAc,IAAI,CACrD,CACP,CAAC;YACJ,CAAC,CAAC,CACI,CACJ,~~CACI~~,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack, FocusZone } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@internal/northstar-wrapper';\nimport { _Caption } from './Caption';\nimport {\n captionContainerClassName,\n captionsBannerClassName,\n captionsContainerClassName\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/*\n @internal\n * information required for each line of caption\n /\nexport type _CaptionsInfo = {\n id: string;\n displayName: string;\n captionText: string;\n userId?: string;\n};\n\n/\n @internal\n * _CaptionsBanner Component Props.\n /\nexport interface _CaptionsBannerProps {\n captions: _CaptionsInfo[];\n isCaptionsOn?: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n const { captions, isCaptionsOn, onRenderAvatar } = props;\n const captionsScrollDivRef = useRef<HTMLElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\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;\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]);\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, isAtBottomOfScroll]);\n\n return (\n <>\n {~~isCaptionsOn~~ && (\n <FocusZone as=\"ul\" className={captionsContainerClassName}>\n <Ref innerRef={captionsScrollDivRef}>\n <Stack verticalAlign=\"start\" className={captionsBannerClassName}>\n {captions.map((caption) => {\n return (\n <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n </div>\n );\n })}\n </Stack>\n </Ref>\n </FocusZone>\n )}\n </>\n );\n};\n\"../../../northstar-wrapper/src\""]}
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 } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@internal/northstar-wrapper';\nimport { _Caption } from './Caption';\nimport {\n captionContainerClassName,\n captionsBannerClassName,\n captionsContainerClassName,\n loadingBannerClassName\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/*\n @internal\n * information required for each line of caption\n /\nexport type _CaptionsInfo = {\n id: string;\n displayName: string;\n captionText: string;\n userId?: string;\n};\n\n/\n @internal\n * strings for captions banneer\n /\nexport interface _CaptionsBannerStrings {\n captionsBannerSpinnerText?: string;\n}\n\n/\n @internal\n * _CaptionsBanner Component Props.\n /\nexport interface _CaptionsBannerProps {\n captions: _CaptionsInfo[];\n isCaptionsOn?: boolean;\n startCaptionsInProgress?: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n strings?: _CaptionsBannerStrings;\n}\n\n/\n @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;\n const captionsScrollDivRef = useRef<HTMLElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\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;\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]);\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, isAtBottomOfScroll]);\n\n return (\n <>\n {startCaptionsInProgress && (\n <FocusZone as=\"ul\" className={captionsContainerClassName}>\n {isCaptionsOn && (\n <Ref innerRef={captionsScrollDivRef}>\n <Stack verticalAlign=\"start\" className={captionsBannerClassName}>\n {captions.map((caption) => {\n return (\n <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n </div>\n );\n })}\n </Stack>\n </Ref>\n )}\n {!isCaptionsOn && (\n <Stack verticalAlign=\"center\" className={loadingBannerClassName} data-is-focusable={true}>\n <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n </Stack>\n )}\n </FocusZone>\n )}\n </>\n );\n};\n\"../../../northstar-wrapper/src\""]}

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js CHANGED Viewed

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useMemo, useState } from 'react';
 import { Modal, Stack, useTheme, Text, IconButton, Dropdown, DefaultButton, PrimaryButton } from '@fluentui/react';
 import { buttonsContainerClassName, buttonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
@@ -26,11 +26,21 @@ export const _CaptionsSettingsModal = (props) => {
         key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
         text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
     });
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
     const onDismiss = useCallback(() => {
         if (onDismissCaptionsSettings) {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
+    useEffect(() => {
+        // set spoken language when start captions with a spoken language specified.
+        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+        if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
+            onSetSpokenLanguage(selectedItem.key.toString());
+            // we only need to call set spoken language once when first starting captions
+            setHasSetSpokenLanguage(true);
+        }
+    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
     const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         const languageCode = selectedItem.key.toString();
         if (isCaptionsFeatureActive) {
@@ -38,9 +48,6 @@ export const _CaptionsSettingsModal = (props) => {
         }
         else {
             yield onStartCaptions({ spokenLanguage: languageCode });
-            // set spoken language when start captions with a spoken language specified.
-            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-            onSetSpokenLanguage(languageCode);
         }
         onDismiss();
     }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback } from 'react';\nimport { useMemo, useState } from 'react';\nimport {\n IModalStyles,\n Modal,\n Stack,\n useTheme,\n Text,\n IconButton,\n Dropdown,\n IDropdownOption,\n DefaultButton,\n PrimaryButton\n} from '@fluentui/react';\n\nimport {\n buttonsContainerClassName,\n buttonStyles,\n dropdownContainerClassName,\n dropdownInfoTextStyle,\n dropdownStyles,\n themedCaptionsSettingsModalStyle,\n titleClassName,\n titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { CaptionsAvailableLanguageStrings } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @internal\n * strings for captions setting modal\n /\nexport interface _CaptionsSettingsModalStrings {\n captionsSettingsModalTitle?: string;\n captionsSettingsDropdownLabel?: string;\n captionsSettingsDropdownInfoText?: string;\n captionsSettingsConfirmButtonLabel?: string;\n captionsSettingsCancelButtonLabel?: string;\n captionsSettingsModalAriaLabel?: string;\n captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/\n @internal\n * _CaptionsSettingsModal Component Props.\n /\nexport interface _CaptionsSettingsModalProps {\n supportedSpokenLanguages: string[];\n onSetSpokenLanguage: (language: string) => Promise<void>;\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n currentSpokenLanguage: string;\n captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n isCaptionsFeatureActive?: boolean;\n strings?: _CaptionsSettingsModalStrings;\n showModal?: boolean;\n onDismissCaptionsSettings?: () => void;\n}\n\n/\n @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n const {\n supportedSpokenLanguages,\n currentSpokenLanguage,\n isCaptionsFeatureActive,\n showModal,\n onSetSpokenLanguage,\n onDismissCaptionsSettings,\n onStartCaptions,\n strings,\n captionsAvailableLanguageStrings\n } = props;\n\n const theme = useTheme();\n\n const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n });\n\n const onDismiss = useCallback((): void => {\n if (onDismissCaptionsSettings) {\n onDismissCaptionsSettings();\n }\n }, [onDismissCaptionsSettings]);\n\n const onConfirm = useCallback(async (): Promise<void> => {\n const languageCode = selectedItem.key.toString();\n if (isCaptionsFeatureActive) {\n onSetSpokenLanguage(languageCode);\n } else {\n await onStartCaptions({ spokenLanguage: languageCode });\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n onSetSpokenLanguage(languageCode);\n }\n onDismiss();\n }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n\n const dropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedSpokenLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n\n const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption \| undefined): void => {\n if (option) {\n setSelectedItem(option);\n }\n };\n\n const calloutProps = useMemo(\n () => ({\n preventDismissOnEvent: _preventDismissOnEvent\n }),\n []\n );\n\n const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n return (\n <Stack>\n <Dropdown\n label={strings?.captionsSettingsDropdownLabel}\n selectedKey={selectedItem ? selectedItem.key : undefined}\n onChange={onChange}\n calloutProps={calloutProps}\n placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage}\n options={dropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n </Stack>\n );\n }, [\n calloutProps,\n currentSpokenLanguage,\n dropdownOptions,\n selectedItem,\n strings?.captionsSettingsDropdownInfoText,\n strings?.captionsSettingsDropdownLabel,\n theme\n ]);\n\n const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n () => themedCaptionsSettingsModalStyle(theme),\n [theme]\n );\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings?.captionsSettingsModalAriaLabel}\n isOpen={showModal}\n onDismiss={onDismiss}\n isBlocking={true}\n styles={CaptionsSettingsModalStyle}\n >\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n onClick={onDismiss}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n </PrimaryButton>\n <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n </DefaultButton>\n </Stack>\n </Modal>\n }\n </>\n );\n};\n\"../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback, useEffect } from 'react';\nimport { useMemo, useState } from 'react';\nimport {\n IModalStyles,\n Modal,\n Stack,\n useTheme,\n Text,\n IconButton,\n Dropdown,\n IDropdownOption,\n DefaultButton,\n PrimaryButton\n} from '@fluentui/react';\n\nimport {\n buttonsContainerClassName,\n buttonStyles,\n dropdownContainerClassName,\n dropdownInfoTextStyle,\n dropdownStyles,\n themedCaptionsSettingsModalStyle,\n titleClassName,\n titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { CaptionsAvailableLanguageStrings } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @internal\n * strings for captions setting modal\n /\nexport interface _CaptionsSettingsModalStrings {\n captionsSettingsModalTitle?: string;\n captionsSettingsDropdownLabel?: string;\n captionsSettingsDropdownInfoText?: string;\n captionsSettingsConfirmButtonLabel?: string;\n captionsSettingsCancelButtonLabel?: string;\n captionsSettingsModalAriaLabel?: string;\n captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/\n @internal\n * _CaptionsSettingsModal Component Props.\n /\nexport interface _CaptionsSettingsModalProps {\n supportedSpokenLanguages: string[];\n onSetSpokenLanguage: (language: string) => Promise<void>;\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n currentSpokenLanguage: string;\n captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n isCaptionsFeatureActive?: boolean;\n strings?: _CaptionsSettingsModalStrings;\n showModal?: boolean;\n onDismissCaptionsSettings?: () => void;\n}\n\n/\n @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n const {\n supportedSpokenLanguages,\n currentSpokenLanguage,\n isCaptionsFeatureActive,\n showModal,\n onSetSpokenLanguage,\n onDismissCaptionsSettings,\n onStartCaptions,\n strings,\n captionsAvailableLanguageStrings\n } = props;\n\n const theme = useTheme();\n\n const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n });\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const onDismiss = useCallback((): void => {\n if (onDismissCaptionsSettings) {\n onDismissCaptionsSettings();\n }\n }, [onDismissCaptionsSettings]);\n\n useEffect(() => {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n onSetSpokenLanguage(selectedItem.key.toString());\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);\n\n const onConfirm = useCallback(async (): Promise<void> => {\n const languageCode = selectedItem.key.toString();\n if (isCaptionsFeatureActive) {\n onSetSpokenLanguage(languageCode);\n } else {\n await onStartCaptions({ spokenLanguage: languageCode });\n }\n onDismiss();\n }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n\n const dropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedSpokenLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n\n const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption \| undefined): void => {\n if (option) {\n setSelectedItem(option);\n }\n };\n\n const calloutProps = useMemo(\n () => ({\n preventDismissOnEvent: _preventDismissOnEvent\n }),\n []\n );\n\n const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n return (\n <Stack>\n <Dropdown\n label={strings?.captionsSettingsDropdownLabel}\n selectedKey={selectedItem ? selectedItem.key : undefined}\n onChange={onChange}\n calloutProps={calloutProps}\n placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage}\n options={dropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n </Stack>\n );\n }, [\n calloutProps,\n currentSpokenLanguage,\n dropdownOptions,\n selectedItem,\n strings?.captionsSettingsDropdownInfoText,\n strings?.captionsSettingsDropdownLabel,\n theme\n ]);\n\n const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n () => themedCaptionsSettingsModalStyle(theme),\n [theme]\n );\n\n return (\n <>\n {\n <Modal\n titleAriaId={strings?.captionsSettingsModalAriaLabel}\n isOpen={showModal}\n onDismiss={onDismiss}\n isBlocking={true}\n styles={CaptionsSettingsModalStyle}\n >\n <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n <IconButton\n iconProps={{ iconName: 'Cancel' }}\n ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n onClick={onDismiss}\n style={{ color: theme.palette.black }}\n />\n </Stack>\n\n <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n </PrimaryButton>\n <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n </DefaultButton>\n </Stack>\n </Modal>\n }\n </>\n );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js CHANGED Viewed

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { concatStyleSets, Icon, mergeStyles, Stack } from '@fluentui/react';
+import { Chat } from "../../../../northstar-wrapper/src";
 import { _formatString } from "../../../../acs-ui-common/src";
 import { useTheme } from '../../theming/FluentThemeProvider';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -8,7 +9,7 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { borderAndBoxShadowStyle } from '../styles/SendBox.styles';
 import { _FileUploadCards } from '../FileUploadCards';
-import { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
+import { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
     const className = mergeStyles(inputBoxIcon, { color });
@@ -56,31 +57,34 @@ export const ChatMessageComponentAsEditBox = (props) => {
                     setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
                 } }))));
     }, [attachedFilesMetadata]);
-    return (React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
-            theme,
-            hasErrorMessage: message.failureReason !== undefined,
-            disabled: false
-        })) },
-        React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
-                submitEnabled &&
-                    onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
-            /* @conditional-compile-remove(mention) */
-            mentionLookupOptions: mentionLookupOptions },
-            React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel(message.messageId);
-                }, id: 'dismissIconWrapper' }),
-            React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+    const getContent = () => {
+        return (React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
+                theme,
+                hasErrorMessage: message.failureReason !== undefined,
+                disabled: false
+            })) },
+            React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
                     submitEnabled &&
                         onSubmit(textValue, message.metadata, {
                             attachedFilesMetadata
                         });
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper' })),
-        message.failureReason && (React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
-        onRenderFileUploads()));
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
+                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                        onCancel && onCancel(message.messageId);
+                    }, id: 'dismissIconWrapper' }),
+                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                        submitEnabled &&
+                            onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
+                        e.stopPropagation();
+                    }, id: 'submitIconWrapper' })),
+            message.failureReason && (React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+            onRenderFileUploads()));
+    };
+    return React.createElement(Chat.Message, { styles: chatMessageEditContainerStyle, content: getContent() });
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
 const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../MentionPopover';\n\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n attachedFilesMetadata?: FileMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineEditButtons: boolean;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n / @conditional-compile-remove(mention) /\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const onRenderThemedCancelIcon = useCallback(\n () => onRenderCancelIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n const onRenderFileUploads = useCallback(() => {\n return (\n attachedFilesMetadata?.length && (\n <div style={{ margin: '0.25rem' }}>\n <_FileUploadCards\n activeFileUploads={attachedFilesMetadata?.map((file) => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))}\n onCancelFileUpload={(fileId) => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter((file) => file.name !== fileId));\n }}\n />\n </div>\n )\n );\n }, [attachedFilesMetadata]);\n\n return (\n <Stack\n className={mergeStyles(\n borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: message.failureReason !== undefined,\n disabled: false\n })\n )}\n >\n <InputBoxComponent\n inlineChildren={props.inlineEditButtons}\n id={'editbox'}\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle(props.inlineEditButtons)}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={mentionLookupOptions}\n >\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </InputBoxComponent>\n {message.failureReason && (\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>\n {message.failureReason}\n </div>\n )}\n {onRenderFileUploads()}\n </Stack>\n );\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean =>\n messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState =>\n isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return message.attachedFilesMetadata;\n return [];\n};\n\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { Chat } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../MentionPopover';\n\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n const className = mergeStyles(inputBoxIcon, { color });\n return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n attachedFilesMetadata?: FileMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n /\n Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineEditButtons: boolean;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\n\ntype MessageState = 'OK' \| 'too short' \| 'too long';\n\n/\n @private\n /\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n / @conditional-compile-remove(mention) /\n const { mentionLookupOptions } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content \|\| '');\n\n const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n const submitEnabled = messageState === 'OK';\n\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (event?: React.FormEvent<HTMLInputElement \| HTMLTextAreaElement>, newValue?: string): void => {\n setTextValue(newValue ?? '');\n };\n\n const textTooLongMessage =\n messageState === 'too long'\n ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n : undefined;\n\n const onRenderThemedCancelIcon = useCallback(\n () => onRenderCancelIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n [theme.palette.neutralSecondary]\n );\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n const onRenderFileUploads = useCallback(() => {\n return (\n attachedFilesMetadata?.length && (\n <div style={{ margin: '0.25rem' }}>\n <_FileUploadCards\n activeFileUploads={attachedFilesMetadata?.map((file) => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))}\n onCancelFileUpload={(fileId) => {\n setAttachedFilesMetadata(attachedFilesMetadata?.filter((file) => file.name !== fileId));\n }}\n />\n </div>\n )\n );\n }, [attachedFilesMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack\n className={mergeStyles(\n borderAndBoxShadowStyle({\n theme,\n hasErrorMessage: message.failureReason !== undefined,\n disabled: false\n })\n )}\n >\n <InputBoxComponent\n inlineChildren={props.inlineEditButtons}\n id={'editbox'}\n textFieldRef={editTextFieldRef}\n inputClassName={editBoxStyle(props.inlineEditButtons)}\n placeholderText={strings.editBoxPlaceholderText}\n textValue={textValue}\n onChange={setText}\n onEnterKeyDown={() => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n }}\n supportNewline={false}\n maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n errorMessage={textTooLongMessage}\n styles={editBoxStyles}\n / @conditional-compile-remove(mention) /\n mentionLookupOptions={mentionLookupOptions}\n >\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxCancelButton}\n tooltipContent={strings.editBoxCancelButton}\n onRenderIcon={onRenderThemedCancelIcon}\n onClick={() => {\n onCancel && onCancel(message.messageId);\n }}\n id={'dismissIconWrapper'}\n />\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(textValue, message.metadata, {\n attachedFilesMetadata\n });\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </InputBoxComponent>\n {message.failureReason && (\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>\n {message.failureReason}\n </div>\n )}\n {onRenderFileUploads()}\n </Stack>\n );\n };\n\n return <Chat.Message styles={chatMessageEditContainerStyle} content={getContent()} />;\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean =>\n messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState =>\n isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n / @conditional-compile-remove(file-sharing) */\n return message.attachedFilesMetadata;\n return [];\n};\n\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/StartCaptionsButton.js CHANGED Viewed

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { ControlBarButton } from './ControlBarButton';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { defaultSpokenLanguage } from './utils';
 /**
@@ -36,17 +36,24 @@ export const _StartCaptionsButton = (props) => {
     const options = useMemo(() => {
         return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };
     }, [currentSpokenLanguage]);
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
     const onToggleStartCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (props.checked) {
             onStopCaptions();
         }
         else {
             yield onStartCaptions(options);
+        }
+    }), [props.checked, onStartCaptions, onStopCaptions, options]);
+    useEffect(() => {
+        if (props.checked && !hasSetSpokenLanguage) {
             // set spoken language when start captions with a spoken language specified.
             // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
             onSetSpokenLanguage(options.spokenLanguage);
+            // we only need to call set spoken language once when first starting captions
+            setHasSetSpokenLanguage(true);
         }
-    }), [props.checked, onStartCaptions, onStopCaptions, onSetSpokenLanguage, options]);
+    }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);
     return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleStartCaptions !== null && onToggleStartCaptions !== void 0 ? onToggleStartCaptions : props.onClick, onRenderOnIcon: onRenderStartIcon, onRenderOffIcon: onRenderOffIcon })));
 };
 //# sourceMappingURL=StartCaptionsButton.js.map

package/dist/dist-esm/react-components/src/components/StartCaptionsButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AACpD~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvG,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,cAAc,EAAE,CAAC;SAClB;aAAM;YACL,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;~~YAC/B~~,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;~~SAC7C~~;IACH,CAAC,~~CAAA,~~EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,~~eAAe~~,EAAE,~~cAAc~~,~~EAAE~~,~~mBAAmB~~,EAAE,~~OAAO~~,CAAC,CAAC,CAAC;~~IAEnF~~,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useMemo } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/*\n options bag to start captions\n \n @internal\n /\nexport type _captionsOptions = {\n spokenLanguage: string;\n};\n\n/\n @internal\n /\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with communication react handlers\n * Start captions based on captions state\n /\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * Stop captions based on captions state\n /\n onStopCaptions: () => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * set captions spoken language\n /\n onSetSpokenLanguage: (language: string) => Promise<void>;\n /\n Spoken language set for starting captions\n /\n currentSpokenLanguage: string;\n /\n Optional strings to override in component\n /\n strings?: _StartCaptionsButtonStrings;\n}\n\n/\n Strings for the hold button labels\n * @internal\n /\nexport interface _StartCaptionsButtonStrings {\n /\n Label for when action is to start Captions\n /\n onLabel: string;\n /\n Label for when action is to stop Captions\n /\n offLabel: string;\n /\n Content for when button is checked, captions is on\n /\n tooltipOnContent: string;\n /\n Content for when button is unchecked, captions is off\n /\n tooltipOffContent: string;\n}\n\n/\n a button to start or stop captions\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start captions button.\n * @internal\n /\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;\n\n const onRenderStartIcon = (): JSX.Element => {\n / @conditional-compile-remove(close-captions) /\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n return <></>;\n };\n const onRenderOffIcon = (): JSX.Element => {\n / @conditional-compile-remove(close-captions) */\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n return <></>;\n };\n\n const options: _captionsOptions = useMemo(() => {\n return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n }, [currentSpokenLanguage]);\n\n const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n if (props.checked) {\n onStopCaptions();\n } else {\n await onStartCaptions(options);\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n onSetSpokenLanguage(options.spokenLanguage);\n }\n }, [props.checked, ~~onStartCaptions~~, ~~onStopCaptions~~, ~~onSetSpokenLanguage, options~~]);\n\n return (\n <ControlBarButton\n {...props}\n strings={strings}\n onClick={onToggleStartCaptions ?? props.onClick}\n onRenderOnIcon={onRenderStartIcon}\n onRenderOffIcon={onRenderOffIcon}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"StartCaptionsButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartCaptionsButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+DhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvG,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,cAAc,GAAG,CAAC;QACpF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAgB,EAAE;QACxC,iDAAiD;QACjD,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,iBAAiB,GAAG,CAAC;QACvF,OAAO,yCAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAqB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO,EAAE,cAAc,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAwB,EAAE;QAClE,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,cAAc,EAAE,CAAC;SAClB;aAAM;YACL,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAA,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,oBAAoB,EAAE;YAC1C,4EAA4E;YAC5E,iIAAiI;YACjI,mBAAmB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC5C,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,KAAK,CAAC,OAAO,EAC/C,cAAc,EAAE,iBAAiB,EACjC,eAAe,EAAE,eAAe,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { defaultSpokenLanguage } from './utils';\n\n/*\n options bag to start captions\n \n @internal\n /\nexport type _captionsOptions = {\n spokenLanguage: string;\n};\n\n/\n @internal\n /\nexport interface _StartCaptionsButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with communication react handlers\n * Start captions based on captions state\n /\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * Stop captions based on captions state\n /\n onStopCaptions: () => Promise<void>;\n /\n Utility property for using this component with communication react handlers\n * set captions spoken language\n /\n onSetSpokenLanguage: (language: string) => Promise<void>;\n /\n Spoken language set for starting captions\n /\n currentSpokenLanguage: string;\n /\n Optional strings to override in component\n /\n strings?: _StartCaptionsButtonStrings;\n}\n\n/\n Strings for the hold button labels\n * @internal\n /\nexport interface _StartCaptionsButtonStrings {\n /\n Label for when action is to start Captions\n /\n onLabel: string;\n /\n Label for when action is to stop Captions\n /\n offLabel: string;\n /\n Content for when button is checked, captions is on\n /\n tooltipOnContent: string;\n /\n Content for when button is unchecked, captions is off\n /\n tooltipOffContent: string;\n}\n\n/\n a button to start or stop captions\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start captions button.\n * @internal\n /\nexport const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Element => {\n const { onStartCaptions, onStopCaptions, onSetSpokenLanguage, currentSpokenLanguage, strings } = props;\n\n const onRenderStartIcon = (): JSX.Element => {\n / @conditional-compile-remove(close-captions) /\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsIcon\" />;\n return <></>;\n };\n const onRenderOffIcon = (): JSX.Element => {\n / @conditional-compile-remove(close-captions) */\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"CaptionsOffIcon\" />;\n return <></>;\n };\n\n const options: _captionsOptions = useMemo(() => {\n return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };\n }, [currentSpokenLanguage]);\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const onToggleStartCaptions = useCallback(async (): Promise<void> => {\n if (props.checked) {\n onStopCaptions();\n } else {\n await onStartCaptions(options);\n }\n }, [props.checked, onStartCaptions, onStopCaptions, options]);\n\n useEffect(() => {\n if (props.checked && !hasSetSpokenLanguage) {\n // set spoken language when start captions with a spoken language specified.\n // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n onSetSpokenLanguage(options.spokenLanguage);\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);\n\n return (\n <ControlBarButton\n {...props}\n strings={strings}\n onClick={onToggleStartCaptions ?? props.onClick}\n onRenderOnIcon={onRenderStartIcon}\n onRenderOffIcon={onRenderOffIcon}\n />\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoTile.js CHANGED Viewed

@@ -24,8 +24,7 @@ const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
     return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React.createElement(Stack, { styles: defaultPersonaStyles },
-            React.createElement(Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
+        React.createElement(Stack, { styles: defaultPersonaStyles }, coinSize && (React.createElement(Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
@@ -62,7 +61,7 @@ export const VideoTile = (props) => {
     const [isHovered, setIsHovered] = useState(false);
     /* @conditional-compile-remove(pinned-participants) */
     const [isFocused, setIsFocused] = useState(false);
-    const [personaSize, setPersonaSize] = useState(100);
+    const [personaSize, setPersonaSize] = useState();
     const videoTileRef = useRef(null);
     const locale = useLocale();
     const theme = useTheme();
@@ -148,7 +147,7 @@ export const VideoTile = (props) => {
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
-                    canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
+                    canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
                     participantStateString && (React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
                     showMuteIndicator && isMuted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
                         React.createElement(Icon, { iconName: "VideoTileMicOff" }))),