communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
82 lines • 3.78 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useRef } from 'react';
import { computeVariant } from './Utils';
import { DelayedUpdateBanner } from './DelayedUpdateBanner';
/**
* A component that displays banners to notify the user when call recording and
* transcription is enabled or disabled in a call.
*
* This component implements a state machine that tracks the changes to call
* recording and transcription state and shows the corresponding message.
*
* @internal
*/
export const _ComplianceBanner = (props) => {
const cachedProps = useRef({
latestBooleanState: {
callTranscribeState: false,
callRecordState: false
},
latestStringState: {
callTranscribeState: 'off',
callRecordState: 'off'
},
lastUpdated: Date.now()
});
// Only update cached props and variant if there is _some_ change in the latest props.
// This ensures that state machine is only updated if there is an actual change in the props.
const shouldUpdateCached = props.callRecordState !== cachedProps.current.latestBooleanState.callRecordState ||
props.callTranscribeState !== cachedProps.current.latestBooleanState.callTranscribeState;
// The following three operations must be performed in this exact order:
// [1]: Update cached state to transition the state machine.
if (shouldUpdateCached) {
cachedProps.current = {
latestBooleanState: props,
latestStringState: {
callRecordState: determineStates(cachedProps.current.latestStringState.callRecordState, props.callRecordState),
callTranscribeState: determineStates(cachedProps.current.latestStringState.callTranscribeState, props.callTranscribeState)
},
lastUpdated: Date.now()
};
}
// [2]: Compute the variant, using the transitioned state machine.
const variant = computeVariant(cachedProps.current.latestStringState.callRecordState, cachedProps.current.latestStringState.callTranscribeState);
// [3]: Transition the state machine again to deal with some end-states.
if (shouldUpdateCached &&
cachedProps.current.latestStringState.callRecordState === 'stopped' &&
cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
// When both states are stopped, after displaying message "RECORDING_AND_TRANSCRIPTION_STOPPED", change both states to off (going back to the default state).
cachedProps.current.latestStringState.callRecordState = 'off';
cachedProps.current.latestStringState.callTranscribeState = 'off';
}
return (React.createElement(DelayedUpdateBanner, { variant: {
variant,
lastUpdated: cachedProps.current.lastUpdated
}, strings: props.strings, onDismiss: () => {
if (cachedProps.current.latestStringState.callRecordState === 'stopped') {
cachedProps.current.latestStringState.callRecordState = 'off';
}
if (cachedProps.current.latestStringState.callTranscribeState === 'stopped') {
cachedProps.current.latestStringState.callTranscribeState = 'off';
}
} }));
};
function determineStates(previous, current) {
// if current state is on, then return on
if (current) {
return 'on';
}
// if current state is off
else {
// if previous state is on and current state is off, return stopped (on -> off)
if (previous === 'on') {
return 'stopped';
}
// otherwise remain previous state unchanged
else {
return previous;
}
}
}
//# sourceMappingURL=ComplianceBanner.js.map