@azure/communication-react 1.7.0-alpha-202307220013 → 1.7.0-alpha-202307250014
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/dist-cjs/communication-react/index.js +13 -9
- 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/CaptionsBanner.js +3 -3
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.d.ts +2 -2
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js +9 -5
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/CaptionsBanner.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/CaptionsBanner.js.map +1 -1
- package/package.json +8 -8
|
@@ -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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.7.0-alpha-202307250014';\n"]}
|
|
@@ -4,7 +4,7 @@ import { Stack, FocusZone, Spinner } from '@fluentui/react';
|
|
|
4
4
|
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
|
5
5
|
import { Ref } from "../../../northstar-wrapper/src";
|
|
6
6
|
import { _Caption } from './Caption';
|
|
7
|
-
import { captionContainerClassName,
|
|
7
|
+
import { captionContainerClassName, captionsBannerStyles, captionsContainerClassName, loadingBannerStyles } from './styles/Captions.style';
|
|
8
8
|
/**
|
|
9
9
|
* @internal
|
|
10
10
|
* A component for displaying a CaptionsBanner with user icon, displayName and captions text.
|
|
@@ -41,11 +41,11 @@ export const _CaptionsBanner = (props) => {
|
|
|
41
41
|
}, [captions, isAtBottomOfScroll]);
|
|
42
42
|
return (React.createElement(React.Fragment, null, startCaptionsInProgress && (React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
|
|
43
43
|
isCaptionsOn && (React.createElement(Ref, { innerRef: captionsScrollDivRef },
|
|
44
|
-
React.createElement(Stack, { verticalAlign: "start", styles:
|
|
44
|
+
React.createElement(Stack, { verticalAlign: "start", styles: captionsBannerStyles(formFactor) }, captions.map((caption) => {
|
|
45
45
|
return (React.createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
|
|
46
46
|
React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
|
|
47
47
|
})))),
|
|
48
|
-
!isCaptionsOn && (React.createElement(Stack, { verticalAlign: "center",
|
|
48
|
+
!isCaptionsOn && (React.createElement(Stack, { verticalAlign: "center", styles: loadingBannerStyles(formFactor), "data-is-focusable": true },
|
|
49
49
|
React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
|
|
50
50
|
};
|
|
51
51
|
//# sourceMappingURL=CaptionsBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,GAAG,EAAE,uCAAoC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,
|
|
1
|
+
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack, FocusZone, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@internal/northstar-wrapper';\nimport { _Caption } from './Caption';\nimport {\n captionContainerClassName,\n captionsBannerStyles,\n captionsContainerClassName,\n loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n id: string;\n displayName: string;\n captionText: string;\n userId?: string;\n};\n\n/**\n * @internal\n * strings for captions banner\n */\nexport interface _CaptionsBannerStrings {\n captionsBannerSpinnerText?: string;\n}\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n captions: _CaptionsInfo[];\n isCaptionsOn?: boolean;\n startCaptionsInProgress?: boolean;\n /**\n * Optional callback to override render of the avatar.\n *\n * @param userId - user Id\n */\n onRenderAvatar?: OnRenderAvatarCallback;\n strings?: _CaptionsBannerStrings;\n /**\n * Optional form factor for the component.\n * @defaultValue 'default'\n */\n formFactor?: 'default' | 'compact';\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;\n const captionsScrollDivRef = useRef<HTMLElement>(null);\n const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n\n const scrollToBottom = (): void => {\n if (captionsScrollDivRef.current) {\n captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n }\n };\n\n const handleScrollToTheBottom = useCallback((): void => {\n if (!captionsScrollDivRef.current) {\n return;\n }\n const atBottom =\n Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n\n setIsAtBottomOfScroll(atBottom);\n }, []);\n\n useEffect(() => {\n const captionsScrollDiv = captionsScrollDivRef.current;\n captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n return () => {\n captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n };\n }, [handleScrollToTheBottom, isCaptionsOn]);\n\n useEffect(() => {\n // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n if (isAtBottomOfScroll) {\n scrollToBottom();\n }\n }, [captions, isAtBottomOfScroll]);\n\n return (\n <>\n {startCaptionsInProgress && (\n <FocusZone as=\"ul\" className={captionsContainerClassName}>\n {isCaptionsOn && (\n <Ref innerRef={captionsScrollDivRef}>\n <Stack verticalAlign=\"start\" styles={captionsBannerStyles(formFactor)}>\n {captions.map((caption) => {\n return (\n <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n </div>\n );\n })}\n </Stack>\n </Ref>\n )}\n {!isCaptionsOn && (\n <Stack verticalAlign=\"center\" styles={loadingBannerStyles(formFactor)} data-is-focusable={true}>\n <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n </Stack>\n )}\n </FocusZone>\n )}\n </>\n );\n};\n\"../../../northstar-wrapper/src\""]}
|
|
@@ -22,11 +22,11 @@ export declare const captionContainerClassName: string;
|
|
|
22
22
|
/**
|
|
23
23
|
* @private
|
|
24
24
|
*/
|
|
25
|
-
export declare const
|
|
25
|
+
export declare const captionsBannerStyles: (formFactor: 'default' | 'compact') => IStackStyles;
|
|
26
26
|
/**
|
|
27
27
|
* @private
|
|
28
28
|
*/
|
|
29
|
-
export declare const
|
|
29
|
+
export declare const loadingBannerStyles: (formFactor: 'default' | 'compact') => IStackStyles;
|
|
30
30
|
/**
|
|
31
31
|
* @private
|
|
32
32
|
*/
|
|
@@ -44,17 +44,21 @@ export const captionContainerClassName = mergeStyles({
|
|
|
44
44
|
/**
|
|
45
45
|
* @private
|
|
46
46
|
*/
|
|
47
|
-
export const
|
|
47
|
+
export const captionsBannerStyles = (formFactor) => {
|
|
48
48
|
return {
|
|
49
|
-
root: Object.assign({ overflowX: 'hidden', height: formFactor === 'compact' ? '4.5rem' : '
|
|
49
|
+
root: Object.assign({ overflowX: 'hidden', height: formFactor === 'compact' ? '4.5rem' : '8.75rem', overflowY: 'auto' }, scrollbarStyles)
|
|
50
50
|
};
|
|
51
51
|
};
|
|
52
52
|
/**
|
|
53
53
|
* @private
|
|
54
54
|
*/
|
|
55
|
-
export const
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
export const loadingBannerStyles = (formFactor) => {
|
|
56
|
+
return {
|
|
57
|
+
root: {
|
|
58
|
+
height: formFactor === 'compact' ? '4.5rem' : '8.75rem'
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
};
|
|
58
62
|
/**
|
|
59
63
|
* @private
|
|
60
64
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;CACX,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC;IACnD,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM;CACvB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;CACX,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC;IACnD,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM;CACvB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,UAAiC,EAAgB,EAAE;IACtF,OAAO;QACL,IAAI,kBACF,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvD,SAAS,EAAE,MAAM,IACd,eAAe,CACnB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,UAAiC,EAAgB,EAAE;IACrF,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACxD;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,WAAW,CAAC;IAC3D,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,WAAW,CAAC;IACvD,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;CACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { scrollbarStyles } from './Common.style';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n fontWeight: 400,\n fontSize: _pxToRem(12),\n lineHeight: _pxToRem(16)\n});\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n fontWeight: 400,\n fontSize: _pxToRem(16),\n lineHeight: _pxToRem(22),\n width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n margin: 0,\n padding: 0\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n marginTop: _pxToRem(6),\n marginBottom: _pxToRem(6),\n overflowAnchor: 'auto'\n});\n\n/**\n * @private\n */\nexport const captionsBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n return {\n root: {\n overflowX: 'hidden',\n height: formFactor === 'compact' ? '4.5rem' : '8.75rem',\n overflowY: 'auto',\n ...scrollbarStyles\n }\n };\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n return {\n root: {\n height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n }\n };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n width: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n});\n\"../../../../acs-ui-common/src\""]}
|
|
@@ -59,7 +59,7 @@ export const CaptionsBanner = (props) => {
|
|
|
59
59
|
/* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
|
|
60
60
|
/* @conditional-compile-remove(close-captions) */ React.createElement("div", { className: containerClassName },
|
|
61
61
|
React.createElement(Stack, { horizontalAlign: "center" },
|
|
62
|
-
React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
|
|
62
|
+
React.createElement(Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth, maxWidth: '35rem' } },
|
|
63
63
|
React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
|
|
64
64
|
!props.isMobile && captionsBannerProps.isCaptionsOn && (React.createElement("div", { className: floatingChildClassName },
|
|
65
65
|
React.createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAA0B,yCAAmC;AAGrF,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,iDAAiD;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,mDAA6C;AAE/E,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,iDAAiD;AACjD,MAAM,qBAAqB,GAAG,KAAK,CAAC;AACpC,iDAAiD;AACjD,MAAM,sBAAsB,GAAG,KAAK,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC1E,iDAAiD;IACjD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACxE,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,iDAAiD;IACjD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,GAAS,EAAE;QAC3C,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC;QACrC,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,iDAAiD;IACjD,MAAM,qBAAqB,GAA2B;QACpD,yBAAyB,EAAE,OAAO,CAAC,yBAAyB;KAC7D,CAAC;IACF,OAAO,CACL;QAEI,iDAAiD,CAAC,sBAAsB,IAAI,CAC1E,oBAAC,qBAAqB,IACpB,yBAAyB,EAAE,sBAAsB,EACjD,yBAAyB,EAAE,yBAAyB,GACpD,CACH;QAGD,iDAAiD,CAAC,6BAAK,SAAS,EAAE,kBAAkB;YAClF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;gBAC7B,oBAAC,KAAK,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,iDAAiD;AACjD,OAAO,EAAE,eAAe,EAA0B,yCAAmC;AAGrF,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,iDAAiD;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,iDAAiD;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,iDAAiD;AACjD,OAAO,EAAE,uBAAuB,EAAE,mDAA6C;AAE/E,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,iDAAiD;AACjD,MAAM,qBAAqB,GAAG,KAAK,CAAC;AACpC,iDAAiD;AACjD,MAAM,sBAAsB,GAAG,KAAK,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC1E,iDAAiD;IACjD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACxE,iDAAiD;IACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,iDAAiD;IACjD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,iDAAiD;IACjD,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,GAAS,EAAE;QAC3C,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,iDAAiD;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC;QACrC,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,iDAAiD;IACjD,MAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IAEH,iDAAiD;IACjD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,iDAAiD;IACjD,MAAM,qBAAqB,GAA2B;QACpD,yBAAyB,EAAE,OAAO,CAAC,yBAAyB;KAC7D,CAAC;IACF,OAAO,CACL;QAEI,iDAAiD,CAAC,sBAAsB,IAAI,CAC1E,oBAAC,qBAAqB,IACpB,yBAAyB,EAAE,sBAAsB,EACjD,yBAAyB,EAAE,yBAAyB,GACpD,CACH;QAGD,iDAAiD,CAAC,6BAAK,SAAS,EAAE,kBAAkB;YAClF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;gBAC7B,oBAAC,KAAK,CAAC,IAAI,IACT,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB,EAAE,QAAQ,EAAE,OAAO,EAAE;oBAEpG,oBAAC,eAAe,oBACV,mBAAmB,EACnB,QAAQ,IACZ,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,OAAO,EAAE,qBAAqB,IAC9B,CACS,CACP;YACP,CAAC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,CAAC,YAAY,IAAI,CACtD,6BAAK,SAAS,EAAE,sBAAsB;gBACpC,oBAAC,wBAAwB,IAAC,uBAAuB,EAAE,uBAAuB,GAAI,CAC1E,CACP,CACG,CAEP,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(close-captions) */\nimport { _CaptionsBanner, _CaptionsBannerStrings } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\n/* @conditional-compile-remove(close-captions) */\nimport { mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\n/* @conditional-compile-remove(close-captions) */\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\n/* @conditional-compile-remove(close-captions) */\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\n/* @conditional-compile-remove(close-captions) */\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\n\n/* @conditional-compile-remove(close-captions) */\nimport { useLocale } from '../localization';\n\n/* @conditional-compile-remove(close-captions) */\nconst mobileViewBannerWidth = '90%';\n/* @conditional-compile-remove(close-captions) */\nconst desktopViewBannerWidth = '50%';\n\n/** @private */\nexport const CaptionsBanner = (props: { isMobile: boolean }): JSX.Element => {\n /* @conditional-compile-remove(close-captions) */\n const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n /* @conditional-compile-remove(close-captions) */\n const handlers = useHandlers(_CaptionsBanner);\n /* @conditional-compile-remove(close-captions) */\n const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n /* @conditional-compile-remove(close-captions) */\n const onClickCaptionsSettings = (): void => {\n setIsCaptionsSettingsOpen(true);\n };\n /* @conditional-compile-remove(close-captions) */\n const onDismissCaptionsSettings = (): void => {\n setIsCaptionsSettingsOpen(false);\n };\n /* @conditional-compile-remove(close-captions) */\n const containerClassName = mergeStyles({\n position: 'relative'\n });\n /* @conditional-compile-remove(close-captions) */\n const floatingChildClassName = mergeStyles({\n position: 'absolute',\n right: 0,\n top: 0\n });\n\n /* @conditional-compile-remove(close-captions) */\n const strings = useLocale().strings.call;\n\n /* @conditional-compile-remove(close-captions) */\n const captionsBannerStrings: _CaptionsBannerStrings = {\n captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n };\n return (\n <>\n {\n /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (\n <CaptionsSettingsModal\n showCaptionsSettingsModal={isCaptionsSettingsOpen}\n onDismissCaptionsSettings={onDismissCaptionsSettings}\n />\n )\n }\n {\n /* @conditional-compile-remove(close-captions) */ <div className={containerClassName}>\n <Stack horizontalAlign=\"center\">\n <Stack.Item\n style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth, maxWidth: '35rem' }}\n >\n <_CaptionsBanner\n {...captionsBannerProps}\n {...handlers}\n formFactor={props.isMobile ? 'compact' : 'default'}\n strings={captionsBannerStrings}\n />\n </Stack.Item>\n </Stack>\n {!props.isMobile && captionsBannerProps.isCaptionsOn && (\n <div className={floatingChildClassName}>\n <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} />\n </div>\n )}\n </div>\n }\n </>\n );\n};\n\"../../../../react-components/src\"\"../../../../calling-component-bindings/src\""]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.7.0-alpha-
|
|
3
|
+
"version": "1.7.0-alpha-202307250014",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|
|
@@ -95,13 +95,13 @@
|
|
|
95
95
|
"@azure/core-auth": "^1.4.0",
|
|
96
96
|
"@babel/cli": "~7.16.0",
|
|
97
97
|
"@babel/core": "~7.16.0",
|
|
98
|
-
"@internal/calling-component-bindings": "1.7.0-alpha-
|
|
99
|
-
"@internal/calling-stateful-client": "1.7.0-alpha-
|
|
100
|
-
"@internal/chat-component-bindings": "1.7.0-alpha-
|
|
101
|
-
"@internal/chat-stateful-client": "1.7.0-alpha-
|
|
102
|
-
"@internal/fake-backends": "1.7.0-alpha-
|
|
103
|
-
"@internal/react-components": "1.7.0-alpha-
|
|
104
|
-
"@internal/react-composites": "1.7.0-alpha-
|
|
98
|
+
"@internal/calling-component-bindings": "1.7.0-alpha-202307250014",
|
|
99
|
+
"@internal/calling-stateful-client": "1.7.0-alpha-202307250014",
|
|
100
|
+
"@internal/chat-component-bindings": "1.7.0-alpha-202307250014",
|
|
101
|
+
"@internal/chat-stateful-client": "1.7.0-alpha-202307250014",
|
|
102
|
+
"@internal/fake-backends": "1.7.0-alpha-202307250014",
|
|
103
|
+
"@internal/react-components": "1.7.0-alpha-202307250014",
|
|
104
|
+
"@internal/react-composites": "1.7.0-alpha-202307250014",
|
|
105
105
|
"@fluentui/react-northstar": "0.61.0",
|
|
106
106
|
"@microsoft/api-documenter": "~7.12.11",
|
|
107
107
|
"@microsoft/api-extractor": "~7.18.0",
|