@bigbinary/neeto-media-recorder 2.7.8 → 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;
@@ -1853,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, {