@bigbinary/neeto-media-recorder 2.6.2 → 2.6.4

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");
@@ -1026,6 +1029,26 @@ var generatePublicUrl = function generatePublicUrl(recordingId) {
   return "".concat(baseURL, "/watch/").concat(recordingId);
 };
 
+var UseDesktopAppCallout = function UseDesktopAppCallout() {
+  return /*#__PURE__*/jsx(Callout, {
+    className: "mb-3",
+    style: "info",
+    children: /*#__PURE__*/jsx(Typography, {
+      component: "span",
+      style: "body2",
+      children: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoMediaRecorder.useDesktopAppCallOut",
+        components: {
+          Download: /*#__PURE__*/jsx(Button, {
+            href: "https://neeto.com/neetorecord/download",
+            style: "link"
+          })
+        }
+      })
+    })
+  });
+};
+
 var UploadingInProgress = function UploadingInProgress(_ref) {
   var recording = _ref.recording,
     uploadProgress = _ref.uploadProgress,
@@ -1067,7 +1090,7 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
     className: "flex h-screen w-full flex-col items-center justify-center",
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex h-full w-full flex-col items-center justify-start py-14 lg:py-20 xl:py-28 2xl:py-36",
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), /*#__PURE__*/jsxs("div", {
         className: "w-full pb-6 text-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "select-none pb-6",
@@ -1285,13 +1308,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(),
@@ -1528,16 +1553,16 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     });
   }
   if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS$1.completed)) {
-    return /*#__PURE__*/jsx("div", {
+    return /*#__PURE__*/jsxs("div", {
       className: "h-screen w-full",
-      children: /*#__PURE__*/jsx(PageLoader, {})
+      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), /*#__PURE__*/jsx(PageLoader, {})]
     });
   }
   return /*#__PURE__*/jsxs("div", {
     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: [error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
         className: "flex flex-col items-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "mb-2",
@@ -1581,8 +1606,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",