import React from 'react' ; import { useLocale } from '../localization' ; import { ControlBarButton , ControlBarButtonProps } from './ControlBarButton' ; import { DefaultPalette , IButtonStyles , mergeStyles , Theme , useTheme } from '@fluentui/react' ; import { HighContrastAwareIcon } from './HighContrastAwareIcon' ; /**
 * Strings of  ScreenShareButton that can be overridden.
 *
 *  public export interface ScreenShareButtonStrings { /** Label when button is on. */ onLabel : string ; /** Label when button is off. */ offLabel : string ; /** * Tooltip content when the button is disabled. */ tooltipDisabledContent ? : string ; /** Tooltip content when the button is on. */ tooltipOnContent ? : string ; /** Tooltip content when the button is off. */ tooltipOffContent ? : string ; } /**
 * Props for  ScreenShareButton .
 *
 *  public export interface ScreenShareButtonProps extends ControlBarButtonProps { /**
     * Utility property for using this component with `communication react eventHandlers`.
     * Maps directly to the `onClick` property.
     */ onToggleScreenShare ? : ( ) => Promise < void > ; /**
     * Optional strings to override in component
     */ strings ? : Partial < ScreenShareButtonStrings > ; } /**
 * A button to start / stop screen sharing.
 *
 * Can be used with  ControlBar .
 *
 *  public export const ScreenShareButton = ( props ) : JSX . Element => { const localeStrings = useLocale ( ) . strings . screenShareButton ; const strings = { ... localeStrings , ... props . strings } ; const theme = useTheme ( ) ; const styles = screenshareButtonStyles ( theme ) ; const onRenderScreenShareOnIcon = ( ) : JSX . Element => ( < HighContrastAwareIcon disabled = { props . disabled } iconName = "ControlButtonScreenShareStop" / > ) ; const onRenderScreenShareOffIcon = ( ) : JSX . Element => ( < HighContrastAwareIcon disabled = { props . disabled } iconName = "ControlButtonScreenShareStart" / > ) ; return ( < ControlBarButton { ... props } className = { mergeStyles ( styles , props . styles ) } onClick = { props . onToggleScreenShare ?? props . onClick } onRenderOnIcon = { props . onRenderOnIcon ?? onRenderScreenShareOnIcon } onRenderOffIcon = { props . onRenderOffIcon ?? onRenderScreenShareOffIcon } strings = { strings } labelKey = { props . labelKey ?? 'screenShareButtonLabel' } / > ) ; } ; const screenshareButtonStyles = ( theme ) : IButtonStyles => ( { rootChecked : { background : theme . palette . themePrimary , color : DefaultPalette . white , ':focus::after' : { outlineColor : `${ DefaultPalette . white } !important` } } , rootCheckedHovered : { background : theme . palette . themePrimary , color : DefaultPalette . white , ':focus::after' : { outlineColor : `${ DefaultPalette . white } !important` } } , labelChecked : { color : DefaultPalette . white } } ) ;