@bigbinary/neeto-media-recorder 2.2.0 → 2.4.0

package/index.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { 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, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS, MIME_TYPE as MIME_TYPE$1, 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_ERROR, IS_SAFARI_EXTENSION, 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 Alert from '@bigbinary/neetoui/Alert';
@@ -12,6 +12,8 @@ import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation, Trans } from 'react-i18next';
 import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
+import platform from 'platform';
+import { isNotNil, isEmpty } from 'ramda';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -19,8 +21,6 @@ import Computer from '@bigbinary/neeto-icons/Computer';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Pause from '@bigbinary/neeto-icons/Pause';
 import Unlock from '@bigbinary/neeto-icons/Unlock';
-import platform from 'platform';
-import { isNotNil, isEmpty } from 'ramda';
 import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Close from '@bigbinary/neeto-icons/Close';
 import Download from '@bigbinary/neeto-icons/Download';
@@ -512,11 +512,136 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+var ONE_SECOND_IN_MILLISECONDS = 1000;
+var ONE_MINUTE_IN_MILLISECONDS = 60 * ONE_SECOND_IN_MILLISECONDS;
+var ONE_HOUR_IN_MILLISECONDS = 60 * ONE_MINUTE_IN_MILLISECONDS;
+var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof(chrome)) === "object";
+var IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);
+platform.name === "Safari";
+var MIME_TYPE = {
+  mp4: "video/mp4",
+  webmH264: "video/webm;codecs=h264"
+};
+ // 2 hours
+
+var getSupportedMimeType = function getSupportedMimeType(fallback) {
+  if (MediaRecorder.isTypeSupported(MIME_TYPE.mp4)) {
+    return MIME_TYPE.mp4;
+  } else if (MediaRecorder.isTypeSupported(MIME_TYPE.webmH264)) {
+    return MIME_TYPE.webmH264;
+  }
+  return fallback;
+};
+
+var formatTime = function formatTime(time) {
+  return Math.floor(time).toString().padStart(2, "0");
+};
+var getTimeString = function getTimeString(date) {
+  var hours = formatTime(Math.floor(date / ONE_HOUR_IN_MILLISECONDS));
+  var minutes = formatTime(date % ONE_HOUR_IN_MILLISECONDS / ONE_MINUTE_IN_MILLISECONDS$1);
+  var seconds = formatTime(date % ONE_MINUTE_IN_MILLISECONDS$1 / ONE_SECOND_IN_MILLISECONDS$1);
+  if (hours > 0) {
+    return "".concat(hours, ":").concat(minutes, ":").concat(seconds);
+  }
+  return "".concat(minutes, ":").concat(seconds);
+};
+var downloadRecordingBlob = function downloadRecordingBlob(blob, name) {
+  var blobUrl = URL.createObjectURL(blob);
+  var linkElement = document.createElement("a");
+  linkElement.href = blobUrl;
+  linkElement.download = name;
+  document.body.appendChild(linkElement);
+
+  // Dispatch click event on the link
+  // This is necessary as link.click() does not work on the latest firefox
+  linkElement.dispatchEvent(new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  }));
+  document.body.removeChild(linkElement);
+  URL.revokeObjectURL(blobUrl);
+};
+var hasRecordingDiscarded = function hasRecordingDiscarded(_ref) {
+  var recorderStatus = _ref.recorderStatus,
+    uploadStatus = _ref.uploadStatus;
+  return recorderStatus === SCREEN_RECORDER_STATUS.stopped && uploadStatus === UPLOAD_STATUS.aborting;
+};
+var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanFormat(timeInMs) {
+  var minutes = Math.floor(timeInMs / (1000 * 60));
+  var hours = Math.floor(minutes / 60);
+  if (hours < 1) {
+    return "".concat(minutes, " minutes");
+  }
+  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 isMp4Supported = function isMp4Supported() {
+  return getSupportedMimeType() === MIME_TYPE$1.mp4;
+};
+
 var baseUrl = "/api/v1/recordings";
 var create = function create(deviceInfo) {
   return axios.post(baseUrl, {
     recording: {
-      deviceInfo: deviceInfo
+      deviceInfo: deviceInfo,
+      isMp4: isMp4Supported()
     }
   });
 };
@@ -839,114 +964,6 @@ var useMultipartS3UploadStatus = function useMultipartS3UploadStatus() {
   };
 };
 
