@microsoft/omnichannel-chat-components 0.1.0-1

package/lib/esm/components/callingcontainer/CallingContainer.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Stack } from "@fluentui/react";
+import CurrentCall from "./subcomponents/CurrentCall/CurrentCall";
+import IncomingCall from "./subcomponents/IncomingCall/IncomingCall";
+import { defaultCallingContainerProps } from "./common/defaultProps/defaultCallingContainerProps";
+
+function CallingContainer(props) {
+  var _props$controlProps, _defaultCallingContai, _defaultCallingContai2, _props$styleProps, _props$controlProps2, _defaultCallingContai3, _props$styleProps2, _props$controlProps3, _defaultCallingContai4, _props$controlProps4, _props$styleProps3, _props$controlProps5, _props$styleProps4;
+
+  const callingContainerId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultCallingContai = defaultCallingContainerProps.controlProps) === null || _defaultCallingContai === void 0 ? void 0 : _defaultCallingContai.id);
+  let stackStyles = {
+    root: Object.assign({}, (_defaultCallingContai2 = defaultCallingContainerProps.styleProps) === null || _defaultCallingContai2 === void 0 ? void 0 : _defaultCallingContai2.generalStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
+  };
+  const hideCallingContainer = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.hideCallingContainer) ?? ((_defaultCallingContai3 = defaultCallingContainerProps.controlProps) === null || _defaultCallingContai3 === void 0 ? void 0 : _defaultCallingContai3.hideCallingContainer);
+
+  if (hideCallingContainer) {
+    stackStyles = {
+      root: Object.assign({}, stackStyles.root, {
+        display: "none"
+      })
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    id: callingContainerId,
+    className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.className,
+    horizontalAlign: "space-between",
+    dir: ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.dir) ?? ((_defaultCallingContai4 = defaultCallingContainerProps.controlProps) === null || _defaultCallingContai4 === void 0 ? void 0 : _defaultCallingContai4.dir),
+    styles: stackStyles
+  }, ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.isIncomingCall) && /*#__PURE__*/React.createElement(IncomingCall, {
+    controlProps: props.controlProps.incomingCallControlProps,
+    styleProps: (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.incomingCallStyleProps
+  }), ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.isIncomingCall) === false && /*#__PURE__*/React.createElement(CurrentCall, {
+    controlProps: props.controlProps.currentCallControlProps,
+    styleProps: (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.currentCallStyleProps
+  }));
+}
+
+export default CallingContainer;

package/lib/esm/components/callingcontainer/common/defaultProps/defaultCallingContainerControlProps.js

@@ -0,0 +1,6 @@
+export const defaultCallingContainerControlProps = {
+  id: "oc-lcw-callingcontainer",
+  dir: "ltr",
+  isIncomingCall: false,
+  hideCallingContainer: false
+};

package/lib/esm/components/callingcontainer/common/defaultProps/defaultCallingContainerProps.js

@@ -0,0 +1,6 @@
+import { defaultCallingContainerStyles } from "../defaultStyles/defaultCallingContainerStyles";
+import { defaultCallingContainerControlProps } from "./defaultCallingContainerControlProps";
+export const defaultCallingContainerProps = {
+  controlProps: defaultCallingContainerControlProps,
+  styleProps: defaultCallingContainerStyles
+};

package/lib/esm/components/callingcontainer/common/defaultStyles/customizedCallingContainerStyles.js

@@ -0,0 +1,7 @@
+export const customizedCallingContainerStyles = {
+  generalStyleProps: {
+    background: "white",
+    padding: "2px",
+    borderRadius: "1px"
+  }
+};

package/lib/esm/components/callingcontainer/common/defaultStyles/defaultCallingContainerStyles.js

@@ -0,0 +1,8 @@
+export const defaultCallingContainerStyles = {
+  generalStyleProps: {
+    background: "#000",
+    width: "100%",
+    zIndex: 100,
+    boxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)"
+  }
+};

package/lib/esm/components/callingcontainer/interfaces/ICallingContainerControlProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/callingcontainer/interfaces/ICallingContainerProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/callingcontainer/interfaces/ICallingContainerStyleProps.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js

