@azure/communication-react 1.0.0-beta.1 → 1.0.0-beta.5

package/dist/dist-esm/react-composites/src/composites/CallComposite/Call.js

@@ -1,66 +1,70 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useEffect, useState } from 'react';
-import { CallScreen } from './CallScreen';
-import { ConfigurationScreen } from './ConfigurationScreen';
-import { Error } from './Error';
-import { callContainer } from './styles/Call.styles';
-import { Stack } from '@fluentui/react';
-import { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';
-import { useSelector } from './hooks/useSelector';
-import { getPage } from './selectors/baseSelectors';
-import { FluentThemeProvider } from "../../../../react-components/src";
-const MainScreen = ({ screenWidth, onRenderAvatar }) => {
-    const page = useSelector(getPage);
-    const adapter = useAdapter();
-    switch (page) {
-        case 'configuration':
-            return React.createElement(ConfigurationScreen, { screenWidth: screenWidth, startCallHandler: () => adapter.setPage('call') });
-        case 'error':
-            return React.createElement(Error, { rejoinHandler: () => adapter.setPage('configuration') });
-        case 'errorJoiningTeamsMeeting':
-            return (React.createElement(Error, { rejoinHandler: () => adapter.setPage('configuration'), title: "Error joining Teams Meeting", reason: "Access to the Teams meeting was denied." }));
-        default:
-            return (React.createElement(CallScreen, { endCallHandler: () => __awaiter(void 0, void 0, void 0, function* () {
-                    adapter.setPage('configuration');
-                }), callErrorHandler: (customPage) => {
-                    customPage ? adapter.setPage(customPage) : adapter.setPage('error');
-                }, onRenderAvatar: onRenderAvatar, screenWidth: screenWidth }));
-    }
-};
-export const Call = (props) => {
-    var _a;
-    const [screenWidth, setScreenWidth] = useState((_a = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _a !== void 0 ? _a : 0);
-    useEffect(() => {
-        const setWindowWidth = () => {
-            const width = typeof window !== 'undefined' ? window.innerWidth : 0;
-            setScreenWidth(width);
-        };
-        setWindowWidth();
-        window.addEventListener('resize', setWindowWidth);
-        return () => window.removeEventListener('resize', setWindowWidth);
-    }, []);
-    const { adapter, fluentTheme } = props;
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            yield adapter.askDevicePermission({ video: true, audio: true });
-            adapter.queryCameras();
-            adapter.queryMicrophones();
-            adapter.querySpeakers();
-        }))();
-    }, [adapter]);
-    return (React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme },
-        React.createElement(CallAdapterProvider, { adapter: adapter },
-            React.createElement(Stack, { className: callContainer, grow: true },
-                React.createElement(MainScreen, { screenWidth: screenWidth, onRenderAvatar: props.onRenderAvatar })))));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useEffect } from 'react';
+import { BaseComposite } from '../common/Composite';
+import { useLocale } from '../localization';
+import { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';
+import { CallScreen } from './CallScreen';
+import { ConfigurationScreen } from './ConfigurationScreen';
+import { Error } from './Error';
+import { useSelector } from './hooks/useSelector';
+import { getPage } from './selectors/baseSelectors';
+const MainScreen = (props) => {
+    const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData } = props;
+    const page = useSelector(getPage);
+    const adapter = useAdapter();
+    const locale = useLocale();
+    switch (page) {
+        case 'configuration':
+            return React.createElement(ConfigurationScreen, { startCallHandler: () => adapter.setPage('call') });
+        case 'error':
+            return React.createElement(Error, { rejoinHandler: () => adapter.setPage('configuration') });
+        case 'errorJoiningTeamsMeeting':
+            return (React.createElement(Error, { rejoinHandler: () => adapter.setPage('configuration'), title: locale.strings.call.teamsMeetingFailToJoin, reason: locale.strings.call.teamsMeetingFailReasonAccessDenied }));
+        case 'removed':
+            return (React.createElement(Error, { rejoinHandler: () => adapter.setPage('configuration'), title: locale.strings.call.teamsMeetingFailToJoin, reason: locale.strings.call.teamsMeetingFailReasonParticipantRemoved }));
+        default:
+            return (React.createElement(CallScreen, { endCallHandler: () => __awaiter(void 0, void 0, void 0, function* () {
+                    adapter.setPage('configuration');
+                }), callErrorHandler: (customPage) => {
+                    customPage ? adapter.setPage(customPage) : adapter.setPage('error');
+                }, onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationURL, onFetchAvatarPersonaData: onFetchAvatarPersonaData, visualElements: props.visualElements }));
+    }
+};
+export const Call = (props) => {
+    return (React.createElement(BaseComposite, Object.assign({}, props),
+        React.createElement(CallCompositeInternal, Object.assign({}, props, { showCallControls: true }))));
+};
+/**
+ * An internal-only call composite export.
+ * This is used by the meeting composite and has extra customizability points that we are not ready
+ * to export publicly.
+ * @internal
+ */
+export const CallCompositeInternal = (props) => {
+    var _a, _b;
+    const { adapter, callInvitationURL, onFetchAvatarPersonaData } = props;
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            yield adapter.askDevicePermission({ video: true, audio: true });
+            adapter.queryCameras();
+            adapter.queryMicrophones();
+            adapter.querySpeakers();
+        }))();
+    }, [adapter]);
+    return (React.createElement(CallAdapterProvider, { adapter: adapter },
+        React.createElement(MainScreen, { callInvitationURL: callInvitationURL, onFetchAvatarPersonaData: onFetchAvatarPersonaData, visualElements: {
+                showCallControls: props.showCallControls,
+                showErrorBar: (_b = (_a = props.visualElements) === null || _a === void 0 ? void 0 : _a.showErrorBar) !== null && _b !== void 0 ? _b : false
+            } })));
+};
 //# sourceMappingURL=Call.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/Call.js.map

