@monkvision/common 4.5.6 → 4.6.0

package/README/APP_UTILS.md

@@ -37,11 +37,11 @@ parameters with values that can be fetched from the URL search parameters or the
   - If `fetchFromSearchParams` is also set to `true`, the token fetched from the search params will always be
     used in priority over the one fetched from the local storage.
 
-| Prop             | Type             | Description                                                                                                                         | Required | Default Value |
-|------------------|------------------|-------------------------------------------------------------------------------------------------------------------------------------|----------|---------------|
-| config           | CaptureAppConfig | The current configuration of the application.                                                                                       | ✔️       |               |
-| onFetchAuthToken | () => void       | Callback called when an authentication token has successfully been fetched from either the local storage, or the URL search params. |          |               |
-| onFetchLanguage  | () => void       | Callback called when the language of the app must be updated because it has been specified in the URL params.                       |          |               |
+| Prop             | Type                  | Description                                                                                                                         | Required | Default Value |
+|------------------|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------|----------|---------------|
+| config           | PhotoCaptureAppConfig | The current configuration of the application.                                                                                       | ✔️       |               |
+| onFetchAuthToken | () => void            | Callback called when an authentication token has successfully been fetched from either the local storage, or the URL search params. |          |               |
+| onFetchLanguage  | () => void            | Callback called when the language of the app must be updated because it has been specified in the URL params.                       |          |               |
 
 ## useMonkAppState hook
 This hook simply returns the current value of the `MonkAppStateContext` declared by the `MonkAppStateProvider`component.

package/README/HOOKS.md

@@ -58,6 +58,17 @@ This custom hook creates an interval that calls the provided async callback ever
 call isn't still running. If `delay` is `null` or less than 0, the callback will not be called. The promise handlers
 provided will only be called while the component is still mounted.
 
+### useDeviceOrientation
+```tsx
+import { useDeviceOrientation } from '@monkvision/common';
+
+function TestComponent() {
+  const { alpha } = useDeviceOrientation();
+  return <div>Current compass angle : { alpha }</div>;
+}
+```
+This custom hook is used to get the device orientation data using the embedded compass on the device.
+
 ### useInteractiveStatus
 ```tsx
 import { useInteractiveStatus } from '@monkvision/common';

package/README/UTILITIES.md

@@ -45,6 +45,29 @@ method, available on all versions of JavaScript.
 
 ---
 
+# Browser Utils
+### isMobileDevice
+
+```typescript
+import { isMobileDevice } from "@monkvision/common";
+
+console.log(isMobileDevice());
+// Output : true or false
+```
+Checks if the current device is a mobile device.
+
+### getAspectRatio
+```typescript
+import { getAspectRatio } from "@monkvision/common";
+
+const streamDimensions = {width: 1920, height: 1080}
+console.log(getAspectRatio(streamDimensions));
+// Output : '1920/1080'
+```
+Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default.
+
+---
+
 # Color Utils
 ### getRGBAFromString
 ```typescript
@@ -109,6 +132,22 @@ const variants = getInteractiveVariants('#FC72A7');
 Create interactive variants (hovered, active...) for the given color. You can specify as an additional parameter the
 type of variation to use for the interactive colors (lighten or darken the color, default = lighten).
 
+### fullyColorSVG
+```tsx
+import { useCallback } from 'react';
+import { fullyColorSVG } from '@monkvision/common';
+import { DynamicSVG } from '@monkvision/common-ui-web';
+
+function TestComponent() {
+  const getAttributes = useCallback((element: Element) => fullyColorSVG(element, '#FFFFFF'), []);
+  return (
+    <DynamicSVG svg={logoSVG} getAttributes={getAttributes} />
+  );
+}
+```
+This utility function can be passed to the `DynamicSVG` component's `getAttributes` prop to completely color an SVG
+with the given color. This is useful when wanting to color a single-color icon or logo.
+
 ---
 
 # Config Utils
