@bigbinary/neeto-media-recorder 2.7.44 → 2.7.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-media-recorder",
-  "version": "2.7.44",
+  "version": "2.7.45",
   "description": "A package to simplify the media capturing process",
   "repository": "git@github.com:bigbinary/neeto-media-recorder.git",
   "license": "MIT",
@@ -115,6 +115,7 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "js-logger": "^1.6.1",
     "lint-staged": "^12.3.7",
+    "lucide-react": "^1.8.0",
     "platform": "^1.3.6",
     "prettier": "2.6.2",
     "prettier-plugin-tailwindcss": "0.1.10",
@@ -146,6 +147,7 @@
     "axios": "0.27.2",
     "classnames": "^2.3.2",
     "js-logger": "^1.6.1",
+    "lucide-react": "^1.8.0",
     "platform": "^1.3.6",
     "ramda": "^0.29.0",
     "react": "^17.0.2",

package/v2/index.js

@@ -14,20 +14,12 @@ import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/v2/utils/gene
 import withT from '@bigbinary/neeto-commons-frontend/v2/react-utils/withT';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import Computer from '@bigbinary/neeto-icons/Computer';
-import Pause from '@bigbinary/neeto-icons/Pause';
-import Unlock from '@bigbinary/neeto-icons/Unlock';
-import Delete from '@bigbinary/neeto-icons/Delete';
-import Browser from '@bigbinary/neeto-icons/Browser';
-import Close from '@bigbinary/neeto-icons/Close';
-import Download from '@bigbinary/neeto-icons/Download';
-import Copy from '@bigbinary/neeto-icons/Copy';
-import Refresh from '@bigbinary/neeto-icons/Refresh';
+import { AppWindow, Monitor, Trash2, Unlock, Pause, Copy, Download, RefreshCw, X } from 'lucide-react';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".nrec-done-button{background-color:rgb(var(--neeto-ui-error-100));padding:8px 12px}.nrec-done-button:hover{box-shadow:0 0 0 3px rgba(var(--neeto-ui-error-500),15%)}body .neeto-ui-modal__wrapper .neeto-ui-btn--style-danger{background:rgb(var(--neeto-ui-error-500))}.nrec-media-upload-progress{margin:0 auto;max-width:480px}.nrec-media-upload-error{color:rgb(var(--neeto-ui-error-500))}.nrec-media-upload-loader{background:#d9d9d9;border-radius:14px;display:inline-block;height:10px;margin:0 auto;max-width:480px;overflow:hidden;position:relative;width:100%}.nrec-media-upload-loader:after{animation:movementLoader 3s linear infinite,barAnimation 1.5s linear infinite;background-color:#fff;background-image:linear-gradient(45deg,#268e6c 25%,#12805c 0,#12805c 50%,#268e6c 0,#268e6c 75%,#12805c 0,#12805c);background-size:1em 1em;border-radius:14px;box-sizing:border-box;content:\"\";height:10px;left:0;position:absolute;top:0;width:230px}@media only screen and (max-width:767px){.nrec-media-upload-loader:after{width:130px}}.nrec-grant-permission-callout{font-size:20px;left:50%;pointer-events:none;position:fixed;top:60vh;transform:translateX(-50%);width:min(640px,100vw - 32px);z-index:2147483000}@keyframes barAnimation{0%{background-position:1em 0}to{background-position:0 0}}@keyframes movementLoader{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}";
+var css = ".nrec-done-button{background-color:var(--error);padding:8px 12px}.nrec-done-button:hover{box-shadow:0 0 0 3px color-mix(in oklab,var(--error-solid) 15%,transparent)}.nrec-media-upload-progress{margin:0 auto;max-width:480px}.nrec-media-upload-error{color:var(--error-foreground)}.nrec-grant-permission-callout{font-size:20px;left:50%;pointer-events:none;position:fixed;top:60vh;transform:translateX(-50%);width:min(640px,100vw - 32px);z-index:2147483000}.nrec-control-button__icon{height:1.5rem!important;width:1.5rem!important}.nrec-media-upload-progress [data-slot=progress]{height:.75rem}";
 n(css,{});
 
 function _typeof$1(o) {
@@ -1076,12 +1068,13 @@ var AbortUpload = withT(function (_ref) {
         children: [/*#__PURE__*/jsxs(Typography, {
           className: "select-none",
           "data-testid": "recorder-discarding-recording-message",
-          variant: "h2",
+          variant: "h4",
           children: [t("neetoMediaRecorder.record.discardingVideo"), /*#__PURE__*/jsx(Spinner, {
-            className: "ml-3"
+            className: "ms-3"
           })]
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none",
+          color: "muted",
           "data-testid": "recorder-do-not-leave-page-message",
           children: t("neetoMediaRecorder.record.doNotLeaveThePage")
         })]
@@ -1199,11 +1192,11 @@ var AllowMicAccess = function AllowMicAccess() {
 
 var DesktopAppCallout = function DesktopAppCallout() {
   return /*#__PURE__*/jsx(Callout, {
-    className: "mb-3",
+    className: "mb-6",
     variant: "info",
     children: /*#__PURE__*/jsx(Typography, {
       as: "span",
-      variant: "h4",
+      variant: "h6",
       children: /*#__PURE__*/jsx(Trans, {
         i18nKey: "neetoMediaRecorder.useDesktopAppCallOut",
         values: {
@@ -1211,6 +1204,7 @@ var DesktopAppCallout = function DesktopAppCallout() {
         },
         components: {
           Download: /*#__PURE__*/jsx(Button, {
+            className: "text-base font-semibold",
             href: "https://neeto.com/neetorecord/download",
             size: "lg",
             variant: "link"
@@ -1225,11 +1219,11 @@ var RequestRecordingCallout = function RequestRecordingCallout(_ref) {
   var _ref$requestedUser = _ref.requestedUser,
     requestedUser = _ref$requestedUser === void 0 ? "" : _ref$requestedUser;
   return /*#__PURE__*/jsx(Callout, {
-    className: "mb-3 text-center",
+    className: "mb-6 text-center",
     variant: "info",
     children: /*#__PURE__*/jsxs(Typography, {
       as: "span",
-      variant: "h4",
+      variant: "h6",
       children: [requestedUser, " is asking you to send a screen recording."]
     })
   });
@@ -1257,11 +1251,12 @@ var Callouts = withT(function (_ref) {
       className: "flex flex-col items-center",
       children: [/*#__PURE__*/jsx(Typography, {
         className: "mb-2",
-        variant: "h3",
+        variant: "h5",
         children: t("neetoMediaRecorder.record.micPermissionDeniedTitle", {
           appName: appName
         })
       }), /*#__PURE__*/jsx(Typography, {
+        color: "muted",
         children: t("neetoMediaRecorder.record.micPermissionDeniedMessage")
       }), /*#__PURE__*/jsx(AllowMicAccess, {})]
     }), isRecorderStatus(SCREEN_RECORDER_STATUS.acquiring_media) && /*#__PURE__*/jsx(Callout, {
@@ -1354,7 +1349,7 @@ var StopIcon = function StopIcon(_ref2) {
   }, other), {}, {
     children: /*#__PURE__*/jsx("path", {
       d: "M10.667 16A5.333 5.333 0 0116 10.667h32A5.333 5.333 0 0153.333 16v32A5.333 5.333 0 0148 53.333H16A5.333 5.333 0 0110.667 48V16z",
-      fill: "rgb(var(--neeto-ui-error-500))"
+      fill: "var(--error-solid)"
     })
   }));
 };
@@ -1385,28 +1380,30 @@ var GrantAccessMessage = withT(function (_ref) {
     children: [/*#__PURE__*/jsx("div", {
       className: "mb-6 flex justify-center",
       children: /*#__PURE__*/jsx("div", {
-        className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full flex h-16 w-16 items-center justify-center",
-        children: /*#__PURE__*/jsx(Browser, {
-          className: "neeto-ui-text-gray-600",
+        className: "bg-muted flex h-16 w-16 items-center justify-center rounded-full",
+        children: /*#__PURE__*/jsx(AppWindow, {
+          className: "text-muted-foreground",
           size: 40
         })
       })
     }), /*#__PURE__*/jsx(Typography, {
       className: "mb-3 text-center",
-      variant: "h3",
+      variant: "h5",
       children: t("neetoMediaRecorder.record.screenSharePermissionDeniedTitle", {
         appName: appName
       })
     }), /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-600 text-center leading-normal",
+      className: "text-center leading-normal",
+      color: "muted",
       children: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoMediaRecorder.record.screenSharePermissionDenied",
         components: {
           Bold: /*#__PURE__*/jsx(Typography, {
             as: "span",
+            color: "inherit",
             weight: "bold"
           })
-        },
-        i18nKey: "neetoMediaRecorder.record.screenSharePermissionDenied"
+        }
       })
     })]
   });
@@ -1458,11 +1455,11 @@ var Controls = function Controls(_ref) {
   var shouldShowSelectScreenButton = isStatus(SCREEN_RECORDER_STATUS.idle) && (requested || IS_SAFARI_EXTENSION || error === SCREEN_RECORDER_ERROR.NotAllowedError);
   var shouldShowGrantMicPermissionButton = error === SCREEN_RECORDER_ERROR.MicPermissionDenied;
   return /*#__PURE__*/jsxs("div", {
-    className: classNames("mt-5 flex flex-row items-center gap-3 p-2", {
-      "neeto-ui-rounded-lg neeto-ui-border-gray-200 border-2": hasRecordingStarted
+    className: classNames("mt-10 flex flex-row items-center gap-3 p-2", {
+      "border-border rounded-lg border-2": hasRecordingStarted
     }),
     children: [shouldShowSelectScreenButton && /*#__PURE__*/jsxs("div", {
-      className: "neeto-ui-rounded-md w-full max-w-3xl border p-5",
+      className: "w-full max-w-3xl rounded-md border p-5 pb-10",
       children: [/*#__PURE__*/jsx(GrantAccessMessage, {
         appName: appName
       }), /*#__PURE__*/jsxs("div", {
@@ -1471,7 +1468,7 @@ var Controls = function Controls(_ref) {
           className: "flex-shrink-0",
           "data-testid": "media-recorder-record-button",
           icon: function icon() {
-            return /*#__PURE__*/jsx(Computer, {
+            return /*#__PURE__*/jsx(Monitor, {
               size: 20
             });
           },
@@ -1484,7 +1481,7 @@ var Controls = function Controls(_ref) {
           className: "flex-shrink-0",
           "data-testid": "media-recorder-discard-button",
           icon: function icon() {
-            return /*#__PURE__*/jsx(Delete, {
+            return /*#__PURE__*/jsx(Trash2, {
               size: 20
             });
           },
@@ -1525,11 +1522,11 @@ var Controls = function Controls(_ref) {
     }), hasRecordingStarted && /*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-3",
       children: [/*#__PURE__*/jsx(Button, {
-        className: "nrec-done-button flex-shrink-0",
+        className: "nrec-done-button h-12 flex-shrink-0",
         "data-testid": "media-recorder-stop-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(StopIcon, {
-            size: 28
+            className: "nrec-control-button__icon"
           });
         },
         label: t("neetoMediaRecorder.record.done"),
@@ -1537,11 +1534,12 @@ var Controls = function Controls(_ref) {
         variant: "ghost",
         onClick: onStopRecording
       }), /*#__PURE__*/jsx("div", {
-        className: "neeto-ui-bg-gray-200 h-10 w-0.5"
+        className: "bg-border h-10 w-0.5"
       })]
     }), isStatus(SCREEN_RECORDER_STATUS.recording) && /*#__PURE__*/jsx(Button, {
-      className: "flex-shrink-0",
+      className: "h-12 w-12 flex-shrink-0",
       "data-testid": "media-recorder-pause-button",
+      size: "lg",
       variant: "ghost",
       tooltipProps: {
         content: t("neetoMediaRecorder.record.pause"),
@@ -1549,12 +1547,12 @@ var Controls = function Controls(_ref) {
       },
       onClick: pauseRecording,
       children: /*#__PURE__*/jsx(Pause, {
-        className: "nr-control-button__icon--neeto",
-        size: 28
+        className: "nrec-control-button__icon"
       })
     }), isStatus(SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/jsx(Button, {
-      className: "flex-shrink-0",
+      className: "h-12 w-12 flex-shrink-0",
       "data-testid": "media-recorder-play-button",
+      size: "lg",
       variant: "ghost",
       tooltipProps: {
         content: t("neetoMediaRecorder.record.resume"),
@@ -1562,13 +1560,14 @@ var Controls = function Controls(_ref) {
       },
       onClick: resumeRecording,
       children: /*#__PURE__*/jsx(PlayIcon, {
-        size: 28
+        className: "nrec-control-button__icon"
       })
     }), hasRecordingStarted && /*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-3",
       children: [/*#__PURE__*/jsx(Button, {
-        className: "flex-shrink-0",
+        className: "h-12 w-12 flex-shrink-0",
         "data-testid": "media-recorder-restart-button",
+        size: "lg",
         variant: "ghost",
         tooltipProps: {
           content: t("neetoMediaRecorder.record.restart"),
@@ -1578,11 +1577,12 @@ var Controls = function Controls(_ref) {
           return setIsRestartAlertOpen(true);
         },
         children: /*#__PURE__*/jsx(RestartIcon, {
-          size: 28
+          className: "nrec-control-button__icon"
         })
       }), /*#__PURE__*/jsx(Button, {
-        className: "flex-shrink-0",
+        className: "h-12 w-12 flex-shrink-0",
         "data-testid": "media-recorder-discard-button",
+        size: "lg",
         variant: "ghost",
         tooltipProps: {
           content: t("neetoMediaRecorder.record.discard"),
@@ -1591,9 +1591,8 @@ var Controls = function Controls(_ref) {
         onClick: function onClick() {
           return setIsDiscardAlertOpen(true);
         },
-        children: /*#__PURE__*/jsx(Delete, {
-          className: "nr-control-button__icon--neeto",
-          size: 28
+        children: /*#__PURE__*/jsx(Trash2, {
+          className: "nrec-control-button__icon"
         })
       })]
     })]
@@ -1604,7 +1603,7 @@ var Countdown = withT(function (_ref) {
   var t = _ref.t,
     countdownTimeLeft = _ref.countdownTimeLeft;
   return /*#__PURE__*/jsxs("div", {
-    className: "neeto-ui-rounded-lg mx-auto mb-8 flex w-full max-w-4xl flex-col items-center justify-center p-12",
+    className: "mx-auto mb-8 flex w-full max-w-4xl flex-col items-center justify-center rounded-lg p-12",
     "data-testid": "recorder-countdown-wrapper",
     children: [/*#__PURE__*/jsx("div", {
       className: "relative mb-8",
@@ -1618,7 +1617,7 @@ var Countdown = withT(function (_ref) {
             cy: "60",
             fill: "transparent",
             r: "50",
-            stroke: "rgba(2, 128, 105, 0.2)",
+            stroke: "color-mix(in oklab, var(--primary) 20%, transparent)",
             strokeWidth: "4"
           }), /*#__PURE__*/jsx("circle", {
             className: "transition-all duration-1000 ease-linear",
@@ -1626,7 +1625,7 @@ var Countdown = withT(function (_ref) {
             cy: "60",
             fill: "transparent",
             r: "50",
-            stroke: "rgb(2, 128, 105)",
+            stroke: "var(--primary)",
             strokeDasharray: 2 * Math.PI * 50,
             strokeLinecap: "round",
             strokeWidth: "4",
@@ -1640,7 +1639,7 @@ var Countdown = withT(function (_ref) {
       })
     }), /*#__PURE__*/jsx(Typography, {
       className: "mb-4",
-      variant: "h3",
+      variant: "h5",
       children: t("neetoMediaRecorder.record.startsIn")
     })]
   });
@@ -1894,16 +1893,17 @@ var Timer = function Timer() {
     className: "mb-4 flex flex-col items-center justify-center",
     "data-testid": "recorder-timer-wrapper",
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-4xl mb-3 flex justify-center",
+      className: "mb-3 flex justify-center",
       "data-testid": "recorder-timer-elapsed-time",
-      weight: "semibold",
+      variant: "h1",
       children: getTimeString(elapsedTime)
     }), /*#__PURE__*/jsx(Typography, {
       className: "mb-2",
       "data-testid": "recorder-recording-in-progress-message",
-      variant: "h3",
+      variant: "h5",
       children: t("neetoMediaRecorder.record.inProgress")
     }), /*#__PURE__*/jsx(Typography, {
+      color: "muted",
       "data-testid": "recorder-do-not-leave-page-message",
       variant: "body2",
       children: t("neetoMediaRecorder.record.doNotLeaveThePage")
@@ -1946,18 +1946,18 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
   return /*#__PURE__*/jsxs("div", {
     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__*/jsx(DesktopAppCallout, {}), /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20",
+      children: [/*#__PURE__*/jsxs("div", {
         className: "w-full pb-6 text-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "select-none pb-6",
           "data-testid": "please-dont-close-this-tab",
-          variant: "h1",
+          variant: "h2",
           children: t("neetoMediaRecorder.record.pleaseDontCloseThisTab")
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none pb-3",
           "data-testid": "recorder-uploading-recording-message",
-          variant: "h2",
+          variant: "h4",
           weight: "normal",
           children: t("neetoMediaRecorder.record.uploadingRecording")
         }), /*#__PURE__*/jsx("div", {
@@ -1970,6 +1970,7 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
           })
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none",
+          color: "muted",
           "data-testid": "recorder-do-not-leave-page-message",
           variant: "body2",
           children: t("neetoMediaRecorder.record.copyLinkDescription")
@@ -1985,19 +1986,22 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "recorder-download-webm-button",
           icon: Download,
+          iconPosition: "left",
           variant: "secondary",
           label: isMp4Supported() ? t("neetoMediaRecorder.record.downloadMp4") : t("neetoMediaRecorder.record.downloadWebm"),
           onClick: handleRecordingBlobDownload
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "recorder-retry-upload-button",
           disabled: isRetryUpload,
-          icon: Refresh,
+          icon: RefreshCw,
+          iconPosition: "left",
           label: t("neetoMediaRecorder.record.retry"),
           variant: "secondary",
           onClick: onRetryUpload
         }), /*#__PURE__*/jsx(Button, {
           "data-testid": "recorder-discard-recording-button",
-          icon: Close,
+          icon: X,
+          iconPosition: "left",
           label: t("neetoMediaRecorder.record.discardRecording"),
           variant: "secondary",
           onClick: function onClick() {
@@ -2485,9 +2489,9 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     });
   }
   if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && upload && isUploadStatus(UPLOAD_STATUS$1.completed)) {
-    return /*#__PURE__*/jsxs("div", {
+    return /*#__PURE__*/jsx("div", {
       className: "h-screen w-full",
-      children: [/*#__PURE__*/jsx(DesktopAppCallout, {}), /*#__PURE__*/jsx(PageLoader, {})]
+      children: /*#__PURE__*/jsx(PageLoader, {})
     });
   }
   return /*#__PURE__*/jsxs("div", {