@bigbinary/neeto-media-recorder 2.7.7 → 2.7.9

package/index.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, MIC_NOT_WORKING_SILENCE_TIMEOUT, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, MIC_NOT_WORKING_SILENCE_TIMEOUT, SCREEN_RECORDER_EVENT, COUNTDOWN_TIME, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, useMultipartS3UploadStatus, getMultipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Alert from '@bigbinary/neetoui/Alert';
@@ -703,7 +703,8 @@ var _excluded = ["size"],
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PlayIcon = function PlayIcon(_ref) {
-  var size = _ref.size,
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
     other = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx("svg", _objectSpread(_objectSpread({
     height: size,
@@ -717,11 +718,9 @@ var PlayIcon = function PlayIcon(_ref) {
     })
   }));
 };
-PlayIcon.defaultProps = {
-  size: 24
-};
 var StopIcon = function StopIcon(_ref2) {
-  var size = _ref2.size,
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 24 : _ref2$size,
     other = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/jsx("svg", _objectSpread(_objectSpread({
     height: size,
@@ -735,11 +734,9 @@ var StopIcon = function StopIcon(_ref2) {
     })
   }));
 };
-StopIcon.defaultProps = {
-  size: 24
-};
 var RestartIcon = function RestartIcon(_ref3) {
-  var size = _ref3.size,
+  var _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 24 : _ref3$size,
     other = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsx("svg", _objectSpread(_objectSpread({
     height: size,
@@ -755,9 +752,6 @@ var RestartIcon = function RestartIcon(_ref3) {
     })
   }));
 };
-RestartIcon.defaultProps = {
-  size: 24
-};
 
 var useRecorderStatus = function useRecorderStatus() {
   var useRecorderStore = screenRecorder.useRecorderStore;
@@ -1009,7 +1003,6 @@ var useAudioIsCapturing = function useAudioIsCapturing(_ref) {
     };
   }, []);
   useEffect(function () {
-    logger.info("useAudioIsCapturing->", timerStarted, hasAudio, isMicOn, disable);
     if (!isMicOn || !timerStarted || disable) return noop;
     var analyserObj = null;
     var rafId;
@@ -1046,24 +1039,19 @@ var useAudioIsCapturing = function useAudioIsCapturing(_ref) {
     var _callbacks;
     if (!isMicOn) return noop;
     var callbacks = (_callbacks = {}, _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onStart, function () {
-      logger.info("useAudioIsCapturing onStart");
       reset();
       setTimerStarted(true);
       armTimer();
     }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onRestart, function () {
-      logger.info("useAudioIsCapturing onRestart");
       reset();
       setTimerStarted(true);
       armTimer();
     }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onResume, function () {
-      logger.info("useAudioIsCapturing onResume");
       setTimerStarted(true);
       resumeTimer();
     }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onPause, function () {
-      logger.info("useAudioIsCapturing onPause");
       pauseTimer();
     }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onStop, function () {
-      logger.info("useAudioIsCapturing onStop");
       clearTimer();
       reset();
     }), _defineProperty(_callbacks, "disable-mic-not-working-warning", function disableMicNotWorkingWarning() {
@@ -1466,7 +1454,9 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     _ref$isMicOn = _ref.isMicOn,
     isMicOn = _ref$isMicOn === void 0 ? false : _ref$isMicOn,
     _ref$onAudioNotCaptur = _ref.onAudioNotCapturing,
-    onAudioNotCapturing = _ref$onAudioNotCaptur === void 0 ? function () {} : _ref$onAudioNotCaptur;
+    onAudioNotCapturing = _ref$onAudioNotCaptur === void 0 ? function () {} : _ref$onAudioNotCaptur,
+    _ref$onError = _ref.onError,
+    onError = _ref$onError === void 0 ? function () {} : _ref$onError;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -1551,6 +1541,16 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     _useCreateRecording$d2 = _useCreateRecording$d === void 0 ? {} : _useCreateRecording$d,
     _useCreateRecording$d3 = _useCreateRecording$d2.recording,
     recording = _useCreateRecording$d3 === void 0 ? {} : _useCreateRecording$d3;
+  useEffect(function () {
+    var elapsedTimeInSec = Math.round(elapsedTime / 1000);
+    var checkDelay = 7; // we get data every 5 sec, 7 for safety
+    // If data is insufficient after n secs, there is some issue with media recorder, discard.
+    if (elapsedTimeInSec < checkDelay) return;
+    if (!screenRecorder.hasData() && recorderStatus === SCREEN_RECORDER_STATUS.recording) {
+      screenRecorder.setError(SCREEN_RECORDER_ERROR.InsufficientData);
+      onError(SCREEN_RECORDER_ERROR.InsufficientData);
+    }
+  }, [elapsedTime]);
   recordingRef.current = recording;
   var handleCreateRecording = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -1780,7 +1780,12 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     className: "flex h-screen w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20",
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames("w-full max-w-3xl"),
-      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.InsufficientData && /*#__PURE__*/jsx(Callout, {
+        className: "mb-2 p-3",
+        "data-cy": "recorder-insufficient-data-error-callout",
+        style: "danger",
+        children: t("neetoMediaRecorder.insufficientDataError")
+      }), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
         className: "flex flex-col items-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "mb-2",
@@ -1842,15 +1847,44 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
           })
         })
       }), isRecorderStatus(SCREEN_RECORDER_STATUS.media_acquired, SCREEN_RECORDER_STATUS.restarting) && /*#__PURE__*/jsxs("div", {
-        className: "mx-auto flex flex-col items-center justify-center space-y-4",
+        className: "neeto-ui-rounded-lg mx-auto mb-8 flex w-full max-w-4xl flex-col items-center justify-center p-12",
         "data-cy": "recorder-countdown-wrapper",
-        children: [/*#__PURE__*/jsx(Typography, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: "relative mb-8",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "relative flex h-32 w-32 items-center justify-center",
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: "absolute h-32 w-32 -rotate-90 transform",
+              viewBox: "0 0 120 120",
+              children: [/*#__PURE__*/jsx("circle", {
+                cx: "60",
+                cy: "60",
+                fill: "transparent",
+                r: "50",
+                stroke: "rgba(2, 128, 105, 0.2)",
+                strokeWidth: "4"
+              }), /*#__PURE__*/jsx("circle", {
+                className: "transition-all duration-1000 ease-linear",
+                cx: "60",
+                cy: "60",
+                fill: "transparent",
+                r: "50",
+                stroke: "rgb(2, 128, 105)",
+                strokeDasharray: 2 * Math.PI * 50,
+                strokeLinecap: "round",
+                strokeWidth: "4",
+                strokeDashoffset: 2 * Math.PI * 50 * (countdownTimeLeft / COUNTDOWN_TIME)
+              })]
+            }), /*#__PURE__*/jsx(Typography, {
+              className: " text-6xl font-bold",
+              weight: "semibold",
+              children: countdownTimeLeft
+            })]
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "mb-4",
           style: "h3",
           children: t("neetoMediaRecorder.record.startsIn")
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-4xl neeto-ui-bg-primary-100 neeto-ui-rounded-full flex h-32 w-32 items-center justify-center",
-          weight: "semibold",
-          children: countdownTimeLeft
         })]
       }), isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/jsx(Timer, {})]
     }), /*#__PURE__*/jsx(Controls, {