@@ -119,7 +158,7 @@ import { getAvailableVehicleTypes } from '@monkvision/common';
 console.log(getAvailableVehicleTypes(config));
 // Output : [VehicleType.CITY, VehicleType.SUV]
 ```
-Returns the list of available vehicle types based on the `sights` property of a `CaptureAppConfig` object.
+Returns the list of available vehicle types based on the `sights` property of a `PhotoCaptureAppConfig` object.
 
 # Environment Utils
 ### getEnvOrThrow
@@ -286,6 +325,19 @@ Converts a string to camel case.
 
 ---
 
+# Vehicle
+### getVehicleModel
+```typescript
+import { getVehicleModel } from '@monkvision/common'
+import { VehicleType } from '@monkvision/types'
+
+console.log(getVehicleModel(VehicleType.SUV))
+output : 'fesc20'
+```
+Returns the vehicle model corresponding to the given vehicle type.
+
+---
+
 # Zlib Utils
 ### zlibCompress
 ```typescript

package/README.md

@@ -18,6 +18,6 @@ you can refer to their own README directly :
 - [State Management](README/STATE_MANAGEMENT.md).
 - [Theming](README/THEMING.md).
 - [Internationalization](README/INTERNATIONALIZATION.md).
-- [Hooks](README/APP_UTILS).
+- [Hooks](README/APP_UTILS.md).
 - [Utilities](README/UTILITIES.md).
-- [Application Utilities](README/HOOKS).
+- [Application Utilities](README/HOOKS.md).

package/lib/apps/appState.d.ts

@@ -1,18 +1,14 @@
-import { CaptureAppConfig, Sight, SteeringWheelPosition, VehicleType } from '@monkvision/types';
+import { PhotoCaptureAppConfig, Sight, SteeringWheelPosition, VehicleType, VideoCaptureAppConfig } from '@monkvision/types';
 import { LoadingState } from '../hooks';
 /**
- * Application state usually used by Monk applications to configure and handle the current user journey.
+ * Shared app states values by both photo and video capture workflows.
  */
