@bigbinary/neeto-media-recorder 1.0.2 → 1.0.4

package/index.js

@@ -1,13 +1,13 @@
 import { shallow } from 'zustand/shallow';
-import React, { useEffect, useState } from 'react';
-import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
-import { Typography, Spinner, Button, Alert, Callout } from '@bigbinary/neetoui';
+import React, { forwardRef, useState, useImperativeHandle, useEffect } from 'react';
+import classNames from 'classnames';
+import { Typography, Spinner, Button, Callout, Alert } from '@bigbinary/neetoui';
 import { isEmpty } from 'ramda';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import axios from 'axios';
 import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
-import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, ONE_MINUTE_IN_MILLISECONDS, ONE_SECOND_IN_MILLISECONDS, UPLOAD_STATUS, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, ONE_MINUTE_IN_MILLISECONDS, ONE_SECOND_IN_MILLISECONDS, SCREEN_RECORDER_EVENT, UPLOAD_EVENT, UPLOAD_STATUS } from '@bigbinary/neeto-media-recorder/constants';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { Pause, Delete, Copy } from '@bigbinary/neeto-icons';
@@ -453,69 +453,6 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-classnames.exports;
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames() {
-			var classes = [];
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
-				}
-			}
-
-			return classes.join(' ');
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
 var baseUrl = "/api/v1/recordings";
 var create = function create(payload) {
   return axios.post(baseUrl, payload);
@@ -546,28 +483,6 @@ var useRecordingUploadSuccess = function useRecordingUploadSuccess() {
   });
 };
 
-var useBeforeUnload = function useBeforeUnload(enabled) {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handler = function handler(event) {
-    event.preventDefault();
-    var defaultMessage = t("neetoMediaRecorder.common.leaveSite");
-
-    // Gecko + IE browsers
-    event.returnValue = defaultMessage;
-
-    // Safari, Chrome, and other WebKit-derived browsers
-    return defaultMessage;
-  };
-  useEffect(function () {
-    if (!enabled) return undefined;
-    window.addEventListener("beforeunload", handler);
-    return function () {
-      return window.removeEventListener("beforeunload", handler);
-    };
-  }, [enabled]);
-};
-
 var AbortUpload = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React.createElement("div", {
@@ -737,23 +652,15 @@ var useRecorderStatus = function useRecorderStatus() {
 
 var Controls = function Controls(_ref) {
   var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
+    className = _ref$className === void 0 ? "" : _ref$className,
+    setIsRestartAlertOpen = _ref.setIsRestartAlertOpen,
+    setIsDiscardAlertOpen = _ref.setIsDiscardAlertOpen;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDiscardAlertOpen = _useState2[0],
-    setIsDiscardAlertOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isRestartAlertOpen = _useState4[0],
-    setIsRestartAlertOpen = _useState4[1];
   var startRecording = screenRecorder.startRecording,
     pauseRecording = screenRecorder.pauseRecording,
     stopRecording = screenRecorder.stopRecording,
     resumeRecording = screenRecorder.resumeRecording,
-    discardRecording = screenRecorder.discardRecording,
-    restartRecording = screenRecorder.restartRecording,
     useRecorderStore = screenRecorder.useRecorderStore;
   var _useRecorderStore = useRecorderStore(function (store) {
       return {
@@ -764,14 +671,6 @@ var Controls = function Controls(_ref) {
   var _useRecorderStatus = useRecorderStatus(),
     isStatus = _useRecorderStatus.isStatus;
   var hasRecordingStarted = isStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused);
-  var handleDiscardAlertClose = function handleDiscardAlertClose() {
-    discardRecording();
-    setIsDiscardAlertOpen(false);
-  };
-  var handleRestartAlertClose = function handleRestartAlertClose() {
-    restartRecording();
-    setIsRestartAlertOpen(false);
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("flex flex-row items-center gap-3 p-2", _defineProperty({
       "neeto-ui-rounded-lg neeto-ui-border-gray-200 border-2": hasRecordingStarted
@@ -867,25 +766,7 @@ var Controls = function Controls(_ref) {
       position: "top"
     },
     onClick: stopRecording
-  })), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDiscardAlertOpen,
-    message: t("neetoMediaRecorder.record.discardConfirmation.message"),
-    submitButtonLabel: t("neetoMediaRecorder.record.discard"),
-    title: t("neetoMediaRecorder.record.discardConfirmation.title"),
-    onClose: function onClose() {
-      return setIsDiscardAlertOpen(false);
-    },
-    onSubmit: handleDiscardAlertClose
-  }), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isRestartAlertOpen,
-    message: t("neetoMediaRecorder.record.restartConfirmation.message"),
-    submitButtonLabel: t("neetoMediaRecorder.record.restart"),
-    title: t("neetoMediaRecorder.record.restartConfirmation.title"),
-    onClose: function onClose() {
-      return setIsRestartAlertOpen(false);
-    },
-    onSubmit: handleRestartAlertClose
-  }));
+  })));
 };
 
 var useMultipartS3UploadStatus = function useMultipartS3UploadStatus() {
@@ -907,29 +788,6 @@ var useMultipartS3UploadStatus = function useMultipartS3UploadStatus() {
   };
 };
 
