@monkvision/inspection-capture-web 4.5.6 → 4.6.0

package/lib/VideoCapture/hooks/useVideoRecording.d.ts

@@ -0,0 +1,97 @@
+import { Dispatch, SetStateAction } from 'react';
+import { VideoCaptureAppConfig } from '@monkvision/types';
+import { VehicleWalkaroundHandle } from './useVehicleWalkaround';
+/**
+ * Enumeration of the different tooltips displayed on top of the recording button during the recording process.
+ */
+export declare enum VideoRecordingTooltip {
+    /**
+     * Tooltip displayed before the recording has been started, to indicate to the user where to press to start the
+     * recording.
+     */
+    START = "start",
+    /**
+     * Tooltip displayed at the end of the recording, to indicate to the user where to press to stop the recording.
+     */
+    END = "end"
+}
+/**
+ * Params accepted by the useVideoRecording hook.
+ */
+export interface UseVideoRecordingParams extends Pick<VehicleWalkaroundHandle, 'walkaroundPosition' | 'startWalkaround'>, Pick<VideoCaptureAppConfig, 'enforceOrientation'> {
+    /**
+     * Boolean indicating if the video is currently recording or not.
+     */
+    isRecording: boolean;
+    /**
+     * Callback called when setting the `isRecording` state.
+     */
+    setIsRecording: Dispatch<SetStateAction<boolean>>;
+    /**
+     * The interval in milliseconds at which screenshots of the video stream should be taken.
+     */
+    screenshotInterval: number;
+    /**
+     * The minimum duration of a recording.
+     *
+     * If the user tries to stop the recording too soon, the recording will be paused, and a warning dialog will be
+     * displayed on the screen, asking the user if they want to restart the recording over, or resume recording the
+     * vehicle walkaround.
+     */
+    minRecordingDuration: number;
+    /**
+     * Callback called when a screenshot of the video stream should be taken and then added to the processing queue.
+     */
+    onCaptureVideoFrame?: () => void;
+    /**
+     * Callback called when the recording is complete.
+     */
+    onRecordingComplete?: () => void;
+}
+/**
+ * Handle returned by the useVideoRecording hook used to maange the video recording (AKA : The process of taking
+ * screenshots of the video stream at a given interval).
+ */
+export interface VideoRecordingHandle {
+    /**
+     * Boolean indicating if the video recording is paused or not.
+     */
+    isRecordingPaused: boolean;
+    /**
+     * The total duration (in milliseconds) of the current video recording.
+     */
+    recordingDurationMs: number;
+    /**
+     * Callback called when the user clicks on the record video button.
+     */
+    onClickRecordVideo: () => void;
+    /**
+     * Boolean indicating if the discard video dialog should be displayed on the screen or not.
+     */
+    isDiscardDialogDisplayed: boolean;
+    /**
+     * Callback called when the user clicks on the "Keep Recording" option of the discard video dialog.
+     */
+    onDiscardDialogKeepRecording: () => void;
+    /**
+     * Callback called when the user clicks on the "Discard Video" option of the discard video dialog.
+     */
+    onDiscardDialogDiscardVideo: () => void;
+    /**
+     * Callback called to pause the video recording.
+     */
+    pauseRecording: () => void;
+    /**
+     * Callback called to resume the video recording after it has been paused.
+     */
+    resumeRecording: () => void;
+    /**
+     * The tooltip displayed to the user.
+     */
+    tooltip: VideoRecordingTooltip | null;
+}
+/**
+ * Custom hook used to manage the video recording (AKA : The process of taking screenshots of the video stream at a
+ * given interval).
+ */
+export declare function useVideoRecording({ isRecording, setIsRecording, screenshotInterval, minRecordingDuration, enforceOrientation, walkaroundPosition, startWalkaround, onCaptureVideoFrame, onRecordingComplete, }: UseVideoRecordingParams): VideoRecordingHandle;

