communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
50 lines • 2.85 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useLocale } from '../localization';
import { ControlBarButton } from './ControlBarButton';
import { DefaultPalette, mergeStyleSets, useTheme } from '@fluentui/react';
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
/**
* A button to start / stop screen sharing.
*
* Can be used with {@link ControlBar}.
*
* @public
*/
export const ScreenShareButton = (props) => {
var _a, _b, _c, _d;
const localeStrings = useLocale().strings.screenShareButton;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const styles = screenshareButtonStyles(theme);
const onRenderScreenShareOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
const onRenderScreenShareOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
return (React.createElement(ControlBarButton, Object.assign({}, props, { styles: mergeStyleSets(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
};
const screenshareButtonStyles = (theme) => ({
rootChecked: {
background: theme.semanticColors.primaryButtonBackground,
color: theme.semanticColors.primaryButtonText,
':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
'@media (forced-colors: active)': {
border: '1px solid',
borderColor: theme.palette.black
}
},
rootCheckedHovered: {
background: theme.semanticColors.primaryButtonBackgroundHovered,
color: theme.semanticColors.primaryButtonTextHovered,
':focus::after': { outlineColor: `${DefaultPalette.white} !important` }, // added !important to avoid override by FluentUI button styles
'@media (forced-colors: active)': {
border: '1px solid',
borderColor: theme.palette.black
}
},
rootCheckedPressed: {
background: theme.semanticColors.primaryButtonBackgroundPressed,
color: theme.semanticColors.primaryButtonTextPressed
},
labelChecked: { color: theme.semanticColors.primaryButtonText }
});
//# sourceMappingURL=ScreenShareButton.js.map