-var SetChromeFlags = function SetChromeFlags() {
-  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-center space-y-4"
-  }, /*#__PURE__*/React.createElement(Callout, {
-    className: "mb-2 p-3",
-    style: "danger"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "record.chromeFlagsMissingMessage",
-    components: {
-      Button: /*#__PURE__*/React.createElement(Button, {
-        href: "https://github.com/bigbinary/neeto-record-web#local-development-setup",
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  })))));
-};
-
 var formatTime = function formatTime(time) {
   return Math.floor(time).toString().padStart(2, "0");
 };
@@ -987,7 +845,10 @@ var UploadingInProgress = withT(function (_ref) {
   }), /*#__PURE__*/React.createElement(Spinner, null)));
 });
 
-var MediaRecorder = function MediaRecorder(_ref) {
+var useRecorderStore = screenRecorder.useRecorderStore,
+  restartRecording = screenRecorder.restartRecording,
+  discardRecording = screenRecorder.discardRecording;
+var MediaRecorder = function MediaRecorder(_ref, ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
     onUploadComplete = _ref$onUploadComplete === void 0 ? noop : _ref$onUploadComplete,
     _ref$onDiscard = _ref.onDiscard,
@@ -1002,7 +863,14 @@ var MediaRecorder = function MediaRecorder(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     uploadId = _useState4[0],
     setUploadId = _useState4[1];
-  var useRecorderStore = screenRecorder.useRecorderStore;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDiscardAlertOpen = _useState6[0],
+    setIsDiscardAlertOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isRestartAlertOpen = _useState8[0],
+    setIsRestartAlertOpen = _useState8[1];
   var _useRecorderStore = useRecorderStore(function (store) {
       return {
         status: store["status"],
@@ -1071,8 +939,24 @@ var MediaRecorder = function MediaRecorder(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
-  var shouldShowConfirmation = isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused, SCREEN_RECORDER_STATUS.stopping) || isUploadStatus(UPLOAD_STATUS.uploading, UPLOAD_STATUS.aborting, UPLOAD_STATUS.completed);
-  useBeforeUnload(shouldShowConfirmation);
+  var handleDiscardAlertClose = function handleDiscardAlertClose() {
+    discardRecording();
+    setIsDiscardAlertOpen(false);
+  };
+  var handleRestartAlertClose = function handleRestartAlertClose() {
+    restartRecording();
+    setIsRestartAlertOpen(false);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      handleDiscardRecording: function handleDiscardRecording() {
+        return setIsDiscardAlertOpen(true);
+      },
+      handleRestartRecording: function handleRestartRecording() {
+        return setIsRestartAlertOpen(true);
+      }
+    };
+  });
   useEffect(function () {
     if (!isRecorderStatus(SCREEN_RECORDER_STATUS.idle) || error === SCREEN_RECORDER_ERROR.NotAllowedError) {
       return;
@@ -1105,9 +989,6 @@ var MediaRecorder = function MediaRecorder(_ref) {
     };
   }, []);
   if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) return /*#__PURE__*/React.createElement(UnSupportedBrowser, null);
-  if (globalProps.railsEnv === "development" && error === SCREEN_RECORDER_ERROR.TypeError) {
-    return /*#__PURE__*/React.createElement(SetChromeFlags, null);
-  }
   if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.uploading)) {
     return /*#__PURE__*/React.createElement(UploadingInProgress, {
       recordingId: recordingId
@@ -1132,9 +1013,30 @@ var MediaRecorder = function MediaRecorder(_ref) {
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-full flex h-32 w-32 items-center justify-center",
     style: "h1"
   }, countdownTimeLeft), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.startsIn"))), isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/React.createElement(Timer, null)), /*#__PURE__*/React.createElement(Controls, {
-    className: "mt-5"
+    className: "mt-5",
+    setIsDiscardAlertOpen: setIsDiscardAlertOpen,
+    setIsRestartAlertOpen: setIsRestartAlertOpen
+  }), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isDiscardAlertOpen,
+    message: t("neetoMediaRecorder.record.discardConfirmation.message"),
+    submitButtonLabel: t("neetoMediaRecorder.record.discard"),
+    title: t("neetoMediaRecorder.record.discardConfirmation.title"),
+    onClose: function onClose() {
+      return setIsDiscardAlertOpen(false);
+    },
+    onSubmit: handleDiscardAlertClose
+  }), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isRestartAlertOpen,
+    message: t("neetoMediaRecorder.record.restartConfirmation.message"),
+    submitButtonLabel: t("neetoMediaRecorder.record.restart"),
+    title: t("neetoMediaRecorder.record.restartConfirmation.title"),
+    onClose: function onClose() {
+      return setIsRestartAlertOpen(false);
+    },
+    onSubmit: handleRestartAlertClose
   }));
 };
+var index = /*#__PURE__*/forwardRef(MediaRecorder);
 
-export { MediaRecorder };
+export { index as MediaRecorder };
 //# sourceMappingURL=index.js.map