@bigbinary/neeto-media-recorder 2.7.16 → 2.7.17

package/index.js

@@ -2,6 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import Browser from '@bigbinary/neeto-icons/Browser';
 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, COUNTDOWN_TIME, 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';
@@ -803,15 +804,16 @@ var Controls = function Controls(_ref) {
       "neeto-ui-rounded-lg neeto-ui-border-gray-200 border-2": hasRecordingStarted
     }, className, isNotEmpty(classNames))),
     children: [shouldShowSelectScreenButton && /*#__PURE__*/jsxs("div", {
-      className: "mt-4 flex gap-4",
+      className: "flex gap-4",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
         "data-cy": "media-recorder-record-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(Computer, {
-            size: 28
+            size: 20
           });
         },
+        iconPosition: "left",
         label: t("neetoMediaRecorder.record.selectScreen"),
         loading: isStatus(SCREEN_RECORDER_STATUS.acquiring_media),
         size: "large",
@@ -821,16 +823,17 @@ var Controls = function Controls(_ref) {
         "data-cy": "media-recorder-discard-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(Delete, {
-            size: 28
+            size: 20
           });
         },
+        iconPosition: "left",
         label: t("neetoMediaRecorder.record.discard"),
         size: "large",
         style: "danger",
         onClick: onDiscard
       })]
     }), shouldShowGrantMicPermissionButton && /*#__PURE__*/jsxs("div", {
-      className: "mt-4 flex gap-4",
+      className: "flex gap-4",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
         "data-cy": "media-recorder-no-audio-button",
@@ -847,7 +850,8 @@ var Controls = function Controls(_ref) {
         className: "flex-shrink-0",
         "data-cy": "media-recorder-grant-microphone-permission-button",
         icon: Unlock,
-        iconSize: 28,
+        iconPosition: "left",
+        iconSize: 20,
         label: t("neetoMediaRecorder.record.grantMicPermission"),
         size: "large",
         onClick: startRecording
@@ -1802,14 +1806,24 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         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",
+        className: "flex flex-col items-center pt-10",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "mb-6 flex justify-center",
+          children: /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full flex h-16 w-16 items-center justify-center",
+            children: /*#__PURE__*/jsx(Browser, {
+              className: "neeto-ui-text-gray-600",
+              size: 40
+            })
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "mb-3 text-center",
           style: "h3",
           children: t("neetoMediaRecorder.record.screenSharePermissionDeniedTitle", {
             appName: appName
           })
         }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-600 text-center leading-normal",
           children: /*#__PURE__*/jsx(Trans, {
             i18nKey: "neetoMediaRecorder.record.screenSharePermissionDenied",
             components: {