@myinterview/widget-react 1.0.3 → 1.0.5

package/README.md

@@ -27,7 +27,7 @@ import React from 'react';
 import { Widget } from '@myinterview/widget-react';
 
 const App = () => {
-    const onCompleteCallback = () => {
+    const onFinish = () => {
         //...
     }
     const onError = () => {
@@ -38,7 +38,7 @@ const App = () => {
         <Widget
             job={{ job_id: "xxxxxxxxxxxxxxxxxx" }}
             candidate={{ email: "test@mail.com", username: "Max" }}
-            config={{ onCompleteCallback, onError,
+            config={{ onFinish, onError,
                 auth: "apikey xxxxxxxxxxxxxxxxx sig=xxxxxxxxxxxxxxxxxxxxxxxxxx" }}
         />
     )

package/dist/esm/components/Widget.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IWidgetConfig } from '../interfaces/configInterface';
+import { IClientWidgetConfig } from '../interfaces/configInterface';
 import '../assets/styles/global.scss';
 import { getToken } from '../utils/authToken.utils';
-export declare const Widget: React.FC<IWidgetConfig>;
+export declare const Widget: React.FC<IClientWidgetConfig>;
 export { getToken };

package/dist/esm/config/index.d.ts

@@ -1,4 +1,5 @@
-declare let config: {
+import { IEnv } from '../interfaces/configInterface';
+declare const config: (configEnv?: IEnv) => {
     serverUrl: string;
     INTERCOM_APP_ID: string;
     SENTRY_DSN: string;

package/dist/esm/index.js

@@ -20979,29 +20979,23 @@ const prod_config = {
 };
 
 // eslint-disable-next-line import/no-mutable-exports
-let config = prod_config;
-switch (process.env.REACT_APP_ENV) {
-    case 'development':
-    case 'dev':
-    case 'local':
-        config = local_config;
-        break;
-    case 'staging':
-        config = staging_config;
-        break;
-    case 'production':
-    case 'prod':
-        config = prod_config;
-        break;
-    default:
-        console.log('Running in prod mode by default');
-}
-var configFile = config;
+const config = (configEnv) => {
+    switch (configEnv || process.env.REACT_APP_ENV) {
+        case 'development':
+        case 'dev':
+        case 'local':
+            return local_config;
+        case 'staging':
+            return staging_config;
+        default:
+            return prod_config;
+    }
+};
 
 const client = new BrowserClient({
     transport: makeFetchTransport,
     stackParser: defaultStackParser,
-    dsn: configFile.SENTRY_DSN,
+    dsn: config().SENTRY_DSN,
     integrations: [...defaultIntegrations],
 });
 const SentryHub = new Hub(client);
@@ -28128,7 +28122,9 @@ const VideoTimeBar = ({ duration, currentTime, isThinkingTime, onChangeTime, })
 
 const DEFAULT_COUNT_DOWN = 3; // seconds
 const DEFAULT_DURATION = 60; // seconds
-const ENOUGH_RECODING_TIME = 3; // seconds
+const DEFAULT_ATTEMPTS = 3; // number of attempts
+const DEFAULT_THINKING_TIME = 0; // seconds
+const ENOUGH_RECORDING_TIME = 3; // seconds
 const SPEED_TEST_FILE_SIZE = 5; // MB
 const FAST_UPLOAD_SPEED = 0.35; // MB/s
 const SLOW_UPLOAD_SPEED = 0.1; // MB/s
@@ -28390,10 +28386,10 @@ const InnerView = React__default.forwardRef(({ widgetMachine, sendToWidget, reco
                 previewRef && isPreviewState && (React__default.createElement(PreviewList, { previewRef: previewRef, onNextQuestion: onNextQuestion, onNextRetake: onNextRetake, onQuestionMode: onQuestionMode, isRetakeAvailable: isRetakeAvailable, totalRetakes: totalRetakes, isQuestionMode: isQuestionMode, isLastQuestion: isLastQuestion, isConnected: isConnected, currentQuestion: currentQuestion, numberOfQuestions: questions.length })),
                 canStartRecording && (React__default.createElement(StartRecordingButton, { onClick: () => sendToWidget(EVENTS$4.NEXT_STEP), disabled: !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.videoQuestion) && !isQuestionVideoWatched && isVideoQuestionState, isExplanationState: isExplanationState, isVideoQuestionState: isVideoQuestionState, isVideoQuestion: !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.videoQuestion) })),
                 isCountDown && countdown > DEFAULT_COUNT_DOWN && (React__default.createElement(StartNowButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.FORCE_START) })),
-                (isRecording && !RecorderError) && (React__default.createElement(StopRecordingButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.STOP_RECORDING), disabled: recordingTime < ENOUGH_RECODING_TIME })))),
+                (isRecording && !RecorderError) && (React__default.createElement(StopRecordingButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.STOP_RECORDING), disabled: recordingTime < ENOUGH_RECORDING_TIME })))),
         canStartRecording && (React__default.createElement(StartRecordingButton, { onClick: () => sendToWidget(EVENTS$4.NEXT_STEP), disabled: !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.videoQuestion) && !isQuestionVideoWatched && isVideoQuestionState, isExplanationState: isExplanationState, isVideoQuestionState: isVideoQuestionState, isVideoQuestion: !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.videoQuestion) })),
         isCountDown && countdown > DEFAULT_COUNT_DOWN && (React__default.createElement(StartNowButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.FORCE_START) })),