-export interface MonkAppState {
+export interface SharedMonkAppState {
     /**
      * LoadingState indicating if the application state is loading. If it is loading it usually means that the provider
      * did not have time to fetch the parameter values.
      */
     loading: LoadingState;
-    /**
-     * The current configuration of the application.
-     */
-    config: CaptureAppConfig;
     /**
      * The authentication token representing the currently logged-in user. If this param is `null`, it means the user is
      * not logged in.
@@ -23,6 +19,23 @@ export interface MonkAppState {
      * param is `null`, it probably means that the inspection must be created by the app.
      */
     inspectionId: string | null;
+    /**
+     * Setter function used to set the current auth token.
+     */
+    setAuthToken: (value: string | null) => void;
+    /**
+     * Setter function used to set the current inspection ID.
+     */
+    setInspectionId: (value: string | null) => void;
+}
+/**
+ * App state values available in PhotoCapture applications.
+ */
+export interface PhotoCaptureAppState extends SharedMonkAppState {
+    /**
+     * The current configuration of the application.
+     */
+    config: PhotoCaptureAppConfig;
     /**
      * The current vehicle type of the app. This value usually helps to choose which sights to display to the user, or
      * which car 360 wireframes to use for the inspection report.
@@ -40,14 +53,6 @@ export interface MonkAppState {
      * Getter function used to get the current Sights based on the current VehicleType, SteeringWheel position etc.
      */
     getCurrentSights: () => Sight[];
-    /**
-     * Setter function used to set the current auth token.
-     */
-    setAuthToken: (value: string | null) => void;
-    /**
-     * Setter function used to set the current inspection ID.
-     */
-    setInspectionId: (value: string | null) => void;
     /**
      * Setter function used to set the current vehicle type.
      */
@@ -57,6 +62,19 @@ export interface MonkAppState {
      */
     setSteeringWheel: (value: SteeringWheelPosition | null) => void;
 }
+/**
+ * App state values available in PhotoCapture applications.
+ */
+export interface VideoCaptureAppState extends SharedMonkAppState {
+    /**
+     * The current configuration of the application.
+     */
+    config: VideoCaptureAppConfig;
+}
+/**
+ * Application state usually used by Monk applications to configure and handle the current user journey.
+ */
+export type MonkAppState = PhotoCaptureAppState | VideoCaptureAppState;
 /**
  * React context used to store the current Monk application state.
  *

package/lib/apps/appStateProvider.d.ts

@@ -1,6 +1,6 @@
-import { CaptureAppConfig } from '@monkvision/types';
+import { CaptureWorkflow, PhotoCaptureAppConfig, VideoCaptureAppConfig } from '@monkvision/types';
 import { PropsWithChildren } from 'react';
-import { MonkAppState } from './appState';
+import { MonkAppState, PhotoCaptureAppState, VideoCaptureAppState } from './appState';
 /**
  * Local storage key used within Monk web applications to store the authentication token.
  */
@@ -12,7 +12,7 @@ export type MonkAppStateProviderProps = {
     /**
      * The current configuration of the application.
      */
-    config: CaptureAppConfig;
+    config: PhotoCaptureAppConfig | VideoCaptureAppConfig;
     /**
      * Callback called when an authentication token has successfully been fetched from either the local storage, or the
      * URL search params.
@@ -43,6 +43,25 @@ export interface UseMonkAppStateOptions {
      * params, at the cost of throwing an error if either one of these param is `null`.
      */
     requireInspection?: boolean;
+    /**
+     * The required capture workflow. If this option is passed, the hook will return a MonkState value already type
+     * checked and cast into the proper capture workflo, at the cost of throwing an error if the required worfklow does
+     * not match the one in the current state config.
+     */
+    requireWorkflow?: CaptureWorkflow;
+}
+/**
+ * Custom type used when using the `requireInspection` option with the `useMonkAppState` hook.
+ */
+export interface RequiredInspectionAppState {
+    /**
+     * The authentication token representing the currently logged-in user.
+     */
+    authToken: string;
+    /**
+     * The ID of the current inspection being handled (picture taking, report viewing...) by the application.
+     */
+    inspectionId: string;
 }
 /**
  * Custom hook used to get the current Monk application state (described in the `MonkAppState` interface) for the
@@ -53,12 +72,43 @@ export interface UseMonkAppStateOptions {
  * @see MonkAppStateProvider
  */
 export declare function useMonkAppState(): MonkAppState;
+export declare function useMonkAppState(o: Record<string, never>): MonkAppState;
 export declare function useMonkAppState(o: {
     requireInspection: false | undefined;
 }): MonkAppState;
 export declare function useMonkAppState(o: {
     requireInspection: true;
-}): MonkAppState & {
-    authToken: string;
-    inspectionId: string;
-};
+}): MonkAppState & RequiredInspectionAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: undefined;
+}): MonkAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: undefined;
+    requireInspection: false | undefined;
+}): MonkAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: undefined;
+    requireInspection: true;
+}): MonkAppState & RequiredInspectionAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.PHOTO;
+}): PhotoCaptureAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.PHOTO;
+    requireInspection: false | undefined;
+}): PhotoCaptureAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.PHOTO;
+    requireInspection: true;
+}): PhotoCaptureAppState & RequiredInspectionAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.VIDEO;
+}): VideoCaptureAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.VIDEO;
+    requireInspection: false | undefined;
+}): VideoCaptureAppState;
+export declare function useMonkAppState(o: {
+    requireWorkflow: CaptureWorkflow.VIDEO;
+    requireInspection: true;
+}): VideoCaptureAppState & RequiredInspectionAppState;

package/lib/apps/appStateProvider.js

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMonkAppState = exports.MonkAppStateProvider = exports.STORAGE_KEY_AUTH_TOKEN = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var types_1 = require("@monkvision/types");
 var sights_1 = require("@monkvision/sights");
 var react_1 = require("react");
 var hooks_1 = require("../hooks");
@@ -61,7 +62,9 @@ function MonkAppStateProvider(_a) {
     var _c = (0, react_1.useState)(null), inspectionId = _c[0], setInspectionId = _c[1];
     var _d = (0, react_1.useState)(null), vehicleType = _d[0], setVehicleType = _d[1];
     var _e = (0, react_1.useState)(null), steeringWheel = _e[0], setSteeringWheel = _e[1];
-    var availableVehicleTypes = (0, react_1.useMemo)(function () { return (0, utils_1.getAvailableVehicleTypes)(config); }, [config]);
+    var availableVehicleTypes = (0, react_1.useMemo)(function () {
+        return config.workflow === types_1.CaptureWorkflow.PHOTO ? (0, utils_1.getAvailableVehicleTypes)(config) : undefined;
+    }, [config]);
     var monkSearchParams = (0, searchParams_1.useMonkSearchParams)({ availableVehicleTypes: availableVehicleTypes });
     var isMounted = (0, hooks_1.useIsMounted)();
     (0, monitoring_1.useAppStateMonitoring)({ authToken: authToken, inspectionId: inspectionId, vehicleType: vehicleType, steeringWheel: steeringWheel });
@@ -85,21 +88,49 @@ function MonkAppStateProvider(_a) {
             onFetchAuthToken === null || onFetchAuthToken === void 0 ? void 0 : onFetchAuthToken();
         }
     }, [monkSearchParams, config]);