-var ONE_SECOND_IN_MILLISECONDS = 1000;
-var ONE_MINUTE_IN_MILLISECONDS = 60 * ONE_SECOND_IN_MILLISECONDS;
-var ONE_HOUR_IN_MILLISECONDS = 60 * ONE_MINUTE_IN_MILLISECONDS;
-var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof(chrome)) === "object";
-var IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);
-platform.name === "Safari";
- // 2 hours
-
-var formatTime = function formatTime(time) {
-  return Math.floor(time).toString().padStart(2, "0");
-};
-var getTimeString = function getTimeString(date) {
-  var hours = formatTime(Math.floor(date / ONE_HOUR_IN_MILLISECONDS));
-  var minutes = formatTime(date % ONE_HOUR_IN_MILLISECONDS / ONE_MINUTE_IN_MILLISECONDS$1);
-  var seconds = formatTime(date % ONE_MINUTE_IN_MILLISECONDS$1 / ONE_SECOND_IN_MILLISECONDS$1);
-  if (hours > 0) {
-    return "".concat(hours, ":").concat(minutes, ":").concat(seconds);
-  }
-  return "".concat(minutes, ":").concat(seconds);
-};
-var downloadRecordingBlob = function downloadRecordingBlob(blob, name) {
-  var blobUrl = URL.createObjectURL(blob);
-  var linkElement = document.createElement("a");
-  linkElement.href = blobUrl;
-  linkElement.download = name;
-  document.body.appendChild(linkElement);
-
-  // Dispatch click event on the link
-  // This is necessary as link.click() does not work on the latest firefox
-  linkElement.dispatchEvent(new MouseEvent("click", {
-    bubbles: true,
-    cancelable: true,
-    view: window
-  }));
-  document.body.removeChild(linkElement);
-  URL.revokeObjectURL(blobUrl);
-};
-var hasRecordingDiscarded = function hasRecordingDiscarded(_ref) {
-  var recorderStatus = _ref.recorderStatus,
-    uploadStatus = _ref.uploadStatus;
-  return recorderStatus === SCREEN_RECORDER_STATUS.stopped && uploadStatus === UPLOAD_STATUS.aborting;
-};
-var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanFormat(timeInMs) {
-  var minutes = Math.floor(timeInMs / (1000 * 60));
-  var hours = Math.floor(minutes / 60);
-  if (hours < 1) {
-    return "".concat(minutes, " minutes");
-  }
-  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(),
     t = _useTranslation.t;
@@ -1069,8 +1086,8 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
         }), /*#__PURE__*/jsx(Button, {
           "data-cy": "recorder-download-webm-button",
           icon: Download,
-          label: t("neetoMediaRecorder.record.downloadWebm"),
           style: "tertiary",
+          label: isMp4Supported() ? t("neetoMediaRecorder.record.downloadMp4") : t("neetoMediaRecorder.record.downloadWebm"),
           onClick: handleRecordingBlobDownload
         }), /*#__PURE__*/jsx(Button, {
           "data-cy": "recorder-discard-recording-button",
@@ -1208,7 +1225,7 @@ var useRecorderStore = screenRecorder.useRecorderStore,
   discardRecording = screenRecorder.discardRecording;
 var useMultipartS3UploadStore = multipartS3Uploader.useMultipartS3UploadStore;
 var globalProps = ((_window = window) === null || _window === void 0 ? void 0 : _window.globalProps) || {};
-var MediaRecorder = function MediaRecorder(_ref, ref) {
+var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
     onUploadComplete = _ref$onUploadComplete === void 0 ? noop : _ref$onUploadComplete,
     _ref$onDiscard = _ref.onDiscard,
@@ -1544,7 +1561,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     })]
   });
 };
-var index = /*#__PURE__*/forwardRef(MediaRecorder);
+var index = /*#__PURE__*/forwardRef(MediaRecorder$1);
 
 export { index as MediaRecorder };
 //# sourceMappingURL=index.js.map