-        isRecording && (React__default.createElement(StopRecordingButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.STOP_RECORDING), disabled: recordingTime < ENOUGH_RECODING_TIME }))));
+        isRecording && (React__default.createElement(StopRecordingButton, { onClick: () => sendToRecorder(RECORDER_EVENTS.STOP_RECORDING), disabled: recordingTime < ENOUGH_RECORDING_TIME }))));
 });
 
 var VIDEO_STATUS;
@@ -30769,13 +30765,16 @@ axios$2.exports.default = axios$1;
 var axios = /*@__PURE__*/getDefaultExportFromCjs(axios$3.exports);
 
 const videoAxiosInstance = axios.create({
-    baseURL: configFile.serverUrl,
+    baseURL: config().serverUrl,
     withCredentials: true,
 });
 const s3AxiosInstance = axios.create({});
 const updateVideoAxiosAuth = (auth) => {
     videoAxiosInstance.defaults.headers.common.Authorization = auth;
 };
+const updateVideoAxiosBaseURL = (url) => {
+    videoAxiosInstance.defaults.baseURL = url;
+};
 
 const uploadToS3 = (url, data, onProgress, timeout = 0) => s3AxiosInstance.put(url, data, {
     headers: { 'Content-Type': 'video/webm' }, onUploadProgress: onProgress, timeout,
@@ -31956,7 +31955,7 @@ const recorderMachineV2 = createMachine({
             on: {
                 [RECORDER_EVENTS.RETRY]: {
                     target: [STATES$5.INIT],
-                    actions: [ACTIONS$6.RESET],
+                    actions: [ACTIONS$6.STOP_MIC, ACTIONS$6.RESET],
                 },
             },
         },
@@ -32074,8 +32073,7 @@ const recorderMachineV2 = createMachine({
                 };
                 mediaRecorder.start(10000);
                 callback({ type: RECORDER_EVENTS.INIT_RECORDER, data: mediaRecorder });
-                if (context.isMicError)
-                    callback(RECORDER_EVENTS.PAUSE);
+                // if (context.isMicError) callback(RECORDER_EVENTS.PAUSE); its not gonna work , until we will fix staging
                 return () => {
                     // if (mediaRecorder?.state !== 'inactive') mediaRecorder?.stop();
                 };
@@ -32134,7 +32132,7 @@ const recorderMachineV2 = createMachine({
             durations: (_, event) => event.data.duration,
         }),
         [ACTIONS$6.CLEAN]: assign((context, event) => (Object.assign(Object.assign({}, initialState), { selectedAudioDevice: context.selectedAudioDevice, selectedVideoDevice: context.selectedVideoDevice, videoRef: context.videoRef, microphoneRef: context.microphoneRef, facingMode: context.facingMode, autoStart: event.data.autoStart || context.autoStart }))),
-        [ACTIONS$6.RESET]: assign((context) => (Object.assign(Object.assign({}, initialState), { videoRef: context.videoRef }))),
+        [ACTIONS$6.RESET]: assign((context) => (Object.assign(Object.assign({}, initialState), { videoRef: context.videoRef, microphoneRef: context.microphoneRef }))),
         [ACTIONS$6.SET_MEDIA_STREAM]: assign({
             selectedVideoDevice: (_, event) => event.data.selectedVideoDevice,
             selectedAudioDevice: (_, event) => event.data.selectedAudioDevice,
@@ -33110,7 +33108,7 @@ const accWidgetMachine = createMachine({
                 company_id: (_d = context.widgetConfig.job) === null || _d === void 0 ? void 0 : _d.company_id,
                 apiKey: (_e = context.widgetConfig.job) === null || _e === void 0 ? void 0 : _e.apiKey,
                 widget_shown: new Date(),
-            }, configFile.serverUrl).then(() => { });
+            }, config(context.widgetConfig.config.env).serverUrl).then(() => { });
         },
         [ACTIONS$5.SENTRY]: (context, event, meta) => { var _a; return SentryTrackingFn(event, context, ((_a = meta.action.data) === null || _a === void 0 ? void 0 : _a.eventName) || 'accWidgetMachine'); },
         [ACTIONS$5.CONSOLE_LOG]: (context, event, meta) => console.log('%c [WidgetMachine]', CONSOLE_LOG_STYLE, context, event, meta),
@@ -33403,7 +33401,7 @@ const Main = ({ widgetConfig, setShouldShowWaterMark }) => {
     useEffect(() => {
         var _a, _b;
         if (machine.done) {
-            (_b = (_a = widgetConfig.config).onCompleteCallback) === null || _b === void 0 ? void 0 : _b.call(_a, { redirectUrl: candidate.redirectUrl, video_id: (video === null || video === void 0 ? void 0 : video.video_id) || '' });
+            (_b = (_a = widgetConfig.config).onFinish) === null || _b === void 0 ? void 0 : _b.call(_a, { redirectUrl: candidate.redirectUrl, video_id: (video === null || video === void 0 ? void 0 : video.video_id) || '' });
         }
     }, [machine.done]);
     useEffect(() => {
@@ -40479,7 +40477,7 @@ var Crypto = cryptoJs.exports;
 
 const getToken = ({ type = 'apikey', value = '', secretKey = '' }) => `${type} ${value} sig=${Crypto.HmacSHA256(`${type + value}sig=`, secretKey).toString()}`;
 
-const Widget = ({ candidate, job, video, config, disabled = false, buttonText = 'START INTERVIEW', buttonStyle = {}, }) => {
+const Widget = ({ candidate, job, video, config: config$1, disabled = false, buttonText = 'START INTERVIEW', buttonStyle = {}, }) => {
     const [isWidgetOpen, setIsWidgetOpen] = useState(false);
     const [isIncognitoMode, setIsIncognitoMode] = useState(false);
     const myinterviewRef = useRef(null);
@@ -40498,6 +40496,9 @@ const Widget = ({ candidate, job, video, config, disabled = false, buttonText =
             });
         });
     }, [candidate.email]);
+    useEffect(() => {
+        updateVideoAxiosBaseURL(config(config$1.env).serverUrl);
+    }, [config$1.env]);
     const setLayoutStyleProperties = () => {
         if (myinterviewRef.current) {
             const { x, y, width, height, } = myinterviewRef.current.getBoundingClientRect();
@@ -40505,9 +40506,9 @@ const Widget = ({ candidate, job, video, config, disabled = false, buttonText =
             myinterviewRef.current.style.setProperty('--myinterview-widget-layout-right', `${window.innerWidth - x - width}px`);
             myinterviewRef.current.style.setProperty('--myinterview-widget-layout-bottom', `${window.innerHeight - y - height}px`);
             myinterviewRef.current.style.setProperty('--myinterview-widget-layout-left', `${x}px`);
-            if (config.overlay) {
-                myinterviewRef.current.style.setProperty('--color-primary', config.overlay);
-                myinterviewRef.current.style.setProperty('--color-special', config.overlay);
+            if (config$1.overlay) {
+                myinterviewRef.current.style.setProperty('--color-primary', config$1.overlay);
+                myinterviewRef.current.style.setProperty('--color-special', config$1.overlay);
             }
         }
     };
@@ -40518,18 +40519,18 @@ const Widget = ({ candidate, job, video, config, disabled = false, buttonText =
     };
     const onInterviewCompleted = (data) => {
         var _a;
-        (_a = config.onCompleteCallback) === null || _a === void 0 ? void 0 : _a.call(config, data);
+        (_a = config$1.onFinish) === null || _a === void 0 ? void 0 : _a.call(config$1, data);
         onCloseWidget();
     };
     const onError = (data) => {
         var _a;
-        (_a = config.onError) === null || _a === void 0 ? void 0 : _a.call(config, data);
+        (_a = config$1.onError) === null || _a === void 0 ? void 0 : _a.call(config$1, data);
         onCloseWidget();
     };
     const openWidget = () => {
         var _a;
-        (_a = config.onWidgetClicked) === null || _a === void 0 ? void 0 : _a.call(config);
-        if (![candidate.username, candidate.email, config.auth].every(Boolean))
+        (_a = config$1.onWidgetClicked) === null || _a === void 0 ? void 0 : _a.call(config$1);
+        if (![candidate.username, candidate.email, config$1.auth].every(Boolean))
             return;
         setLayoutStyleProperties();
         document.body.style.maxHeight = '100vh';
@@ -40540,10 +40541,10 @@ const Widget = ({ candidate, job, video, config, disabled = false, buttonText =
     const layoutClassNames = classNames({
         'myinterview-widget__layout': true,
         'myinterview-widget-no-select': true,
-        'myinterview-widget__layout--animated': isWidgetOpen && !!config.openAnimation,
+        'myinterview-widget__layout--animated': isWidgetOpen && !!config$1.openAnimation,
     });
     return (React__default.createElement(ErrorBoundary, null,
-        React__default.createElement(IntercomProvider, { appId: configFile.INTERCOM_APP_ID },
+        React__default.createElement(IntercomProvider, { appId: config(config$1.env).INTERCOM_APP_ID },
             React__default.createElement("div", { ref: myinterviewRef, className: "myinterview-widget" },
                 React__default.createElement(Button, { className: "myinterview-widget__button", onClick: openWidget, disabled: disabled, style: buttonStyle }, buttonText),
                 isWidgetOpen && (React__default.createElement("div", { className: layoutClassNames },
@@ -40555,8 +40556,8 @@ const Widget = ({ candidate, job, video, config, disabled = false, buttonText =
                     (!isSupportedDevice || isIncognitoMode) && React__default.createElement(UnsupportedModal, { messageType: !isSupportedIosDevice ? 'IOS' : !isSupportedDevice ? 'BROWSER' : 'INCOGNITO' }),
                     isSupportedDevice && (React__default.createElement("div", { className: "myinterview-widget__wrapper" },
                         React__default.createElement(Main, { widgetConfig: {
-                                config: Object.assign(Object.assign({}, config), { onCompleteCallback: onInterviewCompleted, onError }),
-                                job,
+                                config: Object.assign(Object.assign({}, config$1), { onFinish: onInterviewCompleted, onError, practiceQuestions: config$1.practiceQuestions.map((q) => (Object.assign(Object.assign({}, q), { numOfRetakes: q.attempts || DEFAULT_ATTEMPTS, partDuration: q.duration || DEFAULT_DURATION, thinkingTime: q.thinkingTime || DEFAULT_THINKING_TIME }))) }),
+                                job: Object.assign(Object.assign({}, job), { questions: job.questions.map((q) => (Object.assign(Object.assign({}, q), { numOfRetakes: q.attempts || DEFAULT_ATTEMPTS, partDuration: q.duration || DEFAULT_DURATION, thinkingTime: q.thinkingTime || DEFAULT_THINKING_TIME }))) }),
                                 video,
                                 candidate,
                             }, setShouldShowWaterMark: setShouldShowWaterMark })))))))));