-    var getCurrentSights = (0, react_1.useCallback)(function () { return getSights(config, vehicleType, steeringWheel); }, [config, vehicleType, steeringWheel]);
-    var appState = (0, hooks_1.useObjectMemo)({
-        loading: loading,
-        config: config,
-        authToken: authToken,
-        inspectionId: inspectionId,
-        vehicleType: vehicleType,
-        availableVehicleTypes: availableVehicleTypes,
-        steeringWheel: steeringWheel,
-        getCurrentSights: getCurrentSights,
-        setAuthToken: setAuthToken,
-        setInspectionId: setInspectionId,
-        setVehicleType: setVehicleType,
-        setSteeringWheel: setSteeringWheel,
-    });
+    var getCurrentSights = (0, react_1.useMemo)(function () {
+        return config.workflow === types_1.CaptureWorkflow.PHOTO
+            ? function () { return getSights(config, vehicleType, steeringWheel); }
+            : undefined;
+    }, [config, vehicleType, steeringWheel]);
+    var appState = (0, react_1.useMemo)(function () {
+        return config.workflow === types_1.CaptureWorkflow.VIDEO
+            ? {
+                loading: loading,
+                config: config,
+                authToken: authToken,
+                inspectionId: inspectionId,
+                setAuthToken: setAuthToken,
+                setInspectionId: setInspectionId,
+            }
+            : {
+                loading: loading,
+                config: config,
+                authToken: authToken,
+                inspectionId: inspectionId,
+                vehicleType: vehicleType,
+                availableVehicleTypes: availableVehicleTypes,
+                steeringWheel: steeringWheel,
+                getCurrentSights: getCurrentSights,
+                setAuthToken: setAuthToken,
+                setInspectionId: setInspectionId,
+                setVehicleType: setVehicleType,
+                setSteeringWheel: setSteeringWheel,
+            };
+    }, [
+        loading,
+        config,
+        authToken,
+        inspectionId,
+        vehicleType,
+        availableVehicleTypes,
+        steeringWheel,
+        getCurrentSights,
+        setAuthToken,
+        setInspectionId,
+        setVehicleType,
+        setSteeringWheel,
+    ]);
     return (0, jsx_runtime_1.jsx)(appState_1.MonkAppStateContext.Provider, __assign({ value: appState }, { children: children }));
 }
 exports.MonkAppStateProvider = MonkAppStateProvider;
@@ -114,6 +145,9 @@ function useMonkAppState(options) {
     if ((options === null || options === void 0 ? void 0 : options.requireInspection) && !value.inspectionId) {
         throw new Error('Inspection ID is null but was required by the current component.');
     }
+    if ((options === null || options === void 0 ? void 0 : options.requireWorkflow) && value.config.workflow !== (options === null || options === void 0 ? void 0 : options.requireWorkflow)) {
+        throw new Error('The capture workflow is different than the one required by the current component.');
+    }
     return value;
 }
 exports.useMonkAppState = useMonkAppState;

package/lib/apps/monitoring.d.ts

@@ -1,2 +1,2 @@
-import { MonkAppState } from './appState';
-export declare function useAppStateMonitoring({ authToken, inspectionId, vehicleType, steeringWheel, }: Pick<MonkAppState, 'authToken' | 'inspectionId' | 'vehicleType' | 'steeringWheel'>): void;
+import { MonkAppState, PhotoCaptureAppState } from './appState';
+export declare function useAppStateMonitoring({ authToken, inspectionId, vehicleType, steeringWheel, }: Partial<Pick<MonkAppState, 'authToken' | 'inspectionId'> & Pick<PhotoCaptureAppState, 'vehicleType' | 'steeringWheel'>>): void;

package/lib/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useAsyncInterval';
 export * from './useObjectMemo';
 export * from './useForm';
 export * from './useIsMounted';
