@bigbinary/neeto-media-recorder 1.4.0-beta2 → 2.0.0

package/index.js

@@ -10,14 +10,15 @@ import { useTranslation, Trans } from 'react-i18next';
 import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import { Computer, Unlock, Pause, Delete, Download, Close } from '@bigbinary/neeto-icons';
+import { Computer, Unlock, Pause, Delete, Copy, Download, Close } from '@bigbinary/neeto-icons';
 import platform from 'platform';
 import { isNotNil, isEmpty } from 'ramda';
 import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/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%)}";
+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-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}}@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)}}";
 n(css,{});
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -969,31 +970,45 @@ 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-start py-10 xl:py-14 2xl:py-20"
+    className: "flex h-full w-full flex-col items-center justify-start py-14 lg:py-20 xl:py-28 2xl:py-36"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2 pb-6 text-center"
+    className: "w-full pb-6 text-center"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "select-none",
+    className: "select-none pb-6",
+    "data-cy": "please-dont-close-this-tab",
+    style: "h1"
+  }, t("neetoMediaRecorder.record.pleaseDontCloseThisTab")), /*#__PURE__*/React.createElement(Typography, {
+    className: "select-none pb-3",
     "data-cy": "recorder-uploading-recording-message",
-    style: "h2"
-  }, t("neetoMediaRecorder.record.uploadingRecording"), /*#__PURE__*/React.createElement(Spinner, {
-    className: "ml-3 select-none"
+    style: "h2",
+    weight: "normal"
+  }, t("neetoMediaRecorder.record.uploadingRecording")), /*#__PURE__*/React.createElement("div", {
+    className: "pb-3"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "nrec-media-upload-loader"
   })), /*#__PURE__*/React.createElement(Typography, {
     className: "select-none",
-    "data-cy": "recorder-do-not-leave-page-message"
-  }, t("neetoMediaRecorder.record.doNotLeaveThePage"))), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-wrap items-center justify-center gap-4"
-  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "recorder-do-not-leave-page-message",
+    style: "body2"
+  }, t("neetoMediaRecorder.record.copyLinkDescription"))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap items-center justify-center gap-3"
+  }, /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    "data-cy": "recorder-copy-link-button",
+    icon: Copy,
+    label: t("neetoMediaRecorder.record.copyToClipboard"),
+    style: "tertiary",
+    value: generatePublicUrl(recording.id, baseURL)
+  }), /*#__PURE__*/React.createElement(Button, {
     "data-cy": "recorder-download-webm-button",
     icon: Download,
     label: t("neetoMediaRecorder.record.downloadWebm"),
-    style: "secondary",
+    style: "tertiary",
     onClick: handleRecordingBlobDownload
   }), /*#__PURE__*/React.createElement(Button, {
     "data-cy": "recorder-discard-recording-button",
     icon: Close,
     label: t("neetoMediaRecorder.record.discardRecording"),
-    style: "secondary",
+    style: "tertiary",
     onClick: function onClick() {
       return setIsDiscardAlertOpen(true);
     }