@elice/material-video-assessment 1.260609.0 → 1.260612.0

package/cjs/components/material-video-assessment/MaterialVideoAssessmentContent.js

@@ -56,6 +56,11 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     }
   });
   var recorder = mediaKit.useMediaRecorder(['webcam', 'mic']);
+  var isSubmittingRef = React__default.default.useRef(false);
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isSubmitting = _React$useState2[0],
+    setIsSubmitting = _React$useState2[1];
   var timer = useVideoAssessmentTimer.useVideoAssessmentTimer({
     running: funnel.step === 'recording',
     mode: (_b = (_a = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.timeLimit) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : 'recommended',
@@ -95,7 +100,9 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     void funnel.history.push('recording', {});
   };
   /**
-   *
+   * Submission can be triggered concurrently by the timer's `onLimitReached`
+   * and the manual submit button. The later call would `stop()` an already
+   * inactive recorder, which resolves an empty blob
    */
   var handleVideoSubmit = /*#__PURE__*/function () {
     var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
@@ -109,37 +116,45 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
             }
             return _context.a(2);
           case 1:
-            _context.p = 1;
+            if (!isSubmittingRef.current) {
+              _context.n = 2;
+              break;
+            }
+            return _context.a(2);
+          case 2:
+            isSubmittingRef.current = true;
+            setIsSubmitting(true);
+            _context.p = 3;
             timer.pause();
-            _context.n = 2;
+            _context.n = 4;
             return recorder.stop();
-          case 2:
+          case 4:
             blob = _context.v;
-            if (blob) {
-              _context.n = 3;
+            if (!(!blob || blob.size === 0)) {
+              _context.n = 5;
               break;
             }
             throw new Error(RECORDING_ERROR_REASON_MAP['no_recording']);
-          case 3:
-            _context.n = 4;
+          case 5:
+            _context.n = 6;
             return fileAdapter.upload(blob);
-          case 4:
+          case 6:
             uploaded = _context.v;
             if (!(uploaded.status === 'incomplete')) {
-              _context.n = 5;
+              _context.n = 7;
               break;
             }
             throw new Error(RECORDING_ERROR_REASON_MAP['file_upload_fail'], {
               cause: uploaded.reason
             });
-          case 5:
-            _context.n = 6;
+          case 7:
+            _context.n = 8;
             return apiClient.postOrgMaterialVideoAssessmentResponseAdd({
               materialVideoAssessmentId: materialVideoAssessmentId,
               resourceId: uploaded.resourceId,
               durationSeconds: Math.round(recorder.durationMs / 1000)
             });
-          case 6:
+          case 8:
             void queryClient.invalidateQueries(useMaterialVideoAssessmentLastResponse.getOrgMaterialVideoAssessmentLastResponseQueryOptions({
               materialVideoAssessmentId: materialVideoAssessmentId,
               userId: userId
@@ -148,31 +163,36 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
               status: 'success'
             });
-            _context.n = 9;
+            _context.n = 11;
             break;
-          case 7:
-            _context.p = 7;
+          case 9:
+            _context.p = 9;
             _t = _context.v;
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
               status: 'failure',
               error: _t
             });
             if (!(_t instanceof Error && _t.message === RECORDING_ERROR_REASON_MAP['no_recording'])) {
-              _context.n = 8;
+              _context.n = 10;
               break;
             }
             void funnel.history.push('recording', {
               errorReason: RECORDING_ERROR_REASON_MAP['no_recording']
             });
             return _context.a(2);
-          case 8:
+          case 10:
             void funnel.history.push('recording', {
               errorReason: RECORDING_ERROR_REASON_MAP['file_upload_fail']
             });
-          case 9:
+          case 11:
+            _context.p = 11;
+            isSubmittingRef.current = false;
+            setIsSubmitting(false);
+            return _context.f(11);
+          case 12:
             return _context.a(2);
         }
-      }, _callee, null, [[1, 7]]);
+      }, _callee, null, [[3, 9, 11, 12]]);
     }));
     return function handleVideoSubmit() {
       return _ref2.apply(this, arguments);
@@ -194,6 +214,7 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     case 'recording':
       return jsxRuntime.jsx(StepRecording.default, {
         errorReason: funnel.context.errorReason,
+        isSubmitting: isSubmitting,
         recorder: recorder,
         timer: timer,
         onNext: handleVideoSubmit

package/cjs/components/material-video-assessment/step/recording/StepRecording.d.ts

@@ -6,6 +6,7 @@ interface StepRecordingProps {
     timer: UseVideoAssessmentTimerReturn;
     recorder: ReturnType<UseMediaRecorder>;
     errorReason?: RecordingErrorReason;
+    isSubmitting: boolean;
     onNext: () => void | Promise<void>;
 }
 declare const StepRecording: React.FC<StepRecordingProps>;

package/cjs/components/material-video-assessment/step/recording/StepRecording.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var intl = require('@elice/intl');
 var mediaKit = require('@elice/media-kit');
 var muiElements = require('@elice/mui-elements');
@@ -34,47 +33,19 @@ var StepRecording = function StepRecording(_ref) {
   var timer = _ref.timer,
     recorder = _ref.recorder,
     errorReason = _ref.errorReason,
+    isSubmitting = _ref.isSubmitting,
     onNext = _ref.onNext;
   var _a, _b, _c, _d;
   var intl$1 = intl.useRawEliceIntl();
   var volume = mediaKit.useMediaStreamAudioMeter('mic');
   var _useMaterialVideoAsse = MaterialVideoAssessmentContext.useMaterialVideoAssessmentState(),
     materialVideoAssessment = _useMaterialVideoAsse.materialVideoAssessment;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isSubmitting = _useState2[0],
-    setSubmitting = _useState2[1];
   var showCountdown = timer.remainingSec !== null;
   var totalSec = (_b = (_a = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.timeLimit) === null || _a === void 0 ? void 0 : _a.seconds) !== null && _b !== void 0 ? _b : 0;
   var elapsedSec = timer.elapsedSec;
   var remainingSec = (_c = timer.remainingSec) !== null && _c !== void 0 ? _c : 0;
   var progressValue = showCountdown && totalSec > 0 ? Math.min(100, elapsedSec / totalSec * 100) : 0;
   var accentColor = timer.isImminent ? 'warning.main' : 'text.primary';
-  /**
-   *
-   */
-  var handleVideoSubmit = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
-      return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
-          case 0:
-            _context.p = 0;
-            setSubmitting(true);
-            _context.n = 1;
-            return onNext();
-          case 1:
-            _context.p = 1;
-            setSubmitting(false);
-            return _context.f(1);
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee, null, [[0,, 1, 2]]);
-    }));
-    return function handleVideoSubmit() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
   //
   //
   //
