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

package/index.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, UPLOAD_STATUS, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, UPLOAD_STATUS, 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_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Typography, Spinner, Button, Callout, Alert } from '@bigbinary/neetoui';
@@ -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) {
@@ -501,8 +502,12 @@ function _defineProperty(obj, key, value) {
 }
 
 var baseUrl = "/api/v1/recordings";
-var create = function create() {
-  return axios.post(baseUrl);
+var create = function create(deviceInfo) {
+  return axios.post(baseUrl, {
+    recording: {
+      deviceInfo: deviceInfo
+    }
+  });
 };
 var update = function update(_ref) {
   var id = _ref.id,
@@ -888,6 +893,63 @@ var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanForm
   }
   return "".concat(hours, " hours");
 };
+var getDeviceInfo = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _yield$chrome$storage, _platform$os;
+    var isCameraEnabled;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!IS_EXTENSION$1) {
+            _context.next = 15;
+            break;
+          }
+          _context.next = 3;
+          return chrome.storage.local.get("isCameraOn");
+        case 3:
+          _context.t2 = _yield$chrome$storage = _context.sent;
+          _context.t1 = _context.t2 === null;
+          if (_context.t1) {
+            _context.next = 7;
+            break;
+          }
+          _context.t1 = _yield$chrome$storage === void 0;
+        case 7:
+          if (!_context.t1) {
+            _context.next = 11;
+            break;
+          }
+          _context.t3 = void 0;
+          _context.next = 12;
+          break;
+        case 11:
+          _context.t3 = _yield$chrome$storage.isCameraOn;
+        case 12:
+          _context.t0 = _context.t3;
+          _context.next = 16;
+          break;
+        case 15:
+          _context.t0 = false;
+        case 16:
+          isCameraEnabled = _context.t0;
+          return _context.abrupt("return", {
+            os: (_platform$os = platform.os) === null || _platform$os === void 0 ? void 0 : _platform$os.toString(),
+            app: IS_EXTENSION$1 ? "chrome extension v".concat(chrome.runtime.getManifest().version) : "web",
+            browser: "".concat(platform.name, " v").concat(platform.version),
+            isCameraEnabled: isCameraEnabled,
+            isMicEnabled: !!screenRecorder.audioConfiguration,
+            displaySurface: screenRecorder.displaySurface
+          });
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getDeviceInfo() {
+    return _ref2.apply(this, arguments);
+  };
+}();
 
 var Timer = function Timer() {
   var _useTranslation = useTranslation(),
@@ -969,31 +1031,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);
     }
@@ -1178,6 +1254,27 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     recording = _useCreateRecording$d3 === void 0 ? {} : _useCreateRecording$d3;
   var _useRecordingUploadSu = useRecordingUploadSuccess(),
     markRecordingAsUploaded = _useRecordingUploadSu.mutate;
+  var handleCreateRecording = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var deviceInfo;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return getDeviceInfo();
+          case 2:
+            deviceInfo = _context.sent;
+            createRecording(deviceInfo);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleCreateRecording() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   var handleUploadComplete = function handleUploadComplete() {
     return markRecordingAsUploaded(recording.id, {
       onSuccess: function onSuccess() {
@@ -1186,49 +1283,49 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     });
   };
   var handleDiscardRecording = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var uploadStatus;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context.next = 2;
+            _context2.next = 2;
             return multipartS3Uploader.abortUpload();
           case 2:
             uploadStatus = useMultipartS3UploadStore.getState().status;
             if (!(uploadStatus === UPLOAD_STATUS.aborting)) {
-              _context.next = 5;
+              _context2.next = 5;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 5:
             onDiscard();
           case 6:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function handleDiscardRecording() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var handleRestartRecording = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            _context2.next = 2;
+            _context3.next = 2;
             return multipartS3Uploader.abortUpload();
           case 2:
             multipartS3Uploader.resetState();
           case 3:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function handleRestartRecording() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var handleDiscardAlertClose = function handleDiscardAlertClose() {
@@ -1293,7 +1390,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     };
   }, [recording.id]);
   useEffect(function () {
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, createRecording);
+    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, handleCreateRecording);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDiscardDuringCountdown, onDiscard);
     return function () {
       screenRecorder.revokePermissions();