@bigbinary/neeto-media-recorder 1.3.1 → 1.3.3

package/index.js

@@ -507,8 +507,11 @@ var AbortUpload = withT(function (_ref) {
   }, /*#__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(Typography, {
-    style: "h3"
-  }, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement(Spinner, null)));
+    style: "h3",
+    "data-cy": "recorder-discarding-recording-message"
+  }, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "recorder-do-not-leave-page-message"
+  }, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement(Spinner, null)));
 });
 
 function _toPrimitive(input, hint) {
@@ -687,6 +690,7 @@ var Controls = function Controls(_ref) {
     }, className, isNotEmpty(classNames)))
   }, shouldShowRecordButton && /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
+    "data-cy": "media-recorder-record-button",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(PlayIcon, {
         size: 28
@@ -698,6 +702,7 @@ var Controls = function Controls(_ref) {
     onClick: startRecording
   }), isStatus(SCREEN_RECORDER_STATUS.recording) && /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
+    "data-cy": "media-recorder-pause-button",
     size: "large",
     style: "text",
     icon: function icon() {
@@ -718,6 +723,7 @@ var Controls = function Controls(_ref) {
         size: 28
       });
     },
+    "data-cy": "media-recorder-play-button",
     size: "large",
     style: "text",
     tooltipProps: {
@@ -729,6 +735,7 @@ var Controls = function Controls(_ref) {
     className: "flex items-center gap-3"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
+    "data-cy": "media-recorder-restart-button",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(RestartIcon, {
         size: 28
@@ -745,6 +752,7 @@ var Controls = function Controls(_ref) {
     }
   }), /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
+    "data-cy": "media-recorder-discard-button",
     size: "large",
     style: "text",
     icon: function icon() {
@@ -764,6 +772,7 @@ var Controls = function Controls(_ref) {
     className: "neeto-ui-bg-gray-200 h-4 w-0.5"
   }), /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
+    "data-cy": "media-recorder-stop-button",
     icon: function icon() {
       return /*#__PURE__*/React.createElement(StopIcon, {
         size: 28
@@ -840,15 +849,18 @@ var Timer = function Timer() {
     }, shallow),
     elapsedTime = _useRecorderStore.elapsedTime;
   return /*#__PURE__*/React.createElement("div", {
-    className: "mb-4 flex flex-col items-center justify-center"
+    className: "mb-4 flex flex-col items-center justify-center",
+    "data-cy": "recorder-timer-wrapper"
   }, /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-4xl mb-3 flex justify-center",
     weight: "semibold"
   }, getTimeString(elapsedTime)), /*#__PURE__*/React.createElement(Typography, {
     className: "mb-2",
+    "data-cy": "recorder-recording-in-progress-message",
     style: "h3"
   }, t("neetoMediaRecorder.record.inProgress")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
+    style: "body2",
+    "data-cy": "recorder-do-not-leave-page-message"
   }, t("neetoMediaRecorder.record.doNotLeaveThePage")));
 };
 
@@ -858,6 +870,7 @@ var UnSupportedBrowser = withT(function (_ref) {
     className: "flex h-screen w-full items-center justify-center"
   }, /*#__PURE__*/React.createElement(Callout, {
     className: "p-5",
+    "data-cy": "recorder-unsupported-browser-callout",
     style: "danger"
   }, t("neetoMediaRecorder.unsupportedBrowser")));
 });
@@ -903,20 +916,26 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 flex space-x-3"
   }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "recorder-uploading-recording-message",
     style: "h3"
-  }, t("neetoMediaRecorder.record.uploadingRecording")), /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMediaRecorder.record.uploadingRecording")), /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "recorder-do-not-leave-page-message"
+  }, t("neetoMediaRecorder.record.doNotLeaveThePage")), /*#__PURE__*/React.createElement("div", {
     className: "mt-6 flex items-center space-x-4"
   }, /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    "data-cy": "recorder-recording-link-copy-button",
     icon: Copy,
     label: t("neetoMediaRecorder.record.copyToClipboard"),
     style: "primary",
     value: generatePublicUrl(recording.id, baseURL)
   }), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "recorder-download-webm-button",
     icon: Download,
     label: t("neetoMediaRecorder.record.downloadWebm"),
     style: "secondary",
     onClick: handleRecordingBlobDownload
   }), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "recorder-discard-recording-button",
     icon: Close,
     label: t("neetoMediaRecorder.record.discardRecording"),
     style: "secondary",
@@ -958,12 +977,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"]
@@ -974,6 +995,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,
@@ -1121,6 +1143,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     className: classNames("w-full max-w-3xl")
   }, error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/React.createElement(Callout, {
     className: "mb-2 p-3",
+    "data-cy": "recorder-permission-denied-danger-callout",
     style: "danger"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Trans, {
     i18nKey: "neetoMediaRecorder.record.permissionDeniedMessage",
@@ -1134,12 +1157,19 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     }
   }))), isRecorderStatus(SCREEN_RECORDER_STATUS.acquiring_media) && /*#__PURE__*/React.createElement(Callout, {
     className: "mb-2 p-3",
+    "data-cy": "recorder-grant-permission-info-callout",
     style: "info"
   }, t("neetoMediaRecorder.record.grantPermissionMessage")), shouldShowSafariExtensionCalloutToStartRecording && /*#__PURE__*/React.createElement(Callout, {
     className: "mx-auto mb-2 w-1/2 p-3",
+    "data-cy": "recorder-start-recording-info-callout",
     style: "info"
-  }, t("neetoMediaRecorder.record.clickToStartRecording")), 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"
+  }, t("neetoMediaRecorder.record.clickToStartRecording")), shouldShowTimeLimitWarning && /*#__PURE__*/React.createElement(Callout, {
+    className: "mx-auto mb-2 w-1/2 p-3",
+    "data-cy": "recorder-time-limit-warning-callout",
+    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",
+    "data-cy": "recorder-countdown-wrapper"
   }, /*#__PURE__*/React.createElement(Typography, {
     style: "h3"
   }, t("neetoMediaRecorder.record.startsIn")), /*#__PURE__*/React.createElement(Typography, {