@@ -261,7 +232,9 @@ var StepRecording = function StepRecording(_ref) {
       children: jsxRuntime.jsx(lab.LoadingButton, {
         loading: isSubmitting,
         variant: "contained",
-        onClick: handleVideoSubmit,
+        onClick: function onClick() {
+          void onNext();
+        },
         children: intl$1.formatMessage({
           id: 'video_assessment.recording.stop'
         })

package/es/components/material-video-assessment/MaterialVideoAssessmentContent.js

@@ -1,4 +1,4 @@
-import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { postOrgMaterialVideoAssessmentResponseAdd } from '@elice/api-client';
@@ -48,6 +48,11 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     }
   });
   var recorder = useMediaRecorder(['webcam', 'mic']);
+  var isSubmittingRef = React.useRef(false);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSubmitting = _React$useState2[0],
+    setIsSubmitting = _React$useState2[1];
   var timer = useVideoAssessmentTimer({
     running: funnel.step === 'recording',
     mode: (_b = (_a = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.timeLimit) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : 'recommended',
@@ -87,7 +92,9 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     void funnel.history.push('recording', {});
   };
   /**
-   *
+   * Submission can be triggered concurrently by the timer's `onLimitReached`
+   * and the manual submit button. The later call would `stop()` an already
+   * inactive recorder, which resolves an empty blob
    */
   var handleVideoSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
@@ -101,37 +108,45 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
             }
             return _context.a(2);
           case 1:
-            _context.p = 1;
+            if (!isSubmittingRef.current) {
+              _context.n = 2;
+              break;
+            }
+            return _context.a(2);
+          case 2:
+            isSubmittingRef.current = true;
+            setIsSubmitting(true);
+            _context.p = 3;
             timer.pause();
-            _context.n = 2;
+            _context.n = 4;
             return recorder.stop();
-          case 2:
+          case 4:
             blob = _context.v;
-            if (blob) {
-              _context.n = 3;
+            if (!(!blob || blob.size === 0)) {
+              _context.n = 5;
               break;
             }
             throw new Error(RECORDING_ERROR_REASON_MAP['no_recording']);
-          case 3:
-            _context.n = 4;
+          case 5:
+            _context.n = 6;
             return fileAdapter.upload(blob);
-          case 4:
+          case 6:
             uploaded = _context.v;
             if (!(uploaded.status === 'incomplete')) {
-              _context.n = 5;
+              _context.n = 7;
               break;
             }
             throw new Error(RECORDING_ERROR_REASON_MAP['file_upload_fail'], {
               cause: uploaded.reason
             });
-          case 5:
-            _context.n = 6;
+          case 7:
+            _context.n = 8;
             return postOrgMaterialVideoAssessmentResponseAdd({
               materialVideoAssessmentId: materialVideoAssessmentId,
               resourceId: uploaded.resourceId,
               durationSeconds: Math.round(recorder.durationMs / 1000)
             });
-          case 6:
+          case 8:
             void queryClient.invalidateQueries(getOrgMaterialVideoAssessmentLastResponseQueryOptions({
               materialVideoAssessmentId: materialVideoAssessmentId,
               userId: userId
@@ -140,31 +155,36 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
               status: 'success'
             });
-            _context.n = 9;
+            _context.n = 11;
             break;
-          case 7:
-            _context.p = 7;
+          case 9:
+            _context.p = 9;
             _t = _context.v;
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
               status: 'failure',
               error: _t
             });
             if (!(_t instanceof Error && _t.message === RECORDING_ERROR_REASON_MAP['no_recording'])) {
-              _context.n = 8;
+              _context.n = 10;
               break;
             }
             void funnel.history.push('recording', {
               errorReason: RECORDING_ERROR_REASON_MAP['no_recording']
             });
             return _context.a(2);
-          case 8:
+          case 10:
             void funnel.history.push('recording', {
               errorReason: RECORDING_ERROR_REASON_MAP['file_upload_fail']
             });
-          case 9:
+          case 11:
+            _context.p = 11;
+            isSubmittingRef.current = false;
+            setIsSubmitting(false);
+            return _context.f(11);
+          case 12:
             return _context.a(2);
         }
