import React , { useEffect , useRef , useState } from 'react' ; import { Link , MessageBar } from '@fluentui/react' ; import { CompositeStrings , useLocale } from '../../localization' ; private export type ComplianceBannerProps = { callTranscribeState ? : boolean ; callRecordState ? : boolean ; } ; type CachedComplianceBannerProps = { latest : ComplianceBannerProps ; previous : ComplianceBannerProps ; } ; private export const ComplianceBanner = ( props ) : JSX . Element => { const strings = useLocale ( ) . strings ; const cachedProps = useRef < CachedComplianceBannerProps > ( { latest : { callTranscribeState : false , callRecordState : false } , previous : { callTranscribeState : false , callRecordState : false } } ) ; if ( props . callRecordState !== cachedProps . current . latest . callRecordState || props . callTranscribeState !== cachedProps . current . latest . callTranscribeState ) { cachedProps . current = { latest : props , previous : cachedProps . current . latest } ; } const variant = computeVariant ( cachedProps . current . previous . callRecordState , cachedProps . current . previous . callTranscribeState , cachedProps . current . latest . callRecordState , cachedProps . current . latest . callTranscribeState ) ; return < DismissableMessageBar variant = { variant } strings = { strings } / > ; } ; function DismissableMessageBar ( props ) { const { variant : newVariant , strings } = props ; const [ variant , setVariant ] = useState ( 0 ) ; useEffect ( ( ) => { setVariant ( newVariant ) ; } , [ newVariant , setVariant ] ) ; return variant === NO_STATE ? ( < > < />) : (<MessageBar onDismiss={() => { setVariant ( NO_STATE ) ; } } dismissButtonAriaLabel = { strings . call . close } > < BannerMessage variant = { variant } strings = { strings } / > < /MessageBar>); } const TRANSCRIPTION_STOPPED_STILL_RECORDING = 1 ; const RECORDING_STOPPED_STILL_TRANSCRIBING = 2 ; const RECORDING_AND_TRANSCRIPTION_STOPPED = 3 ; const RECORDING_AND_TRANSCRIPTION_STARTED = 4 ; const TRANSCRIPTION_STARTED = 5 ; const RECORDING_STOPPED = 6 ; const RECORDING_STARTED = 7 ; const TRANSCRIPTION_STOPPED = 8 ; const NO_STATE = 0 ; function computeVariant ( previousCallRecordState , previousCallTranscribeState , callRecordState , callTranscribeState ) { if ( previousCallRecordState && previousCallTranscribeState ) { if ( callRecordState && ! callTranscribeState ) { return TRANSCRIPTION_STOPPED_STILL_RECORDING ; } else if ( ! callRecordState && callTranscribeState ) { return RECORDING_STOPPED_STILL_TRANSCRIBING ; } else if ( ! callRecordState && ! callTranscribeState ) { return RECORDING_AND_TRANSCRIPTION_STOPPED ; } else { return NO_STATE ; } } else if ( previousCallRecordState && ! previousCallTranscribeState ) { if ( callRecordState && callTranscribeState ) { return RECORDING_AND_TRANSCRIPTION_STARTED ; } else if ( ! callRecordState && callTranscribeState ) { return TRANSCRIPTION_STARTED ; } else if ( ! callRecordState && ! callTranscribeState ) { return RECORDING_STOPPED ; } else { return NO_STATE ; } } else if ( ! previousCallRecordState && previousCallTranscribeState ) { if ( callRecordState && callTranscribeState ) { return RECORDING_AND_TRANSCRIPTION_STARTED ; } else if ( ! callRecordState && callTranscribeState ) { return RECORDING_STARTED ; } else if ( ! callRecordState && ! callTranscribeState ) { return TRANSCRIPTION_STOPPED ; } else { return NO_STATE ; } } else if ( ! previousCallRecordState && ! previousCallTranscribeState ) { if ( callRecordState && callTranscribeState ) { return RECORDING_AND_TRANSCRIPTION_STARTED ; } else if ( callRecordState && ! callTranscribeState ) { return RECORDING_STARTED ; } else if ( ! callRecordState && callTranscribeState ) { return TRANSCRIPTION_STARTED ; } else { return NO_STATE ; } } return NO_STATE ; } function BannerMessage ( props ) { const { variant , strings } = props ; switch ( variant ) { case TRANSCRIPTION_STOPPED_STILL_RECORDING : return ( < > < b > { strings . call . complianceBannerTranscriptionStopped } < /b> { ` ${ strings . call . complianceBannerNowOnlyRecording }` } < PrivacyPolicy linkText = { strings . call . privacyPolicy } /> < />); case RECORDING_STOPPED_STILL_TRANSCRIBING : return ( < > < b > { strings . call . complianceBannerRecordingStopped } < /b> { ` ${ strings . call . complianceBannerNowOnlyTranscription }` } < PrivacyPolicy linkText = { strings . call . privacyPolicy } /> < />); case RECORDING_AND_TRANSCRIPTION_STOPPED : return ( < > < b > { strings . call . complianceBannerRecordingAndTranscriptionSaved } < /b> { ` ${ strings . call . complianceBannerRecordingAndTranscriptionStopped }` } < LearnMore linkText = { strings . call . learnMore } /> < />); case RECORDING_AND_TRANSCRIPTION_STARTED : return ( < > < b > { strings . call . complianceBannerRecordingAndTranscriptionStarted } < /b> { ` ${ strings . call . complianceBannerTranscriptionConsent }` } < PrivacyPolicy linkText = { strings . call . privacyPolicy } /> < />); case TRANSCRIPTION_STARTED : return ( < > < b > { strings . call . complianceBannerTranscriptionStarted } < /b> { ` ${ strings . call . complianceBannerTranscriptionConsent }` } < PrivacyPolicy linkText = { strings . call . privacyPolicy } /> < />); case RECORDING_STOPPED : return ( < > < b > { strings . call . complianceBannerRecordingSaving } < /b> { ` ${ strings . call . complianceBannerRecordingStopped }` } < LearnMore linkText = { strings . call . learnMore } /> < />); case RECORDING_STARTED : return ( < > < b > { strings . call . complianceBannerRecordingStarted } < /b> { ` ${ strings . call . complianceBannerTranscriptionConsent }` } < PrivacyPolicy linkText = { strings . call . privacyPolicy } /> < />); case TRANSCRIPTION_STOPPED : return ( < > < b > { strings . call . complianceBannerTranscriptionSaving } < /b> { ` ${ strings . call . complianceBannerTranscriptionStopped }` } < LearnMore linkText = { strings . call . learnMore } /> < />); } return < > < />; } function PrivacyPolicy ( props ) { return ( < Link href = "https://privacy.microsoft.com/privacystatement#mainnoticetoendusersmodule" target = "_blank" underline > { props . linkText } < /Link>); } function LearnMore ( props ) { return ( < Link href = "https://support.microsoft.com/office/record-a-meeting-in-teams-34dfbe7f-b07d-4a27-b4c6-de62f1348c24" target = "_blank" underline > { props . linkText } < /Link>); }