package/lib/VideoCapture/hooks/useVideoRecording.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoRecording = exports.VideoRecordingTooltip = void 0;
+var react_1 = require("react");
+var common_1 = require("@monkvision/common");
+var hooks_1 = require("../../hooks");
+/**
+ * Enumeration of the different tooltips displayed on top of the recording button during the recording process.
+ */
+var VideoRecordingTooltip;
+(function (VideoRecordingTooltip) {
+    /**
+     * Tooltip displayed before the recording has been started, to indicate to the user where to press to start the
+     * recording.
+     */
+    VideoRecordingTooltip["START"] = "start";
+    /**
+     * Tooltip displayed at the end of the recording, to indicate to the user where to press to stop the recording.
+     */
+    VideoRecordingTooltip["END"] = "end";
+})(VideoRecordingTooltip = exports.VideoRecordingTooltip || (exports.VideoRecordingTooltip = {}));
+var MINIMUM_VEHICLE_WALKAROUND_POSITION = 270;
+/**
+ * Custom hook used to manage the video recording (AKA : The process of taking screenshots of the video stream at a
+ * given interval).
+ */
+function useVideoRecording(_a) {
+    var isRecording = _a.isRecording, setIsRecording = _a.setIsRecording, screenshotInterval = _a.screenshotInterval, minRecordingDuration = _a.minRecordingDuration, enforceOrientation = _a.enforceOrientation, walkaroundPosition = _a.walkaroundPosition, startWalkaround = _a.startWalkaround, onCaptureVideoFrame = _a.onCaptureVideoFrame, onRecordingComplete = _a.onRecordingComplete;
+    var _b = (0, react_1.useState)(false), isRecordingPaused = _b[0], setIsRecordingPaused = _b[1];
+    var _c = (0, react_1.useState)(0), additionalRecordingDuration = _c[0], setAdditionalRecordingDuration = _c[1];
+    var _d = (0, react_1.useState)(null), recordingStartTimestamp = _d[0], setRecordingStartTimestamp = _d[1];
+    var _e = (0, react_1.useState)(false), isDiscardDialogDisplayed = _e[0], setDiscardDialogDisplayed = _e[1];
+    var _f = (0, react_1.useState)(false), orientationPause = _f[0], setOrientationPause = _f[1];
+    var _g = (0, react_1.useState)(VideoRecordingTooltip.START), tooltip = _g[0], setTooltip = _g[1];
+    var isViolatingEnforcedOrientation = (0, hooks_1.useEnforceOrientation)(enforceOrientation);
+    var getRecordingDurationMs = (0, react_1.useCallback)(function () {
+        return additionalRecordingDuration +
+            (recordingStartTimestamp ? Date.now() - recordingStartTimestamp : 0);
+    }, [additionalRecordingDuration, recordingStartTimestamp]);
+    var pauseRecording = (0, react_1.useCallback)(function () {
+        setIsRecordingPaused(function (isRecordingPausedValue) {
+            if (!isRecordingPausedValue) {
+                setIsRecording(false);
+                setRecordingStartTimestamp(function (recordingStartTimestampValue) {
+                    setAdditionalRecordingDuration(function (value) {
+                        return recordingStartTimestampValue
+                            ? value + Date.now() - recordingStartTimestampValue
+                            : value;
+                    });
+                    return null;
+                });
+            }
+            return true;
+        });
+    }, []);
+    var resumeRecording = (0, react_1.useCallback)(function () {
+        setIsRecordingPaused(function (isRecordingPausedValue) {
+            if (isRecordingPausedValue) {
+                setRecordingStartTimestamp(Date.now());
+                setIsRecording(true);
+            }
+            return false;
+        });
+    }, []);
+    var onClickRecordVideo = (0, react_1.useCallback)(function () {
+        if (isRecording) {
+            if (getRecordingDurationMs() < minRecordingDuration ||
+                walkaroundPosition < MINIMUM_VEHICLE_WALKAROUND_POSITION) {
+                pauseRecording();
+                setDiscardDialogDisplayed(true);
+            }
+            else {
+                setIsRecording(false);
+                onRecordingComplete === null || onRecordingComplete === void 0 ? void 0 : onRecordingComplete();
+            }
+        }
+        else {
+            setAdditionalRecordingDuration(0);
+            setRecordingStartTimestamp(Date.now());
+            setIsRecording(true);
+            startWalkaround();
+            setTooltip(null);
+        }
+    }, [
+        isRecording,
+        getRecordingDurationMs,
+        minRecordingDuration,
+        walkaroundPosition,
+        pauseRecording,
+        onRecordingComplete,
+    ]);
+    var onDiscardDialogKeepRecording = (0, react_1.useCallback)(function () {
+        resumeRecording();
+        setDiscardDialogDisplayed(false);
+    }, [resumeRecording]);
+    var onDiscardDialogDiscardVideo = (0, react_1.useCallback)(function () {
+        setIsRecordingPaused(false);
+        setAdditionalRecordingDuration(0);
+        setRecordingStartTimestamp(null);
+        setIsRecording(false);
+        setDiscardDialogDisplayed(false);
+    }, []);
+    (0, common_1.useInterval)(function () {
+        if (isRecording) {
+            onCaptureVideoFrame === null || onCaptureVideoFrame === void 0 ? void 0 : onCaptureVideoFrame();
+        }
+    }, isRecording ? screenshotInterval : null);
+    (0, react_1.useEffect)(function () {
+        if (isViolatingEnforcedOrientation && isRecording) {
+            setOrientationPause(true);
+            pauseRecording();
+        }
+        else if (!isViolatingEnforcedOrientation && orientationPause) {
+            setOrientationPause(false);
+            resumeRecording();
+        }
+    }, [isViolatingEnforcedOrientation, isRecording, orientationPause]);
+    (0, react_1.useEffect)(function () {
+        if (isRecording) {
+            if (walkaroundPosition > 315) {
+                setTooltip(VideoRecordingTooltip.END);
+            }
+            else {
+                setTooltip(null);
+            }
+        }
+    }, [walkaroundPosition, isRecording]);
+    return {
+        isRecordingPaused: isRecordingPaused,
+        recordingDurationMs: getRecordingDurationMs(),
+        onClickRecordVideo: onClickRecordVideo,
+        onDiscardDialogKeepRecording: onDiscardDialogKeepRecording,
+        onDiscardDialogDiscardVideo: onDiscardDialogDiscardVideo,
+        isDiscardDialogDisplayed: isDiscardDialogDisplayed,
+        pauseRecording: pauseRecording,
+        resumeRecording: resumeRecording,
+        tooltip: tooltip,
+    };
+}
+exports.useVideoRecording = useVideoRecording;

