@agilemotion/oui-react-js 1.8.48 → 1.8.49

package/dist/components/media/MediaSoupHelper.js

@@ -24,7 +24,7 @@ class MediaSoupHelper {
     return device;
   };
   async initConsumerTransport(device, roomId, userId) {
-    console.log("CREATING CONSUMER TRANSPORT FOR : " + userId);
+    console.log("CREATING CONSUMER TRANSPORT FOR : " + userId + " ROOM " + roomId);
     let data = null;
     try {
       data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CREATE_WEBRTC_TRANSPORT, {
@@ -71,6 +71,7 @@ class MediaSoupHelper {
     return consumerTransport;
   }
   async initProducerTransport(device, roomId, userId) {
+    console.log("CREATING PRODUCER TRANSPORT FOR : " + userId + " ROOM : " + roomId);
     let data = null;
     try {
       data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CREATE_WEBRTC_TRANSPORT, {
@@ -141,7 +142,7 @@ class MediaSoupHelper {
     return producerTransport;
   }
   getConsumeStream = async (producerId, rtpCapabilities, consumerTransport, roomId, userId, type) => {
-    console.log("CONSUMING FROM : " + producerId);
+    console.log("CONSUMING FROM : " + producerId + " ROOM : " + roomId);
     if (consumerTransport) {
       const data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CONSUME, {
         rtpCapabilities,

package/dist/components/media/Toolbar.js

@@ -175,9 +175,9 @@ const Toolbar = props => {
         textAlign: 'center',
         fontSize: '14px'
       }
-    }, raisedHandsNames.map(name => {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, name, /*#__PURE__*/_react.default.createElement("br", null));
-    }));
+    }, raisedHandsNames.map(name => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: name
+    }, name, /*#__PURE__*/_react.default.createElement("br", null))));
   };
   const handleVisibilityChange = (id, visible) => {
     buttonVisibility[id] = visible;
@@ -228,10 +228,8 @@ const Toolbar = props => {
     onVisibilityChange: visible => handleVisibilityChange('record', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Record"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => {
-      toggleRecorder();
-    },
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: toggleRecorder,
     style: {
       color: '#404239',
       marginRight: '4px'
@@ -248,26 +246,24 @@ const Toolbar = props => {
     id: 'RECORD'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, isRecording ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Recording") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Record"))))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
+  }, isRecording ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Recording") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Record")))))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper'
   }, !props.isVideoDeviceConnected && /*#__PURE__*/_react.default.createElement("div", {
     className: 'warning-sign'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Camera is not available"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'WARNING'
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('video', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Video"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: !props.isVideoDeviceConnected,
-    onClick: () => {
-      muteVideo();
-    },
+    onClick: muteVideo,
     style: {
       color: videoMuted ? '#eb3f21' : '#404239',
       marginRight: '4px'
@@ -284,26 +280,24 @@ const Toolbar = props => {
     id: 'CAMERA'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Camera"))))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Camera")))))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper'
   }, !props.isAudioDeviceConnected && /*#__PURE__*/_react.default.createElement("div", {
     className: 'warning-sign'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "No available microphone"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'WARNING'
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('audio', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Audio"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: !props.isAudioDeviceConnected,
-    onClick: () => {
-      muteAudio();
-    },
+    onClick: muteAudio,
     style: {
       color: audioMuted || !props.isAudioDeviceConnected ? '#eb3f21' : '#404239',
       marginRight: '4px'
@@ -320,14 +314,14 @@ const Toolbar = props => {
     id: 'MIC'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Mic"))))))), ' ', roomStatus === 'SESSION' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Mic")))))))), ' ', roomStatus === 'SESSION' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('shareScreen', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Share"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
       if (screenShared) {
         stopShareScreen();
@@ -360,7 +354,7 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen")))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Share screen"))))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
@@ -371,8 +365,8 @@ const Toolbar = props => {
     onVisibilityChange: visible => handleVisibilityChange('people', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "People"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: e => showPeople(),
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: showPeople,
     style: {
       color: '#404239',
       marginRight: '4px'
@@ -387,7 +381,7 @@ const Toolbar = props => {
     id: 'PEOPLE'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "People"))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "People")))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper'
   }, hasUnreadChats && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
