odaptos_design_system 1.4.99 → 1.4.101

package/dist/Interviews/ControlsBar.d.ts

@@ -6,14 +6,20 @@ export interface ControlsBarProps extends HTMLAttributes<HTMLDivElement> {
     endInterview?: () => void;
     enableScreenSharing?: () => void;
     enableMicrophone?: () => void;
+    muteMicrophone?: () => void;
     enableCamera?: () => void;
+    muteCamera?: () => void;
     displayChat?: () => void;
     displayTasks?: () => void;
+    startRecording?: () => void;
+    stopRecording?: () => void;
     isChatOpen?: boolean;
     areTasksOpen?: boolean;
     isNewTask?: boolean;
     isNewMessage?: boolean;
     isMicrophoneActive?: boolean;
     isCameraActive?: boolean;
+    isRecording?: boolean;
+    disabledRecording?: boolean;
 }
-export declare const ControlsBar: ({ className, isInterviewer, isScreenShare, endInterview, enableScreenSharing, enableMicrophone, enableCamera, displayChat, displayTasks, isChatOpen, areTasksOpen, isNewTask, isNewMessage, isMicrophoneActive, isCameraActive, ...props }: ControlsBarProps) => React.JSX.Element;
+export declare const ControlsBar: ({ className, isInterviewer, isScreenShare, endInterview, enableScreenSharing, enableMicrophone, muteMicrophone, enableCamera, muteCamera, displayChat, displayTasks, startRecording, stopRecording, isChatOpen, areTasksOpen, isNewTask, isNewMessage, isMicrophoneActive, isCameraActive, isRecording, disabledRecording, ...props }: ControlsBarProps) => React.JSX.Element;

package/dist/odaptos_design_system.cjs.development.js

@@ -7852,8 +7852,8 @@ const DatePicker = ({
   }))));
 };
 
-var css_248z$a = ".ControlsBar-modules_control_bar__uxXow{align-items:center;display:inline-flex;gap:.5rem}.ControlsBar-modules_control_bar__uxXow .ControlsBar-modules_separator__Np2W8{background:var(--color-neutral-dark-shades-700,#64666a);height:1rem;width:.0625rem}.ControlsBar-modules_chatBubbleIcon__ujTs1 svg{fill:transparent!important}";
-var styles$a = {"control_bar":"ControlsBar-modules_control_bar__uxXow","separator":"ControlsBar-modules_separator__Np2W8","chatBubbleIcon":"ControlsBar-modules_chatBubbleIcon__ujTs1"};
+var css_248z$a = ".ControlsBar-modules_control_bar__uxXow{align-items:center;display:inline-flex;gap:.5rem}.ControlsBar-modules_control_bar__uxXow .ControlsBar-modules_separator__Np2W8{background:var(--color-neutral-dark-shades-700,#64666a);height:1rem;width:.0625rem}.ControlsBar-modules_control_bar__uxXow .ControlsBar-modules_record_btn__rp6Um{align-items:flex-start;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);display:flex;gap:.5rem;padding:.5rem}.ControlsBar-modules_chatBubbleIcon__ujTs1 svg{fill:transparent!important}";
+var styles$a = {"control_bar":"ControlsBar-modules_control_bar__uxXow","separator":"ControlsBar-modules_separator__Np2W8","record_btn":"ControlsBar-modules_record_btn__rp6Um","chatBubbleIcon":"ControlsBar-modules_chatBubbleIcon__ujTs1"};
 styleInject(css_248z$a);
 
 const ControlsBar = ({
@@ -7863,28 +7863,50 @@ const ControlsBar = ({
   endInterview,
   enableScreenSharing,
   enableMicrophone,
+  muteMicrophone,
   enableCamera,
+  muteCamera,
   displayChat,
   displayTasks,
+  startRecording,
+  stopRecording,
   isChatOpen,
   areTasksOpen,
   isNewTask,
   isNewMessage,
   isMicrophoneActive,
   isCameraActive,
+  isRecording,
+  disabledRecording,
   ...props
 }) => {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: `${styles$a.control_bar} ${className ?? ''}`
   }, props), enableMicrophone && /*#__PURE__*/React__default.createElement(CircledIconButton, {
     icon: isMicrophoneActive ? /*#__PURE__*/React__default.createElement(MicrophoneIcon, null) : /*#__PURE__*/React__default.createElement(MicrophoneIcon, null),
-    onClick: () => enableMicrophone()
+    onClick: () => {
+      if (isMicrophoneActive) enableMicrophone();else {
+        if (muteMicrophone) muteMicrophone();
+      }
+    }
   }), enableCamera && /*#__PURE__*/React__default.createElement(CircledIconButton, {
     icon: isCameraActive ? /*#__PURE__*/React__default.createElement(MeetingIcon, null) : /*#__PURE__*/React__default.createElement(MeetingIcon, null),
-    onClick: () => enableCamera()
+    onClick: () => {
+      if (isCameraActive) enableCamera();else {
+        if (muteCamera) muteCamera();
+      }
+    }
   }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$a.separator
-  }), isInterviewer && endInterview && /*#__PURE__*/React__default.createElement(InterviewButton, {
+  }), isInterviewer && /*#__PURE__*/React__default.createElement("button", {
+    disabled: disabledRecording,
+    className: styles$a.record_btn,
+    onClick: () => {
+      if (isRecording && startRecording) startRecording();else {
+        if (stopRecording) stopRecording();
+      }
+    }
+  }, isRecording ? /*#__PURE__*/React__default.createElement(StopRecordingIcon, null) : /*#__PURE__*/React__default.createElement(RecordIcon, null)), isInterviewer && endInterview && /*#__PURE__*/React__default.createElement(InterviewButton, {
     text: "End Interview",
     variant: "end-interview",
     onClick: () => endInterview(),