package/lib/VideoCapture/hooks/useVideoUploadQueue.d.ts

@@ -0,0 +1,40 @@
+import { MonkPicture } from '@monkvision/types';
+import { MonkApiConfig } from '@monkvision/network';
+/**
+ * Params accepted by the useVideoUploadQueue hook.
+ */
+export interface VideoUploadQueueParams {
+    /**
+     * The config used to communicate with the API.
+     */
+    apiConfig: MonkApiConfig;
+    /**
+     * The ID of the current inspection.
+     */
+    inspectionId: string;
+    /**
+     * The maximum number of retries allowed for failed image uploads.
+     */
+    maxRetryCount: number;
+}
+/**
+ * Handle used to manage the video frame upload queue.
+ */
+export interface VideoUploadQueueHandle {
+    /**
+     * The number of frames that have successfully been uploaded to the API.
+     */
+    uploadedFrames: number;
+    /**
+     * The total number of frames added to the uploading queue.
+     */
+    totalUploadingFrames: number;
+    /**
+     * Callback called when a frame has been selected by the frame selection hook.
+     */
+    onFrameSelected: (picture: MonkPicture) => void;
+}
+/**
+ * Hook used to manage the video frame upload queue.
+ */
+export declare function useVideoUploadQueue({ apiConfig, inspectionId, maxRetryCount, }: VideoUploadQueueParams): VideoUploadQueueHandle;

package/lib/VideoCapture/hooks/useVideoUploadQueue.js

@@ -0,0 +1,51 @@
+"use strict";
+/* eslint-disable no-param-reassign */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoUploadQueue = void 0;
+var common_1 = require("@monkvision/common");
+var network_1 = require("@monkvision/network");
+var react_1 = require("react");
+/**
+ * Hook used to manage the video frame upload queue.
+ */
+function useVideoUploadQueue(_a) {
+    var apiConfig = _a.apiConfig, inspectionId = _a.inspectionId, maxRetryCount = _a.maxRetryCount;
+    var frameIndex = (0, react_1.useRef)(0);
+    var frameTimestamp = (0, react_1.useRef)(null);
+    var addImage = (0, network_1.useMonkApi)(apiConfig).addImage;
+    var queue = (0, common_1.useQueue)(function (upload) {
+        return addImage({
+            uploadType: network_1.ImageUploadType.VIDEO_FRAME,
+            inspectionId: inspectionId,
+            picture: upload.picture,
+            frameIndex: upload.frameIndex,
+            timestamp: upload.timestamp,
+        });
+    }, {
+        storeFailedItems: true,
+        onItemFail: function (upload) {
+            upload.retryCount += 1;
+            if (upload.retryCount <= maxRetryCount) {
+                queue.push(upload);
+            }
+        },
+    });
+    var onFrameSelected = (0, react_1.useCallback)(function (picture) {
+        var now = Date.now();
+        var upload = {
+            retryCount: 0,
+            picture: picture,
+            frameIndex: frameIndex.current,
+            timestamp: frameTimestamp.current === null ? 0 : now - frameTimestamp.current,
+        };
+        queue.push(upload);
+        frameIndex.current += 1;
+        frameTimestamp.current = now;
+    }, [queue.push]);
+    return (0, common_1.useObjectMemo)({
+        uploadedFrames: queue.totalItems - queue.processingCount,
+        totalUploadingFrames: queue.totalItems,
+        onFrameSelected: onFrameSelected,
+    });
+}
+exports.useVideoUploadQueue = useVideoUploadQueue;

package/lib/VideoCapture/index.d.ts

@@ -0,0 +1,2 @@
+export { type VideoCaptureProps } from './VideoCapture';
+export { VideoCaptureHOC as VideoCapture } from './VideoCaptureHOC';