+export * from './useDeviceOrientation';

package/lib/hooks/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./useAsyncInterval"), exports);
 __exportStar(require("./useObjectMemo"), exports);
 __exportStar(require("./useForm"), exports);
 __exportStar(require("./useIsMounted"), exports);
+__exportStar(require("./useDeviceOrientation"), exports);

package/lib/hooks/useDeviceOrientation.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Options accepted by the useDeviceOrientation hook.
+ */
+export interface UseDeviceOrientationOptions {
+    /**
+     * Custom event handler that will be called every time a device orientation event is fired by the device.
+     */
+    onDeviceOrientationEvent?: (event: DeviceOrientationEvent) => void;
+}
+/**
+ * Handle used to mcontrol the device orientation.
+ */
+export interface DeviceOrientationHandle {
+    /**
+     * Boolean indicating if the permission for the device's compass data has been granted. It is equal to `false` by
+     * default, and will be equal to true once the `requestCompassPermission` method has successfuly resolved.
+     */
+    isPermissionGranted: boolean;
+    /**
+     * Async function used to ask for the compass permission on the device.
+     * - On iOS, a pop-up will appear asking for the user confirmation. This function will reject if something goes wrong
+     * or if the user declines.
+     * - On Android and other devices, this function will resolve directly and the process will be seemless for the user.
+     */
+    requestCompassPermission: () => Promise<void>;
+    /**
+     * The current `alpha` value of the device. This value is a number in degrees (between 0 and 360), and represents the
+     * orientation of the device on the compass (AKA on the Z axis or "yaw", 0 = pointing North, 90 = pointing East etc.).
+     * This value starts being updated once the permissions for the compass has been granted using the
+     * `requestCompassPermission` method.
+     */
+    alpha: number;
+    /**
+     * A number representing the motion of the device around the X axis, expressed in degrees with values ranging from
+     * -180 (inclusive) to 180 (exclusive). This represents a front to back motion of the device AKA the "pitch".
+     */
+    beta: number;
+    /**
+     * A number representing the motion of the device around the Y axis, express in degrees with values ranging from -90
+     * (inclusive) to 90 (exclusive). This represents a left to right motion of the device AKA the "roll".
+     */
+    gamma: number;
+}
+/**
+ * Custom hook used to get the device orientation data using the embedded compass on the device.
+ */
+export declare function useDeviceOrientation(options?: UseDeviceOrientationOptions): DeviceOrientationHandle;

package/lib/hooks/useDeviceOrientation.js