-      }, _callee, null, [[1, 7]]);
+      }, _callee, null, [[3, 9, 11, 12]]);
     }));
     return function handleVideoSubmit() {
       return _ref2.apply(this, arguments);
@@ -186,6 +206,7 @@ var MaterialVideoAssessmentContent = function MaterialVideoAssessmentContent(_re
     case 'recording':
       return jsx(StepRecording, {
         errorReason: funnel.context.errorReason,
+        isSubmitting: isSubmitting,
         recorder: recorder,
         timer: timer,
         onNext: handleVideoSubmit

package/es/components/material-video-assessment/step/recording/StepRecording.d.ts

@@ -6,6 +6,7 @@ interface StepRecordingProps {
     timer: UseVideoAssessmentTimerReturn;
     recorder: ReturnType<UseMediaRecorder>;
     errorReason?: RecordingErrorReason;
+    isSubmitting: boolean;
     onNext: () => void | Promise<void>;
 }
 declare const StepRecording: React.FC<StepRecordingProps>;

package/es/components/material-video-assessment/step/recording/StepRecording.js

@@ -1,6 +1,5 @@
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
 import { useRawEliceIntl } from '@elice/intl';
 import { useMediaStreamAudioMeter, MediaStreamWebcam } from '@elice/media-kit';
 import { Tag, EliceIcon } from '@elice/mui-elements';
@@ -26,47 +25,19 @@ var StepRecording = function StepRecording(_ref) {
   var timer = _ref.timer,
     recorder = _ref.recorder,
     errorReason = _ref.errorReason,
+    isSubmitting = _ref.isSubmitting,
     onNext = _ref.onNext;
   var _a, _b, _c, _d;
   var intl = useRawEliceIntl();
   var volume = useMediaStreamAudioMeter('mic');
   var _useMaterialVideoAsse = useMaterialVideoAssessmentState(),
     materialVideoAssessment = _useMaterialVideoAsse.materialVideoAssessment;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSubmitting = _useState2[0],
-    setSubmitting = _useState2[1];
   var showCountdown = timer.remainingSec !== null;
   var totalSec = (_b = (_a = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.timeLimit) === null || _a === void 0 ? void 0 : _a.seconds) !== null && _b !== void 0 ? _b : 0;
   var elapsedSec = timer.elapsedSec;
   var remainingSec = (_c = timer.remainingSec) !== null && _c !== void 0 ? _c : 0;
   var progressValue = showCountdown && totalSec > 0 ? Math.min(100, elapsedSec / totalSec * 100) : 0;
   var accentColor = timer.isImminent ? 'warning.main' : 'text.primary';
-  /**
-   *
-   */
-  var handleVideoSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
-          case 0:
-            _context.p = 0;
-            setSubmitting(true);
-            _context.n = 1;
-            return onNext();
-          case 1:
-            _context.p = 1;
-            setSubmitting(false);
-            return _context.f(1);
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee, null, [[0,, 1, 2]]);
-    }));
-    return function handleVideoSubmit() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
   //
   //
   //
@@ -253,7 +224,9 @@ var StepRecording = function StepRecording(_ref) {
       children: jsx(LoadingButton, {
         loading: isSubmitting,
         variant: "contained",
-        onClick: handleVideoSubmit,
+        onClick: function onClick() {
+          void onNext();
+        },
         children: intl.formatMessage({
           id: 'video_assessment.recording.stop'
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-assessment",
-  "version": "1.260609.0",
+  "version": "1.260612.0",
   "description": "User view and editing components of Elice material video assessment",
   "repository": {
     "type": "git",
@@ -36,8 +36,8 @@
     "dayjs": "^1.11.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-use": "^17.0.0",
-    "@elice/material-shared-types": "1.260609.0",
-    "@elice/material-shared-utils": "1.260609.0"
+    "@elice/material-shared-utils": "1.260612.0",
+    "@elice/material-shared-types": "1.260612.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^3",
@@ -84,8 +84,8 @@
     "rollup": "^4.0.0",
     "typescript": "~5.9.3",
     "vite": "^4.4.9",
-    "@elice/material-shared-types": "1.260609.0",
-    "@elice/material-shared-utils": "1.260609.0"
+    "@elice/material-shared-types": "1.260612.0",
+    "@elice/material-shared-utils": "1.260612.0"
   },
   "scripts": {
     "start": "run-s watch",