package/lib/VideoCapture/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoCapture = void 0;
+var VideoCaptureHOC_1 = require("./VideoCaptureHOC");
+Object.defineProperty(exports, "VideoCapture", { enumerable: true, get: function () { return VideoCaptureHOC_1.VideoCaptureHOC; } });

package/lib/assets/logos.asset.d.ts

@@ -0,0 +1 @@
+export declare const monkLogoSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"785\" height=\"210\" viewBox=\"0 0 785 210\"><path fill=\"#000000\" fill-rule=\"evenodd\" d=\"M338 7.1c8-.1 13 .5 21 2.5 5.9 1.4 14.7 4.5 20 7 5.2 2.5 12.2 6.5 15.5 8.9 3.3 2.3 9.1 7.4 12.9 11.1 3.7 3.8 8.8 9.6 11.1 12.9 2.4 3.3 5.9 9.1 7.8 13 2 3.8 4.5 9.9 5.7 13.5 1.1 3.6 2.5 9.4 3.2 13 .6 3.8.8 12 .5 20-.3 9.5-1.1 15.7-2.7 21-1.1 4.1-3.8 11.1-5.9 15.5-2.1 4.4-6.6 11.6-9.8 16-3.3 4.4-8.7 10.4-11.9 13.4-3.2 2.9-9.7 7.9-14.4 11-4.7 3.1-12.1 7.1-16.5 8.8-4.4 1.7-11.7 4.1-16.3 5.2-5.9 1.5-11.3 2.1-19.7 2.1-8.4 0-13.6-.6-19.3-2-4.2-1.2-10.2-3-13.2-4.1-3-1.2-7.5-3.1-10-4.4-2.5-1.3-7.6-4.5-11.5-7.2-3.9-2.7-10.3-8.3-14.3-12.4-4.1-4.1-9.3-10.3-11.7-13.9-2.3-3.6-5.6-9.2-7.2-12.5-1.7-3.3-4-8.9-5.1-12.5-1.1-3.6-2.6-9.2-3.3-12.5-.6-3.3-1.1-10.7-1.1-16.5 0-7.2.7-13.3 2.2-19.5 1.1-5 3.5-12.4 5.3-16.5 1.7-4.1 5.4-10.9 8.1-15 2.7-4.1 8.1-10.8 12-14.8 3.9-4.1 10-9.6 13.6-12.2 3.6-2.7 10.8-6.9 16-9.4 5.2-2.5 13.8-5.6 19-7 7-1.8 12.2-2.5 20-2.5zm-28.5 38.8c-4.7 2.3-10.7 6.4-14.5 9.9-3.6 3.2-8.4 8.8-10.7 12.3-2.3 3.5-5.3 9.3-6.7 12.9-1.3 3.6-2.9 10.3-3.6 15-.6 4.7-.9 11-.5 14 .3 3 1 7.8 1.6 10.5.6 2.8 2.8 8.6 4.9 13 2.2 4.4 5.7 10.3 8 13 2.3 2.8 6.5 6.9 9.3 9.3 2.9 2.3 8.3 5.8 12.2 7.7 3.9 1.9 9.9 4.1 13.5 4.9 3.6.9 10.8 1.6 16 1.6 5.2 0 12.2-.7 15.5-1.5 3.3-.8 9.8-3.4 14.5-5.7 6.6-3.2 10.2-5.9 16-11.7 5.3-5.3 8.8-10 11.7-15.6 2.3-4.4 4.9-11.2 5.8-15 1.3-5.2 1.6-9.9 1.2-18.5-.3-7.9-1.1-13.6-2.5-18-1.2-3.6-3.8-9.4-5.9-12.9-2.1-3.5-6.7-9.3-10.3-12.9-3.6-3.6-9.2-8-12.5-9.9-3.3-1.9-9.4-4.6-13.5-6-5.6-1.9-10.2-2.6-18-2.9-6.9-.2-12.8.1-17 1.1-3.6.8-10.1 3.2-14.5 5.4zm257.6-39 31.4.6.2 95.8c.2 52.6 0 95.7-.5 95.7-.4 0-27.7-24.3-60.7-54.1S468.4 82.5 437 54V31.5c0-12.4.3-22.7.7-22.9.5-.2 29.6 25.8 128.8 115.7zm167.4 0h20.8c11.4 0 20.9.3 21.2.8.2.4-12.4 13.5-28.1 29.2-15.7 15.7-37.1 37.4-66.9 68.1l47.3 47.2c25.9 26 47.2 47.8 47.2 48.5 0 .9-4.8 1.2-41.5 1.2L637 104.4zM8 7.4l98.1 98 96.9-97v193.5h-31v-57.5c0-31.6-.3-57.7-.7-57.9-.4-.3-15.2 13.9-64.8 63.4L8 51.4zm333 75.2c2 .3 4.7 1 6 1.5 1.4.5 4 2 5.8 3.4 1.8 1.3 4.1 4.1 5.1 6.2 1.1 2 2.3 5.3 2.6 7.2.5 2.2.2 5.6-.8 9-1.2 4.2-2.6 6.5-6.1 9.8-2.5 2.3-6.2 4.7-8.3 5.2-2.1.5-5.1 1-6.8 1-1.6 0-5-.7-7.5-1.5-2.4-.9-5.9-3-7.7-4.8-1.8-1.8-4-5-4.9-7.2-1-2.6-1.4-6-1.1-9.5.2-3 1.3-7.3 2.3-9.4 1.1-2.2 3.5-5.1 5.4-6.5 1.9-1.4 5.5-3.1 8-3.8 2.5-.6 6.1-.9 8-.6z\"/></svg>";

