@bigbinary/neeto-media-recorder 1.3.0 → 1.3.2

package/index.js

@@ -505,8 +505,10 @@ var AbortUpload = withT(function (_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-center space-y-4"
-  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Spinner, null)));
+    className: "flex h-full w-full flex-col items-center justify-start space-y-4 py-10 2xl:py-20"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h3"
+  }, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement(Spinner, null)));
 });
 
 function _toPrimitive(input, hint) {
@@ -687,7 +689,7 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(PlayIcon, {
-        size: 24
+        size: 28
       });
     },
     label: t("neetoMediaRecorder.record.title"),
@@ -701,7 +703,7 @@ var Controls = function Controls(_ref) {
     icon: function icon() {
       return /*#__PURE__*/React.createElement(Pause, {
         className: "nr-control-button__icon--neeto",
-        size: 24
+        size: 28
       });
     },
     tooltipProps: {
@@ -713,7 +715,7 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(PlayIcon, {
-        size: 24
+        size: 28
       });
     },
     size: "large",
@@ -729,7 +731,7 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(RestartIcon, {
-        size: 24
+        size: 28
       });
     },
     size: "large",
@@ -748,7 +750,7 @@ var Controls = function Controls(_ref) {
     icon: function icon() {
       return /*#__PURE__*/React.createElement(Delete, {
         className: "nr-control-button__icon--neeto",
-        size: 24
+        size: 28
       });
     },
     tooltipProps: {
@@ -764,7 +766,7 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(StopIcon, {
-        size: 24
+        size: 28
       });
     },
     size: "large",
@@ -840,11 +842,11 @@ var Timer = function Timer() {
   return /*#__PURE__*/React.createElement("div", {
     className: "mb-4 flex flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-3 flex justify-center",
-    style: "h1"
+    className: "neeto-ui-text-4xl mb-3 flex justify-center",
+    weight: "semibold"
   }, getTimeString(elapsedTime)), /*#__PURE__*/React.createElement(Typography, {
     className: "mb-2",
-    style: "h4"
+    style: "h3"
   }, t("neetoMediaRecorder.record.inProgress")), /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, t("neetoMediaRecorder.record.doNotLeaveThePage")));
@@ -897,10 +899,12 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full flex-col items-center justify-start space-y-4 py-10 2xl:py-20"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 flex space-x-3"
-  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.uploadingRecording")), /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h3"
+  }, t("neetoMediaRecorder.record.uploadingRecording")), /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement("div", {
     className: "mt-6 flex items-center space-x-4"
   }, /*#__PURE__*/React.createElement(CopyToClipboardButton, {
     icon: Copy,
@@ -954,12 +958,14 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       return {
         status: store["status"],
         error: store["error"],
-        countdownTimeLeft: store["countdownTimeLeft"]
+        countdownTimeLeft: store["countdownTimeLeft"],
+        showTimeLimitWarning: store["showTimeLimitWarning"]
       };
     }, shallow),
     recorderStatus = _useRecorderStore.status,
     error = _useRecorderStore.error,
-    countdownTimeLeft = _useRecorderStore.countdownTimeLeft;
+    countdownTimeLeft = _useRecorderStore.countdownTimeLeft,
+    showTimeLimitWarning = _useRecorderStore.showTimeLimitWarning;
   var _useMultipartS3Upload = useMultipartS3UploadStore(function (store) {
       return {
         status: store["status"]
@@ -970,6 +976,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     isRecorderStatus = _useRecorderStatus.isStatus;
   var _useMultipartS3Upload2 = useMultipartS3UploadStatus(),
     isUploadStatus = _useMultipartS3Upload2.isStatus;
+  var shouldShowTimeLimitWarning = showTimeLimitWarning && isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused);
   var _useCreateRecording = useCreateRecording({
       onSuccess: function onSuccess(_ref2) {
         var recording = _ref2.recording,
@@ -1112,7 +1119,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     return /*#__PURE__*/React.createElement(AbortUpload, null);
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-col items-center justify-center"
+    className: "flex h-screen w-full flex-col items-center justify-start py-10 2xl:py-20"
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames("w-full max-w-3xl")
   }, error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/React.createElement(Callout, {
@@ -1134,11 +1141,16 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
   }, t("neetoMediaRecorder.record.grantPermissionMessage")), shouldShowSafariExtensionCalloutToStartRecording && /*#__PURE__*/React.createElement(Callout, {
     className: "mx-auto mb-2 w-1/2 p-3",
     style: "info"
-  }, t("neetoMediaRecorder.record.clickToStartRecording")), isRecorderStatus(SCREEN_RECORDER_STATUS.media_acquired, SCREEN_RECORDER_STATUS.restarting) && /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMediaRecorder.record.clickToStartRecording")), shouldShowTimeLimitWarning && /*#__PURE__*/React.createElement(Callout, {
+    className: "mx-auto mb-2 w-1/2 p-3",
+    style: "warning"
+  }, t("neetoMediaRecorder.record.timeLimitWarning")), isRecorderStatus(SCREEN_RECORDER_STATUS.media_acquired, SCREEN_RECORDER_STATUS.restarting) && /*#__PURE__*/React.createElement("div", {
     className: " mx-auto flex flex-col items-center justify-center space-y-4"
-  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.startsIn")), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-bg-primary-100 neeto-ui-rounded-full flex h-32 w-32 items-center justify-center",
-    style: "h1"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h3"
+  }, t("neetoMediaRecorder.record.startsIn")), /*#__PURE__*/React.createElement(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"
   }, countdownTimeLeft)), isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/React.createElement(Timer, null)), /*#__PURE__*/React.createElement(Controls, {
     setIsDiscardAlertOpen: setIsDiscardAlertOpen,
     setIsRestartAlertOpen: setIsRestartAlertOpen,