@bigbinary/neeto-media-recorder 2.7.6 → 2.7.8

package/index.js

@@ -1,8 +1,8 @@
 import { shallow } from 'zustand/shallow';
-import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_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 { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, MIC_NOT_WORKING_SILENCE_TIMEOUT, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, useMultipartS3UploadStatus, getMultipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Alert from '@bigbinary/neetoui/Alert';
@@ -512,7 +512,6 @@ var MIME_TYPE = {
   mp4: "video/mp4",
   webmH264: "video/webm;codecs=h264"
 };
- // 2 hours
 
 var getSupportedMimeType = function getSupportedMimeType() {
   return MIME_TYPE.webmH264;
@@ -921,6 +920,177 @@ var Controls = function Controls(_ref) {
   });
 };
 
+var getAnalyser = function getAnalyser() {
+  var _screenRecorder$getAu;
+  var stream = (_screenRecorder$getAu = screenRecorder.getAudioStream) === null || _screenRecorder$getAu === void 0 ? void 0 : _screenRecorder$getAu.call(screenRecorder);
+  if (!stream) return null;
+  var ctx = new (window.AudioContext || window.webkitAudioContext)();
+  var source = ctx.createMediaStreamSource(stream);
+  var analyser = ctx.createAnalyser();
+  analyser.fftSize = 2048;
+  source.connect(analyser);
+  var data = new Uint8Array(analyser.fftSize);
+  return {
+    ctx: ctx,
+    source: source,
+    analyser: analyser,
+    data: data
+  };
+};
+var hasChrome = typeof chrome !== "undefined" && chrome.runtime && chrome.runtime.onMessage;
+var useAudioIsCapturing = function useAudioIsCapturing(_ref) {
+  var isMicOn = _ref.isMicOn;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasAudio = _useState2[0],
+    setHasAudio = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disable = _useState4[0],
+    setDisable = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timerStarted = _useState6[0],
+    setTimerStarted = _useState6[1];
+  var timerRef = useRef(null);
+  var remainingRef = useRef(MIC_NOT_WORKING_SILENCE_TIMEOUT);
+  var startedAtRef = useRef(null);
+  var clearTimer = function clearTimer() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  };
+  var armTimer = function armTimer() {
+    if (timerRef.current || !timerStarted) return;
+    logger.info("useAudioIsCapturing new timer");
+    startedAtRef.current = Date.now();
+    timerRef.current = setTimeout(function () {
+      return setHasAudio(false);
+    }, remainingRef.current);
+  };
+  var pauseTimer = function pauseTimer() {
+    if (!timerRef.current) return;
+    var elapsed = Date.now() - startedAtRef.current;
+    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    clearTimer();
+  };
+  var resumeTimer = function resumeTimer() {
+    if (timerRef.current || !timerStarted || disable) return;
+    logger.info("useAudioIsCapturing resumeTimer");
+    startedAtRef.current = Date.now();
+    timerRef.current = setTimeout(function () {
+      return setHasAudio(false);
+    }, remainingRef.current);
+  };
+  var reset = useCallback(function () {
+    logger.info("useAudioIsCapturing reset");
+    clearTimer();
+    remainingRef.current = MIC_NOT_WORKING_SILENCE_TIMEOUT;
+    setTimerStarted(false);
+    setHasAudio(true);
+  }, []);
+
+  // Listen for Chrome extension messages
+  useEffect(function () {
+    var handleMessage = function handleMessage(message) {
+      if (!(message.type === "IGNORE_AUDIO_NOT_CAPTURING")) return;
+      logger.info("useAudioIsCapturing -> IGNORE_AUDIO_NOT_CAPTURING received");
+      setDisable(true);
+    };
+
+    // Check if we're in a Chrome extension context
+    if (hasChrome) {
+      chrome.runtime.onMessage.addListener(handleMessage);
+    }
+    return function () {
+      if (hasChrome) {
+        var _chrome, _chrome$runtime, _chrome$runtime$onMes;
+        (_chrome = chrome) === null || _chrome === void 0 ? void 0 : (_chrome$runtime = _chrome.runtime) === null || _chrome$runtime === void 0 ? void 0 : (_chrome$runtime$onMes = _chrome$runtime.onMessage) === null || _chrome$runtime$onMes === void 0 ? void 0 : _chrome$runtime$onMes.removeListener(handleMessage);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (!isMicOn || !timerStarted || disable) return noop;
+    var analyserObj = null;
+    var rafId;
+    var loop = function loop() {
+      if (!analyserObj) analyserObj = getAnalyser();
+      // if no stream yet or analyser failed, treat as silence
+      var isSilent = !analyserObj ? true : function () {
+        analyserObj.analyser.getByteTimeDomainData(analyserObj.data);
+        return analyserObj.data.every(function (v) {
+          return v === 128;
+        }); // absolute silence
+      }();
+
+      if (isSilent) {
+        armTimer();
+      } else {
+        clearTimer();
+        remainingRef.current = MIC_NOT_WORKING_SILENCE_TIMEOUT;
+        if (!hasAudio) setHasAudio(true);
+      }
+      rafId = requestAnimationFrame(loop);
+    };
+    loop();
+    return function () {
+      cancelAnimationFrame(rafId);
+      clearTimer();
+      if (analyserObj) {
+        analyserObj.source.disconnect();
+        analyserObj.ctx.close();
+      }
+    };
+  }, [timerStarted, hasAudio, isMicOn, disable]);
+  useEffect(function () {
+    var _callbacks;
+    if (!isMicOn) return noop;
+    var callbacks = (_callbacks = {}, _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onStart, function () {
+      reset();
+      setTimerStarted(true);
+      armTimer();
+    }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onRestart, function () {
+      reset();
+      setTimerStarted(true);
+      armTimer();
+    }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onResume, function () {
+      setTimerStarted(true);
+      resumeTimer();
+    }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onPause, function () {
+      pauseTimer();
+    }), _defineProperty(_callbacks, SCREEN_RECORDER_EVENT.onStop, function () {
+      clearTimer();
+      reset();
+    }), _defineProperty(_callbacks, "disable-mic-not-working-warning", function disableMicNotWorkingWarning() {
+      logger.info("useAudioIsCapturing -> disable-mic-not-working-warning");
+      setDisable(true);
+      setTimeout(function () {
+        clearTimer();
+        reset();
+      }, 500);
+    }), _callbacks);
+    // start straight a way.
+    callbacks[SCREEN_RECORDER_EVENT.onStart]();
+    Object.entries(callbacks).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        ev = _ref3[0],
+        fn = _ref3[1];
+      return screenRecorder.addCallback(ev, fn);
+    });
+    return function () {
+      Object.entries(callbacks).forEach(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          ev = _ref5[0],
+          fn = _ref5[1];
+        return screenRecorder.removeCallback(ev, fn);
+      });
+    };
+  }, [isMicOn, reset]);
+  return {
+    hasAudio: hasAudio,
+    reset: reset
+  };
+};
+
 var useHandleErrors = function useHandleErrors(_ref) {
   var error = _ref.error,
     recorderStatus = _ref.recorderStatus;
@@ -1286,7 +1456,13 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     appName = _ref$appName === void 0 ? globalProps.appName : _ref$appName,
     _ref$mimeType = _ref.mimeType,
     mimeType = _ref$mimeType === void 0 ? getSupportedMimeType() : _ref$mimeType,
-    folderId = _ref.folderId;
+    folderId = _ref.folderId,
+    _ref$isMicOn = _ref.isMicOn,
+    isMicOn = _ref$isMicOn === void 0 ? false : _ref$isMicOn,
+    _ref$onAudioNotCaptur = _ref.onAudioNotCapturing,
+    onAudioNotCapturing = _ref$onAudioNotCaptur === void 0 ? function () {} : _ref$onAudioNotCaptur,
+    _ref$onError = _ref.onError,
+    onError = _ref$onError === void 0 ? function () {} : _ref$onError;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -1306,6 +1482,18 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     isRetryUpload = _useState8[0],
     setIsRetryUpload = _useState8[1];
   var recordingRef = useRef({});
+  var _useAudioIsCapturing = useAudioIsCapturing({
+      isMicOn: isMicOn
+    }),
+    hasAudio = _useAudioIsCapturing.hasAudio,
+    reset = _useAudioIsCapturing.reset;
+  useEffect(function () {
+    if (hasAudio) return;
+    onAudioNotCapturing();
+    setTimeout(function () {
+      reset();
+    }, 1000);
+  }, [hasAudio]);
 
   /**
    * @type {React.RefObject<Promise<unknown> | null>}
@@ -1359,6 +1547,16 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     _useCreateRecording$d2 = _useCreateRecording$d === void 0 ? {} : _useCreateRecording$d,
     _useCreateRecording$d3 = _useCreateRecording$d2.recording,
     recording = _useCreateRecording$d3 === void 0 ? {} : _useCreateRecording$d3;
+  useEffect(function () {
+    var elapsedTimeInSec = Math.round(elapsedTime / 1000);
+    var checkDelay = 7; // we get data every 5 sec, 7 for safety
+    // If data is insufficient after n secs, there is some issue with media recorder, discard.
+    if (elapsedTimeInSec < checkDelay) return;
+    if (!screenRecorder.hasData() && recorderStatus === SCREEN_RECORDER_STATUS.recording) {
+      screenRecorder.setError(SCREEN_RECORDER_ERROR.InsufficientData);
+      onError(SCREEN_RECORDER_ERROR.InsufficientData);
+    }
+  }, [elapsedTime]);
   recordingRef.current = recording;
   var handleCreateRecording = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -1588,7 +1786,12 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     className: "flex h-screen w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20",
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames("w-full max-w-3xl"),
-      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.InsufficientData && /*#__PURE__*/jsx(Callout, {
+        className: "mb-2 p-3",
+        "data-cy": "recorder-insufficient-data-error-callout",
+        style: "danger",
+        children: t("neetoMediaRecorder.insufficientDataError")
+      }), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
         className: "flex flex-col items-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "mb-2",