@@ -0,0 +1,295 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from "react";
+import { IconButton, Stack } from "@fluentui/react";
+import { BroadcastService } from "../../../../services/BroadcastService";
+import CommandButton from "../../../common/commandbutton/CommandButton";
+import { ElementType, KeyCodes } from "../../../../common/Constants";
+import Timer from "../Timer/Timer";
+import { defaultCurrentCallProps } from "./common/defaultProps/defaultCurrentCallProps";
+import { processCustomComponents } from "../../../../common/utils";
+import { useBoolean } from "@fluentui/react-hooks";
+import { useCallback, useEffect } from "react";
+
+function CurrentCall(props) {
+  var _props$controlProps, _defaultCurrentCallPr, _props$controlProps2, _props$controlProps2$, _defaultCurrentCallPr2, _defaultCurrentCallPr3, _props$controlProps3, _props$controlProps3$, _defaultCurrentCallPr4, _defaultCurrentCallPr5, _props$controlProps4, _props$controlProps4$, _defaultCurrentCallPr6, _defaultCurrentCallPr7, _props$controlProps5, _props$controlProps5$, _defaultCurrentCallPr8, _defaultCurrentCallPr9, _props$controlProps6, _props$controlProps6$, _defaultCurrentCallPr10, _defaultCurrentCallPr11, _props$controlProps7, _props$controlProps7$, _defaultCurrentCallPr12, _defaultCurrentCallPr13, _props$controlProps8, _props$controlProps8$, _defaultCurrentCallPr14, _defaultCurrentCallPr15, _props$controlProps9, _props$controlProps10, _defaultCurrentCallPr16, _defaultCurrentCallPr17, _props$styleProps, _props$controlProps11, _props$controlProps12, _defaultCurrentCallPr18, _defaultCurrentCallPr19, _props$controlProps13, _props$controlProps14, _defaultCurrentCallPr20, _defaultCurrentCallPr21, _props$controlProps15, _props$controlProps16, _defaultCurrentCallPr22, _defaultCurrentCallPr23, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$controlProps20, _defaultCurrentCallPr24, _defaultCurrentCallPr25, _props$controlProps21, _props$controlProps22, _defaultCurrentCallPr26, _defaultCurrentCallPr27, _props$controlProps23, _props$controlProps24, _defaultCurrentCallPr28, _defaultCurrentCallPr29, _props$controlProps25, _props$controlProps26, _defaultCurrentCallPr30, _defaultCurrentCallPr31, _props$controlProps27, _props$controlProps28, _props$controlProps29, _props$controlProps30, _defaultCurrentCallPr32, _defaultCurrentCallPr33, _props$controlProps31, _props$controlProps32, _defaultCurrentCallPr34, _defaultCurrentCallPr35, _props$controlProps33, _props$controlProps34, _defaultCurrentCallPr36, _defaultCurrentCallPr37, _props$controlProps35, _props$controlProps36, _defaultCurrentCallPr38, _defaultCurrentCallPr39, _props$controlProps37, _defaultCurrentCallPr40, _props$controlProps38, _defaultCurrentCallPr41, _props$controlProps39, _defaultCurrentCallPr42, _props$controlProps40, _props$controlProps41, _props$controlProps42, _props$controlProps43, _defaultCurrentCallPr43, _defaultCurrentCallPr44, _props$controlProps44, _props$controlProps45, _defaultCurrentCallPr45, _defaultCurrentCallPr46, _props$controlProps46, _props$controlProps47, _defaultCurrentCallPr47, _defaultCurrentCallPr48, _props$controlProps48, _props$controlProps49, _defaultCurrentCallPr49, _defaultCurrentCallPr50, _props$controlProps50, _props$controlProps51, _props$controlProps52, _props$controlProps53, _defaultCurrentCallPr51, _defaultCurrentCallPr52, _props$controlProps54, _props$controlProps55, _defaultCurrentCallPr53, _defaultCurrentCallPr54, _props$controlProps56, _props$controlProps57, _defaultCurrentCallPr55, _defaultCurrentCallPr56, _props$controlProps58, _props$controlProps59, _defaultCurrentCallPr57, _defaultCurrentCallPr58, _defaultCurrentCallPr59, _props$controlProps60, _defaultCurrentCallPr60, _props$controlProps61, _defaultCurrentCallPr61, _props$styleProps2, _defaultCurrentCallPr62, _props$styleProps3, _defaultCurrentCallPr63, _props$styleProps4, _defaultCurrentCallPr67, _props$styleProps8, _defaultCurrentCallPr68, _props$styleProps9, _defaultCurrentCallPr69, _props$styleProps10, _defaultCurrentCallPr70, _props$styleProps11, _defaultCurrentCallPr71, _props$styleProps12, _props$controlProps68, _defaultCurrentCallPr72, _props$styleProps13, _props$styleProps13$c, _props$styleProps14, _props$styleProps14$c, _props$styleProps15, _props$styleProps15$c, _props$styleProps16, _props$styleProps16$c, _props$styleProps17, _props$styleProps17$c, _props$controlProps69, _props$controlProps70, _props$controlProps71, _props$controlProps72, _props$controlProps73, _props$controlProps74, _props$controlProps75, _props$controlProps76, _props$controlProps77, _defaultCurrentCallPr73, _defaultCurrentCallPr74, _props$controlProps78, _props$controlProps79, _defaultCurrentCallPr75, _defaultCurrentCallPr76, _props$controlProps80, _props$controlProps81, _props$controlProps82, _props$controlProps83, _defaultCurrentCallPr77, _defaultCurrentCallPr78, _props$controlProps84, _props$controlProps85, _defaultCurrentCallPr79, _defaultCurrentCallPr80, _props$controlProps86, _props$controlProps87, _props$controlProps88, _props$controlProps89, _props$controlProps90, _defaultCurrentCallPr81, _defaultCurrentCallPr82, _props$controlProps91, _props$controlProps92, _defaultCurrentCallPr83, _defaultCurrentCallPr84, _props$controlProps93, _props$controlProps94, _props$controlProps95, _props$controlProps96, _defaultCurrentCallPr85, _defaultCurrentCallPr86, _props$controlProps97, _props$controlProps98, _defaultCurrentCallPr87, _defaultCurrentCallPr88, _props$controlProps99, _props$controlProps100, _props$controlProps101;
+
+  const currentCallId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultCurrentCallPr = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr === void 0 ? void 0 : _defaultCurrentCallPr.id);
+  const endCallButtonId = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : (_props$controlProps2$ = _props$controlProps2.endCallButtonProps) === null || _props$controlProps2$ === void 0 ? void 0 : _props$controlProps2$.id) ?? ((_defaultCurrentCallPr2 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr2 === void 0 ? void 0 : (_defaultCurrentCallPr3 = _defaultCurrentCallPr2.endCallButtonProps) === null || _defaultCurrentCallPr3 === void 0 ? void 0 : _defaultCurrentCallPr3.id);
+  const micButtonId = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : (_props$controlProps3$ = _props$controlProps3.micButtonProps) === null || _props$controlProps3$ === void 0 ? void 0 : _props$controlProps3$.id) ?? ((_defaultCurrentCallPr4 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr4 === void 0 ? void 0 : (_defaultCurrentCallPr5 = _defaultCurrentCallPr4.micButtonProps) === null || _defaultCurrentCallPr5 === void 0 ? void 0 : _defaultCurrentCallPr5.id);
+  const videoOffButtonId = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : (_props$controlProps4$ = _props$controlProps4.videoButtonProps) === null || _props$controlProps4$ === void 0 ? void 0 : _props$controlProps4$.id) ?? ((_defaultCurrentCallPr6 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr6 === void 0 ? void 0 : (_defaultCurrentCallPr7 = _defaultCurrentCallPr6.videoButtonProps) === null || _defaultCurrentCallPr7 === void 0 ? void 0 : _defaultCurrentCallPr7.id);
+  const callTimerId = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : (_props$controlProps5$ = _props$controlProps5.callTimerProps) === null || _props$controlProps5$ === void 0 ? void 0 : _props$controlProps5$.id) ?? ((_defaultCurrentCallPr8 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr8 === void 0 ? void 0 : (_defaultCurrentCallPr9 = _defaultCurrentCallPr8.callTimerProps) === null || _defaultCurrentCallPr9 === void 0 ? void 0 : _defaultCurrentCallPr9.id);
+  const videoTileId = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : (_props$controlProps6$ = _props$controlProps6.nonActionIds) === null || _props$controlProps6$ === void 0 ? void 0 : _props$controlProps6$.videoTileGroupId) ?? ((_defaultCurrentCallPr10 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr10 === void 0 ? void 0 : (_defaultCurrentCallPr11 = _defaultCurrentCallPr10.nonActionIds) === null || _defaultCurrentCallPr11 === void 0 ? void 0 : _defaultCurrentCallPr11.videoTileGroupId);
+  const remoteVideoTileId = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : (_props$controlProps7$ = _props$controlProps7.nonActionIds) === null || _props$controlProps7$ === void 0 ? void 0 : _props$controlProps7$.remoteVideoTileId) ?? ((_defaultCurrentCallPr12 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr12 === void 0 ? void 0 : (_defaultCurrentCallPr13 = _defaultCurrentCallPr12.nonActionIds) === null || _defaultCurrentCallPr13 === void 0 ? void 0 : _defaultCurrentCallPr13.remoteVideoTileId);
+  const selfVideoTileId = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : (_props$controlProps8$ = _props$controlProps8.nonActionIds) === null || _props$controlProps8$ === void 0 ? void 0 : _props$controlProps8$.selfVideoTileId) ?? ((_defaultCurrentCallPr14 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr14 === void 0 ? void 0 : (_defaultCurrentCallPr15 = _defaultCurrentCallPr14.nonActionIds) === null || _defaultCurrentCallPr15 === void 0 ? void 0 : _defaultCurrentCallPr15.selfVideoTileId);
+  const dir = (_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.dir ? (_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.dir : (_defaultCurrentCallPr16 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr16 === void 0 ? void 0 : _defaultCurrentCallPr16.dir;
+  const stackStyles = {
+    root: Object.assign({}, (_defaultCurrentCallPr17 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr17 === void 0 ? void 0 : _defaultCurrentCallPr17.generalStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
+  };
+  const leftGroupStackTokens = {
+    childrenGap: ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : (_props$controlProps12 = _props$controlProps11.leftGroup) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.gap) ?? ((_defaultCurrentCallPr18 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr18 === void 0 ? void 0 : (_defaultCurrentCallPr19 = _defaultCurrentCallPr18.leftGroup) === null || _defaultCurrentCallPr19 === void 0 ? void 0 : _defaultCurrentCallPr19.gap)
+  };
+  const rightGroupStackTokens = {
+    childrenGap: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : (_props$controlProps14 = _props$controlProps13.rightGroup) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.gap) ?? ((_defaultCurrentCallPr20 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr20 === void 0 ? void 0 : (_defaultCurrentCallPr21 = _defaultCurrentCallPr20.rightGroup) === null || _defaultCurrentCallPr21 === void 0 ? void 0 : _defaultCurrentCallPr21.gap)
+  };
+  const middleGroupStackTokens = {
+    childrenGap: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : (_props$controlProps16 = _props$controlProps15.middleGroup) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.gap) ?? ((_defaultCurrentCallPr22 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr22 === void 0 ? void 0 : (_defaultCurrentCallPr23 = _defaultCurrentCallPr22.middleGroup) === null || _defaultCurrentCallPr23 === void 0 ? void 0 : _defaultCurrentCallPr23.gap)
+  };
+  const videoOffIcon = (_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && (_props$controlProps18 = _props$controlProps17.videoButtonProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.imageToggleIconProps ? {
+    imageProps: ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : (_props$controlProps20 = _props$controlProps19.videoButtonProps) === null || _props$controlProps20 === void 0 ? void 0 : _props$controlProps20.imageToggleIconProps) ?? ((_defaultCurrentCallPr24 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr24 === void 0 ? void 0 : (_defaultCurrentCallPr25 = _defaultCurrentCallPr24.videoButtonProps) === null || _defaultCurrentCallPr25 === void 0 ? void 0 : _defaultCurrentCallPr25.imageToggleIconProps),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps21 = props.controlProps) === null || _props$controlProps21 === void 0 ? void 0 : (_props$controlProps22 = _props$controlProps21.videoButtonProps) === null || _props$controlProps22 === void 0 ? void 0 : _props$controlProps22.iconSize) ?? ((_defaultCurrentCallPr26 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr26 === void 0 ? void 0 : (_defaultCurrentCallPr27 = _defaultCurrentCallPr26.videoButtonProps) === null || _defaultCurrentCallPr27 === void 0 ? void 0 : _defaultCurrentCallPr27.iconSize)
+      }
+    }
+  } : {
+    iconName: ((_props$controlProps23 = props.controlProps) === null || _props$controlProps23 === void 0 ? void 0 : (_props$controlProps24 = _props$controlProps23.videoButtonProps) === null || _props$controlProps24 === void 0 ? void 0 : _props$controlProps24.toggleIconName) ?? ((_defaultCurrentCallPr28 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr28 === void 0 ? void 0 : (_defaultCurrentCallPr29 = _defaultCurrentCallPr28.videoButtonProps) === null || _defaultCurrentCallPr29 === void 0 ? void 0 : _defaultCurrentCallPr29.toggleIconName),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps25 = props.controlProps) === null || _props$controlProps25 === void 0 ? void 0 : (_props$controlProps26 = _props$controlProps25.videoButtonProps) === null || _props$controlProps26 === void 0 ? void 0 : _props$controlProps26.iconSize) ?? ((_defaultCurrentCallPr30 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr30 === void 0 ? void 0 : (_defaultCurrentCallPr31 = _defaultCurrentCallPr30.videoButtonProps) === null || _defaultCurrentCallPr31 === void 0 ? void 0 : _defaultCurrentCallPr31.iconSize)
+      }
+    }
+  };
+  const videoOnIcon = (_props$controlProps27 = props.controlProps) !== null && _props$controlProps27 !== void 0 && (_props$controlProps28 = _props$controlProps27.videoButtonProps) !== null && _props$controlProps28 !== void 0 && _props$controlProps28.imageIconProps ? {
+    imageProps: ((_props$controlProps29 = props.controlProps) === null || _props$controlProps29 === void 0 ? void 0 : (_props$controlProps30 = _props$controlProps29.videoButtonProps) === null || _props$controlProps30 === void 0 ? void 0 : _props$controlProps30.imageIconProps) ?? ((_defaultCurrentCallPr32 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr32 === void 0 ? void 0 : (_defaultCurrentCallPr33 = _defaultCurrentCallPr32.videoButtonProps) === null || _defaultCurrentCallPr33 === void 0 ? void 0 : _defaultCurrentCallPr33.imageIconProps),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps31 = props.controlProps) === null || _props$controlProps31 === void 0 ? void 0 : (_props$controlProps32 = _props$controlProps31.videoButtonProps) === null || _props$controlProps32 === void 0 ? void 0 : _props$controlProps32.iconSize) ?? ((_defaultCurrentCallPr34 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr34 === void 0 ? void 0 : (_defaultCurrentCallPr35 = _defaultCurrentCallPr34.videoButtonProps) === null || _defaultCurrentCallPr35 === void 0 ? void 0 : _defaultCurrentCallPr35.iconSize)
+      }
+    }
+  } : {
+    iconName: ((_props$controlProps33 = props.controlProps) === null || _props$controlProps33 === void 0 ? void 0 : (_props$controlProps34 = _props$controlProps33.videoButtonProps) === null || _props$controlProps34 === void 0 ? void 0 : _props$controlProps34.iconName) ?? ((_defaultCurrentCallPr36 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr36 === void 0 ? void 0 : (_defaultCurrentCallPr37 = _defaultCurrentCallPr36.videoButtonProps) === null || _defaultCurrentCallPr37 === void 0 ? void 0 : _defaultCurrentCallPr37.iconName),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps35 = props.controlProps) === null || _props$controlProps35 === void 0 ? void 0 : (_props$controlProps36 = _props$controlProps35.videoButtonProps) === null || _props$controlProps36 === void 0 ? void 0 : _props$controlProps36.iconSize) ?? ((_defaultCurrentCallPr38 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr38 === void 0 ? void 0 : (_defaultCurrentCallPr39 = _defaultCurrentCallPr38.videoButtonProps) === null || _defaultCurrentCallPr39 === void 0 ? void 0 : _defaultCurrentCallPr39.iconSize)
+      }
+    }
+  };
+  const hideVideoDialog = ((_props$controlProps37 = props.controlProps) === null || _props$controlProps37 === void 0 ? void 0 : _props$controlProps37.videoCallDisabled) ?? ((_defaultCurrentCallPr40 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr40 === void 0 ? void 0 : _defaultCurrentCallPr40.videoCallDisabled);
+  const hideSelfVideo = ((_props$controlProps38 = props.controlProps) === null || _props$controlProps38 === void 0 ? void 0 : _props$controlProps38.selfVideoDisabled) ?? ((_defaultCurrentCallPr41 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr41 === void 0 ? void 0 : _defaultCurrentCallPr41.selfVideoDisabled);
+  const hideRemoteVideo = ((_props$controlProps39 = props.controlProps) === null || _props$controlProps39 === void 0 ? void 0 : _props$controlProps39.remoteVideoDisabled) ?? ((_defaultCurrentCallPr42 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr42 === void 0 ? void 0 : _defaultCurrentCallPr42.remoteVideoDisabled);
+  const micOffIcon = (_props$controlProps40 = props.controlProps) !== null && _props$controlProps40 !== void 0 && (_props$controlProps41 = _props$controlProps40.micButtonProps) !== null && _props$controlProps41 !== void 0 && _props$controlProps41.imageIconProps ? {
+    imageProps: ((_props$controlProps42 = props.controlProps) === null || _props$controlProps42 === void 0 ? void 0 : (_props$controlProps43 = _props$controlProps42.micButtonProps) === null || _props$controlProps43 === void 0 ? void 0 : _props$controlProps43.imageIconProps) ?? ((_defaultCurrentCallPr43 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr43 === void 0 ? void 0 : (_defaultCurrentCallPr44 = _defaultCurrentCallPr43.micButtonProps) === null || _defaultCurrentCallPr44 === void 0 ? void 0 : _defaultCurrentCallPr44.imageIconProps),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps44 = props.controlProps) === null || _props$controlProps44 === void 0 ? void 0 : (_props$controlProps45 = _props$controlProps44.micButtonProps) === null || _props$controlProps45 === void 0 ? void 0 : _props$controlProps45.iconSize) ?? ((_defaultCurrentCallPr45 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr45 === void 0 ? void 0 : (_defaultCurrentCallPr46 = _defaultCurrentCallPr45.micButtonProps) === null || _defaultCurrentCallPr46 === void 0 ? void 0 : _defaultCurrentCallPr46.iconSize)
+      }
+    }
+  } : {
+    iconName: ((_props$controlProps46 = props.controlProps) === null || _props$controlProps46 === void 0 ? void 0 : (_props$controlProps47 = _props$controlProps46.micButtonProps) === null || _props$controlProps47 === void 0 ? void 0 : _props$controlProps47.iconName) ?? ((_defaultCurrentCallPr47 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr47 === void 0 ? void 0 : (_defaultCurrentCallPr48 = _defaultCurrentCallPr47.micButtonProps) === null || _defaultCurrentCallPr48 === void 0 ? void 0 : _defaultCurrentCallPr48.iconName),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps48 = props.controlProps) === null || _props$controlProps48 === void 0 ? void 0 : (_props$controlProps49 = _props$controlProps48.micButtonProps) === null || _props$controlProps49 === void 0 ? void 0 : _props$controlProps49.iconSize) ?? ((_defaultCurrentCallPr49 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr49 === void 0 ? void 0 : (_defaultCurrentCallPr50 = _defaultCurrentCallPr49.micButtonProps) === null || _defaultCurrentCallPr50 === void 0 ? void 0 : _defaultCurrentCallPr50.iconSize)
+      }
+    }
+  };
+  const micOnIcon = (_props$controlProps50 = props.controlProps) !== null && _props$controlProps50 !== void 0 && (_props$controlProps51 = _props$controlProps50.micButtonProps) !== null && _props$controlProps51 !== void 0 && _props$controlProps51.imageToggleIconProps ? {
+    imageProps: ((_props$controlProps52 = props.controlProps) === null || _props$controlProps52 === void 0 ? void 0 : (_props$controlProps53 = _props$controlProps52.micButtonProps) === null || _props$controlProps53 === void 0 ? void 0 : _props$controlProps53.imageToggleIconProps) ?? ((_defaultCurrentCallPr51 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr51 === void 0 ? void 0 : (_defaultCurrentCallPr52 = _defaultCurrentCallPr51.micButtonProps) === null || _defaultCurrentCallPr52 === void 0 ? void 0 : _defaultCurrentCallPr52.imageToggleIconProps),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps54 = props.controlProps) === null || _props$controlProps54 === void 0 ? void 0 : (_props$controlProps55 = _props$controlProps54.videoButtonProps) === null || _props$controlProps55 === void 0 ? void 0 : _props$controlProps55.iconSize) ?? ((_defaultCurrentCallPr53 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr53 === void 0 ? void 0 : (_defaultCurrentCallPr54 = _defaultCurrentCallPr53.videoButtonProps) === null || _defaultCurrentCallPr54 === void 0 ? void 0 : _defaultCurrentCallPr54.iconSize)
+      }
+    }
+  } : {
+    iconName: ((_props$controlProps56 = props.controlProps) === null || _props$controlProps56 === void 0 ? void 0 : (_props$controlProps57 = _props$controlProps56.micButtonProps) === null || _props$controlProps57 === void 0 ? void 0 : _props$controlProps57.toggleIconName) ?? ((_defaultCurrentCallPr55 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr55 === void 0 ? void 0 : (_defaultCurrentCallPr56 = _defaultCurrentCallPr55.micButtonProps) === null || _defaultCurrentCallPr56 === void 0 ? void 0 : _defaultCurrentCallPr56.toggleIconName),
+    styles: {
+      root: {
+        fontSize: ((_props$controlProps58 = props.controlProps) === null || _props$controlProps58 === void 0 ? void 0 : (_props$controlProps59 = _props$controlProps58.videoButtonProps) === null || _props$controlProps59 === void 0 ? void 0 : _props$controlProps59.iconSize) ?? ((_defaultCurrentCallPr57 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr57 === void 0 ? void 0 : (_defaultCurrentCallPr58 = _defaultCurrentCallPr57.videoButtonProps) === null || _defaultCurrentCallPr58 === void 0 ? void 0 : _defaultCurrentCallPr58.iconSize)
+      }
+    }
+  };
+  const [micState, {
+    toggle: setMicState
+  }] = useBoolean(false);
+  const endCallButtonProps = Object.assign({}, (_defaultCurrentCallPr59 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr59 === void 0 ? void 0 : _defaultCurrentCallPr59.endCallButtonProps, (_props$controlProps60 = props.controlProps) === null || _props$controlProps60 === void 0 ? void 0 : _props$controlProps60.endCallButtonProps);
+  const callTimerProps = Object.assign({}, (_defaultCurrentCallPr60 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr60 === void 0 ? void 0 : _defaultCurrentCallPr60.callTimerProps, (_props$controlProps61 = props.controlProps) === null || _props$controlProps61 === void 0 ? void 0 : _props$controlProps61.callTimerProps);
+  const endCallButtonStyles = Object.assign({}, (_defaultCurrentCallPr61 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr61 === void 0 ? void 0 : _defaultCurrentCallPr61.endCallButtonStyleProps, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.endCallButtonStyleProps);
+  const endCallButtonHoverStyles = Object.assign({}, (_defaultCurrentCallPr62 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr62 === void 0 ? void 0 : _defaultCurrentCallPr62.endCallButtonHoverStyleProps, (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.endCallButtonHoverStyleProps);
+  let selfVideoStyles = {
+    root: Object.assign({}, (_defaultCurrentCallPr63 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr63 === void 0 ? void 0 : _defaultCurrentCallPr63.selfVideoStyleProps, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.selfVideoStyleProps)
+  };
+
+  if (hideRemoteVideo && !hideSelfVideo) {
+    var _defaultCurrentCallPr64, _props$styleProps5;
+
+    selfVideoStyles = {
+      root: Object.assign({}, (_defaultCurrentCallPr64 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr64 === void 0 ? void 0 : _defaultCurrentCallPr64.selfVideoMaximizeStyleProps, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.selfVideoMaximizeStyleProps)
+    };
+  }
+
+  let videoTileStackStyles;
+
+  if (hideVideoDialog) {
+    var _defaultCurrentCallPr65, _props$styleProps6;
+
+    videoTileStackStyles = {
+      root: Object.assign({}, (_defaultCurrentCallPr65 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr65 === void 0 ? void 0 : _defaultCurrentCallPr65.videoTileStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.videoTileStyleProps)
+    };
+  } else {
+    var _defaultCurrentCallPr66, _props$styleProps7;
+
+    videoTileStackStyles = {
+      root: Object.assign({}, (_defaultCurrentCallPr66 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr66 === void 0 ? void 0 : _defaultCurrentCallPr66.videoTileStyleWithVideoProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.videoTileStyleWithVideoProps)
+    };
+  }
+
+  const videoOffButtonStyles = {
+    root: Object.assign({}, (_defaultCurrentCallPr67 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr67 === void 0 ? void 0 : _defaultCurrentCallPr67.videoOffButtonStyleProps, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.videoOffButtonStyleProps),
+    rootFocused: Object.assign({}, (_defaultCurrentCallPr68 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr68 === void 0 ? void 0 : _defaultCurrentCallPr68.itemFocusStyleProps, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.itemFocusStyleProps)
+  };
+  const micOffButtonStyles = {
+    root: Object.assign({}, (_defaultCurrentCallPr69 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr69 === void 0 ? void 0 : _defaultCurrentCallPr69.micButtonStyleProps, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.micButtonStyleProps),
+    rootFocused: Object.assign({}, (_defaultCurrentCallPr70 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr70 === void 0 ? void 0 : _defaultCurrentCallPr70.itemFocusStyleProps, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.itemFocusStyleProps)
+  };
+  const CurrentCallItemFocusStyles = Object.assign({}, (_defaultCurrentCallPr71 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr71 === void 0 ? void 0 : _defaultCurrentCallPr71.itemFocusStyleProps, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.itemFocusStyleProps);
+  const endCallCustomEvent = {
+    elementType: ElementType.CurrentCallEndCallButton,
+    elementId: endCallButtonId,
+    eventName: "OnClick"
+  };
+  const handleEndCallClick = useCallback(() => {
+    var _props$controlProps62;
+
+    if ((_props$controlProps62 = props.controlProps) !== null && _props$controlProps62 !== void 0 && _props$controlProps62.onEndCallClick) {
+      var _props$controlProps63;
+
+      (_props$controlProps63 = props.controlProps) === null || _props$controlProps63 === void 0 ? void 0 : _props$controlProps63.onEndCallClick();
+    }
+  }, []);
+  const handleVideoOffClick = useCallback(() => {
+    var _props$controlProps64;
+
+    if ((_props$controlProps64 = props.controlProps) !== null && _props$controlProps64 !== void 0 && _props$controlProps64.onVideoOffClick) {
+      var _props$controlProps65;
+
+      const videoOffCustomEvent = {
+        elementType: ElementType.CurrentCallVideoButton,
+        elementId: videoOffButtonId,
+        eventName: "OnClick"
+      };
+      BroadcastService.postMessage(videoOffCustomEvent);
+      (_props$controlProps65 = props.controlProps) === null || _props$controlProps65 === void 0 ? void 0 : _props$controlProps65.onVideoOffClick();
+    }
+  }, []);
+  const handleMicClick = useCallback(() => {
+    var _props$controlProps66;
+
+    setMicState();
+
+    if ((_props$controlProps66 = props.controlProps) !== null && _props$controlProps66 !== void 0 && _props$controlProps66.onMicCallClick) {
+      var _props$controlProps67;
+
+      const micCustomEvent = {
+        elementType: ElementType.CurrentCallMicButton,
+        elementId: micButtonId,
+        eventName: "OnClick"
+      };
+      BroadcastService.postMessage(micCustomEvent);
+      (_props$controlProps67 = props.controlProps) === null || _props$controlProps67 === void 0 ? void 0 : _props$controlProps67.onMicCallClick();
+    }
+  }, []);
+  const hideCallTimer = ((_props$controlProps68 = props.controlProps) === null || _props$controlProps68 === void 0 ? void 0 : _props$controlProps68.hideCallTimer) ?? ((_defaultCurrentCallPr72 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr72 === void 0 ? void 0 : _defaultCurrentCallPr72.hideCallTimer);
+  useEffect(() => {
+    const endCallShortcut = e => e.key === KeyCodes.ENTER;
+
+    const toggleMicShortcut = e => e.ctrlKey && e.shiftKey && e.key === KeyCodes.ToggleMicHotKey;
+
+    const toggleVideoShortcut = e => e.ctrlKey && e.shiftKey && e.key === KeyCodes.ToggleCameraHotKey;
+
+    const shortcutKeysHandler = e => {
+      if (endCallShortcut(e)) {
+        handleEndCallClick();
+      } else if (toggleMicShortcut(e)) {
+        handleMicClick();
+      } else if (toggleVideoShortcut(e)) {
+        handleVideoOffClick();
+      }
+    };
+
+    const ignoreDefault = e => {
+      if (endCallShortcut(e) || toggleMicShortcut(e) || toggleVideoShortcut(e)) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("keyup", shortcutKeysHandler);
+    window.addEventListener("keydown", ignoreDefault);
+    return () => {
+      window.removeEventListener("keyup", shortcutKeysHandler);
+      window.removeEventListener("keydown", ignoreDefault);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Stack, {
+    className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.currentCallComponentClassName,
+    horizontalAlign: "space-between",
+    styles: stackStyles,
+    id: currentCallId,
+    dir: dir
+  }, /*#__PURE__*/React.createElement(Stack, {
+    styles: videoTileStackStyles,
+    id: videoTileId,
+    className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.videoTileGroupClassName
+  }, /*#__PURE__*/React.createElement(Stack, {
+    id: remoteVideoTileId,
+    className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.remoteVideoTileClassName
+  }), /*#__PURE__*/React.createElement(Stack, {
+    styles: selfVideoStyles,
+    id: selfVideoTileId,
+    className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.selfVideoTileClassName
+  })), /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.currentCallfooterClassName,
+    horizontalAlign: "space-between",
+    styles: stackStyles,
+    dir: dir
+  }, /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    id: "currentCallLeftGroup",
+    verticalAlign: "center",
+    tokens: leftGroupStackTokens
+  }, processCustomComponents((_props$controlProps69 = props.controlProps) === null || _props$controlProps69 === void 0 ? void 0 : (_props$controlProps70 = _props$controlProps69.leftGroup) === null || _props$controlProps70 === void 0 ? void 0 : _props$controlProps70.children)), /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    id: "currentCallMiddleGroup",
+    verticalAlign: "center",
+    tokens: middleGroupStackTokens,
+    dir: dir
+  }, processCustomComponents((_props$controlProps71 = props.controlProps) === null || _props$controlProps71 === void 0 ? void 0 : (_props$controlProps72 = _props$controlProps71.middleGroup) === null || _props$controlProps72 === void 0 ? void 0 : _props$controlProps72.children), !hideCallTimer && /*#__PURE__*/React.createElement(Timer, _extends({}, callTimerProps, {
+    id: callTimerId
+  })), !((_props$controlProps73 = props.controlProps) !== null && _props$controlProps73 !== void 0 && _props$controlProps73.hideVideoButton) && /*#__PURE__*/React.createElement(IconButton, {
+    id: videoOffButtonId,
+    toggle: true,
+    iconProps: hideSelfVideo ? videoOffIcon : videoOnIcon,
+    onClick: handleVideoOffClick,
+    allowDisabledFocus: true,
+    disabled: (_props$controlProps74 = props.controlProps) === null || _props$controlProps74 === void 0 ? void 0 : (_props$controlProps75 = _props$controlProps74.videoButtonProps) === null || _props$controlProps75 === void 0 ? void 0 : _props$controlProps75.disabled,
+    styles: videoOffButtonStyles,
+    ariaLabel: hideSelfVideo ? ((_props$controlProps76 = props.controlProps) === null || _props$controlProps76 === void 0 ? void 0 : (_props$controlProps77 = _props$controlProps76.videoButtonProps) === null || _props$controlProps77 === void 0 ? void 0 : _props$controlProps77.ariaLabel) ?? ((_defaultCurrentCallPr73 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr73 === void 0 ? void 0 : (_defaultCurrentCallPr74 = _defaultCurrentCallPr73.videoButtonProps) === null || _defaultCurrentCallPr74 === void 0 ? void 0 : _defaultCurrentCallPr74.ariaLabel) : ((_props$controlProps78 = props.controlProps) === null || _props$controlProps78 === void 0 ? void 0 : (_props$controlProps79 = _props$controlProps78.videoButtonProps) === null || _props$controlProps79 === void 0 ? void 0 : _props$controlProps79.toggleAriaLabel) ?? ((_defaultCurrentCallPr75 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr75 === void 0 ? void 0 : (_defaultCurrentCallPr76 = _defaultCurrentCallPr75.videoButtonProps) === null || _defaultCurrentCallPr76 === void 0 ? void 0 : _defaultCurrentCallPr76.toggleAriaLabel),
+    className: (_props$controlProps80 = props.controlProps) === null || _props$controlProps80 === void 0 ? void 0 : (_props$controlProps81 = _props$controlProps80.videoButtonProps) === null || _props$controlProps81 === void 0 ? void 0 : _props$controlProps81.className,
+    title: hideSelfVideo ? ((_props$controlProps82 = props.controlProps) === null || _props$controlProps82 === void 0 ? void 0 : (_props$controlProps83 = _props$controlProps82.videoButtonProps) === null || _props$controlProps83 === void 0 ? void 0 : _props$controlProps83.ariaLabel) ?? ((_defaultCurrentCallPr77 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr77 === void 0 ? void 0 : (_defaultCurrentCallPr78 = _defaultCurrentCallPr77.videoButtonProps) === null || _defaultCurrentCallPr78 === void 0 ? void 0 : _defaultCurrentCallPr78.ariaLabel) : ((_props$controlProps84 = props.controlProps) === null || _props$controlProps84 === void 0 ? void 0 : (_props$controlProps85 = _props$controlProps84.videoButtonProps) === null || _props$controlProps85 === void 0 ? void 0 : _props$controlProps85.toggleAriaLabel) ?? ((_defaultCurrentCallPr79 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr79 === void 0 ? void 0 : (_defaultCurrentCallPr80 = _defaultCurrentCallPr79.videoButtonProps) === null || _defaultCurrentCallPr80 === void 0 ? void 0 : _defaultCurrentCallPr80.toggleAriaLabel)
+  }), !((_props$controlProps86 = props.controlProps) !== null && _props$controlProps86 !== void 0 && _props$controlProps86.hideMicButton) && /*#__PURE__*/React.createElement(IconButton, {
+    id: micButtonId,
+    toggle: true,
+    iconProps: micState ? micOnIcon : micOffIcon,
+    onClick: handleMicClick,
+    allowDisabledFocus: true,
+    disabled: (_props$controlProps87 = props.controlProps) === null || _props$controlProps87 === void 0 ? void 0 : (_props$controlProps88 = _props$controlProps87.micButtonProps) === null || _props$controlProps88 === void 0 ? void 0 : _props$controlProps88.disabled,
+    styles: micOffButtonStyles,
+    ariaLabel: micState ? ((_props$controlProps89 = props.controlProps) === null || _props$controlProps89 === void 0 ? void 0 : (_props$controlProps90 = _props$controlProps89.micButtonProps) === null || _props$controlProps90 === void 0 ? void 0 : _props$controlProps90.toggleAriaLabel) ?? ((_defaultCurrentCallPr81 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr81 === void 0 ? void 0 : (_defaultCurrentCallPr82 = _defaultCurrentCallPr81.micButtonProps) === null || _defaultCurrentCallPr82 === void 0 ? void 0 : _defaultCurrentCallPr82.toggleAriaLabel) : ((_props$controlProps91 = props.controlProps) === null || _props$controlProps91 === void 0 ? void 0 : (_props$controlProps92 = _props$controlProps91.micButtonProps) === null || _props$controlProps92 === void 0 ? void 0 : _props$controlProps92.ariaLabel) ?? ((_defaultCurrentCallPr83 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr83 === void 0 ? void 0 : (_defaultCurrentCallPr84 = _defaultCurrentCallPr83.micButtonProps) === null || _defaultCurrentCallPr84 === void 0 ? void 0 : _defaultCurrentCallPr84.ariaLabel),
+    className: (_props$controlProps93 = props.controlProps) === null || _props$controlProps93 === void 0 ? void 0 : (_props$controlProps94 = _props$controlProps93.micButtonProps) === null || _props$controlProps94 === void 0 ? void 0 : _props$controlProps94.className,
+    title: micState ? ((_props$controlProps95 = props.controlProps) === null || _props$controlProps95 === void 0 ? void 0 : (_props$controlProps96 = _props$controlProps95.micButtonProps) === null || _props$controlProps96 === void 0 ? void 0 : _props$controlProps96.toggleAriaLabel) ?? ((_defaultCurrentCallPr85 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr85 === void 0 ? void 0 : (_defaultCurrentCallPr86 = _defaultCurrentCallPr85.micButtonProps) === null || _defaultCurrentCallPr86 === void 0 ? void 0 : _defaultCurrentCallPr86.toggleAriaLabel) : ((_props$controlProps97 = props.controlProps) === null || _props$controlProps97 === void 0 ? void 0 : (_props$controlProps98 = _props$controlProps97.micButtonProps) === null || _props$controlProps98 === void 0 ? void 0 : _props$controlProps98.ariaLabel) ?? ((_defaultCurrentCallPr87 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr87 === void 0 ? void 0 : (_defaultCurrentCallPr88 = _defaultCurrentCallPr87.micButtonProps) === null || _defaultCurrentCallPr88 === void 0 ? void 0 : _defaultCurrentCallPr88.ariaLabel)
+  }), !((_props$controlProps99 = props.controlProps) !== null && _props$controlProps99 !== void 0 && _props$controlProps99.hideEndCallButton) && /*#__PURE__*/React.createElement(CommandButton, _extends({}, endCallButtonProps, {
+    onClick: handleEndCallClick,
+    id: endCallButtonId,
+    styles: endCallButtonStyles,
+    hoverStyles: endCallButtonHoverStyles,
+    focusStyles: CurrentCallItemFocusStyles,
+    customEvent: endCallCustomEvent
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    id: "currentCallRightGroup",
+    verticalAlign: "center",
+    tokens: rightGroupStackTokens
+  }, processCustomComponents((_props$controlProps100 = props.controlProps) === null || _props$controlProps100 === void 0 ? void 0 : (_props$controlProps101 = _props$controlProps100.rightGroup) === null || _props$controlProps101 === void 0 ? void 0 : _props$controlProps101.children))));
+}
+
+export default CurrentCall;

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/common/defaultProps/defaultCurrentCallControlProps.js

@@ -0,0 +1,76 @@
+export const defaultCurrentCallControlProps = {
+  id: "currentCall-container",
+  nonActionIds: {
+    currentCallActionGroupId: "currentCall-actionicons",
+    currentCallFooterId: "currentCall-footer",
+    remoteVideoTileId: "remoteVideo",
+    selfVideoTileId: "selfVideo",
+    videoTileGroupId: "currentCall-body"
+  },
+  hideMicButton: false,
+  hideVideoButton: false,
+  hideEndCallButton: false,
+  hideCurrentCallTitle: false,
+  videoCallDisabled: false,
+  hideCallTimer: false,
+  onEndCallClick: function () {
+    console.log("end call clicked");
+  },
+  onMicCallClick: function () {
+    console.log("mute clicked");
+  },
+  onVideoOffClick: function () {
+    console.log("video off clicked");
+  },
+  middleGroup: {
+    gap: 1,
+    children: []
+  },
+  leftGroup: {
+    gap: 1,
+    children: []
+  },
+  rightGroup: {
+    gap: 1,
+    children: []
+  },
+  endCallButtonProps: {
+    id: "callRejectButton",
+    type: "icon",
+    ariaLabel: "End Call",
+    iconName: "DeclineCall",
+    iconSize: 18
+  },
+  micButtonProps: {
+    id: "toggleAudio",
+    type: "icon",
+    ariaLabel: "Mute",
+    toggleAriaLabel: "Unmute",
+    iconName: "Microphone",
+    toggleIconName: "MicOff2",
+    iconSize: 18
+  },
+  videoButtonProps: {
+    id: "toggleVideo",
+    type: "icon",
+    ariaLabel: "Turn on camera",
+    toggleAriaLabel: "Turn off camera",
+    iconName: "Video",
+    toggleIconName: "VideoOff",
+    iconSize: 18
+  },
+  callTimerProps: {
+    id: "oc-lcw-CurrentCall-timer",
+    showHours: false,
+    timerStyles: {
+      color: "white",
+      textAlign: "center",
+      backgroundColor: "#3d3c3c",
+      height: "45px",
+      width: "50px",
+      lineHeight: "40px",
+      borderRadius: "2px",
+      margin: "1px"
+    }
+  }
+};

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/common/defaultProps/defaultCurrentCallControlPropsRtl.js

@@ -0,0 +1,106 @@
+import { CallRejectButtonBase64, VideoOffIconBase64, VideoOnIconBase64, VoiceOffIconBase64, VoiceOnIconBase64 } from "../../../../../../assets/Icons";
+export const defaultCurrentCallControlPropsRtl = {
+  id: "currentCall-container",
+  nonActionIds: {
+    currentCallActionGroupId: "currentCall-actionicons",
+    currentCallFooterId: "currentCall-footer",
+    remoteVideoTileId: "remoteVideo",
+    selfVideoTileId: "selfVideo",
+    videoTileGroupId: "currentCall-body"
+  },
+  hideMicButton: false,
+  hideVideoButton: false,
+  hideEndCallButton: false,
+  hideCurrentCallTitle: false,
+  videoCallDisabled: false,
+  hideCallTimer: false,
+  onEndCallClick: function () {
+    console.log("end call clicked");
+  },
+  onMicCallClick: function () {
+    console.log("mute clicked");
+  },
+  onVideoOffClick: function () {
+    console.log("video off clicked");
+  },
+  middleGroup: {
+    gap: 1,
+    children: []
+  },
+  leftGroup: {
+    gap: 1,
+    children: []
+  },
+  rightGroup: {
+    gap: 1,
+    children: []
+  },
+  dir: "rtl",
+  endCallButtonProps: {
+    id: "callRejectButton",
+    type: "icon",
+    ariaLabel: "End Call",
+    imageIconProps: {
+      src: CallRejectButtonBase64,
+      styles: {
+        image: {
+          height: "18px",
+          width: "18px"
+        }
+      }
+    }
+  },
+  micButtonProps: {
+    id: "toggleAudio",
+    type: "icon",
+    ariaLabel: "Mute",
+    toggleAriaLabel: "Unmute",
+    imageIconProps: {
+      src: VoiceOnIconBase64,
+      styles: {
+        image: {
+          height: "16px",
+          width: "16px"
+        }
+      }
+    },
+    imageToggleIconProps: {
+      src: VoiceOffIconBase64,
+      styles: {
+        image: {
+          height: "16px",
+          width: "16px"
+        }
+      }
+    },
+    iconSize: 18
+  },
+  videoButtonProps: {
+    id: "toggleVideo",
+    type: "icon",
+    ariaLabel: "Turn camera on",
+    toggleAriaLabel: "Turn camera off",
+    imageIconProps: {
+      src: VideoOnIconBase64,
+      styles: {
+        image: {
+          height: "16px",
+          width: "16px"
+        }
+      }
+    },
+    imageToggleIconProps: {
+      src: VideoOffIconBase64,
+      styles: {
+        image: {
+          height: "16px",
+          width: "16px"
+        }
+      }
+    },
+    iconSize: 18
+  },
+  callTimerProps: {
+    id: "oc-lcw-CurrentCall-timer"
+  }
+};

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/common/defaultProps/defaultCurrentCallProps.js

@@ -0,0 +1,6 @@
+import { defaultCurrentCallStyleProps } from "../defaultStyles/defaultCurrentCallStyleProps";
+import { defaultCurrentCallControlProps } from "./defaultCurrentCallControlProps";
+export const defaultCurrentCallProps = {
+  controlProps: defaultCurrentCallControlProps,
+  styleProps: defaultCurrentCallStyleProps
+};

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/common/defaultStyles/componentOverridesStyleProps.js

@@ -0,0 +1,11 @@
+import { defaultCurrentCallStyleProps } from "./defaultCurrentCallStyleProps";
+const componentOverrideStyles = Object.assign({}, defaultCurrentCallStyleProps);
+export const componentOverridesStyleProps = { ...componentOverrideStyles,
+  generalStyleProps: {
+    background: "#C8C8C8",
+    padding: "5px",
+    minHeight: "50px",
+    borderRadius: "4px 4px 4px 4px",
+    width: "80%"
+  }
+};