@bigbinary/neeto-media-recorder 2.6.2 → 2.6.3

package/index.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, 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, SCREEN_RECORDER_EVENT, 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';
@@ -568,6 +568,9 @@ var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanForm
   var minutes = Math.floor(timeInMs / (1000 * 60));
   var hours = Math.floor(minutes / 60);
   if (hours < 1) {
+    if (minutes < 1) {
+      return "".concat(Math.floor(timeInMs / ONE_SECOND_IN_MILLISECONDS$1), " seconds");
+    }
     return "".concat(minutes, " minutes");
   }
   return "".concat(hours, " hours");
@@ -1285,13 +1288,15 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         status: store["status"],
         error: store["error"],
         countdownTimeLeft: store["countdownTimeLeft"],
-        showTimeLimitWarning: store["showTimeLimitWarning"]
+        showTimeLimitWarning: store["showTimeLimitWarning"],
+        elapsedTime: store["elapsedTime"]
       };
     }, shallow),
     recorderStatus = _useRecorderStore.status,
     error = _useRecorderStore.error,
     countdownTimeLeft = _useRecorderStore.countdownTimeLeft,
-    showTimeLimitWarning = _useRecorderStore.showTimeLimitWarning;
+    showTimeLimitWarning = _useRecorderStore.showTimeLimitWarning,
+    elapsedTime = _useRecorderStore.elapsedTime;
   var _useRecorderStatus = useRecorderStatus(),
     isRecorderStatus = _useRecorderStatus.isStatus;
   var _useMultipartS3Upload = useMultipartS3UploadStatus(),
@@ -1581,8 +1586,22 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         className: "mx-auto mb-2 w-1/2 p-3",
         "data-cy": "recorder-time-limit-warning-callout",
         style: "warning",
-        children: t("neetoMediaRecorder.record.timeLimitWarning", {
-          duration: getRecorderTimeLimitInHumanFormat(screenRecorder.timeLimit)
+        children: /*#__PURE__*/jsx(Typography, {
+          component: "span",
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoMediaRecorder.record.timeLimitWarning",
+            components: {
+              Bold: /*#__PURE__*/jsx(Typography, {
+                component: "span",
+                weight: "bold"
+              })
+            },
+            values: {
+              duration: getRecorderTimeLimitInHumanFormat(screenRecorder.timeLimit),
+              endsIn: getRecorderTimeLimitInHumanFormat(screenRecorder.timeLimit - elapsedTime)
+            }
+          })
         })
       }), 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",