@@ -398,12 +392,12 @@ const Toolbar = props => {
     onVisibilityChange: visible => handleVisibilityChange('chat', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Chat"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     style: {
       color: '#404239',
       marginRight: '4px'
     },
-    onClick: e => showChat()
+    onClick: showChat
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%'
@@ -414,7 +408,7 @@ const Toolbar = props => {
     id: 'CHAT_BUBBLE'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Chat"))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Chat")))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper'
   }, raisedHands.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
@@ -425,8 +419,8 @@ const Toolbar = props => {
     onVisibilityChange: visible => handleVisibilityChange('raiseHand', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: raisedHands.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, renderRaisedHandsToolTip()) : handRaised ? 'Lower hand' : 'Raise hand'
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: e => {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
       if (handRaised) {
         lowerHand();
       } else {
@@ -447,11 +441,11 @@ const Toolbar = props => {
     id: 'PAN_TOOL'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise")))))))), !allButtonsVisible && /*#__PURE__*/_react.default.createElement("div", {
+  }, handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise"))))))))), !allButtonsVisible && /*#__PURE__*/_react.default.createElement("div", {
     className: 'more-button-wrapper'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "More Actions"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onClick: handleClick,
     "aria-controls": openMoreActions ? 'toolbar-menu' : undefined,
     "aria-haspopup": "true",
@@ -461,11 +455,11 @@ const Toolbar = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MORE'
-  })))), (isHost && participants.length === 0 || !isHost) && /*#__PURE__*/_react.default.createElement("div", {
+  }))))), (isHost && participants.length === 0 || !isHost) && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding hang-up'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Leave"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: endCall,
     style: {
       backgroundColor: '#eb3f21',
@@ -483,11 +477,11 @@ const Toolbar = props => {
       marginRight: '8px',
       fontSize: '12px'
     }
-  }, "Leave")))), isHost && participants.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Leave"))))), isHost && participants.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding hang-up'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Leave"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     color: "primary",
     size: "large",
@@ -495,7 +489,6 @@ const Toolbar = props => {
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'CALL_END'
     }),
-    ref: leaveButtonAnchorEl,
     "aria-controls": leaveButtonOpen ? 'toolbar-menu' : undefined,
     "aria-haspopup": "true",
     "aria-expanded": leaveButtonOpen ? 'true' : undefined,
@@ -512,7 +505,7 @@ const Toolbar = props => {
       marginRight: '8px',
       fontSize: '12px'
     }
-  }, "Leave"))))))), /*#__PURE__*/_react.default.createElement(_material.Menu, {
+  }, "Leave")))))))), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     anchorEl: leaveButtonAnchorEl,
     id: "toobar-menu",
     open: leaveButtonOpen,
@@ -615,7 +608,7 @@ const Toolbar = props => {
       toggleRecorder();
     }
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: "RECORD"
+    id: 'RECORD'
   })), "Record")), !buttonVisibility.video && (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {

package/dist/components/media/TrainingRoom.js

@@ -546,7 +546,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
     meetingTitle: props.calendarEvent.title,
     eventKey: props.calendarEvent.key,
     minutesDocumentId: props.calendarEvent.minutesDocumentId,
-    procMeetingId: props.procMeetingId,
+    meetingId: props.calendarEvent.id,
     currentUserFullName: currentUserFullName,
     onGridSetup: () => {
       //setSideBarTab('People');

package/dist/components/media/VCRoomWorkspace.js

@@ -266,7 +266,7 @@ const VCRoomWorkspace = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       monitorTypeSurfaces: 'include'
     };
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.CANCEL_SCREEN_SHARE, {
-      roomId: props.meetingId
+      roomId: meetingId
     }).then(async result => {
       navigator.mediaDevices.getDisplayMedia(videoConstraints).then(async stream => {
         const track = stream.getVideoTracks()[0];
@@ -340,7 +340,7 @@ const VCRoomWorkspace = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   };
   const consume = async producer => {
-    _MediaSoupHelper.default.getConsumeStream(producer.producerId, device.rtpCapabilities, consumerTransport, props.meetingId, _ApplicationManager.default.getUserDetails().username, 'video').then(_ref => {
+    _MediaSoupHelper.default.getConsumeStream(producer.producerId, device.rtpCapabilities, consumerTransport, meetingId, _ApplicationManager.default.getUserDetails().username, 'video').then(_ref => {
       let {
         consumer,
         stream,

package/dist/view/Dashboard.js

@@ -179,7 +179,8 @@ const DashboardCard = props => {
   };
   return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     style: {
-      minWidth: '200px'
+      minWidth: '200px',
+      overflow: 'hidden'
     },
     className: 'col',
     ref: ref
@@ -480,7 +481,7 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      height: '100%'
+      height: '300px'
     }
   }, !_Utils.default.isNull(settings) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -522,7 +523,7 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     }
   }, item.attributes.label, ' '), ' '))) : null), ' '))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: 'calc(100% - 58px)',