@@ -0,0 +1,97 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeviceOrientation = void 0;
+var react_1 = require("react");
+var useObjectMemo_1 = require("./useObjectMemo");
+var DeviceOrientationPermissionResponse;
+(function (DeviceOrientationPermissionResponse) {
+    DeviceOrientationPermissionResponse["GRANTED"] = "granted";
+    DeviceOrientationPermissionResponse["DENIED"] = "denied";
+})(DeviceOrientationPermissionResponse || (DeviceOrientationPermissionResponse = {}));
+/**
+ * Custom hook used to get the device orientation data using the embedded compass on the device.
+ */
+function useDeviceOrientation(options) {
+    var _this = this;
+    var _a = (0, react_1.useState)(false), isPermissionGranted = _a[0], setIsPermissionGranted = _a[1];
+    var _b = (0, react_1.useState)(0), alpha = _b[0], setAlpha = _b[1];
+    var _c = (0, react_1.useState)(0), beta = _c[0], setBeta = _c[1];
+    var _d = (0, react_1.useState)(0), gamma = _d[0], setGamma = _d[1];
+    var handleDeviceOrientationEvent = (0, react_1.useCallback)(function (event) {
+        var _a, _b, _c, _d, _e;
+        var value = (_b = (_a = event.webkitCompassHeading) !== null && _a !== void 0 ? _a : event.alpha) !== null && _b !== void 0 ? _b : 0;
+        setAlpha(value);
+        setBeta((_c = event.beta) !== null && _c !== void 0 ? _c : 0);
+        setGamma((_d = event.gamma) !== null && _d !== void 0 ? _d : 0);
+        (_e = options === null || options === void 0 ? void 0 : options.onDeviceOrientationEvent) === null || _e === void 0 ? void 0 : _e.call(options, event);
+    }, [options === null || options === void 0 ? void 0 : options.onDeviceOrientationEvent]);
+    var requestCompassPermission = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var requestPermission, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!DeviceOrientationEvent) return [3 /*break*/, 2];
+                    requestPermission = DeviceOrientationEvent.requestPermission;
+                    if (!(typeof requestPermission === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, requestPermission()];
+                case 1:
+                    response = _a.sent();
+                    if (response !== DeviceOrientationPermissionResponse.GRANTED) {
+                        throw new Error('Device orientation permission request denied.');
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsPermissionGranted(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    (0, react_1.useEffect)(function () {
+        if (isPermissionGranted) {
+            window.addEventListener('deviceorientation', handleDeviceOrientationEvent);
+        }
+        return function () {
+            if (isPermissionGranted) {
+                window.removeEventListener('deviceorientation', handleDeviceOrientationEvent);
+            }
+        };
+    }, [isPermissionGranted, handleDeviceOrientationEvent]);
+    return (0, useObjectMemo_1.useObjectMemo)({ alpha: alpha, beta: beta, gamma: gamma, isPermissionGranted: isPermissionGranted, requestCompassPermission: requestCompassPermission });
+}
+exports.useDeviceOrientation = useDeviceOrientation;

package/lib/utils/browser.utils.d.ts

@@ -1,4 +1,9 @@
+import { PixelDimensions } from '@monkvision/types';
 /**
  * Checks if the current device is a mobile device.
  */
 export declare function isMobileDevice(): boolean;
+/**
+ * Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default.
+ */
+export declare function getAspectRatio(streamDimensions?: PixelDimensions | null): string;

package/lib/utils/browser.utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = void 0;
+exports.getAspectRatio = exports.isMobileDevice = void 0;
 /**
  * Checks if the current device is a mobile device.
  */
@@ -13,3 +13,13 @@ function isMobileDevice() {
         userAgent.includes('windows phone'));
 }
 exports.isMobileDevice = isMobileDevice;
+/**
+ * Returns the aspect ratio of the stream. If not a mobile device, it will return 16/9 by default.
+ */
+function getAspectRatio(streamDimensions) {
+    if (isMobileDevice() && streamDimensions) {
+        return "".concat(streamDimensions === null || streamDimensions === void 0 ? void 0 : streamDimensions.width, "/").concat(streamDimensions === null || streamDimensions === void 0 ? void 0 : streamDimensions.height);
+    }
+    return '16/9';
+}
+exports.getAspectRatio = getAspectRatio;

package/lib/utils/color.utils.d.ts

@@ -1,4 +1,5 @@
 import { InteractiveStatus, RGBA } from '@monkvision/types';
+import { SVGProps } from 'react';
 /**
  * Returns the RGBA values of the given color. The accepted formats are :
  * - RGB : rgb(167, 224, 146)
@@ -49,3 +50,16 @@ export declare enum InteractiveVariation {
  * Create interactive variants (hovered, active...) for the given color.
  */
 export declare function getInteractiveVariants(color: string, variant?: InteractiveVariation): Record<InteractiveStatus, string>;
+/**
+ * This utility function can be passed to the `DynamicSVG` component's `getAttributes` prop to completely color an SVG
+ * with the given color. This is useful when wanting to color a single-color icon or logo.
+ *
+ * @example
+ * function TestComponent() {
+ *   const getAttributes = useCallback((element: Element) => fullyColorSVG(element, '#FFFFFF'), []);
+ *   return (
+ *     <DynamicSVG svg={logoSVG} getAttributes={getAttributes} />
+ *   );
+ * }
+ */
+export declare function fullyColorSVG(element: Element, color: string): SVGProps<SVGElement>;

package/lib/utils/color.utils.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInteractiveVariants = exports.InteractiveVariation = exports.changeAlpha = exports.shadeColor = exports.getHexFromRGBA = exports.getRGBAFromString = void 0;
+exports.fullyColorSVG = exports.getInteractiveVariants = exports.InteractiveVariation = exports.changeAlpha = exports.shadeColor = exports.getHexFromRGBA = exports.getRGBAFromString = void 0;
 var types_1 = require("@monkvision/types");
 var RGBA_REGEXP = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/i;
 var HEX_REGEXP = /^#(?:(?:[0-9a-f]{3}){1,2}|(?:[0-9a-f]{4}){1,2})$/i;
@@ -152,3 +152,27 @@ function getInteractiveVariants(color, variant) {
         _a;
 }
 exports.getInteractiveVariants = getInteractiveVariants;
+var COLOR_ATTRIBUTES = ['fill', 'stroke'];
+/**
+ * This utility function can be passed to the `DynamicSVG` component's `getAttributes` prop to completely color an SVG
+ * with the given color. This is useful when wanting to color a single-color icon or logo.
+ *
+ * @example
+ * function TestComponent() {
+ *   const getAttributes = useCallback((element: Element) => fullyColorSVG(element, '#FFFFFF'), []);
+ *   return (
+ *     <DynamicSVG svg={logoSVG} getAttributes={getAttributes} />
+ *   );
+ * }
+ */
+function fullyColorSVG(element, color) {
+    return COLOR_ATTRIBUTES.reduce(function (customAttributes, colorAttribute) {
+        var _a;
+        var attr = element.getAttribute(colorAttribute);
+        if (attr && !['transparent', 'none'].includes(attr)) {
+            return __assign(__assign({}, customAttributes), (_a = {}, _a[colorAttribute] = color, _a));
+        }
+        return customAttributes;
+    }, {});
+}
+exports.fullyColorSVG = fullyColorSVG;

package/lib/utils/config.utils.d.ts

@@ -1,5 +1,5 @@
-import { CaptureAppConfig, VehicleType } from '@monkvision/types';
+import { PhotoCaptureAppConfig, VehicleType } from '@monkvision/types';
 /**
  * Util function used to extract the list of available vehicle types in a CaptureAppConfig object.
  */
-export declare function getAvailableVehicleTypes(config: CaptureAppConfig): VehicleType[];
+export declare function getAvailableVehicleTypes(config: PhotoCaptureAppConfig): VehicleType[];

package/lib/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './env.utils';
 export * from './state.utils';
 export * from './config.utils';
 export * from './formValidation.utils';
+export * from './vehicle.utils';

package/lib/utils/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./env.utils"), exports);
 __exportStar(require("./state.utils"), exports);
 __exportStar(require("./config.utils"), exports);
 __exportStar(require("./formValidation.utils"), exports);
+__exportStar(require("./vehicle.utils"), exports);

package/lib/utils/state.utils.d.ts

@@ -1,9 +1,10 @@
-import { Image } from '@monkvision/types';
+import { Image, ImageType } from '@monkvision/types';
 /**
  * Utility function that extracts the images of the given inspection.
  *
  * @param inspectionId The ID of the inspection to get the images of.
  * @param images Array containing every image existing in the current local state.
+ * @param filterImageType The specific image type to filter by. If not provided, no type-based filtering is applied.
  * @param filterRetakes Boolean indicating if retaken pictures should be filtered out or not (default: false).
  */
-export declare function getInspectionImages(inspectionId: string, images: Image[], filterRetakes?: boolean): Image[];
+export declare function getInspectionImages(inspectionId: string, images: Image[], filterImageType?: ImageType, filterRetakes?: boolean): Image[];

package/lib/utils/state.utils.js

@@ -6,29 +6,31 @@ exports.getInspectionImages = void 0;
  *
  * @param inspectionId The ID of the inspection to get the images of.
  * @param images Array containing every image existing in the current local state.
+ * @param filterImageType The specific image type to filter by. If not provided, no type-based filtering is applied.
  * @param filterRetakes Boolean indicating if retaken pictures should be filtered out or not (default: false).
  */
-function getInspectionImages(inspectionId, images, filterRetakes) {
+function getInspectionImages(inspectionId, images, filterImageType, filterRetakes) {
     if (filterRetakes === void 0) { filterRetakes = false; }
     var inspectionImages = images.filter(function (image) { return image.inspectionId === inspectionId; });
+    if (filterImageType) {
+        inspectionImages = inspectionImages.filter(function (image) { return filterImageType === image.type; });
+    }
     if (!filterRetakes) {
         return inspectionImages;
     }
-    var filteredRetakes = [];
+    var filteredRetakes = {};
     inspectionImages.forEach(function (image) {
         if (image.sightId) {
-            var index = filteredRetakes.findIndex(function (i) { return i.sightId === image.sightId; });
-            if (index >= 0) {
-                if (image.createdAt &&
-                    filteredRetakes[index].createdAt &&
-                    image.createdAt > filteredRetakes[index].createdAt) {
-                    filteredRetakes[index] = image;
-                }
-                return;
+            var existingImage = filteredRetakes[image.sightId];
+            if (!existingImage ||
+                (image.createdAt && existingImage.createdAt && image.createdAt > existingImage.createdAt)) {
+                filteredRetakes[image.sightId] = image;
             }
         }
-        filteredRetakes.push(image);
+        else {
+            filteredRetakes[image.id] = image;
+        }
     });
-    return filteredRetakes;
+    return Object.values(filteredRetakes);
 }
 exports.getInspectionImages = getInspectionImages;

package/lib/utils/vehicle.utils.d.ts

@@ -0,0 +1,5 @@
+import { VehicleType, VehicleModel } from '@monkvision/types';
+/**
+ * Returns the vehicle model corresponding to the given vehicle type.
+ */
+export declare function getVehicleModel(vehicleType: VehicleType): VehicleModel;

package/lib/utils/vehicle.utils.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVehicleModel = void 0;
+var sights_1 = require("@monkvision/sights");
+var types_1 = require("@monkvision/types");
+/**
+ * Returns the vehicle model corresponding to the given vehicle type.
+ */
+function getVehicleModel(vehicleType) {
+    var _a;
+    var ajustedVehicletype = vehicleType === types_1.VehicleType.SUV ? types_1.VehicleType.CUV : vehicleType;
+    var detail = (_a = Object.entries(sights_1.vehicles)
+        .filter(function (_a) {
+        var type = _a[0];
+        return type !== types_1.VehicleModel.AUDIA7;
+    })
+        .find(function (_a) {
+        var details = _a[1];
+        return details.type === ajustedVehicletype;
+    })) === null || _a === void 0 ? void 0 : _a[1];
+    if (detail === undefined) {
+        throw new Error("No vehicle model found for vehicle type ".concat(ajustedVehicletype));
+    }
+    return detail.id;
+}
+exports.getVehicleModel = getVehicleModel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkvision/common",
-  "version": "4.5.6",
+  "version": "4.6.0",
   "license": "BSD-3-Clause-Clear",
   "packageManager": "yarn@3.2.4",
   "description": "MonkJs common logic package",
@@ -28,10 +28,10 @@
     "lint:fix": "yarn run prettier:fix && yarn run eslint:fix"
   },
   "dependencies": {
-    "@monkvision/analytics": "4.5.6",
-    "@monkvision/monitoring": "4.5.6",
-    "@monkvision/sights": "4.5.6",
-    "@monkvision/types": "4.5.6",
+    "@monkvision/analytics": "4.6.0",
+    "@monkvision/monitoring": "4.6.0",
+    "@monkvision/sights": "4.6.0",
+    "@monkvision/types": "4.6.0",
     "i18next": "^23.4.5",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
@@ -47,13 +47,13 @@
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@monkvision/eslint-config-base": "4.5.6",
-    "@monkvision/eslint-config-typescript": "4.5.6",
-    "@monkvision/eslint-config-typescript-react": "4.5.6",
-    "@monkvision/jest-config": "4.5.6",
-    "@monkvision/prettier-config": "4.5.6",
-    "@monkvision/test-utils": "4.5.6",
-    "@monkvision/typescript-config": "4.5.6",
+    "@monkvision/eslint-config-base": "4.6.0",
+    "@monkvision/eslint-config-typescript": "4.6.0",
+    "@monkvision/eslint-config-typescript-react": "4.6.0",
+    "@monkvision/jest-config": "4.6.0",
+    "@monkvision/prettier-config": "4.6.0",
+    "@monkvision/test-utils": "4.6.0",
+    "@monkvision/typescript-config": "4.6.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.2.2",
@@ -96,5 +96,5 @@
     "url": "https://github.com/monkvision/monkjs/issues"
   },
   "homepage": "https://github.com/monkvision/monkjs",
-  "gitHead": "c12e283e4abf1f810fdbc924a2d199652b92db30"
+  "gitHead": "68caf5a157e344b2187519616c9fe35eecafc65b"
 }