odaptos_design_system 2.0.97 → 2.0.99

package/dist/Molecules/Interviews/ControlsBar.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 export interface ControlsBarProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
-    isInterviewer?: boolean;
+    identity?: 'observer' | 'interviewer' | 'interviewee';
     endInterview?: () => void;
     enableScreenSharing?: () => void;
     enableMicrophone?: () => void;
@@ -34,5 +34,8 @@ export interface ControlsBarProps extends HTMLAttributes<HTMLDivElement> {
     stopRecPopoverBtnTwoOnClick?: () => void;
     stopRecText: string;
     startRecText: string;
+    exitInterview?: () => void;
+    exitInterviewText?: string;
+    disabledExitInterview?: boolean;
 }
-export declare const ControlsBar: ({ className, isInterviewer, endInterview, enableScreenSharing, enableMicrophone, muteMicrophone, enableCamera, muteCamera, displayChat, displayTasks, startRecording, isChatOpen, areTasksOpen, isNewTask, isNewMessage, isMicrophoneActive, isCameraActive, isRecording, screenShareText, disabledRecording, disabledEndInterview, myTasksText, protocolText, isModerated, endInterviewText, stopRecPopoverTitle, stopRecPopoverDescription, stopRecPopoverBtnOneText, stopRecPopoverBtnTwoText, isRecordingBtnDisplay, stopRecPopoverBtnOneOnClick, stopRecPopoverBtnTwoOnClick, stopRecText, startRecText, ...props }: ControlsBarProps) => React.JSX.Element;
+export declare const ControlsBar: ({ className, identity, endInterview, enableScreenSharing, enableMicrophone, muteMicrophone, enableCamera, muteCamera, displayChat, displayTasks, startRecording, isChatOpen, areTasksOpen, isNewTask, isNewMessage, isMicrophoneActive, isCameraActive, isRecording, screenShareText, disabledRecording, disabledEndInterview, myTasksText, protocolText, isModerated, endInterviewText, stopRecPopoverTitle, stopRecPopoverDescription, stopRecPopoverBtnOneText, stopRecPopoverBtnTwoText, isRecordingBtnDisplay, stopRecPopoverBtnOneOnClick, stopRecPopoverBtnTwoOnClick, stopRecText, startRecText, exitInterview, exitInterviewText, disabledExitInterview, ...props }: ControlsBarProps) => React.JSX.Element;

package/dist/odaptos_design_system.cjs.development.js

@@ -12738,13 +12738,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,
@@ -12777,11 +12777,24 @@ const ControlsBar = ({
   stopRecPopoverBtnTwoOnClick,
   stopRecText,
   startRecText,
+  exitInterview,
+  exitInterviewText,
+  disabledExitInterview,
   ...props
 }) => {
   const [isStopRecPopoverOpen, setIsStopRecPopoverOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  if (identity === 'observer') {
+    return /*#__PURE__*/React__default.createElement("div", Object.assign({
+      className: `${styles$p.control_bar} ${className ?? ''}`
+    }, props), exitInterview && exitInterviewText && /*#__PURE__*/React__default.createElement(InterviewButton, {
+      text: exitInterviewText,
+      variant: "end-interview",
+      disabled: disabledExitInterview,
+      onClick: () => exitInterview(),
+      icon: /*#__PURE__*/React__default.createElement(HangUpIcon, null)
+    }));
+  } else return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: `${styles$p.control_bar} ${className ?? ''}`
   }, props), enableMicrophone && /*#__PURE__*/React__default.createElement(CircledIconButton, {
     icon: isMicrophoneActive ? /*#__PURE__*/React__default.createElement(MicrophoneIcon, null) : /*#__PURE__*/React__default.createElement(NoMicrophoneIcon, null),
@@ -12799,7 +12812,7 @@ const ControlsBar = ({
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$p.separator
-  }), isInterviewer && isRecordingBtnDisplay && isModerated && /*#__PURE__*/React__default.createElement("button", {
+  }), identity === 'interviewer' && isRecordingBtnDisplay && isModerated && /*#__PURE__*/React__default.createElement("button", {
     ref: setAnchorEl,
     disabled: disabledRecording,
     className: styles$p.record_btn,
@@ -12816,13 +12829,13 @@ const ControlsBar = ({
   }), /*#__PURE__*/React__default.createElement(Text, {
     weight: "semi-bold",
     text: isRecording ? stopRecText : startRecText
-  })), isInterviewer && endInterview && /*#__PURE__*/React__default.createElement(InterviewButton, {
+  })), identity === 'interviewer' && endInterview && /*#__PURE__*/React__default.createElement(InterviewButton, {
     text: endInterviewText,
     variant: "end-interview",
     disabled: disabledEndInterview,
     onClick: () => endInterview(),
     icon: /*#__PURE__*/React__default.createElement(HangUpIcon, null)
-  }), (!isInterviewer || !isModerated) && screenShareText && enableScreenSharing && /*#__PURE__*/React__default.createElement(InterviewButton, {
+  }), (identity === 'interviewee' || !isModerated) && screenShareText && enableScreenSharing && /*#__PURE__*/React__default.createElement(InterviewButton, {
     id: "odaptos_screen_share",
     text: screenShareText,
     variant: "screenshare",
@@ -12830,7 +12843,7 @@ const ControlsBar = ({
     onClick: () => enableScreenSharing()
   }), isModerated && /*#__PURE__*/React__default.createElement("div", {
     className: styles$p.separator
-  }), isModerated && isInterviewer ? /*#__PURE__*/React__default.createElement(InterviewButton, {
+  }), isModerated && identity === 'interviewer' ? /*#__PURE__*/React__default.createElement(InterviewButton, {
     text: protocolText,
     variant: "protocol",
     icon: /*#__PURE__*/React__default.createElement(TaskIcon, {