string | null | The authentication token. |
| inspectionId | string | null | The current inspection ID. |
| vehicleType | VehicleType | null | The vehicle of the user. |
@@ -33,9 +33,9 @@ To use it, simply wrap you application inside the provider component and pass it
```tsx
import { MonkAppStateProvider } from '@monkvision/common';
-import { CaptureAppConfig } from '@monkvision/types';
+import { PhotoCaptureAppConfig } from '@monkvision/types';
-const AppConfig: CaptureAppConfig = {
+const AppConfig: PhotoCaptureAppConfig = {
...
};
diff --git a/documentation/docs/configuration.md b/documentation/docs/configuration.md
index ffa8e36b1..ac043d3da 100644
--- a/documentation/docs/configuration.md
+++ b/documentation/docs/configuration.md
@@ -4,57 +4,110 @@ sidebar_position: 3
# Configuration
Most of the web applications integrating the MonkJs SDK will need the same configuration properties. To simplify the
-syntax when configuring your app, we provide a TypeScript interface called `CaptureAppConfig` that contains the usual
-configuration properties needed. You can create a file in your app that will contain the MonkJs configuration, so that
-it will be easy to modify the config properties if needed:
+syntax when configuring your app, we provide a TypeScript interfaces called (`PhotoCaptureAppConfig` and
+`VideoCaptureAppConfig`) that contains the usual configuration properties needed for both the PhotoCapture and
+VideoCapture workflows. You can create a file in your app that will contain the MonkJs configuration, so that it will be
+easy to modify the config properties if needed:
```typescript
-import { CaptureAppConfig } from '@monkvision/types';
+// config.ts
+import { PhotoCaptureAppConfig } from '@monkvision/types';
-export const MonkJsConfig: CaptureAppConfig = {
+export const MonkJsConfig: PhotoCaptureAppConfig = {
...
};
```
This configuration object can then be passed to components like `boolean | TaskName[]` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
-| additionalTasks | `TaskName[]` | An optional list of additional tasks to run on every Sight of the inspection. | | |
-| tasksBySight | `Recordboolean | TaskName[]` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
+| allowManualLogin | `boolean` | Indicates if manual login and logout should be enabled or not. | ✔️ | |
+| fetchFromSearchParams | `boolean` | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | |
+| apiDomain | `string` | The API domain used to communicate with the API. | ✔️ | |
+| thumbnailDomain | `string` | The API domain used to communicate with the resize microservice. | ✔️ | |
+| requiredApiPermissions | `MonkApiPermission[]` | Required API permission that the user must have to use the current app. | | |
+| palette | `Partialstring | null | The language used by this component. | | `en` |
---
@@ -389,6 +389,31 @@ function LoginPage() {
---
+## RecordVideoButton
+### Description
+Button used on the VideoCapture component, displayed on top of the camera preview to allow the user to record a video.
+
+### Example
+```tsx
+import { useState } from 'react';
+import { RecordVideoButton } from '@monkvision/common-ui-web';
+
+function App() {
+ const [isRecording, setIsRecording] = useState(false);
+ return boolean | TaskName[]` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
+| enforceOrientation | `DeviceOrientation` | Use this prop to enforce a specific device orientation for the Camera screen. | | |
| inspectionId | string | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the `apiConfig` prop. | ✔️ | |
| apiConfig | ApiConfig | The api config used to communicate with the API. Make sure that the user described in the auth token is the same one as the one that created the inspection provided in the `inspectionId` prop. | ✔️ | |
-| onClose | `() => void` | Callback called when the user clicks on the Close button. If this callback is not provided, the button will not be displayed on the screen. | | |
| onComplete | `() => void` | Callback called when inspection capture is complete. | | |
-| onPictureTaken | `(picture: MonkPicture) => void` | Callback called when the user has taken a picture in the Capture process. | | |
| lang | string | null | The language to be used by this component. | | `'en'` |
-| enforceOrientation | `DeviceOrientation` | Use this prop to enforce a specific device orientation for the Camera screen. | | |
-| maxUploadDurationWarning | `number` | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning. | | `15000` |
-| useAdaptiveImageQuality | `boolean` | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | | `true` |
-| showCloseButton | `boolean` | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | | `false` |
-| startTasksOnComplete | `boolean | TaskName[]` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
-| additionalTasks | `TaskName[]` | An optional list of additional tasks to run on every Sight of the inspection. | | |
+| sights | Sight[] | The list of Sights to take pictures of. The values in this array should be retreived from the `@monkvision/sights` package. | ✔️ | |
| tasksBySight | `Recordboolean | TaskName[]` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
+| enforceOrientation | `DeviceOrientation` | Use this prop to enforce a specific device orientation for the Camera screen. | | |
+| inspectionId | string | The ID of the inspection to add images to. Make sure that the user that created the inspection if the same one as the one described in the auth token in the `apiConfig` prop. | ✔️ | |
+| apiConfig | ApiConfig | The api config used to communicate with the API. Make sure that the user described in the auth token is the same one as the one that created the inspection provided in the `inspectionId` prop. | ✔️ | |
+| onComplete | `() => void` | Callback called when inspection capture is complete. | | |
+| lang | string | null | The language to be used by this component. | | `'en'` |
+| minRecordingDuration | `number` | The minimum duration of a recording in milliseconds. | | `15000` |
+| maxRetryCount | `number` | The maximum number of retries for failed image uploads. | | `3` |
+| enableFastWalkingWarning | `boolean` | Boolean indicating if a warning should be shown to the user when they are walking too fast around the vehicle. | | `true` |
+| enablePhoneShakingWarning | `boolean` | Boolean indicating if a warning should be shown to the user when they are shaking their phone too much. | | `true` |
+| fastWalkingWarningCooldown | `number` | The duration (in milliseconds) to wait between fast walking warnings. | | `4000` |
+| phoneShakingWarningCooldown | `number` | The duration (in milliseconds) to wait between phone shaking warnings. | | `4000` |
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts
index 64345479c..3039105ef 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.styles.ts
@@ -5,28 +5,4 @@ export const styles: Styles = {
height: '100%',
width: '100%',
},
- orientationErrorContainer: {
- height: '100%',
- width: '100%',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- flexDirection: 'column',
- boxSizing: 'border-box',
- padding: '50px 10%',
- },
- orientationErrorTitleContainer: {
- display: 'flex',
- alignItems: 'center',
- },
- orientationErrorTitle: {
- fontSize: 18,
- marginLeft: 16,
- },
- orientationErrorDescription: {
- fontSize: 16,
- paddingTop: 16,
- opacity: 0.8,
- textAlign: 'center',
- },
};
diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
index c0af662b7..7f156294f 100644
--- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
+++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx
@@ -1,15 +1,8 @@
import { useAnalytics } from '@monkvision/analytics';
-import { Camera, CameraHUDProps, CameraProps } from '@monkvision/camera-web';
-import {
- useI18nSync,
- useLoadingState,
- useObjectMemo,
- usePreventExit,
- useWindowDimensions,
-} from '@monkvision/common';
+import { Camera, CameraHUDProps } from '@monkvision/camera-web';
+import { useI18nSync, useLoadingState, useObjectMemo, usePreventExit } from '@monkvision/common';
import {
BackdropDialog,
- Icon,
InspectionGallery,
NavigateToCaptureOptions,
NavigateToCaptureReason,
@@ -18,11 +11,9 @@ import { useMonitoring } from '@monkvision/monitoring';
import { MonkApiConfig } from '@monkvision/network';
import {
CameraConfig,
- CaptureAppConfig,
ComplianceOptions,
- CompressionOptions,
- DeviceOrientation,
MonkPicture,
+ PhotoCaptureAppConfig,
PhotoCaptureTutorialOption,
Sight,
} from '@monkvision/types';
@@ -30,6 +21,7 @@ import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { styles } from './PhotoCapture.styles';
import { PhotoCaptureHUD, PhotoCaptureHUDProps } from './PhotoCaptureHUD';
+import { useStartTasksOnComplete } from '../hooks';
import {
useAdaptiveCameraConfig,
useAddDamageMode,
@@ -39,7 +31,6 @@ import {
usePhotoCaptureSightState,
usePhotoCaptureTutorial,
usePictureTaken,
- useStartTasksOnComplete,
useTracking,
useUploadQueue,
} from './hooks';
@@ -48,9 +39,8 @@ import {
* Props of the PhotoCapture component.
*/
export interface PhotoCaptureProps
- extends Pick