@azure/communication-react 1.12.1-alpha-202401300049 → 1.12.1-alpha-202402010012
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.
- package/dist/communication-react.d.ts +48 -12
- package/dist/dist-cjs/communication-react/index.js +229 -84
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +1 -1
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts +0 -4
- package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts +5 -1
- package/dist/dist-esm/react-components/src/components/ParticipantList.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.d.ts +3 -0
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +9 -2
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.d.ts +7 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js +57 -19
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +17 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +12 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/Dialpad.styles.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/styles/Dialpad.styles.js +5 -3
- package/dist/dist-esm/react-components/src/components/styles/Dialpad.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/ar-SA/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/cs-CZ/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +5 -1
- package/dist/dist-esm/react-components/src/localization/locales/es-ES/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/fi-FI/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/he-IL/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/it-IT/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/ja-JP/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/ko-KR/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/nb-NO/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/nl-NL/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/pl-PL/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/pt-BR/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/ru-RU/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/sv-SE/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/tr-TR/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/zh-CN/strings.json +6 -1
- package/dist/dist-esm/react-components/src/localization/locales/zh-TW/strings.json +6 -1
- package/dist/dist-esm/react-components/src/theming/icons.d.ts +2 -0
- package/dist/dist-esm/react-components/src/theming/icons.js +5 -1
- package/dist/dist-esm/react-components/src/theming/icons.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +16 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +6 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +19 -9
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +11 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js +70 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.d.ts +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +3 -3
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.d.ts +3 -3
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js +5 -9
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/ChatAdapter.d.ts +3 -3
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/ChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js +3 -2
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +4 -0
- package/package.json +1 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-
|
1
|
+
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-202402010012';\n"]}
|
@@ -160,7 +160,7 @@ const DialpadContainer = (props) => {
|
|
160
160
|
setText(modifiedInput);
|
161
161
|
};
|
162
162
|
return (React.createElement(Stack, { className: mergeStyles(containerStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
|
163
|
-
dialpadMode === 'dialer' && (React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue),
|
163
|
+
dialpadMode === 'dialer' && (React.createElement(TextField, { styles: concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue),
|
164
164
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
165
165
|
onChange: (e) => {
|
166
166
|
setText(e.target.value);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @beta\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @beta\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /**\n * function to send dtmf tones on button click\n */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /**\n * Callback for dialpad button behavior\n */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /**\n * set dialpad textfield content\n */\n textFieldValue?: string;\n /**\n * on change function for text field, provides an unformatted plain text\n */\n onChange?: (input: string) => void;\n /**\n * flag to determine when to show/hide delete button, default true\n */\n showDeleteButton?: boolean;\n /**\n * Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n */\n longPressTrigger?: LongPressTrigger;\n /**\n * Styles for customizing the dialpad component\n */\n styles?: DialpadStyles;\n /**\n * Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n */\n disableDtmfPlayback?: boolean;\n /**\n * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n */\n dialpadMode?: DialpadMode;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' ||\n e.key === 'ArrowLeft' ||\n e.key === 'ArrowRight' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer'\n } = props;\n\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
|
1
|
+
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef } from 'react';\nimport { IStyle, IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\nimport { IconButton } from '@fluentui/react';\nimport {\n concatStyleSets,\n DefaultButton,\n FocusZone,\n mergeStyles,\n Stack,\n Text,\n TextField,\n useTheme\n} from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useState } from 'react';\n/* @conditional-compile-remove(dialpad) */\nimport { useLocale } from '../../localization';\nimport {\n buttonStyles,\n containerStyles,\n iconButtonStyles,\n digitStyles,\n letterStyles,\n textFieldStyles\n} from '../styles/Dialpad.styles';\nimport { formatPhoneNumber } from '../utils/formatPhoneNumber';\nimport useLongPress from '../utils/useLongPress';\n\nimport { dtmfFrequencies, Tone } from './DTMFToneGenerator';\n\n/**\n * Strings of {@link Dialpad} that can be overridden.\n *\n * @beta\n */\nexport interface DialpadStrings {\n placeholderText: string;\n deleteButtonAriaLabel?: string;\n}\n\n/**\n * Styles for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadStyles {\n root?: IStyle;\n button?: IButtonStyles;\n textField?: Partial<ITextFieldStyles>;\n digit?: IStyle;\n letter?: IStyle;\n deleteIcon?: IButtonStyles;\n}\n\n/**\n * DTMF tone for PSTN calls.\n *\n * @beta\n */\nexport type DtmfTone =\n | 'A'\n | 'B'\n | 'C'\n | 'D'\n | 'Flash'\n | 'Num0'\n | 'Num1'\n | 'Num2'\n | 'Num3'\n | 'Num4'\n | 'Num5'\n | 'Num6'\n | 'Num7'\n | 'Num8'\n | 'Num9'\n | 'Pound'\n | 'Star';\n\n/**\n * Modes of the dialpad component.\n * @beta\n */\nexport type DialpadMode = 'dtmf' | 'dialer';\n\n/**\n * Modes of how the longpress handlers can be tiggered.\n * @beta\n */\nexport type LongPressTrigger = 'mouseAndTouch' | 'touch';\n\n/**\n * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /**\n * function to send dtmf tones on button click\n */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /**\n * Callback for dialpad button behavior\n */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /**\n * set dialpad textfield content\n */\n textFieldValue?: string;\n /**\n * on change function for text field, provides an unformatted plain text\n */\n onChange?: (input: string) => void;\n /**\n * flag to determine when to show/hide delete button, default true\n */\n showDeleteButton?: boolean;\n /**\n * Determines what kind of device that the user is on and should respect that based on interaction\n * interfaces available to the user\n */\n longPressTrigger?: LongPressTrigger;\n /**\n * Styles for customizing the dialpad component\n */\n styles?: DialpadStyles;\n /**\n * Disables DTMF sounds when dialpad buttons are pressed. the actual\n * tones are still sent to the call.\n */\n disableDtmfPlayback?: boolean;\n /**\n * Dialer mode for the dialpad. The dtmf mode is for sending dtmf tones and the appearence of\n * the dialpad is changed like hiding the input box. When using dialer mode the input box is there\n * and can be edited to change the number being dialed.\n */\n dialpadMode?: DialpadMode;\n}\n\ntype DialpadButtonContent = {\n /** Number displayed on each dialpad button */\n digit: string;\n /** Letters displayed on each dialpad button */\n letter?: string;\n};\n\nconst dialPadButtonsDefault: DialpadButtonContent[][] = [\n [{ digit: '1' }, { digit: '2', letter: 'ABC' }, { digit: '3', letter: 'DEF' }],\n [\n { digit: '4', letter: 'GHI' },\n { digit: '5', letter: 'JKL' },\n { digit: '6', letter: 'MNO' }\n ],\n [\n { digit: '7', letter: 'PQRS' },\n { digit: '8', letter: 'TUV' },\n { digit: '9', letter: 'WXYZ' }\n ],\n [{ digit: '*' }, { digit: '0', letter: '+' }, { digit: '#' }]\n];\n\nconst DtmfTones: DtmfTone[] = [\n 'Num1',\n 'Num2',\n 'Num3',\n 'Num4',\n 'Num5',\n 'Num6',\n 'Num7',\n 'Num8',\n 'Num9',\n 'Star',\n 'Num0',\n 'Pound'\n];\n\nconst DialpadButton = (props: {\n digit: string;\n letter?: string;\n styles?: DialpadStyles;\n index: number;\n onClick: (input: string, index: number) => void;\n onLongPress: (input: string, index: number) => void;\n longPressTrigger: LongPressTrigger;\n dtmfToneAudioContext: AudioContext;\n disableDtmfPlayback?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;\n const [buttonPressed, setButtonPressed] = useState(false);\n\n const dtmfToneSound = useRef<Tone>(\n new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2)\n );\n\n const useLongPressProps = React.useMemo(\n () => ({\n onClick: async () => {\n onClick(digit, index);\n },\n onLongPress: async () => {\n onLongPress(digit, index);\n },\n touchEventsOnly: longPressTrigger === 'touch'\n }),\n [digit, index, longPressTrigger, onClick, onLongPress]\n );\n\n const longPressHandlers = useLongPress(useLongPressProps);\n\n return (\n <DefaultButton\n data-test-id={`dialpad-button-${props.index}`}\n styles={concatStyleSets(buttonStyles(theme), props.styles?.button)}\n {...longPressHandlers}\n onKeyDown={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onKeyDown();\n setButtonPressed(true);\n return;\n }\n if (\n e.key === 'Tab' ||\n e.key === 'ArrowLeft' ||\n e.key === 'ArrowRight' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowDown'\n ) {\n dtmfToneSound.current.stop();\n }\n longPressHandlers.onKeyDown();\n }}\n onKeyUp={(e) => {\n if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {\n dtmfToneSound.current.stop();\n longPressHandlers.onKeyUp();\n setButtonPressed(false);\n }\n longPressHandlers.onKeyUp();\n }}\n onMouseDown={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onMouseDown();\n }}\n onMouseUp={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onMouseUp();\n }}\n onMouseLeave={() => {\n dtmfToneSound.current.stop();\n }}\n onTouchStart={() => {\n if (!disableDtmfPlayback) {\n dtmfToneSound.current.play();\n }\n longPressHandlers.onTouchStart();\n }}\n onTouchEnd={() => {\n dtmfToneSound.current.stop();\n longPressHandlers.onTouchEnd();\n }}\n >\n <Stack>\n <Text className={mergeStyles(digitStyles(theme), props.styles?.digit)}>{props.digit}</Text>\n\n <Text className={mergeStyles(letterStyles(theme), props.styles?.letter)}>{props.letter ?? ' '}</Text>\n </Stack>\n </DefaultButton>\n );\n};\n\nconst DialpadContainer = (props: {\n strings: DialpadStrings;\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior */\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** Pass in custom content to dialpad textfield */\n textFieldValue?: string;\n /** on change function for text field, provides an unformatted plain text */\n onChange?: (input: string) => void;\n /** boolean input to determine when to show/hide delete button, default true */\n showDeleteButton?: boolean;\n /** boolean input to determine if dialpad is in mobile view, default false */\n longPressTrigger?: LongPressTrigger;\n styles?: DialpadStyles;\n disableDtmfPlayback?: boolean;\n dialpadMode?: DialpadMode;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n longPressTrigger = 'mouseAndTouch',\n disableDtmfPlayback,\n dialpadMode = 'dialer'\n } = props;\n\n const dtmfToneAudioContext = useRef(new AudioContext());\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n const plainTextValuePreviousRenderValue = useRef(plainTextValue);\n\n useEffect(() => {\n if (plainTextValuePreviousRenderValue.current !== plainTextValue) {\n onChange?.(plainTextValue);\n }\n plainTextValuePreviousRenderValue.current = plainTextValue;\n }, [plainTextValuePreviousRenderValue, plainTextValue, onChange]);\n\n useEffect(() => {\n setText(textFieldValue ?? '');\n }, [textFieldValue]);\n\n const onClickDialpad = (input: string, index: number): void => {\n setText(plainTextValue + input);\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n const onLongPressDialpad = (input: string, index: number): void => {\n if (input === '0' && index === 10) {\n setText(plainTextValue + '+');\n } else {\n setText(plainTextValue + input);\n }\n if (onSendDtmfTone) {\n onSendDtmfTone(DtmfTones[index]);\n }\n if (onClickDialpadButton) {\n onClickDialpadButton(input, index);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setText = (input: string): void => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n const plainInput = sanitizeInput(input);\n setPlainTextValue(plainInput);\n };\n\n const deleteNumbers = (): void => {\n const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);\n setText(modifiedInput);\n };\n\n return (\n <Stack\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n horizontalAlign={'center'}\n >\n {dialpadMode === 'dialer' && (\n <TextField\n styles={concatStyleSets(textFieldStyles(theme, plainTextValue !== ''), props.styles?.textField)}\n value={textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue)}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange={(e: any) => {\n setText(e.target.value);\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n placeholder={props.strings.placeholderText}\n data-test-id=\"dialpad-input\"\n onRenderSuffix={(): JSX.Element => (\n <>\n {showDeleteButton && plainTextValue.length !== 0 && (\n <IconButton\n ariaLabel={props.strings.deleteButtonAriaLabel}\n onClick={deleteNumbers}\n styles={concatStyleSets(iconButtonStyles(theme), props.styles?.deleteIcon)}\n iconProps={{ iconName: 'DialpadBackspace' }}\n />\n )}\n </>\n )}\n />\n )}\n <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\" tokens={{ childrenGap: '1rem' }}>\n {rows.map((button, columnIndex) => (\n <DialpadButton\n key={`button_${columnIndex}`}\n /* row index = 0\n columnIndex: (0,1,2) => (0,1,2)\n row index = 1\n columnIndex: (0,1,2)=> (3,4,5)\n row index = 2\n columnIndex: (0,1,2)=> (6,7,8)\n row index = 3\n columnIndex: (0,1,2)=> (9,10,11)\n columnIndex + rowIndex*rows.length calculates the corresponding index for each button\n dialpad index:\n 0 1 2\n 3 4 5\n 6 7 8\n 9 10 11\n then use this index to locate the corresponding dtmf tones\n DtmfTones[index]\n */\n index={columnIndex + rowIndex * rows.length}\n digit={button.digit}\n letter={button.letter}\n styles={props.styles}\n onClick={onClickDialpad}\n onLongPress={onLongPressDialpad}\n longPressTrigger={longPressTrigger}\n dtmfToneAudioContext={dtmfToneAudioContext.current}\n disableDtmfPlayback={disableDtmfPlayback}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </Stack>\n );\n};\n\n/**\n * A component to allow users to enter phone number through clicking on dialpad/using keyboard\n * It will return empty component for stable builds\n *\n * @beta\n */\nexport const Dialpad = (props: DialpadProps): JSX.Element => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n const localeStrings = useLocale().strings.dialpad;\n\n const dialpadLocaleStringsTrampoline = (): DialpadStrings => {\n /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\n return localeStrings;\n // Even though the component strings type doesn't have `DialpadStrings` in stable build,\n // the string values exist. So unsafe cast for stable build.\n return '' as unknown as DialpadStrings;\n };\n const strings = { ...dialpadLocaleStringsTrampoline(), ...props.strings };\n return <DialpadContainer strings={strings} {...props} />;\n};\n\nconst sanitizeInput = (input: string): string => {\n // remove non-valid characters from input: letters,special characters excluding +, *,#\n return input.replace(/[^\\d*#+]/g, '');\n};\n"]}
|
@@ -58,10 +58,6 @@ export type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(t
|
|
58
58
|
* @beta
|
59
59
|
*/
|
60
60
|
export interface AttachmentDownloadResult {
|
61
|
-
/**
|
62
|
-
* Unique ID of the attachment.
|
63
|
-
*/
|
64
|
-
attachmentId: string;
|
65
61
|
/**
|
66
62
|
* Blob URL for the attachment.
|
67
63
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Represents the type of attachment\n * @beta\n */\nexport type ChatAttachmentType =\n | 'unknown'\n | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage'\n | /* @conditional-compile-remove(file-sharing) */ 'file';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n /* @conditional-compile-remove(file-sharing) */\n attachmentType: 'file';\n /**\n * Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n */\n extension: string;\n /**\n * Unique ID of the file.\n */\n /* @conditional-compile-remove(file-sharing) */\n id: string;\n /**\n * File name to be displayed.\n */\n name: string;\n /**\n * Download URL for the file.\n */\n url: string;\n /* @conditional-compile-remove(file-sharing) */\n /*\n * Optional dictionary of meta data associated with the file.\n */\n payload?: Record<string, string>;\n}\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @beta\n */\nexport interface InlineImageMetadata {\n /*\n * Type of the attachment\n */\n attachmentType: 'inlineImage';\n /**\n * Unique ID of the attachment.\n */\n id: string;\n /*\n * Preview URL for low resolution version.\n */\n previewUrl?: string;\n /**\n * Download URL for the full resolution version.\n */\n url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @beta\n */\nexport type AttachmentMetadata =\n | FileMetadata\n | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @beta\n */\nexport interface AttachmentDownloadResult {\n /**\n * Unique ID of the attachment.\n */\n attachmentId: string;\n /**\n * Blob URL for the attachment.\n */\n blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n /** Aria label to notify user when focus is on file download button. */\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n /** The error message to display in the UI */\n errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n *\n * const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n /**\n * User id of the local participant\n */\n userId: string;\n /**\n * A chat message metadata that includes file metadata\n */\n fileMetadata?: AttachmentMetadata[];\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n /**\n * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n */\n onDownloadErrorMessage?: (errMsg: string) => void;\n /**\n * Optional aria label strings for file download cards\n */\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n /* @conditional-compile-remove(file-sharing) */\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (\n !fileMetadata ||\n fileMetadata.length === 0 ||\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)\n ) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata\n .filter((attachment) => {\n /* @conditional-compile-remove(file-sharing) */\n return isFileSharingAttachment(attachment);\n return true;\n })\n .map((file) => file as unknown as FileMetadata)\n .map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true &&\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(\n file as unknown as AttachmentMetadata\n ) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}
|
1
|
+
{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Represents the type of attachment\n * @beta\n */\nexport type ChatAttachmentType =\n | 'unknown'\n | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage'\n | /* @conditional-compile-remove(file-sharing) */ 'file';\n\n/**\n * Metadata containing basic information about the uploaded file.\n *\n * @beta\n */\nexport interface FileMetadata {\n /* @conditional-compile-remove(file-sharing) */\n attachmentType: 'file';\n /**\n * Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n */\n extension: string;\n /**\n * Unique ID of the file.\n */\n /* @conditional-compile-remove(file-sharing) */\n id: string;\n /**\n * File name to be displayed.\n */\n name: string;\n /**\n * Download URL for the file.\n */\n url: string;\n /* @conditional-compile-remove(file-sharing) */\n /*\n * Optional dictionary of meta data associated with the file.\n */\n payload?: Record<string, string>;\n}\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @beta\n */\nexport interface InlineImageMetadata {\n /*\n * Type of the attachment\n */\n attachmentType: 'inlineImage';\n /**\n * Unique ID of the attachment.\n */\n id: string;\n /*\n * Preview URL for low resolution version.\n */\n previewUrl?: string;\n /**\n * Download URL for the full resolution version.\n */\n url: string;\n}\n\n/**\n * Metadata containing information about the uploaded file.\n * @beta\n */\nexport type AttachmentMetadata =\n | FileMetadata\n | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;\n\n/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n/**\n * Metadata of the attachment object returned by the ACS SDK.\n * @beta\n */\nexport interface AttachmentDownloadResult {\n /**\n * Blob URL for the attachment.\n */\n blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n /** Aria label to notify user when focus is on file download button. */\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n /** The error message to display in the UI */\n errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n *\n * const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCardsProps {\n /**\n * User id of the local participant\n */\n userId: string;\n /**\n * A chat message metadata that includes file metadata\n */\n fileMetadata?: AttachmentMetadata[];\n /**\n * A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n */\n downloadHandler?: FileDownloadHandler;\n /**\n * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n */\n onDownloadErrorMessage?: (errMsg: string) => void;\n /**\n * Optional aria label strings for file download cards\n */\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n /* @conditional-compile-remove(file-sharing) */\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n /* @conditional-compile-remove(file-sharing) */\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (\n !fileMetadata ||\n fileMetadata.length === 0 ||\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)\n ) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata\n .filter((attachment) => {\n /* @conditional-compile-remove(file-sharing) */\n return isFileSharingAttachment(attachment);\n return true;\n })\n .map((file) => file as unknown as FileMetadata)\n .map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true &&\n /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(\n file as unknown as AttachmentMetadata\n ) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}
|
@@ -63,6 +63,10 @@ export type ParticipantListProps = {
|
|
63
63
|
onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
|
64
64
|
/** Optional callback when rendered ParticipantItem is clicked */
|
65
65
|
onParticipantClick?: (participant?: ParticipantListParticipant) => void;
|
66
|
+
/** Optional callback to generate context menu item to stop spotlight of each participant */
|
67
|
+
onStartSpotlight?: (userId: string) => void;
|
68
|
+
/** Optional callback to generate context menu item to stop spotlight of each participant */
|
69
|
+
onStopSpotlight?: (userId: string) => void;
|
66
70
|
/** Styles for the {@link ParticipantList} */
|
67
71
|
styles?: ParticipantListStyles;
|
68
72
|
/** Optional value to determine if the tooltip should be shown for participants or not */
|
@@ -71,7 +75,7 @@ export type ParticipantListProps = {
|
|
71
75
|
totalParticipantCount?: number;
|
72
76
|
/** Strings for the participant list */
|
73
77
|
strings?: ParticipantListStrings;
|
74
|
-
/** Optional aria-
|
78
|
+
/** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */
|
75
79
|
participantAriaLabelledBy?: string;
|
76
80
|
};
|
77
81
|
/**
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\n/* @conditional-compile-remove(total-participant-count) */ /* @conditional-compile-remove(raise-hand) */\nimport { Text } from '@fluentui/react';\n/* @conditional-compile-remove(raise-hand) */\nimport { useTheme, CallingTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n /**\n * String for rendering the count of participants not contained in the displayed participant list\n */\n overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n /** Participants in user call or chat */\n participants: ParticipantListParticipant[];\n /** User ID of user */\n myUserId?: string;\n /**\n * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n *\n * @defaultValue `false`\n */\n excludeMe?: boolean;\n /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` */\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional callback to render the context menu for each participant */\n onRemoveParticipant?: (userId: string) => void;\n /** Optional callback to render custom menu items for each participant. */\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /** Optional callback when rendered ParticipantItem is clicked */\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /** Styles for the {@link ParticipantList} */\n styles?: ParticipantListStyles;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(total-participant-count) */\n /** Total number of people in the call. This number can be larger than the remote participant count. */\n totalParticipantCount?: number;\n /* @conditional-compile-remove(total-participant-count) */\n /** Strings for the participant list */\n strings?: ParticipantListStrings;\n /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */\n participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n attendeeRoleString?: string\n): JSX.Element | null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence | undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n let displayName = participant.displayName;\n\n /* @conditional-compile-remove(hide-attendee-name) */\n const formatDisplayName = (): string | undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n /* @conditional-compile-remove(hide-attendee-name) */\n displayName = formatDisplayName();\n\n /* @conditional-compile-remove(raise-hand) */\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n /* @conditional-compile-remove(raise-hand) */ callingParticipant?.raisedHand\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {\n /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )\n }\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {\n /* @conditional-compile-remove(spotlight) */ callingParticipant.isSpotlighted && (\n <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n )\n }\n </Stack>\n )\n : () => null;\n\n /* @conditional-compile-remove(raise-hand) */\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={() => onParticipantClick?.(participant)}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n />\n );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n /* @conditional-compile-remove(raise-hand) */\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n /* @conditional-compile-remove(raise-hand) */\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string | undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe || !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n /* @conditional-compile-remove(total-participant-count) */\n totalParticipantCount,\n /* @conditional-compile-remove(total-participant-count) */\n strings,\n participantAriaLabelledBy\n } = props;\n\n /* @conditional-compile-remove(raise-hand) */\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n /* @conditional-compile-remove(total-participant-count) */\n const participantListStrings = useLocale().strings.ParticipantList;\n /* @conditional-compile-remove(hide-attendee-name) */\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n /* @conditional-compile-remove(raise-hand) */\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n /* @conditional-compile-remove(total-participant-count) */\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n /* @conditional-compile-remove(raise-hand) */\n theme,\n /* @conditional-compile-remove(hide-attendee-name) */\n attendeeRoleString\n )\n )}\n {\n /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
|
1
|
+
{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\n/* @conditional-compile-remove(total-participant-count) */ /* @conditional-compile-remove(raise-hand) */\nimport { Text } from '@fluentui/react';\n/* @conditional-compile-remove(raise-hand) */\nimport { useTheme, CallingTheme } from '../theming';\n/* @conditional-compile-remove(raise-hand) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\n/* @conditional-compile-remove(raise-hand) */\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/* @conditional-compile-remove(total-participant-count) */\n/**\n * Strings for the {@link ParticipantList}.\n *\n * @beta\n */\nexport interface ParticipantListStrings {\n /**\n * String for rendering the count of participants not contained in the displayed participant list\n */\n overflowParticipantCount?: string;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n /** Participants in user call or chat */\n participants: ParticipantListParticipant[];\n /** User ID of user */\n myUserId?: string;\n /**\n * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n *\n * @defaultValue `false`\n */\n excludeMe?: boolean;\n /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` */\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional callback to render the context menu for each participant */\n onRemoveParticipant?: (userId: string) => void;\n /** Optional callback to render custom menu items for each participant. */\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /** Optional callback when rendered ParticipantItem is clicked */\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /** Optional callback to generate context menu item to stop spotlight of each participant */\n onStartSpotlight?: (userId: string) => void;\n /** Optional callback to generate context menu item to stop spotlight of each participant */\n onStopSpotlight?: (userId: string) => void;\n /** Styles for the {@link ParticipantList} */\n styles?: ParticipantListStyles;\n /** Optional value to determine if the tooltip should be shown for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(total-participant-count) */\n /** Total number of people in the call. This number can be larger than the remote participant count. */\n totalParticipantCount?: number;\n /* @conditional-compile-remove(total-participant-count) */\n /** Strings for the participant list */\n strings?: ParticipantListStrings;\n /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */\n participantAriaLabelledBy?: string;\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n attendeeRoleString?: string\n): JSX.Element | null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence | undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n let displayName = participant.displayName;\n\n /* @conditional-compile-remove(hide-attendee-name) */\n const formatDisplayName = (): string | undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n /* @conditional-compile-remove(hide-attendee-name) */\n displayName = formatDisplayName();\n\n /* @conditional-compile-remove(raise-hand) */\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing ||\n callingParticipant?.isMuted ||\n /* @conditional-compile-remove(raise-hand) */ callingParticipant?.raisedHand\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {\n /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )\n }\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {\n /* @conditional-compile-remove(spotlight) */ callingParticipant.isSpotlighted && (\n <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n )\n }\n </Stack>\n )\n : () => null;\n\n /* @conditional-compile-remove(raise-hand) */\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={() => onParticipantClick?.(participant)}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n />\n );\n};\n\n/**\n * Sort participants by raised hand order position\n */\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n /* @conditional-compile-remove(raise-hand) */\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n /* @conditional-compile-remove(raise-hand) */\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string | undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe || !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n /* @conditional-compile-remove(total-participant-count) */\n totalParticipantCount,\n /* @conditional-compile-remove(total-participant-count) */\n strings,\n participantAriaLabelledBy\n } = props;\n\n /* @conditional-compile-remove(raise-hand) */\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n /* @conditional-compile-remove(total-participant-count) */\n const participantListStrings = useLocale().strings.ParticipantList;\n /* @conditional-compile-remove(hide-attendee-name) */\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n /* @conditional-compile-remove(raise-hand) */\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n /* @conditional-compile-remove(total-participant-count) */\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n /* @conditional-compile-remove(raise-hand) */\n theme,\n /* @conditional-compile-remove(hide-attendee-name) */\n attendeeRoleString\n )\n )}\n {\n /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
|
@@ -31,7 +31,10 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
|
|
31
31
|
onUnpinParticipant?: ((userId: string) => void) | undefined;
|
32
32
|
onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
|
33
33
|
isPinned?: boolean | undefined;
|
34
|
+
spotlightedParticipantUserIds?: string[] | undefined;
|
34
35
|
isSpotlighted?: boolean | undefined;
|
36
|
+
onStartSpotlight?: ((userId: string) => void) | undefined;
|
37
|
+
onStopSpotlight?: ((userId: string) => void) | undefined;
|
35
38
|
disablePinMenuItem?: boolean | undefined;
|
36
39
|
toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
|
37
40
|
reactionResources?: ReactionResources | undefined;
|
@@ -25,7 +25,10 @@ export const _RemoteVideoTile = React.memo((props) => {
|
|
25
25
|
var _a;
|
26
26
|
const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
|
27
27
|
isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant,
|
28
|
-
/* @conditional-compile-remove(spotlight) */
|
28
|
+
/* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
|
29
|
+
/* @conditional-compile-remove(spotlight) */ isSpotlighted,
|
30
|
+
/* @conditional-compile-remove(spotlight) */ onStartSpotlight,
|
31
|
+
/* @conditional-compile-remove(spotlight) */ onStopSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings,
|
29
32
|
/* @conditional-compile-remove(reaction) */ reactionResources } = props;
|
30
33
|
const remoteVideoStreamProps = useMemo(() => ({
|
31
34
|
isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
|
@@ -60,7 +63,11 @@ export const _RemoteVideoTile = React.memo((props) => {
|
|
60
63
|
onUnpinParticipant,
|
61
64
|
onUpdateScalingMode,
|
62
65
|
disablePinMenuItem,
|
63
|
-
toggleAnnouncerString
|
66
|
+
toggleAnnouncerString,
|
67
|
+
/* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
|
68
|
+
/* @conditional-compile-remove(spotlight) */ isSpotlighted,
|
69
|
+
/* @conditional-compile-remove(spotlight) */ onStartSpotlight,
|
70
|
+
/* @conditional-compile-remove(spotlight) */ onStopSpotlight
|
64
71
|
});
|
65
72
|
const videoTileContextualMenuProps = useMemo(() => {
|
66
73
|
if (menuKind !== 'contextual') {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n personaMinSize?: number;\n strings?: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n /* @conditional-compile-remove(reaction) */ reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n /* @conditional-compile-remove(reaction) */ reactionResources\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n /* @conditional-compile-remove(pinned-participants) */\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual') {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n let displayName = remoteParticipant.displayName || strings?.displayNamePlaceholder;\n /* @conditional-compile-remove(hide-attendee-name) */\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n /* @conditional-compile-remove(hide-attendee-name) */\n const formatDisplayName = (): string | undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n\n /* @conditional-compile-remove(hide-attendee-name) */\n displayName = formatDisplayName();\n return (\n <Stack\n /* @conditional-compile-remove(pinned-participants) */\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n /* @conditional-compile-remove(pinned-participants) */\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={remoteParticipant.displayName ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n /* @conditional-compile-remove(raise-hand) */\n raisedHand={remoteParticipant.raisedHand}\n /* @conditional-compile-remove(reaction) */\n reaction={remoteParticipant.reaction}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participantState}\n {...videoTileContextualMenuProps}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={props.isPinned}\n /* @conditional-compile-remove(pinned-participants) */\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n /* @conditional-compile-remove(spotlight) */\n isSpotlighted={isSpotlighted}\n /* @conditional-compile-remove(reaction) */\n reactionResources={reactionResources}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n /* @conditional-compile-remove(pinned-participants) */\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
|
1
|
+
{"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(hide-attendee-name) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n *\n * @internal\n */\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n personaMinSize?: number;\n strings?: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds?: string[];\n /* @conditional-compile-remove(spotlight) */ isSpotlighted?: boolean;\n /* @conditional-compile-remove(spotlight) */ onStartSpotlight?: (userId: string) => void;\n /* @conditional-compile-remove(spotlight) */ onStopSpotlight?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n /* @conditional-compile-remove(reaction) */ reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n /* @conditional-compile-remove(reaction) */ reactionResources\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n /* @conditional-compile-remove(pinned-participants) */\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n /* @conditional-compile-remove(spotlight) */ onStopSpotlight\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual') {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n let displayName = remoteParticipant.displayName || strings?.displayNamePlaceholder;\n /* @conditional-compile-remove(hide-attendee-name) */\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n /* @conditional-compile-remove(hide-attendee-name) */\n const formatDisplayName = (): string | undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n\n /* @conditional-compile-remove(hide-attendee-name) */\n displayName = formatDisplayName();\n return (\n <Stack\n /* @conditional-compile-remove(pinned-participants) */\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n /* @conditional-compile-remove(pinned-participants) */\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={remoteParticipant.displayName ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n /* @conditional-compile-remove(raise-hand) */\n raisedHand={remoteParticipant.raisedHand}\n /* @conditional-compile-remove(reaction) */\n reaction={remoteParticipant.reaction}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participantState}\n {...videoTileContextualMenuProps}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={props.isPinned}\n /* @conditional-compile-remove(pinned-participants) */\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n /* @conditional-compile-remove(spotlight) */\n isSpotlighted={isSpotlighted}\n /* @conditional-compile-remove(reaction) */\n reactionResources={reactionResources}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n /* @conditional-compile-remove(pinned-participants) */\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
|
@@ -15,6 +15,9 @@ export declare const useVideoTileContextualMenuProps: (props: {
|
|
15
15
|
unpinParticipantMenuItemAriaLabel?: string | undefined;
|
16
16
|
pinnedParticipantAnnouncementAriaLabel?: string | undefined;
|
17
17
|
unpinnedParticipantAnnouncementAriaLabel?: string | undefined;
|
18
|
+
startSpotlightVideoTileMenuLabel?: string | undefined;
|
19
|
+
addSpotlightVideoTileMenuLabel?: string | undefined;
|
20
|
+
stopSpotlightVideoTileMenuLabel?: string | undefined;
|
18
21
|
} | undefined;
|
19
22
|
view?: {
|
20
23
|
updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
|
@@ -25,5 +28,9 @@ export declare const useVideoTileContextualMenuProps: (props: {
|
|
25
28
|
onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
|
26
29
|
disablePinMenuItem?: boolean | undefined;
|
27
30
|
toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
|
31
|
+
isSpotlighted?: boolean | undefined;
|
32
|
+
spotlightedParticipantUserIds?: string[] | undefined;
|
33
|
+
onStartSpotlight?: ((userId: string) => void) | undefined;
|
34
|
+
onStopSpotlight?: ((userId: string) => void) | undefined;
|
28
35
|
}) => IContextualMenuProps | undefined;
|
29
36
|
//# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map
|