+      maxHeight: 'calc(100dvh - 32px - var(--header-h))',
       overflowY: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -530,7 +531,7 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       overflowY: 'hidden',
       overflowX: 'hidden',
       height: '100%',
-      padding: '0 4px 64px 0'
+      padding: '0 4px 0 0'
     }
   }, /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
     config: {
@@ -543,20 +544,20 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     style: {
       paddingRight: '16px',
       overflow: 'hidden',
-      height: '168px'
+      minHeight: '160px'
     }
   }, /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 8px',
+    margin: '0 0 8px 8px',
     title: 'Assigned to Me',
     itemCount: taskSummary.personalWorkItemCount,
     path: '/workflow/views/personal-work-items.json'
   }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 8px',
+    margin: '0 0 8px 8px',
     title: 'Available',
     itemCount: taskSummary.groupWorkItemCount,
     path: '/workflow/views/group-work-items.json'
   }), /*#__PURE__*/_react.default.createElement(WorkFlowCard, {
-    margin: '0 0 16px 8px',
+    margin: '0 0 8px 8px',
     title: 'Due Today',
     itemCount: taskSummary.dueTodayItemCount,
     path: '/workflow/views/due-today-work-items.json'
@@ -564,8 +565,8 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     style: {
       overflowY: 'auto',
       overflowX: 'hidden',
-      maxHeight: '100%',
-      height: 'calc(100% - 104px)'
+      height: 'calc(100dvh - 158px - 64px - var(--header-h))',
+      minHeight: 'calc(100dvh - 158px - 64px - var(--header-h))'
     }
   }, cardCols && /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/view/security/ChangePasswordBasic.js

@@ -123,7 +123,11 @@ const ChangePassword = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
-    alt: "..."
+    alt: "...",
+    style: {
+      width: '100%',
+      borderRadius: '4px'
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: props.title.length === 0 ? '0' : '70%',

package/dist/view/security/ForgotPasswordBasic.js

@@ -87,7 +87,11 @@ const ResetPassword = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
-    alt: "..."
+    alt: "...",
+    style: {
+      width: '100%',
+      borderRadius: '4px'
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: props.title.length === 0 ? '0' : '70%',

package/dist/view/security/LoginBasic.js

@@ -81,7 +81,11 @@ const Login = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
-    alt: "..."
+    alt: "...",
+    style: {
+      width: '100%',
+      borderRadius: '4px'
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: props.title.length === 0 ? '0' : '70%',

package/dist/view/security/LoginInteractionPortal.js

@@ -81,7 +81,11 @@ const LoginInteractionPortal = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
-    alt: "..."
+    alt: "...",
+    style: {
+      width: '100%',
+      borderRadius: '4px'
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: props.title.length === 0 ? '0' : '70%',

package/dist/view/security/ResetPasswordBasic.js

@@ -123,7 +123,11 @@ const ResetPassword = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
-    alt: "..."
+    alt: "...",
+    style: {
+      width: '100%',
+      borderRadius: '4px'
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: props.title.length === 0 ? '0' : '70%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.48",
+  "version": "1.8.49",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -162,10 +162,7 @@
     "start": "webpack serve --mode development --open",
     "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files && npm run copy:assets",
     "copy:assets": "shx mkdir -p dist/assets && shx cp -r src/lib/assets/. dist/assets/",
-    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
-    "compile-scss": "sass src/lib/assets/scss/black-dashboard-react.scss src/lib/assets/css/black-dashboard-react.css",
-    "minify-sass": "sass src/lib/assets/scss/black-dashboard-react.scss src/lib/assets/css/black-dashboard-react.min.css --output-style compressed",
-    "map-sass": "sass src/lib/assets/scss/black-dashboard-react.scss src/lib/assets/css/black-dashboard-react.css --source-map true"
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
   },
   "browserslist": [
     ">0.2%",