@@ -1 +1 @@
-{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Call.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Call.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallControls.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
-export declare type GroupCallControlsProps = {
-    onEndCallClick(): void;
-    compressedMode: boolean;
-};
-export declare const CallControls: (props: GroupCallControlsProps) => JSX.Element;
+/// <reference types="react" />
+export declare type CallControlsProps = {
+    showParticipantsControl: boolean;
+    onEndCallClick(): void;
+    compressedMode?: boolean;
+    callInvitationURL?: string;
+};
+export declare const CallControls: (props: CallControlsProps) => JSX.Element;
 //# sourceMappingURL=CallControls.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallControls.tsx"],"names":[],"mappings":";AAcA,oBAAY,sBAAsB,GAAG;IACnC,cAAc,IAAI,IAAI,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,sBAAsB,KAAG,WAiC5D,CAAC"}
+{"version":3,"file":"CallControls.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallControls.tsx"],"names":[],"mappings":";AAgBA,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,cAAc,IAAI,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WA0CvD,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallControls.js

@@ -1,37 +1,36 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useCallback } from 'react';
-import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, ScreenShareButton } from "../../../../react-components/src";
-import { controlBarStyle, groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from './styles/CallControls.styles';
-import { usePropsFor } from './hooks/usePropsFor';
-import { devicePermissionSelector } from "../../../../acs-calling-selector/src";
-import { useAdaptedSelector } from './hooks/useAdaptedSelector';
-export const CallControls = (props) => {
-    const { compressedMode, onEndCallClick } = props;
-    const microphoneButtonProps = usePropsFor(MicrophoneButton);
-    const cameraButtonProps = usePropsFor(CameraButton);
-    const screenShareButtonProps = usePropsFor(ScreenShareButton);
-    const hangUpButtonProps = usePropsFor(EndCallButton);
-    const onHangUp = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        yield hangUpButtonProps.onHangUp();
-        onEndCallClick();
-    }), [hangUpButtonProps, onEndCallClick]);
-    const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useAdaptedSelector(devicePermissionSelector);
-    return (React.createElement(ControlBar, { styles: controlBarStyle },
-        React.createElement(CameraButton, Object.assign({}, cameraButtonProps, { onToggleCamera: () => {
-                return cameraButtonProps.onToggleCamera().catch((e) => console.log(e));
-            }, disabled: !cameraPermissionGranted })),
-        React.createElement(MicrophoneButton, Object.assign({}, microphoneButtonProps, { disabled: !microphonePermissionGranted })),
-        React.createElement(ScreenShareButton, Object.assign({}, screenShareButtonProps)),
-        React.createElement(EndCallButton, Object.assign({}, hangUpButtonProps, { onHangUp: onHangUp, styles: !compressedMode ? groupCallLeaveButtonStyle : groupCallLeaveButtonCompressedStyle, text: !compressedMode ? 'Leave' : '' }))));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useCallback } from 'react';
+import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton, ParticipantsButton, ScreenShareButton } from "../../../../react-components/src";
+import { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from './styles/CallControls.styles';
+import { usePropsFor } from './hooks/usePropsFor';
+export const CallControls = (props) => {
+    const { callInvitationURL, compressedMode, onEndCallClick } = props;
+    const microphoneButtonProps = usePropsFor(MicrophoneButton);
+    const cameraButtonProps = usePropsFor(CameraButton);
+    const screenShareButtonProps = usePropsFor(ScreenShareButton);
+    const participantsButtonProps = usePropsFor(ParticipantsButton);
+    const optionsButtonProps = usePropsFor(OptionsButton);
+    const hangUpButtonProps = usePropsFor(EndCallButton);
+    const onHangUp = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield hangUpButtonProps.onHangUp();
+        onEndCallClick();
+    }), [hangUpButtonProps, onEndCallClick]);
+    return (React.createElement(ControlBar, { layout: "dockedBottom" },
+        React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: !compressedMode })),
+        React.createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: !compressedMode })),
+        React.createElement(ScreenShareButton, Object.assign({}, screenShareButtonProps, { showLabel: !compressedMode })),
+        props.showParticipantsControl && (React.createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: !compressedMode, callInvitationURL: callInvitationURL }))),
+        React.createElement(OptionsButton, Object.assign({ persistMenu: true }, optionsButtonProps, { showLabel: !compressedMode })),
+        React.createElement(EndCallButton, Object.assign({ "data-ui-id": "call-composite-hangup-button" }, hangUpButtonProps, { onHangUp: onHangUp, styles: !compressedMode ? groupCallLeaveButtonStyle : groupCallLeaveButtonCompressedStyle, showLabel: !compressedMode }))));
+};
 //# sourceMappingURL=CallControls.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallControls.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,yCAAyB;AAChH,OAAO,EACL,eAAe,EACf,mCAAmC,EACnC,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,6CAAoC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAOhE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA6B,EAAe,EAAE;IACzE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,qBAAqB,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,sBAAsB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC9D,MAAM,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAS,EAAE;QACtC,MAAM,iBAAiB,CAAC,QAAQ,EAAE,CAAC;QACnC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAA,EAAE,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,2BAA2B,EAAE,GAAG,kBAAkB,CAC/F,wBAAwB,CACzB,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IAAC,MAAM,EAAE,eAAe;QACjC,oBAAC,YAAY,oBACP,iBAAiB,IACrB,cAAc,EAAE,GAAG,EAAE;gBACnB,OAAO,iBAAiB,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACzE,CAAC,EACD,QAAQ,EAAE,CAAC,uBAAuB,IAClC;QACF,oBAAC,gBAAgB,oBAAK,qBAAqB,IAAE,QAAQ,EAAE,CAAC,2BAA2B,IAAI;QACvF,oBAAC,iBAAiB,oBAAK,sBAAsB,EAAI;QACjD,oBAAC,aAAa,oBACR,iBAAiB,IACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,mCAAmC,EACzF,IAAI,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IACpC,CACS,CACd,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallControls.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EAClB,yCAAmC;AACpC,OAAO,EAAE,mCAAmC,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAC9G,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AASlD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,qBAAqB,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,sBAAsB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC9D,MAAM,uBAAuB,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAChE,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAS,EAAE;QACtC,MAAM,iBAAiB,CAAC,QAAQ,EAAE,CAAC;QACnC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAA,EAAE,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,oBAAC,UAAU,IAAC,MAAM,EAAC,cAAc;QAC/B,oBAAC,YAAY,gCAAY,8BAA8B,IAAK,iBAAiB,IAAE,SAAS,EAAE,CAAC,cAAc,IAAI;QAC7G,oBAAC,gBAAgB,gCACJ,kCAAkC,IACzC,qBAAqB,IACzB,SAAS,EAAE,CAAC,cAAc,IAC1B;QACF,oBAAC,iBAAiB,oBAAK,sBAAsB,IAAE,SAAS,EAAE,CAAC,cAAc,IAAI;QAC5E,KAAK,CAAC,uBAAuB,IAAI,CAChC,oBAAC,kBAAkB,gCACN,oCAAoC,IAC3C,uBAAuB,IAC3B,SAAS,EAAE,CAAC,cAAc,EAC1B,iBAAiB,EAAE,iBAAiB,IACpC,CACH;QAED,oBAAC,aAAa,kBAAC,WAAW,EAAE,IAAI,IAAM,kBAAkB,IAAE,SAAS,EAAE,CAAC,cAAc,IAAI;QACxF,oBAAC,aAAa,gCACD,8BAA8B,IACrC,iBAAiB,IACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,mCAAmC,EACzF,SAAS,EAAE,CAAC,cAAc,IAC1B,CACS,CACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallScreen.d.ts