package/lib/assets/logos.asset.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.monkLogoSVG = void 0;
+exports.monkLogoSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="785" height="210" viewBox="0 0 785 210"><path fill="#000000" fill-rule="evenodd" d="M338 7.1c8-.1 13 .5 21 2.5 5.9 1.4 14.7 4.5 20 7 5.2 2.5 12.2 6.5 15.5 8.9 3.3 2.3 9.1 7.4 12.9 11.1 3.7 3.8 8.8 9.6 11.1 12.9 2.4 3.3 5.9 9.1 7.8 13 2 3.8 4.5 9.9 5.7 13.5 1.1 3.6 2.5 9.4 3.2 13 .6 3.8.8 12 .5 20-.3 9.5-1.1 15.7-2.7 21-1.1 4.1-3.8 11.1-5.9 15.5-2.1 4.4-6.6 11.6-9.8 16-3.3 4.4-8.7 10.4-11.9 13.4-3.2 2.9-9.7 7.9-14.4 11-4.7 3.1-12.1 7.1-16.5 8.8-4.4 1.7-11.7 4.1-16.3 5.2-5.9 1.5-11.3 2.1-19.7 2.1-8.4 0-13.6-.6-19.3-2-4.2-1.2-10.2-3-13.2-4.1-3-1.2-7.5-3.1-10-4.4-2.5-1.3-7.6-4.5-11.5-7.2-3.9-2.7-10.3-8.3-14.3-12.4-4.1-4.1-9.3-10.3-11.7-13.9-2.3-3.6-5.6-9.2-7.2-12.5-1.7-3.3-4-8.9-5.1-12.5-1.1-3.6-2.6-9.2-3.3-12.5-.6-3.3-1.1-10.7-1.1-16.5 0-7.2.7-13.3 2.2-19.5 1.1-5 3.5-12.4 5.3-16.5 1.7-4.1 5.4-10.9 8.1-15 2.7-4.1 8.1-10.8 12-14.8 3.9-4.1 10-9.6 13.6-12.2 3.6-2.7 10.8-6.9 16-9.4 5.2-2.5 13.8-5.6 19-7 7-1.8 12.2-2.5 20-2.5zm-28.5 38.8c-4.7 2.3-10.7 6.4-14.5 9.9-3.6 3.2-8.4 8.8-10.7 12.3-2.3 3.5-5.3 9.3-6.7 12.9-1.3 3.6-2.9 10.3-3.6 15-.6 4.7-.9 11-.5 14 .3 3 1 7.8 1.6 10.5.6 2.8 2.8 8.6 4.9 13 2.2 4.4 5.7 10.3 8 13 2.3 2.8 6.5 6.9 9.3 9.3 2.9 2.3 8.3 5.8 12.2 7.7 3.9 1.9 9.9 4.1 13.5 4.9 3.6.9 10.8 1.6 16 1.6 5.2 0 12.2-.7 15.5-1.5 3.3-.8 9.8-3.4 14.5-5.7 6.6-3.2 10.2-5.9 16-11.7 5.3-5.3 8.8-10 11.7-15.6 2.3-4.4 4.9-11.2 5.8-15 1.3-5.2 1.6-9.9 1.2-18.5-.3-7.9-1.1-13.6-2.5-18-1.2-3.6-3.8-9.4-5.9-12.9-2.1-3.5-6.7-9.3-10.3-12.9-3.6-3.6-9.2-8-12.5-9.9-3.3-1.9-9.4-4.6-13.5-6-5.6-1.9-10.2-2.6-18-2.9-6.9-.2-12.8.1-17 1.1-3.6.8-10.1 3.2-14.5 5.4zm257.6-39 31.4.6.2 95.8c.2 52.6 0 95.7-.5 95.7-.4 0-27.7-24.3-60.7-54.1S468.4 82.5 437 54V31.5c0-12.4.3-22.7.7-22.9.5-.2 29.6 25.8 128.8 115.7zm167.4 0h20.8c11.4 0 20.9.3 21.2.8.2.4-12.4 13.5-28.1 29.2-15.7 15.7-37.1 37.4-66.9 68.1l47.3 47.2c25.9 26 47.2 47.8 47.2 48.5 0 .9-4.8 1.2-41.5 1.2L637 104.4zM8 7.4l98.1 98 96.9-97v193.5h-31v-57.5c0-31.6-.3-57.7-.7-57.9-.4-.3-15.2 13.9-64.8 63.4L8 51.4zm333 75.2c2 .3 4.7 1 6 1.5 1.4.5 4 2 5.8 3.4 1.8 1.3 4.1 4.1 5.1 6.2 1.1 2 2.3 5.3 2.6 7.2.5 2.2.2 5.6-.8 9-1.2 4.2-2.6 6.5-6.1 9.8-2.5 2.3-6.2 4.7-8.3 5.2-2.1.5-5.1 1-6.8 1-1.6 0-5-.7-7.5-1.5-2.4-.9-5.9-3-7.7-4.8-1.8-1.8-4-5-4.9-7.2-1-2.6-1.4-6-1.1-9.5.2-3 1.3-7.3 2.3-9.4 1.1-2.2 3.5-5.1 5.4-6.5 1.9-1.4 5.5-3.1 8-3.8 2.5-.6 6.1-.9 8-.6z"/></svg>';

