@azure/communication-react 1.4.3-alpha-202212070014.0 → 1.4.3-alpha-202212090014.0
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 +1292 -1285
- 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/calling-component-bindings/src/utils/videoGalleryUtils.d.ts +12 -0
- package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js +16 -0
- package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/videoGallerySelector.js +2 -13
- package/dist/dist-esm/calling-component-bindings/src/videoGallerySelector.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/DomainPermissionsScaffolding.js +1 -1
- package/dist/dist-esm/react-components/src/components/DevicePermissions/DomainPermissionsScaffolding.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +8 -0
- package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.d.ts +12 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +41 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts +49 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +61 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts +61 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +117 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.d.ts +14 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.js +28 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/videoGalleryUtils.js +5 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/videoGalleryUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +9 -120
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.d.ts +1 -95
- package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.js +3 -138
- package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.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,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-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,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202212090014.0';\n"]}
|
|
@@ -9,4 +9,16 @@ export declare const _videoGalleryRemoteParticipantsMemo: (remoteParticipants: R
|
|
|
9
9
|
export declare const convertRemoteParticipantToVideoGalleryRemoteParticipant: (userId: string, isMuted: boolean, isSpeaking: boolean, videoStreams: {
|
|
10
10
|
[key: number]: RemoteVideoStreamState;
|
|
11
11
|
}, state: RemoteParticipantConnectionState, displayName?: string | undefined) => VideoGalleryRemoteParticipant;
|
|
12
|
+
/** @private */
|
|
13
|
+
export declare const memoizeLocalParticipant: (this: any, identifier: any, displayName: any, isMuted: any, isScreenSharingOn: any, localVideoStream: any) => {
|
|
14
|
+
userId: any;
|
|
15
|
+
displayName: any;
|
|
16
|
+
isMuted: any;
|
|
17
|
+
isScreenSharingOn: any;
|
|
18
|
+
videoStream: {
|
|
19
|
+
isAvailable: boolean;
|
|
20
|
+
isMirrored: any;
|
|
21
|
+
renderElement: any;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
12
24
|
//# sourceMappingURL=videoGalleryUtils.d.ts.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { memoizeFnAll, toFlatCommunicationIdentifier } from "../../../acs-ui-common/src";
|
|
4
|
+
import memoizeOne from 'memoize-one';
|
|
4
5
|
import { checkIsSpeaking } from './SelectorUtils';
|
|
5
6
|
/** @internal */
|
|
6
7
|
export const _dominantSpeakersWithFlatId = (dominantSpeakers) => {
|
|
@@ -72,4 +73,19 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
|
|
|
72
73
|
scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
|
|
73
74
|
};
|
|
74
75
|
};
|
|
76
|
+
/** @private */
|
|
77
|
+
export const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => {
|
|
78
|
+
var _a, _b;
|
|
79
|
+
return ({
|
|
80
|
+
userId: identifier,
|
|
81
|
+
displayName: displayName !== null && displayName !== void 0 ? displayName : '',
|
|
82
|
+
isMuted: isMuted,
|
|
83
|
+
isScreenSharingOn: isScreenSharingOn,
|
|
84
|
+
videoStream: {
|
|
85
|
+
isAvailable: !!localVideoStream,
|
|
86
|
+
isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
|
|
87
|
+
renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
});
|
|
75
91
|
//# sourceMappingURL=videoGalleryUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/videoGalleryUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n DominantSpeakersInfo,\n RemoteParticipantState as RemoteParticipantConnectionState\n} from '@azure/communication-calling';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryStream } from '@internal/react-components';\nimport { checkIsSpeaking } from './SelectorUtils';\n\n/** @internal */\nexport const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined | string[] => {\n return dominantSpeakers?.speakersList?.map(toFlatCommunicationIdentifier);\n};\n\n/** @internal */\nexport const _videoGalleryRemoteParticipantsMemo = (\n remoteParticipants: RemoteParticipantState[] | undefined\n): VideoGalleryRemoteParticipant[] => {\n if (!remoteParticipants) {\n return [];\n }\n return memoizedAllConvertRemoteParticipant((memoizedFn) => {\n return Object.values(remoteParticipants)\n .filter((participant: RemoteParticipantState) => {\n return participant.state !== 'InLobby';\n })\n .map((participant: RemoteParticipantState) => {\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n participant.state,\n participant.displayName\n );\n });\n });\n};\n\nconst memoizedAllConvertRemoteParticipant = memoizeFnAll(\n (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n ): VideoGalleryRemoteParticipant => {\n return convertRemoteParticipantToVideoGalleryRemoteParticipant(\n userId,\n isMuted,\n isSpeaking,\n videoStreams,\n state,\n displayName\n );\n }\n);\n\n/** @private */\nexport const convertRemoteParticipantToVideoGalleryRemoteParticipant = (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n): VideoGalleryRemoteParticipant => {\n const rawVideoStreamsArray = Object.values(videoStreams);\n let videoStream: VideoGalleryStream | undefined = undefined;\n let screenShareStream: VideoGalleryStream | undefined = undefined;\n\n if (rawVideoStreamsArray[0]) {\n if (rawVideoStreamsArray[0].mediaStreamType === 'Video') {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n } else {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n }\n }\n\n if (rawVideoStreamsArray[1]) {\n if (rawVideoStreamsArray[1].mediaStreamType === 'ScreenSharing') {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n } else {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n }\n }\n\n return {\n userId,\n displayName,\n isMuted,\n isSpeaking,\n videoStream,\n screenShareStream,\n isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n state\n };\n};\n\nconst convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamState): VideoGalleryStream => {\n return {\n id: stream.id,\n isAvailable: stream.isAvailable,\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: stream.isReceiving,\n isMirrored: stream.view?.isMirrored,\n renderElement: stream.view?.target,\n /* @conditional-compile-remove(pinned-participants) */\n scalingMode: stream.view?.scalingMode\n };\n};\n\"../../../acs-ui-common/src\"\"../../../calling-stateful-client/src\"\"../../../react-components/src\""]}
|
|
1
|
+
{"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/videoGalleryUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n DominantSpeakersInfo,\n RemoteParticipantState as RemoteParticipantConnectionState\n} from '@azure/communication-calling';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryStream } from '@internal/react-components';\nimport memoizeOne from 'memoize-one';\nimport { checkIsSpeaking } from './SelectorUtils';\n\n/** @internal */\nexport const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined | string[] => {\n return dominantSpeakers?.speakersList?.map(toFlatCommunicationIdentifier);\n};\n\n/** @internal */\nexport const _videoGalleryRemoteParticipantsMemo = (\n remoteParticipants: RemoteParticipantState[] | undefined\n): VideoGalleryRemoteParticipant[] => {\n if (!remoteParticipants) {\n return [];\n }\n return memoizedAllConvertRemoteParticipant((memoizedFn) => {\n return Object.values(remoteParticipants)\n .filter((participant: RemoteParticipantState) => {\n return participant.state !== 'InLobby';\n })\n .map((participant: RemoteParticipantState) => {\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n participant.state,\n participant.displayName\n );\n });\n });\n};\n\nconst memoizedAllConvertRemoteParticipant = memoizeFnAll(\n (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n ): VideoGalleryRemoteParticipant => {\n return convertRemoteParticipantToVideoGalleryRemoteParticipant(\n userId,\n isMuted,\n isSpeaking,\n videoStreams,\n state,\n displayName\n );\n }\n);\n\n/** @private */\nexport const convertRemoteParticipantToVideoGalleryRemoteParticipant = (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n): VideoGalleryRemoteParticipant => {\n const rawVideoStreamsArray = Object.values(videoStreams);\n let videoStream: VideoGalleryStream | undefined = undefined;\n let screenShareStream: VideoGalleryStream | undefined = undefined;\n\n if (rawVideoStreamsArray[0]) {\n if (rawVideoStreamsArray[0].mediaStreamType === 'Video') {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n } else {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n }\n }\n\n if (rawVideoStreamsArray[1]) {\n if (rawVideoStreamsArray[1].mediaStreamType === 'ScreenSharing') {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n } else {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n }\n }\n\n return {\n userId,\n displayName,\n isMuted,\n isSpeaking,\n videoStream,\n screenShareStream,\n isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n state\n };\n};\n\nconst convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamState): VideoGalleryStream => {\n return {\n id: stream.id,\n isAvailable: stream.isAvailable,\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: stream.isReceiving,\n isMirrored: stream.view?.isMirrored,\n renderElement: stream.view?.target,\n /* @conditional-compile-remove(pinned-participants) */\n scalingMode: stream.view?.scalingMode\n };\n};\n\n/** @private */\nexport const memoizeLocalParticipant = memoizeOne(\n (identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => ({\n userId: identifier,\n displayName: displayName ?? '',\n isMuted: isMuted,\n isScreenSharingOn: isScreenSharingOn,\n videoStream: {\n isAvailable: !!localVideoStream,\n isMirrored: localVideoStream?.view?.isMirrored,\n renderElement: localVideoStream?.view?.target\n }\n })\n);\n\"../../../acs-ui-common/src\"\"../../../calling-stateful-client/src\"\"../../../react-components/src\""]}
|
|
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
|
|
|
5
5
|
import { getDisplayName, getDominantSpeakers, getIdentifier, getIsMuted, getIsScreenSharingOn, getLocalVideoStreams, getRemoteParticipants, getScreenShareRemoteParticipant } from './baseSelectors';
|
|
6
6
|
import { _updateUserDisplayNames } from './utils/callUtils';
|
|
7
7
|
import { checkIsSpeaking } from './utils/SelectorUtils';
|
|
8
|
-
import { _videoGalleryRemoteParticipantsMemo, _dominantSpeakersWithFlatId, convertRemoteParticipantToVideoGalleryRemoteParticipant } from './utils/videoGalleryUtils';
|
|
8
|
+
import { _videoGalleryRemoteParticipantsMemo, _dominantSpeakersWithFlatId, convertRemoteParticipantToVideoGalleryRemoteParticipant, memoizeLocalParticipant } from './utils/videoGalleryUtils';
|
|
9
9
|
/**
|
|
10
10
|
* Provides data attributes to {@link VideoGallery} component.
|
|
11
11
|
* @public
|
|
@@ -20,7 +20,6 @@ export const videoGallerySelector = createSelector([
|
|
|
20
20
|
getIdentifier,
|
|
21
21
|
getDominantSpeakers
|
|
22
22
|
], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers) => {
|
|
23
|
-
var _a, _b;
|
|
24
23
|
const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
|
|
25
24
|
? remoteParticipants[screenShareRemoteParticipantId]
|
|
26
25
|
: undefined;
|
|
@@ -33,17 +32,7 @@ export const videoGallerySelector = createSelector([
|
|
|
33
32
|
screenShareParticipant: screenShareRemoteParticipant
|
|
34
33
|
? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
|
|
35
34
|
: undefined,
|
|
36
|
-
localParticipant:
|
|
37
|
-
userId: identifier,
|
|
38
|
-
displayName: displayName !== null && displayName !== void 0 ? displayName : '',
|
|
39
|
-
isMuted: isMuted,
|
|
40
|
-
isScreenSharingOn: isScreenSharingOn,
|
|
41
|
-
videoStream: {
|
|
42
|
-
isAvailable: !!localVideoStream,
|
|
43
|
-
isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
|
|
44
|
-
renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
|
|
45
|
-
}
|
|
46
|
-
},
|
|
35
|
+
localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),
|
|
47
36
|
remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
|
|
48
37
|
dominantSpeakers: dominantSpeakerIds
|
|
49
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"videoGallerySelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/videoGallerySelector.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,6BAA6B,EAAE,gCAAgC;AAGxE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAEL,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EACL,mCAAmC,EACnC,2BAA2B,EAC3B,uDAAuD,
|
|
1
|
+
{"version":3,"file":"videoGallerySelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/videoGallerySelector.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,6BAA6B,EAAE,gCAAgC;AAGxE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAEL,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EACL,mCAAmC,EACnC,2BAA2B,EAC3B,uDAAuD,EACvD,uBAAuB,EACxB,MAAM,2BAA2B,CAAC;AAiBnC;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAyB,cAAc,CACtE;IACE,+BAA+B;IAC/B,qBAAqB;IACrB,oBAAoB;IACpB,UAAU;IACV,oBAAoB;IACpB,cAAc;IACd,aAAa;IACb,mBAAmB;CACpB,EACD,CACE,8BAA8B,EAC9B,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,iBAAiB,EACjB,WAA+B,EAC/B,UAAkB,EAClB,gBAAgB,EAChB,EAAE;IACF,MAAM,4BAA4B,GAChC,8BAA8B,IAAI,kBAAkB;QAClD,CAAC,CAAC,kBAAkB,CAAC,8BAA8B,CAAC;QACpD,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,gBAAgB,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,KAAK,OAAO,CAAC,CAAC;IAEvF,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,gBAAgB,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAA2B,EAAE,CAAC;IACvD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACpF,MAAM,oBAAoB,GAAG,EAAE,CAAC;IAChC,OAAO;QACL,sBAAsB,EAAE,4BAA4B;YAClD,CAAC,CAAC,uDAAuD,CACrD,6BAA6B,CAAC,4BAA4B,CAAC,UAAU,CAAC,EACtE,4BAA4B,CAAC,OAAO,EACpC,eAAe,CAAC,4BAA4B,CAAC,EAC7C,4BAA4B,CAAC,YAAY,EACzC,4BAA4B,CAAC,KAAK,EAClC,4BAA4B,CAAC,WAAW,CACzC;YACH,CAAC,CAAC,SAAS;QACb,gBAAgB,EAAE,uBAAuB,CAAC,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;QAChH,kBAAkB,EAAE,mCAAmC,CACrD,gCAAgC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAChH;QACD,gBAAgB,EAAE,kBAAkB;KACrC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,gCAAgC,GAAG,CAAC,kBAA4C,EAA4B,EAAE;IAClH,6CAA6C;IAC7C,OAAO,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;IACnD,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CallClientState, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport { VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport {\n CallingBaseSelectorProps,\n getDisplayName,\n getDominantSpeakers,\n getIdentifier,\n getIsMuted,\n getIsScreenSharingOn,\n getLocalVideoStreams,\n getRemoteParticipants,\n getScreenShareRemoteParticipant\n} from './baseSelectors';\nimport { _updateUserDisplayNames } from './utils/callUtils';\nimport { checkIsSpeaking } from './utils/SelectorUtils';\nimport {\n _videoGalleryRemoteParticipantsMemo,\n _dominantSpeakersWithFlatId,\n convertRemoteParticipantToVideoGalleryRemoteParticipant,\n memoizeLocalParticipant\n} from './utils/videoGalleryUtils';\n\n/**\n * Selector type for {@link VideoGallery} component.\n *\n * @public\n */\nexport type VideoGallerySelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n screenShareParticipant: VideoGalleryRemoteParticipant | undefined;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n dominantSpeakers?: string[];\n};\n\n/**\n * Provides data attributes to {@link VideoGallery} component.\n * @public\n */\nexport const videoGallerySelector: VideoGallerySelector = createSelector(\n [\n getScreenShareRemoteParticipant,\n getRemoteParticipants,\n getLocalVideoStreams,\n getIsMuted,\n getIsScreenSharingOn,\n getDisplayName,\n getIdentifier,\n getDominantSpeakers\n ],\n (\n screenShareRemoteParticipantId,\n remoteParticipants,\n localVideoStreams,\n isMuted,\n isScreenSharingOn,\n displayName: string | undefined,\n identifier: string,\n dominantSpeakers\n ) => {\n const screenShareRemoteParticipant =\n screenShareRemoteParticipantId && remoteParticipants\n ? remoteParticipants[screenShareRemoteParticipantId]\n : undefined;\n const localVideoStream = localVideoStreams?.find((i) => i.mediaStreamType === 'Video');\n\n const dominantSpeakerIds = _dominantSpeakersWithFlatId(dominantSpeakers);\n const dominantSpeakersMap: Record<string, number> = {};\n dominantSpeakerIds?.forEach((speaker, idx) => (dominantSpeakersMap[speaker] = idx));\n const noRemoteParticipants = [];\n return {\n screenShareParticipant: screenShareRemoteParticipant\n ? convertRemoteParticipantToVideoGalleryRemoteParticipant(\n toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier),\n screenShareRemoteParticipant.isMuted,\n checkIsSpeaking(screenShareRemoteParticipant),\n screenShareRemoteParticipant.videoStreams,\n screenShareRemoteParticipant.state,\n screenShareRemoteParticipant.displayName\n )\n : undefined,\n localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),\n remoteParticipants: _videoGalleryRemoteParticipantsMemo(\n updateUserDisplayNamesTrampoline(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)\n ),\n dominantSpeakers: dominantSpeakerIds\n };\n }\n);\n\nconst updateUserDisplayNamesTrampoline = (remoteParticipants: RemoteParticipantState[]): RemoteParticipantState[] => {\n /* @conditional-compile-remove(PSTN-calls) */\n return _updateUserDisplayNames(remoteParticipants);\n return remoteParticipants;\n};\n\"../../acs-ui-common/src\"\"../../calling-stateful-client/src\"\"../../react-components/src\""]}
|
|
@@ -14,7 +14,7 @@ export const DomainPermissionsContainer = (props) => {
|
|
|
14
14
|
var _a, _b;
|
|
15
15
|
const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
|
|
16
16
|
const theme = useTheme();
|
|
17
|
-
return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
|
|
17
|
+
return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
|
|
18
18
|
React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
|
|
19
19
|
props.cameraIconName && (React.createElement(Stack, null,
|
|
20
20
|
React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DomainPermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DomainPermissionsScaffolding.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EAGb,cAAc,EACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAY,sCAAgC;AAClE,OAAO,EACL,yBAAyB,EACzB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAsFzC;;GAEG;AACH,MAAM,MAAM,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAEvC,eAAe;AACf,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;;IAChG,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;
|
|
1
|
+
{"version":3,"file":"DomainPermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DomainPermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n Stack,\n Text,\n Link,\n Icon,\n useTheme,\n PrimaryButton,\n ILinkStyles,\n IButtonStyles,\n mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n iconBannerContainerStyles,\n iconContainerStyles,\n iconPrimaryStyles,\n linkTextStyles,\n primaryButtonStyles,\n primaryTextStyles,\n secondaryTextStyles,\n sparkleIconBackdropStyles,\n textContainerStyles\n} from '../styles/DomainPermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for DomainPermissions component.\n */\nexport interface DomainPermissionsContainerProps {\n /**\n * Name of application calling experience is in.\n */\n appName?: string;\n /**\n * Name of icon to be used for the camera icon.\n * If this is not provided the icon will not be shown.\n */\n cameraIconName?: string;\n /**\n * Name of icon to be used for the sparkle icon.\n * If this is not provided the icon will not be shown.\n */\n connectorIconName?: string;\n /**\n * Name of icon to be used for the mic icon.\n * If this is not provided the icon will not be shown.\n */\n microphoneIconName?: string;\n /**\n * Action to be taken by the more help link. Possible to send to external page or show other modal.\n * If this is not provided the button will not be shown.\n */\n onTroubleshootingClick?: () => void;\n /**\n * Action that is taken when the user clicks an optional primary button.\n * If this is not provided the button will not be shown.\n */\n onPrimaryButtonClick?: () => void;\n /**\n * Localization strings for DomainPermissions component.\n */\n strings?: DomainPermissionsStrings;\n /**\n * Styles for DomainPermissions component.\n */\n styles?: DomainPermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for DomainPermissions component\n */\nexport type DomainPermissionsStrings = {\n /**\n * Main text string.\n */\n primaryText?: string;\n /**\n * Subtext string.\n */\n secondaryText?: string;\n /**\n * More help link string.\n */\n linkText?: string;\n /**\n * Primary button text string.\n */\n primaryButtonText?: string;\n /**\n * Aria label describing the content of the container\n */\n ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link DomainPermissionsContainer}.\n *\n * @beta\n */\nexport interface DomainPermissionsStyles extends BaseCustomStyles {\n /** Styles for the primary button. */\n primaryButton?: IButtonStyles;\n /** Styles for the help troubleshooting link text. */\n troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const DomainPermissionsContainer = (props: DomainPermissionsContainerProps): JSX.Element => {\n const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n const theme = useTheme();\n\n return (\n <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n {props.cameraIconName && (\n <Stack>\n <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n </Stack>\n )}\n {props.connectorIconName && (\n <Stack styles={iconContainerStyles} horizontal>\n <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n </Stack>\n )}\n {props.microphoneIconName && (\n <Stack>\n <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n </Stack>\n )}\n </Stack>\n <Stack styles={textContainerStyles}>\n {strings && isValidString(strings?.primaryText) && (\n <Text styles={primaryTextStyles}>\n {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n </Text>\n )}\n {strings && isValidString(strings?.secondaryText) && (\n <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n )}\n\n {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && (\n <PrimaryButton\n styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n text={strings?.primaryButtonText}\n onClick={onPrimaryButtonClick}\n />\n )}\n {onTroubleshootingClick && isValidString(strings?.linkText) && (\n <Link\n styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n onClick={onTroubleshootingClick}\n >\n {strings?.linkText}\n </Link>\n )}\n </Stack>\n </Stack>\n );\n};\n\"../../../../acs-ui-common/src\""]}
|
|
@@ -116,6 +116,14 @@ const DialpadContainer = (props) => {
|
|
|
116
116
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
117
117
|
onChange: (e) => {
|
|
118
118
|
setText(e.target.value);
|
|
119
|
+
},
|
|
120
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
121
|
+
onClick: (e) => {
|
|
122
|
+
const input = e.target;
|
|
123
|
+
const end = input.value.length;
|
|
124
|
+
// Move focus to end of input field
|
|
125
|
+
input.setSelectionRange(end, end);
|
|
126
|
+
input.focus();
|
|
119
127
|
}, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
|
|
120
128
|
var _a;
|
|
121
129
|
return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialpad.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Dialpad/Dialpad.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,eAAe,EACf,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACT,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,0CAA0C;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EACL,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AA+EjD,MAAM,qBAAqB,GAA6B;IACtD,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAC9E;QACE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;KAC9B;IACD;QACE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;QAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;KAC/B;IACD,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;CAC9D,CAAC;AAEF,MAAM,SAAS,GAAe;IAC5B,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;CACR,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAQtB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEvE,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,GAAS,EAAE;YAClB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC,CAAA;QACD,WAAW,EAAE,GAAS,EAAE;YACtB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAA;QACD,eAAe,EAAE,QAAQ;KAC1B,CAAC,EACF,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,CAAC,CAC/C,CAAC;IAEF,MAAM,iBAAiB,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,aAAa,kCACE,kBAAkB,KAAK,CAAC,KAAK,EAAE,EAC7C,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAC9D,iBAAiB;QAErB,oBAAC,KAAK;YACJ,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAQ;YAE3F,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG,CAAQ,CAC/F,CACM,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAczB,EAAe,EAAE;;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EACJ,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GAAG,KAAK,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAC5D,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;QAChC,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;SAClC;QACD,IAAI,oBAAoB,EAAE;YACxB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAQ,EAAE;QAChE,IAAI,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,EAAE,EAAE;YACjC,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC,CAAC;SAC/B;aAAM;YACL,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC;SACjC;QACD,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;SAClC;QACD,IAAI,oBAAoB,EAAE;YACxB,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,MAAM,OAAO,GAAG,CAAC,KAAa,EAAQ,EAAE;QACtC,sFAAsF;QACtF,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7E,OAAO,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,kBACrD,kBAAkB,gBACpB,kBAAkB;QAE7B,oBAAC,SAAS,IACR,MAAM,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,SAAS,CAAC,EACxE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC;YAC1E,8DAA8D;YAC9D,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE;gBACnB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,kBAC7B,eAAe,EAC5B,cAAc,EAAE,GAAgB,EAAE;;gBAAC,OAAA,CACjC,0CACG,gBAAgB,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,CAClD,oBAAC,UAAU,IACT,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAC9C,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,eAAe,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,CAAC,EAC1E,SAAS,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAC3C,CACH,CACA,CACJ,CAAA;aAAA,GACD;QACF,oBAAC,SAAS,QACP,qBAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;YAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,GAAG,EAAE,OAAO,QAAQ,EAAE,EAAE,eAAe,EAAC,SAAS,IAChE,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACjC,oBAAC,aAAa,IACZ,GAAG,EAAE,UAAU,WAAW,EAAE;gBAC5B;;;;;;;;;;;;;;;;kBAgBE;gBACF,KAAK,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAC3C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,cAAc,EACvB,WAAW,EAAE,kBAAkB,EAC/B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CACI,CACT,CAAC;QACJ,CAAC,CAAC,CACQ,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAe,EAAE;IAC1D,0CAA0C,CAAC,6CAA6C;IACxF,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;IAElD,MAAM,8BAA8B,GAAG,GAAmB,EAAE;QAC1D,0CAA0C,CAAC,6CAA6C;QACxF,OAAO,aAAa,CAAC;QACrB,wFAAwF;QACxF,4DAA4D;QAC5D,OAAO,EAA+B,CAAC;IACzC,CAAC,CAAC;IACF,MAAM,OAAO,mCAAQ,8BAA8B,EAAE,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAC1E,OAAO,oBAAC,gBAAgB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE;IAC9C,sFAAsF;IACtF,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect } 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\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 * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /** function to send dtmf tones on button click */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior*/\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** set dialpad textfield content */\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 isMobile?: boolean;\n styles?: DialpadStyles;\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 isMobile?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, isMobile = false } = props;\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: isMobile\n }),\n [digit, index, isMobile, 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 >\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 isMobile?: boolean;\n styles?: DialpadStyles;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [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 <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\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 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 <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\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 isMobile={isMobile}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\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\"../../../../acs-ui-common/src\""]}
|
|
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 } 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\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 * Props for {@link Dialpad} component.\n *\n * @beta\n */\nexport interface DialpadProps {\n strings?: DialpadStrings;\n /** function to send dtmf tones on button click */\n onSendDtmfTone?: (dtmfTone: DtmfTone) => Promise<void>;\n /** Callback for dialpad button behavior*/\n onClickDialpadButton?: (buttonValue: string, buttonIndex: number) => void;\n /** set dialpad textfield content */\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 isMobile?: boolean;\n styles?: DialpadStyles;\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 isMobile?: boolean;\n}): JSX.Element => {\n const theme = useTheme();\n\n const { digit, index, onClick, onLongPress, isMobile = false } = props;\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: isMobile\n }),\n [digit, index, isMobile, 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 >\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 isMobile?: boolean;\n styles?: DialpadStyles;\n}): JSX.Element => {\n const theme = useTheme();\n\n const {\n onSendDtmfTone,\n onClickDialpadButton,\n textFieldValue,\n onChange,\n showDeleteButton = true,\n isMobile = false\n } = props;\n\n const [plainTextValue, setPlainTextValue] = useState(textFieldValue ?? '');\n\n useEffect(() => {\n if (onChange) {\n onChange(plainTextValue);\n }\n }, [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 <div\n className={mergeStyles(containerStyles(theme), props.styles?.root)}\n data-test-id=\"dialpadContainer\"\n data-ui-id=\"dialpadContainer\"\n >\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick={(e: any) => {\n const input = e.target;\n const end = input.value.length;\n\n // Move focus to end of input field\n input.setSelectionRange(end, end);\n input.focus();\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 <FocusZone>\n {dialPadButtonsDefault.map((rows, rowIndex) => {\n return (\n <Stack horizontal key={`row_${rowIndex}`} horizontalAlign=\"stretch\">\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 isMobile={isMobile}\n />\n ))}\n </Stack>\n );\n })}\n </FocusZone>\n </div>\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\"../../../../acs-ui-common/src\""]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* @private
|
|
4
|
+
*/
|
|
5
|
+
export declare const FloatingLocalVideo: (props: {
|
|
6
|
+
localVideoComponent: JSX.Element;
|
|
7
|
+
layerHostId: string;
|
|
8
|
+
isNarrow?: boolean;
|
|
9
|
+
parentWidth?: number;
|
|
10
|
+
parentHeight?: number;
|
|
11
|
+
}) => JSX.Element;
|
|
12
|
+
//# sourceMappingURL=FloatingLocalVideo.d.ts.map
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// Copyright (c) Microsoft Corporation.
|
|
2
|
+
// Licensed under the MIT license.
|
|
3
|
+
import { ContextualMenu } from '@fluentui/react';
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
|
+
import { useTheme } from '../../theming';
|
|
6
|
+
import { _ModalClone } from '../ModalClone/ModalClone';
|
|
7
|
+
import { floatingLocalVideoModalStyle, LARGE_FLOATING_MODAL_SIZE_PX, localVideoTileOuterPaddingPX, SMALL_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
|
|
8
|
+
const DRAG_OPTIONS = {
|
|
9
|
+
moveMenuItemText: 'Move',
|
|
10
|
+
closeMenuItemText: 'Close',
|
|
11
|
+
menu: ContextualMenu,
|
|
12
|
+
keepInBounds: true
|
|
13
|
+
};
|
|
14
|
+
// Manually override the max position used to keep the modal in the bounds of its container.
|
|
15
|
+
// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
|
|
16
|
+
// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
|
|
17
|
+
// position the modal can be dragged to.
|
|
18
|
+
const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
|
|
19
|
+
/**
|
|
20
|
+
* @private
|
|
21
|
+
*/
|
|
22
|
+
export const FloatingLocalVideo = (props) => {
|
|
23
|
+
const { localVideoComponent, layerHostId, isNarrow, parentWidth, parentHeight } = props;
|
|
24
|
+
const theme = useTheme();
|
|
25
|
+
const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
|
|
26
|
+
const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
|
|
27
|
+
// The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
|
|
28
|
+
// to be dragged offscreen and these are the top and left bounds of that calculation.
|
|
29
|
+
const modalMinDragPosition = useMemo(() => parentWidth && parentHeight
|
|
30
|
+
? {
|
|
31
|
+
// We use -parentWidth/Height because our modal is positioned to start in the bottom right,
|
|
32
|
+
// hence (0,0) is the bottom right of the video gallery.
|
|
33
|
+
x: -parentWidth + modalWidth + localVideoTileOuterPaddingPX,
|
|
34
|
+
y: -parentHeight + modalHeight + localVideoTileOuterPaddingPX
|
|
35
|
+
}
|
|
36
|
+
: undefined, [parentHeight, parentWidth, modalHeight, modalWidth]);
|
|
37
|
+
const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, isNarrow), [theme, isNarrow]);
|
|
38
|
+
const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
|
|
39
|
+
return (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=FloatingLocalVideo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,oCAAoC,CAAC;AAE5C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,4BAA4B,EAAE,CAAC,EAAE,4BAA4B,EAAE,CAAC;AAElG;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAMlC,EAAe,EAAE;IAChB,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAExF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,4BAA4B,CAAC,KAAK,CAAC;IACtG,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,MAAM,CAAC;IACzG,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EAAE,CAAC,WAAW,GAAG,UAAU,GAAG,4BAA4B;YAC3D,CAAC,EAAE,CAAC,YAAY,GAAG,WAAW,GAAG,4BAA4B;SAC9D;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,CACrD,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpG,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,IAEpC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n floatingLocalVideoModalStyle,\n LARGE_FLOATING_MODAL_SIZE_PX,\n localVideoTileOuterPaddingPX,\n SMALL_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: {\n localVideoComponent: JSX.Element;\n layerHostId: string;\n isNarrow?: boolean;\n parentWidth?: number;\n parentHeight?: number;\n}): JSX.Element => {\n const { localVideoComponent, layerHostId, isNarrow, parentWidth, parentHeight } = props;\n\n const theme = useTheme();\n\n const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;\n const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n () =>\n parentWidth && parentHeight\n ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x: -parentWidth + modalWidth + localVideoTileOuterPaddingPX,\n y: -parentHeight + modalHeight + localVideoTileOuterPaddingPX\n }\n : undefined,\n [parentHeight, parentWidth, modalHeight, modalWidth]\n );\n\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, isNarrow), [theme, isNarrow]);\n const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n return (\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStyles}\n layerProps={layerProps}\n maxDragPosition={modalMaxDragPosition}\n minDragPosition={modalMinDragPosition}\n >\n {localVideoComponent}\n </_ModalClone>\n );\n};\n"]}
|
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { VideoGalleryRemoteParticipant } from '../../types';
|
|
3
|
+
import { VideoGalleryStyles } from '../VideoGallery';
|
|
4
|
+
/**
|
|
5
|
+
* Props for {@link FloatingLocalVideoLayout}.
|
|
6
|
+
*
|
|
7
|
+
* @private
|
|
8
|
+
*/
|
|
9
|
+
export interface FloatingLocalVideoLayoutProps {
|
|
10
|
+
/**
|
|
11
|
+
* Styles for the {@link FloatingLocalVideoLayout}
|
|
12
|
+
*/
|
|
13
|
+
styles?: Omit<VideoGalleryStyles, 'root'>;
|
|
14
|
+
/** List of remote video particpants */
|
|
15
|
+
remoteParticipants?: VideoGalleryRemoteParticipant[];
|
|
16
|
+
/** Callback to render each remote participant */
|
|
17
|
+
onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;
|
|
18
|
+
/** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */
|
|
19
|
+
dominantSpeakers?: string[];
|
|
20
|
+
/** Component that contains local video content */
|
|
21
|
+
localVideoComponent?: JSX.Element;
|
|
22
|
+
/** Component that contains screen share content */
|
|
23
|
+
screenShareComponent?: JSX.Element;
|
|
24
|
+
/**
|
|
25
|
+
* Maximum number of participant remote video streams that is rendered.
|
|
26
|
+
* @defaultValue 4
|
|
27
|
+
*/
|
|
28
|
+
maxRemoteVideoStreams?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Whether to display the local video camera switcher button
|
|
31
|
+
*/
|
|
32
|
+
showCameraSwitcherInLocalPreview?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Width of parent element
|
|
35
|
+
*/
|
|
36
|
+
parentWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Height of parent element
|
|
39
|
+
*/
|
|
40
|
+
parentHeight?: number;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* FloatingLocalVideoLayout displays remote participants and a screen sharing component in
|
|
44
|
+
* a grid and horizontal gallery while floating the local video
|
|
45
|
+
*
|
|
46
|
+
* @private
|
|
47
|
+
*/
|
|
48
|
+
export declare const FloatingLocalVideoLayout: (props: FloatingLocalVideoLayoutProps) => JSX.Element;
|
|
49
|
+
//# sourceMappingURL=FloatingLocalVideoLayout.d.ts.map
|
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// Copyright (c) Microsoft Corporation.
|
|
2
|
+
// Licensed under the MIT license.
|
|
3
|
+
import { LayerHost, mergeStyles, Stack } from '@fluentui/react';
|
|
4
|
+
import { useId } from '@fluentui/react-hooks';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { useTheme } from '../../theming';
|
|
7
|
+
import { GridLayout } from '../GridLayout';
|
|
8
|
+
import { localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX } from './styles/FloatingLocalVideo.styles';
|
|
9
|
+
import { isNarrowWidth } from '../utils/responsive';
|
|
10
|
+
import { FloatingLocalVideo } from './FloatingLocalVideo';
|
|
11
|
+
import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
|
|
12
|
+
import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
|
|
13
|
+
import { useFloatingLocalVideoLayout } from './videoGalleryUtils';
|
|
14
|
+
/**
|
|
15
|
+
* FloatingLocalVideoLayout displays remote participants and a screen sharing component in
|
|
16
|
+
* a grid and horizontal gallery while floating the local video
|
|
17
|
+
*
|
|
18
|
+
* @private
|
|
19
|
+
*/
|
|
20
|
+
export const FloatingLocalVideoLayout = (props) => {
|
|
21
|
+
const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight } = props;
|
|
22
|
+
const theme = useTheme();
|
|
23
|
+
const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
|
|
24
|
+
const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
|
|
25
|
+
remoteParticipants,
|
|
26
|
+
dominantSpeakers,
|
|
27
|
+
maxRemoteVideoStreams,
|
|
28
|
+
isScreenShareActive: !!screenShareComponent
|
|
29
|
+
});
|
|
30
|
+
let activeVideoStreams = 0;
|
|
31
|
+
const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
|
|
32
|
+
var _a, _b;
|
|
33
|
+
return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
|
|
34
|
+
? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
|
|
35
|
+
: (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
|
|
36
|
+
});
|
|
37
|
+
const shouldFloatLocalVideo = remoteParticipants.length > 0;
|
|
38
|
+
if (!shouldFloatLocalVideo && localVideoComponent) {
|
|
39
|
+
gridTiles.push(localVideoComponent);
|
|
40
|
+
}
|
|
41
|
+
const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
|
|
44
|
+
? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
|
|
45
|
+
: (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
|
|
46
|
+
});
|
|
47
|
+
const layerHostId = useId('layerhost');
|
|
48
|
+
const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
|
|
49
|
+
// When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
|
|
50
|
+
showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
|
|
51
|
+
boxShadow: theme.effects.elevation8,
|
|
52
|
+
zIndex: LOCAL_VIDEO_TILE_ZINDEX
|
|
53
|
+
}) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
|
|
54
|
+
return (React.createElement(Stack, { styles: rootLayoutStyle },
|
|
55
|
+
wrappedLocalVideoComponent,
|
|
56
|
+
React.createElement(Stack, { horizontal: false, styles: innerLayoutStyle },
|
|
57
|
+
screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
|
|
58
|
+
horizontalGalleryTiles.length > 0 && (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
|
|
59
|
+
React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }))));
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=FloatingLocalVideoLayout.js.map
|
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { GridLayout } from '../GridLayout';\nimport {\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\nimport { useFloatingLocalVideoLayout } from './videoGalleryUtils';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps {\n /**\n * Styles for the {@link FloatingLocalVideoLayout}\n */\n styles?: Omit<VideoGalleryStyles, 'root'>;\n /** List of remote video particpants */\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /** Callback to render each remote participant */\n onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n dominantSpeakers?: string[];\n /** Component that contains local video content */\n localVideoComponent?: JSX.Element;\n /** Component that contains screen share content */\n screenShareComponent?: JSX.Element;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Width of parent element\n */\n parentWidth?: number;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const floatingLocalVideoLayout = useFloatingLocalVideoLayout({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n isNarrow={isNarrow}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <Stack horizontal={false} styles={innerLayoutStyle}>\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {horizontalGalleryTiles.length > 0 && (\n <VideoGalleryResponsiveHorizontalGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n horizontalGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n />\n )}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n </Stack>\n </Stack>\n );\n};\n"]}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, Theme } from '@fluentui/react';
|
|
2
|
+
import { VideoTileStylesProps } from '../../VideoTile';
|
|
3
|
+
/**
|
|
4
|
+
* @private
|
|
5
|
+
*/
|
|
6
|
+
export declare const videoGalleryOuterDivStyle: string;
|
|
7
|
+
/**
|
|
8
|
+
* @private
|
|
9
|
+
*/
|
|
10
|
+
export declare const videoGalleryContainerStyle: IStackStyles;
|
|
11
|
+
/**
|
|
12
|
+
* Small floating modal width and height in rem for small screen
|
|
13
|
+
*/
|
|
14
|
+
export declare const SMALL_FLOATING_MODAL_SIZE_PX: {
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Large floating modal width and height in rem for large screen
|
|
20
|
+
*/
|
|
21
|
+
export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
|
|
22
|
+
width: number;
|
|
23
|
+
height: number;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* @private
|
|
27
|
+
* z-index to ensure that the local video tile is above the video gallery.
|
|
28
|
+
*/
|
|
29
|
+
export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
|
|
30
|
+
/**
|
|
31
|
+
* @private
|
|
32
|
+
*/
|
|
33
|
+
export declare const localVideoTileContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyle;
|
|
34
|
+
/**
|
|
35
|
+
* @private
|
|
36
|
+
*/
|
|
37
|
+
export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStackStyles;
|
|
38
|
+
/**
|
|
39
|
+
* @private
|
|
40
|
+
*/
|
|
41
|
+
export declare const floatingLocalVideoModalStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
|
|
42
|
+
/**
|
|
43
|
+
* Padding equal to the amount the modal should stay inside the bounds of the container.
|
|
44
|
+
* i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
|
|
45
|
+
* @private
|
|
46
|
+
*/
|
|
47
|
+
export declare const localVideoTileOuterPaddingPX = 8;
|
|
48
|
+
/**
|
|
49
|
+
* @private
|
|
50
|
+
*/
|
|
51
|
+
export declare const floatingLocalVideoTileStyle: VideoTileStylesProps;
|
|
52
|
+
/**
|
|
53
|
+
* @private
|
|
54
|
+
*/
|
|
55
|
+
export declare const localVideoCameraCycleButtonStyles: (theme: Theme) => IButtonStyles;
|
|
56
|
+
/**
|
|
57
|
+
* Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
|
|
58
|
+
* @private
|
|
59
|
+
*/
|
|
60
|
+
export declare const localVideoModalStyles: Partial<IModalStyles>;
|
|
61
|
+
//# sourceMappingURL=FloatingLocalVideo.styles.d.ts.map
|