odaptos_design_system 2.0.97 → 2.0.99

package/dist/odaptos_design_system.esm.js

@@ -12730,13 +12730,13 @@ const CircledIconButton = ({
   }));
 };
 
-var css_248z$p = ".ControlsBar-modules_control_bar__ft1eh{align-items:center;display:inline-flex;gap:.5rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_separator__0fqPr{background:var(--color-neutral-dark-shades-700,#64666a);height:1rem;width:.0625rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8{align-items:center;background:var(--Color-Extended-Red-50,#fff6f6);border:none;border-radius:1.5rem;box-shadow:0 4px 8px 3px rgba(0,0,0,.08),0 1px 3px 0 rgba(0,0,0,.15);cursor:pointer;display:flex;gap:.5rem;padding:.5rem .75rem .5rem .5rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:hover{background:var(--Color-Neutral-Basics-White,#fff)}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:active{background:var(--Color-Extended-Red-100,#fddbdb)}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled{cursor:not-allowed}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled:active,.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled:hover{background:var(--Color-Extended-Red-50,#fff6f6)}.ControlsBar-modules_chatBubbleIcon__vCKpm svg{fill:transparent!important}.ControlsBar-modules_stop_rec_popover__3zCEy{display:flex;flex-direction:column;padding:1rem;width:-moz-min-content;width:min-content}.ControlsBar-modules_stop_rec_popover_actions__GxI-F{display:flex;gap:.5rem;margin-top:.5rem;width:-moz-max-content;width:max-content}";
-var styles$p = {"control_bar":"ControlsBar-modules_control_bar__ft1eh","separator":"ControlsBar-modules_separator__0fqPr","record_btn":"ControlsBar-modules_record_btn__DLwh8","chatBubbleIcon":"ControlsBar-modules_chatBubbleIcon__vCKpm","stop_rec_popover":"ControlsBar-modules_stop_rec_popover__3zCEy","stop_rec_popover_actions":"ControlsBar-modules_stop_rec_popover_actions__GxI-F"};
+var css_248z$p = ".ControlsBar-modules_control_bar__ft1eh{align-items:center;display:inline-flex;gap:.5rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_separator__0fqPr{background:var(--color-neutral-dark-shades-700,#64666a);height:1rem;width:.0625rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_observer_count__n86ih{align-items:center;display:flex;gap:.5rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8{align-items:center;background:var(--Color-Extended-Red-50,#fff6f6);border:none;border-radius:1.5rem;box-shadow:0 4px 8px 3px rgba(0,0,0,.08),0 1px 3px 0 rgba(0,0,0,.15);cursor:pointer;display:flex;gap:.5rem;padding:.5rem .75rem .5rem .5rem}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:hover{background:var(--Color-Neutral-Basics-White,#fff)}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:active{background:var(--Color-Extended-Red-100,#fddbdb)}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled{cursor:not-allowed}.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled:active,.ControlsBar-modules_control_bar__ft1eh .ControlsBar-modules_record_btn__DLwh8:disabled:hover{background:var(--Color-Extended-Red-50,#fff6f6)}.ControlsBar-modules_chatBubbleIcon__vCKpm svg{fill:transparent!important}.ControlsBar-modules_stop_rec_popover__3zCEy{display:flex;flex-direction:column;padding:1rem;width:-moz-min-content;width:min-content}.ControlsBar-modules_stop_rec_popover_actions__GxI-F{display:flex;gap:.5rem;margin-top:.5rem;width:-moz-max-content;width:max-content}";
+var styles$p = {"control_bar":"ControlsBar-modules_control_bar__ft1eh","separator":"ControlsBar-modules_separator__0fqPr","observer_count":"ControlsBar-modules_observer_count__n86ih","record_btn":"ControlsBar-modules_record_btn__DLwh8","chatBubbleIcon":"ControlsBar-modules_chatBubbleIcon__vCKpm","stop_rec_popover":"ControlsBar-modules_stop_rec_popover__3zCEy","stop_rec_popover_actions":"ControlsBar-modules_stop_rec_popover_actions__GxI-F"};
 styleInject(css_248z$p);
 
 const ControlsBar = ({
   className,
-  isInterviewer,
+  identity,
   endInterview,
   enableScreenSharing,
   enableMicrophone,
@@ -12769,11 +12769,24 @@ const ControlsBar = ({
   stopRecPopoverBtnTwoOnClick,
   stopRecText,
   startRecText,
+  exitInterview,
+  exitInterviewText,
+  disabledExitInterview,
   ...props
 }) => {
   const [isStopRecPopoverOpen, setIsStopRecPopoverOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  if (identity === 'observer') {
+    return /*#__PURE__*/React.createElement("div", Object.assign({
+      className: `${styles$p.control_bar} ${className ?? ''}`
+    }, props), exitInterview && exitInterviewText && /*#__PURE__*/React.createElement(InterviewButton, {
+      text: exitInterviewText,
+      variant: "end-interview",
+      disabled: disabledExitInterview,
+      onClick: () => exitInterview(),
+      icon: /*#__PURE__*/React.createElement(HangUpIcon, null)
+    }));
+  } else return /*#__PURE__*/React.createElement("div", Object.assign({
     className: `${styles$p.control_bar} ${className ?? ''}`
   }, props), enableMicrophone && /*#__PURE__*/React.createElement(CircledIconButton, {
     icon: isMicrophoneActive ? /*#__PURE__*/React.createElement(MicrophoneIcon, null) : /*#__PURE__*/React.createElement(NoMicrophoneIcon, null),
@@ -12791,7 +12804,7 @@ const ControlsBar = ({
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$p.separator
-  }), isInterviewer && isRecordingBtnDisplay && isModerated && /*#__PURE__*/React.createElement("button", {
+  }), identity === 'interviewer' && isRecordingBtnDisplay && isModerated && /*#__PURE__*/React.createElement("button", {
     ref: setAnchorEl,
     disabled: disabledRecording,
     className: styles$p.record_btn,
@@ -12808,13 +12821,13 @@ const ControlsBar = ({
   }), /*#__PURE__*/React.createElement(Text, {
     weight: "semi-bold",
     text: isRecording ? stopRecText : startRecText
-  })), isInterviewer && endInterview && /*#__PURE__*/React.createElement(InterviewButton, {
+  })), identity === 'interviewer' && endInterview && /*#__PURE__*/React.createElement(InterviewButton, {
     text: endInterviewText,
     variant: "end-interview",
     disabled: disabledEndInterview,
     onClick: () => endInterview(),
     icon: /*#__PURE__*/React.createElement(HangUpIcon, null)
-  }), (!isInterviewer || !isModerated) && screenShareText && enableScreenSharing && /*#__PURE__*/React.createElement(InterviewButton, {
+  }), (identity === 'interviewee' || !isModerated) && screenShareText && enableScreenSharing && /*#__PURE__*/React.createElement(InterviewButton, {
     id: "odaptos_screen_share",
     text: screenShareText,
     variant: "screenshare",
@@ -12822,7 +12835,7 @@ const ControlsBar = ({
     onClick: () => enableScreenSharing()
   }), isModerated && /*#__PURE__*/React.createElement("div", {
     className: styles$p.separator
-  }), isModerated && isInterviewer ? /*#__PURE__*/React.createElement(InterviewButton, {
+  }), isModerated && identity === 'interviewer' ? /*#__PURE__*/React.createElement(InterviewButton, {
     text: protocolText,
     variant: "protocol",
     icon: /*#__PURE__*/React.createElement(TaskIcon, {