package/lib/components/CancelButton/CancelButton.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+/**
+ * Props of the CancelButton component.
+ */
+export interface CancelButtonProps {
+    /**
+     * Callback called when the user clicks on the button.
+     */
+    onCancel?: () => void;
+}
+/**
+ * Component implementing a cancel button displayed in the Camera HUD.
+ */
+export declare function CancelButton({ onCancel }: CancelButtonProps): JSX.Element;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDCancelButton/PhotoCaptureHUDCancelButton.js → components/CancelButton/CancelButton.js}

@@ -11,18 +11,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhotoCaptureHUDCancelButton = void 0;
+exports.CancelButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var common_ui_web_1 = require("@monkvision/common-ui-web");
 var react_i18next_1 = require("react-i18next");
-var hooks_1 = require("../hooks");
+var hooks_1 = require("../../hooks");
 /**
- * Component implementing a cancel button displayed in the PhotoCapture Camera HUD.
+ * Component implementing a cancel button displayed in the Camera HUD.
  */
-function PhotoCaptureHUDCancelButton(_a) {
+function CancelButton(_a) {
     var onCancel = _a.onCancel;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var primaryColor = (0, hooks_1.usePhotoCaptureHUDButtonBackground)();
+    var primaryColor = (0, hooks_1.useColorBackground)();
     return ((0, jsx_runtime_1.jsx)(common_ui_web_1.Button, __assign({ onClick: onCancel, primaryColor: primaryColor }, { children: t('photo.hud.addDamage.cancelBtn') })));
 }
-exports.PhotoCaptureHUDCancelButton = PhotoCaptureHUDCancelButton;
+exports.CancelButton = CancelButton;

package/lib/components/CancelButton/index.d.ts

@@ -0,0 +1 @@
+export { CancelButton, type CancelButtonProps } from './CancelButton';

package/lib/components/CancelButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelButton = void 0;
+var CancelButton_1 = require("./CancelButton");
+Object.defineProperty(exports, "CancelButton", { enumerable: true, get: function () { return CancelButton_1.CancelButton; } });

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddDamage2ndShot/PhotoCaptureHUDElementsAddDamage2ndShot.d.ts → components/CloseUpShot/CloseUpShot.d.ts}

@@ -1,13 +1,19 @@
 /// <reference types="react" />
 import { PixelDimensions } from '@monkvision/types';
 /**
- * Props of the PhotoCaptureHUDElementsAddDamage2ndShot component.
+ * Props of the CloseUpShot component.
  */