@@ -1,12 +1,17 @@
-/// <reference types="react" />
-import { PlaceholderProps } from "../../../../react-components/src";
-import { CallCompositePage } from './adapter';
-export declare const MINI_HEADER_WINDOW_WIDTH = 450;
-export interface CallScreenProps {
-    screenWidth: number;
-    endCallHandler(): void;
-    callErrorHandler(customPage?: CallCompositePage): void;
-    onRenderAvatar?: (props: PlaceholderProps, defaultOnRender: (props: PlaceholderProps) => JSX.Element) => JSX.Element;
-}
-export declare const CallScreen: (props: CallScreenProps) => JSX.Element;
+/// <reference types="react" />
+import { OnRenderAvatarCallback } from "../../../../react-components/src";
+import { CallCompositePage } from './adapter/CallAdapter';
+import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
+export interface CallScreenProps {
+    callInvitationURL?: string;
+    endCallHandler(): void;
+    callErrorHandler(customPage?: CallCompositePage): void;
+    onRenderAvatar?: OnRenderAvatarCallback;
+    onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
+    visualElements: {
+        showCallControls: boolean;
+        showErrorBar: boolean;
+    };
+}
+export declare const CallScreen: (props: CallScreenProps) => JSX.Element;
 //# sourceMappingURL=CallScreen.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallScreen.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallScreen.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,gBAAgB,EAAsB,yCAAyB;AAKxE,OAAO,EAAiC,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE7E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,CAAC,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CACtH;AAID,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WAoGnD,CAAC"}