-export interface PhotoCaptureHUDElementsAddDamage2ndShotProps {
+export interface CloseUpShotProps {
     /**
      * Callback called when the user cancels the Add Damage mode.
      */
     onCancel?: () => void;
+    /**
+     * Boolean indicating whether the counter should be displayed.
+     *
+     * @default true
+     */
+    showCounter?: boolean;
     /**
      * The dimensions of the Camera video stream.
      */
@@ -15,6 +21,6 @@ export interface PhotoCaptureHUDElementsAddDamage2ndShotProps {
 }
 /**
  * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
- * mode is ADD_DAMAGE_2ND_SHOT.
+ * mode is ADD_DAMAGE_2ND_SHOT | ADD_DAMAGE_PART_SELECT_SHOT.
  */
-export declare function PhotoCaptureHUDElementsAddDamage2ndShot({ onCancel, streamDimensions, }: PhotoCaptureHUDElementsAddDamage2ndShotProps): JSX.Element;
+export declare function CloseUpShot({ onCancel, showCounter, streamDimensions }: CloseUpShotProps): JSX.Element;

package/lib/components/CloseUpShot/CloseUpShot.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseUpShot = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var common_1 = require("@monkvision/common");
+var CloseUpShot_styles_1 = require("./CloseUpShot.styles");
+var hooks_1 = require("./hooks");
+var Counter_1 = require("../Counter");
+var CancelButton_1 = require("../CancelButton");
+var types_1 = require("../../types");
+/**
+ * Component implementing an HUD displayed on top of the Camera preview during the PhotoCapture process when the current
+ * mode is ADD_DAMAGE_2ND_SHOT | ADD_DAMAGE_PART_SELECT_SHOT.
+ */
+function CloseUpShot(_a) {
+    var onCancel = _a.onCancel, _b = _a.showCounter, showCounter = _b === void 0 ? true : _b, streamDimensions = _a.streamDimensions;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var style = (0, hooks_1.useCloseUpShotStyle)();
+    var aspectRatio = (0, common_1.getAspectRatio)(streamDimensions);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: CloseUpShot_styles_1.styles['container'] }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: __assign(__assign({}, CloseUpShot_styles_1.styles['frameContainer']), { aspectRatio: aspectRatio }), "data-testid": 'frame-container' }, { children: (0, jsx_runtime_1.jsx)("div", { style: style.frame }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: style.top }, { children: [showCounter && (0, jsx_runtime_1.jsx)(Counter_1.Counter, { mode: types_1.CaptureMode.ADD_DAMAGE_2ND_SHOT }), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { onCancel: onCancel })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: style.infoCloseup, "data-testid": 'label' }, { children: t('photo.hud.addDamage.infoCloseup') }))] })));
+}
+exports.CloseUpShot = CloseUpShot;

package/lib/components/CloseUpShot/CloseUpShot.styles.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@monkvision/types';
+export declare const styles: Styles;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsAddDamage2ndShot/PhotoCaptureHUDElementsAddDamage2ndShot.styles.js → components/CloseUpShot/CloseUpShot.styles.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
-var PhotoCaptureHUDButtons_styles_1 = require("../PhotoCaptureHUDButtons/PhotoCaptureHUDButtons.styles");
+var HUDButtons_styles_1 = require("../HUDButtons/HUDButtons.styles");
 exports.styles = {
     container: {
         position: 'absolute',
@@ -28,11 +28,12 @@ exports.styles = {
     },
     topLandscape: {
         __media: { landscape: true },
-        right: "".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px"),
+        right: "".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 2, "px"),
     },
     frameContainer: {
         position: 'absolute',
         width: '100%',
+        maxHeight: '100%',
     },
     frame: {
         position: 'absolute',
@@ -72,6 +73,6 @@ exports.styles = {
     },
     infoCloseupPortrait: {
         __media: { portrait: true },
-        bottom: "".concat(PhotoCaptureHUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5, "px"),
+        bottom: "".concat(HUDButtons_styles_1.PHOTO_CAPTURE_HUD_BUTTONS_BAR_WIDTH * 1.5, "px"),
     },
 };

package/lib/components/CloseUpShot/hooks.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+export interface CloseUpShotStyle {
+    top: CSSProperties;
+    infoCloseup: CSSProperties;
+    frame: CSSProperties;
+}
+export declare function useCloseUpShotStyle(): CloseUpShotStyle;

package/lib/components/CloseUpShot/hooks.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseUpShotStyle = void 0;
+var common_1 = require("@monkvision/common");
+var CloseUpShot_styles_1 = require("./CloseUpShot.styles");
+function useCloseUpShotStyle() {
+    var responsive = (0, common_1.useResponsiveStyle)().responsive;
+    return {
+        top: __assign(__assign({}, CloseUpShot_styles_1.styles['top']), responsive(CloseUpShot_styles_1.styles['topLandscape'])),
+        frame: __assign(__assign({}, CloseUpShot_styles_1.styles['frame']), responsive(CloseUpShot_styles_1.styles['framePortrait'])),
+        infoCloseup: __assign(__assign({}, CloseUpShot_styles_1.styles['infoCloseup']), responsive(CloseUpShot_styles_1.styles['infoCloseupPortrait'])),
+    };
+}
+exports.useCloseUpShotStyle = useCloseUpShotStyle;

package/lib/components/CloseUpShot/index.d.ts

@@ -0,0 +1 @@
+export { CloseUpShot, type CloseUpShotProps as PhotoCaptureHUDElementsAddDamage2ndShotProps, } from './CloseUpShot';

package/lib/components/CloseUpShot/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseUpShot = void 0;
+var CloseUpShot_1 = require("./CloseUpShot");
+Object.defineProperty(exports, "CloseUpShot", { enumerable: true, get: function () { return CloseUpShot_1.CloseUpShot; } });

package/lib/components/Counter/Counter.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CounterProps } from './hooks';
+/**
+ * Component that implements an indicator of pictures taken during the capture process.
+ */
+export declare function Counter(props: CounterProps): JSX.Element;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDCounter/PhotoCaptureHUDCounter.js → components/Counter/Counter.js}

@@ -11,17 +11,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhotoCaptureHUDCounter = void 0;
+exports.Counter = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var PhotoCaptureHUDCounter_styles_1 = require("./PhotoCaptureHUDCounter.styles");
-var hooks_1 = require("../hooks");
+var Counter_styles_1 = require("./Counter.styles");
+var hooks_1 = require("../../hooks");
 var hooks_2 = require("./hooks");
 /**
- * Component that implements an indicator of pictures taken during the PhotoCapture process.
+ * Component that implements an indicator of pictures taken during the capture process.
  */
-function PhotoCaptureHUDCounter(props) {
-    var label = (0, hooks_2.usePhotoCaptureHUDCounterLabel)(props);
-    var backgroundColor = (0, hooks_1.usePhotoCaptureHUDButtonBackground)();
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: __assign(__assign({}, PhotoCaptureHUDCounter_styles_1.styles['counter']), { backgroundColor: backgroundColor }), "data-testid": 'damage-counter' }, { children: label })));
+function Counter(props) {
+    var label = (0, hooks_2.useCounterLabel)(props);
+    var backgroundColor = (0, hooks_1.useColorBackground)();
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: __assign(__assign({}, Counter_styles_1.styles['counter']), { backgroundColor: backgroundColor }), "data-testid": 'damage-counter' }, { children: label })));
 }
-exports.PhotoCaptureHUDCounter = PhotoCaptureHUDCounter;
+exports.Counter = Counter;

package/lib/components/Counter/Counter.styles.d.ts

@@ -0,0 +1,2 @@
+import { Styles } from '@monkvision/types';
+export declare const styles: Styles;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDCounter → components/Counter}/hooks.d.ts

@@ -1,12 +1,12 @@
-import { PhotoCaptureMode } from '../../hooks';
+import { CaptureMode } from '../../types';
 /**
- * Props of the PhotoCaptureHUDCounter component.
+ * Props of the Counter component.
  */
-export type PhotoCaptureHUDCounterProps = {
+export type CounterProps = {
     /**
      * The current mode of the PhotoCapture component.
      */
-    mode: PhotoCaptureMode.SIGHT;
+    mode: CaptureMode.SIGHT;
     /**
      * The total number of sights given to the PhotoCapture component.
      */
@@ -19,6 +19,6 @@ export type PhotoCaptureHUDCounterProps = {
     /**
      * The current mode of the PhotoCapture component.
      */
-    mode: PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT | PhotoCaptureMode.ADD_DAMAGE_2ND_SHOT;
+    mode: CaptureMode.ADD_DAMAGE_1ST_SHOT | CaptureMode.ADD_DAMAGE_2ND_SHOT | CaptureMode.ADD_DAMAGE_PART_SELECT | CaptureMode.ADD_DAMAGE_PART_SELECT_SHOT;
 };
-export declare function usePhotoCaptureHUDCounterLabel(props: PhotoCaptureHUDCounterProps): string;
+export declare function useCounterLabel(props: CounterProps): string;

package/lib/{PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDCounter → components/Counter}/hooks.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePhotoCaptureHUDCounterLabel = void 0;
+exports.useCounterLabel = void 0;
 var react_i18next_1 = require("react-i18next");
-var hooks_1 = require("../../hooks");
-function usePhotoCaptureHUDCounterLabel(props) {
+var types_1 = require("../../types");
+function useCounterLabel(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
-    if (props.mode === hooks_1.PhotoCaptureMode.SIGHT) {
+    if (props.mode === types_1.CaptureMode.SIGHT) {
         return "".concat(props.sightsTaken, " / ").concat(props.totalSights);
     }
-    if (props.mode === hooks_1.PhotoCaptureMode.ADD_DAMAGE_1ST_SHOT) {
+    if (props.mode === types_1.CaptureMode.ADD_DAMAGE_1ST_SHOT) {
         return t('photo.hud.addDamage.damagedPartCounter');
     }
     return t('photo.hud.addDamage.closeupPictureCounter');
 }
-exports.usePhotoCaptureHUDCounterLabel = usePhotoCaptureHUDCounterLabel;
+exports.useCounterLabel = useCounterLabel;