+{"version":3,"file":"CallScreen.d.ts","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallScreen.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAY,sBAAsB,EAAsB,yCAAmC;AAMlG,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAK1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,WAAW,eAAe;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,CAAC,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,wBAAwB,CAAC,EAAE,yBAAyB,CAAC;IACrD,cAAc,EAAE;QACd,gBAAgB,EAAE,OAAO,CAAC;QAC1B,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AAID,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WA4InD,CAAC"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallScreen.js

@@ -1,80 +1,100 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import { Label, Spinner, Stack } from '@fluentui/react';
-import React, { useEffect, useRef, useState } from 'react';
-import { activeContainerClassName, containerStyles, headerStyles, loadingStyle, subContainerStyles, headerCenteredContainer, headerContainer } from './styles/CallScreen.styles';
-import { MediaGallery } from './MediaGallery';
-import { isInCall } from '../../utils/SDKUtils';
-import { complianceBannerSelector } from './selectors/complianceBannerSelector';
-import { useAdapter } from './adapter/CallAdapterProvider';
-import { useSelector } from './hooks/useSelector';
-import { getCall } from './selectors/baseSelectors';
-import { callStatusSelector } from './selectors/callStatusSelector';
-import { mediaGallerySelector } from './selectors/mediaGallerySelector';
-import { useHandlers } from './hooks/useHandlers';
-import { CallControls } from './CallControls';
-import { ComplianceBanner } from './ComplianceBanner';
-import { lobbySelector } from './selectors/lobbySelector';
-import { Lobby } from './Lobby';
-export const MINI_HEADER_WINDOW_WIDTH = 450;
-const spinnerLabel = 'Initializing call client...';
-export const CallScreen = (props) => {
-    var _a;
-    const { screenWidth, endCallHandler, callErrorHandler, onRenderAvatar } = props;
-    const [joinedCall, setJoinedCall] = useState(false);
-    // To use useProps to get these states, we need to create another file wrapping Call,
-    // It seems unnecessary in this case, so we get the updated states using this approach.
-    const { callStatus, isScreenShareOn } = useSelector(callStatusSelector);
-    const call = useSelector(getCall);
-    const currentCallId = useRef('');
-    if (call) {
-        currentCallId.current = call.id;
-    }
-    const mediaGalleryProps = useSelector(mediaGallerySelector);
-    const mediaGalleryHandlers = useHandlers(MediaGallery);
-    const complianceBannerProps = useSelector(complianceBannerSelector);
-    const lobbyProps = useSelector(lobbySelector);
-    const lobbyHandlers = useHandlers(Lobby);
-    const localVideoViewOption = {
-        scalingMode: 'Crop',
-        isMirrored: true
-    };
-    const adapter = useAdapter();
-    useEffect(() => {
-        if (!joinedCall) {
-            adapter.joinCall();
-        }
-        setJoinedCall(true);
-    }, [adapter, joinedCall]);
-    // Handle Call Join Errors
-    useEffect(() => {
-        var _a;
-        const endedCall = adapter.getState().endedCall;
-        if (endedCall && currentCallId.current === (endedCall === null || endedCall === void 0 ? void 0 : endedCall.id)) {
-            if (((_a = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.code) === 0 && (endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason.subCode) === 5854) {
-                callErrorHandler('errorJoiningTeamsMeeting');
-            }
-        }
-    }, [adapter, call, callErrorHandler]);
-    if ('isTeamsCall' in adapter) {
-        const azureAdapter = adapter;
-        const callState = (_a = azureAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.state;
-        if (azureAdapter.isTeamsCall() &&
-            callState !== undefined &&
-            azureAdapter.getState().call &&
-            ['Connecting', 'Ringing', 'InLobby'].includes(callState)) {
-            return (React.createElement(Lobby, Object.assign({ callState: callState }, lobbyProps, lobbyHandlers, { onEndCallClick: endCallHandler, isMicrophoneChecked: azureAdapter.getState().isLocalPreviewMicrophoneEnabled, localVideoViewOption: localVideoViewOption })));
-        }
-    }
-    return (React.createElement(React.Fragment, null, isInCall(callStatus !== null && callStatus !== void 0 ? callStatus : 'None') ? (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
-        React.createElement(Stack.Item, { styles: headerStyles },
-            React.createElement(Stack, { className: props.screenWidth > MINI_HEADER_WINDOW_WIDTH ? headerContainer : headerCenteredContainer },
-                React.createElement(CallControls, { onEndCallClick: endCallHandler, compressedMode: screenWidth <= MINI_HEADER_WINDOW_WIDTH }))),
-        React.createElement(Stack.Item, { style: { width: '100%' } },
-            React.createElement(ComplianceBanner, Object.assign({}, complianceBannerProps))),
-        React.createElement(Stack.Item, { styles: subContainerStyles, grow: true }, !isScreenShareOn ? (callStatus === 'Connected' && (React.createElement(Stack, { styles: containerStyles, grow: true },
-            React.createElement(Stack.Item, { grow: true, styles: activeContainerClassName },
-                React.createElement(MediaGallery, Object.assign({}, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar })))))) : (React.createElement("div", { className: loadingStyle },
-            React.createElement(Label, null, "Your screen is being shared")))))) : (React.createElement(Spinner, { label: spinnerLabel, ariaLive: "assertive", labelPosition: "top" }))));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Spinner, Stack } from '@fluentui/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { mediaGalleryContainerStyles, containerStyles, callControlsStyles, subContainerStyles, callControlsContainer, bannersContainerStyles } from './styles/CallScreen.styles';
+import { MediaGallery } from './MediaGallery';
+import { isInCall } from '../../utils/SDKUtils';
+import { complianceBannerSelector } from './selectors/complianceBannerSelector';
+import { useAdapter } from './adapter/CallAdapterProvider';
+import { useSelector } from './hooks/useSelector';
+import { getCallId, getEndedCall } from './selectors/baseSelectors';
+import { callStatusSelector } from './selectors/callStatusSelector';
+import { mediaGallerySelector } from './selectors/mediaGallerySelector';
+import { useHandlers } from './hooks/useHandlers';
+import { ErrorBar } from "../../../../react-components/src";
+import { CallControls } from './CallControls';
+import { ComplianceBanner } from './ComplianceBanner';
+import { lobbySelector } from './selectors/lobbySelector';
+import { Lobby } from './Lobby';
+import { PermissionsBanner } from '../common/PermissionsBanner';
+import { permissionsBannerContainerStyle } from '../common/styles/PermissionsBanner.styles';
+import { devicePermissionSelector } from './selectors/devicePermissionSelector';
+import { ScreenSharePopup } from './ScreenSharePopup';
+import { usePropsFor } from './hooks/usePropsFor';
+const spinnerLabel = 'Initializing call client...';
+export const CallScreen = (props) => {
+    var _a;
+    const { callInvitationURL, endCallHandler, callErrorHandler, onRenderAvatar, onFetchAvatarPersonaData } = props;
+    const [joinedCall, setJoinedCall] = useState(false);
+    // To use useProps to get these states, we need to create another file wrapping Call,
+    // It seems unnecessary in this case, so we get the updated states using this approach.
+    const { callStatus, isScreenShareOn } = useSelector(callStatusSelector);
+    const callId = useSelector(getCallId);
+    const currentCallId = useRef('');
+    // Remember last available callId
+    if (callId) {
+        currentCallId.current = callId;
+    }
+    const mediaGalleryProps = useSelector(mediaGallerySelector);
+    const mediaGalleryHandlers = useHandlers(MediaGallery);
+    const complianceBannerProps = useSelector(complianceBannerSelector);
+    const errorBarProps = usePropsFor(ErrorBar);
+    const lobbyProps = useSelector(lobbySelector);
+    const lobbyHandlers = useHandlers(Lobby);
+    const devicePermissions = useSelector(devicePermissionSelector);
+    const localVideoViewOption = {
+        scalingMode: 'Crop',
+        isMirrored: true
+    };
+    const adapter = useAdapter();
+    useEffect(() => {
+        if (!joinedCall) {
+            adapter.joinCall();
+        }
+        setJoinedCall(true);
+    }, [adapter, joinedCall]);
+    const endedCall = useSelector(getEndedCall);
+    // Handle Call Join Errors
+    useEffect(() => {
+        var _a, _b, _c;
+        if (endedCall && currentCallId.current === (endedCall === null || endedCall === void 0 ? void 0 : endedCall.id)) {
+            if (((_a = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.code) === 0 && (endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason.subCode) === 5854) {
+                callErrorHandler('errorJoiningTeamsMeeting');
+            }
+            else if (((_b = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _b === void 0 ? void 0 : _b.code) === 0 && ((_c = endedCall === null || endedCall === void 0 ? void 0 : endedCall.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) === 5300) {
+                callErrorHandler('removed');
+            }
+        }
+    }, [callErrorHandler, endedCall]);
+    if ('isTeamsCall' in adapter) {
+        const azureAdapter = adapter;
+        const callState = (_a = azureAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.state;
+        if (azureAdapter.isTeamsCall() &&
+            callState !== undefined &&
+            azureAdapter.getState().call &&
+            ['Connecting', 'Ringing', 'InLobby'].includes(callState)) {
+            return (React.createElement(Lobby, Object.assign({ callState: callState }, lobbyProps, lobbyHandlers, { onEndCallClick: endCallHandler, isMicrophoneChecked: azureAdapter.getState().isLocalPreviewMicrophoneEnabled, localVideoViewOption: localVideoViewOption })));
+        }
+    }
+    const screenShareModalHostId = 'UILibraryMediaGallery';
+    return (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true }, isInCall(callStatus !== null && callStatus !== void 0 ? callStatus : 'None') ? (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { styles: bannersContainerStyles },
+            React.createElement(Stack.Item, null,
+                React.createElement(ComplianceBanner, Object.assign({}, complianceBannerProps))),
+            React.createElement(Stack.Item, { style: permissionsBannerContainerStyle },
+                React.createElement(PermissionsBanner, { microphonePermissionGranted: devicePermissions.audio, cameraPermissionGranted: devicePermissions.video })),
+            props.visualElements.showErrorBar && (React.createElement(Stack.Item, null,
+                React.createElement(ErrorBar, Object.assign({}, errorBarProps))))),
+        React.createElement(Stack.Item, { styles: subContainerStyles, grow: true }, callStatus === 'Connected' && (React.createElement(React.Fragment, null,
+            React.createElement(Stack, { styles: containerStyles, grow: true },
+                React.createElement(Stack.Item, { id: screenShareModalHostId, grow: true, styles: mediaGalleryContainerStyles },
+                    React.createElement(MediaGallery, Object.assign({}, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData })))),
+            isScreenShareOn ? (React.createElement(ScreenSharePopup, { hostId: screenShareModalHostId, onStopScreenShare: () => {
+                    return adapter.stopScreenShare();
+                } })) : (React.createElement(React.Fragment, null))))),
+        props.visualElements.showCallControls && (React.createElement(Stack.Item, { styles: callControlsStyles },
+            React.createElement(Stack, { className: callControlsContainer },
+                React.createElement(CallControls, { showParticipantsControl: true, onEndCallClick: endCallHandler, callInvitationURL: callInvitationURL })))))) : (React.createElement(Spinner, { label: spinnerLabel, ariaLive: "assertive", labelPosition: "top" }))));
+};
 //# sourceMappingURL=CallScreen.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallScreen.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CallScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallScreen.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-composites/src/composites/CallComposite/ComplianceBanner.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-export declare type ComplianceBannerProps = {
-    callTranscribeState?: boolean;
-    callRecordState?: boolean;
-};
-export declare const ComplianceBanner: (props: ComplianceBannerProps) => JSX.Element;
+/// <reference types="react" />
+export declare type ComplianceBannerProps = {
+    callTranscribeState?: boolean;
+    callRecordState?: boolean;
+};
+export declare const ComplianceBanner: (props: ComplianceBannerProps) => JSX.Element;
 //# sourceMappingURL=ComplianceBanner.d.ts.map