datakeen-session-react 1.1.160 → 1.1.162
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/document-collection/DocumentError.js +2 -0
- package/dist/cjs/components/document-collection/DocumentError.js.map +1 -1
- package/dist/cjs/components/selfie/SelfieConfirmation.js +1 -1
- package/dist/cjs/components/selfie/SelfieConfirmation.js.map +1 -1
- package/dist/cjs/components/selfie/Video.js +2 -2
- package/dist/cjs/components/selfie/Video.js.map +1 -1
- package/dist/cjs/components/selfie/hooks/useVideoRecorderStyles.js +2 -2
- package/dist/cjs/components/selfie/hooks/useVideoRecorderStyles.js.map +1 -1
- package/dist/cjs/components/selfie/selfie-flow/SelfieFlow.js +7 -3
- package/dist/cjs/components/selfie/selfie-flow/SelfieFlow.js.map +1 -1
- package/dist/cjs/components/selfie/selfie-flow/SelfieProcessing.js +2 -7
- package/dist/cjs/components/selfie/selfie-flow/SelfieProcessing.js.map +1 -1
- package/dist/cjs/components/selfie/selfie-flow/SelfieRecorder.js +2 -2
- package/dist/cjs/components/selfie/selfie-flow/SelfieRecorder.js.map +1 -1
- package/dist/cjs/components/session/DocumentCheck.js +2 -2
- package/dist/cjs/components/session/DocumentCheck.js.map +1 -1
- package/dist/cjs/components/session/Selfie.js +7 -5
- package/dist/cjs/components/session/Selfie.js.map +1 -1
- package/dist/cjs/components/session/UserInputForm/CustomFormFields.js +42 -45
- package/dist/cjs/components/session/UserInputForm/CustomFormFields.js.map +1 -1
- package/dist/cjs/components/session/UserInputForm/DatePickerField.js +154 -0
- package/dist/cjs/components/session/UserInputForm/DatePickerField.js.map +1 -0
- package/dist/cjs/components/session/UserInputForm.js +2 -2
- package/dist/cjs/components/session/UserInputForm.js.map +1 -1
- package/dist/cjs/components/signature-electronic/DocusealSignature.js +2 -1
- package/dist/cjs/components/signature-electronic/DocusealSignature.js.map +1 -1
- package/dist/cjs/components/signature-electronic/SignatureElectronic.js +2 -1
- package/dist/cjs/components/signature-electronic/SignatureElectronic.js.map +1 -1
- package/dist/cjs/components/signature-electronic/SignatureElectronicIntroduction.js +2 -1
- package/dist/cjs/components/signature-electronic/SignatureElectronicIntroduction.js.map +1 -1
- package/dist/cjs/components/start-flow/CGU.js +5 -2
- package/dist/cjs/components/start-flow/CGU.js.map +1 -1
- package/dist/cjs/components/start-flow/Start.js +5 -2
- package/dist/cjs/components/start-flow/Start.js.map +1 -1
- package/dist/cjs/components/template/ExternalVerificationNodeHandler.js +2 -1
- package/dist/cjs/components/template/ExternalVerificationNodeHandler.js.map +1 -1
- package/dist/cjs/components/ui/Button.js +5 -3
- package/dist/cjs/components/ui/Button.js.map +1 -1
- package/dist/cjs/hooks/useUserInputForm.js +90 -29
- package/dist/cjs/hooks/useUserInputForm.js.map +1 -1
- package/dist/cjs/i18n/en.json.js +19 -5
- package/dist/cjs/i18n/en.json.js.map +1 -1
- package/dist/cjs/i18n/fr.json.js +19 -5
- package/dist/cjs/i18n/fr.json.js.map +1 -1
- package/dist/cjs/index.css.js +1 -1
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildFormatLongFn.js +13 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildFormatLongFn.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildLocalizeFn.js +67 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildLocalizeFn.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildMatchFn.js +62 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildMatchFn.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js +25 -0
- package/dist/cjs/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatDistance.js +106 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatDistance.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatLong.js +44 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatLong.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatRelative.js +16 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/formatRelative.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/localize.js +192 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/localize.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/match.js +137 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US/_lib/match.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US.js +31 -0
- package/dist/cjs/node_modules/date-fns/locale/en-US.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatDistance.js +105 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatDistance.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatLong.js +44 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatLong.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatRelative.js +16 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/formatRelative.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/localize.js +170 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/localize.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/match.js +138 -0
- package/dist/cjs/node_modules/date-fns/locale/fr/_lib/match.js.map +1 -0
- package/dist/cjs/node_modules/date-fns/locale/fr.js +31 -0
- package/dist/cjs/node_modules/date-fns/locale/fr.js.map +1 -0
- package/dist/cjs/services/documentTemplate.js +1 -1
- package/dist/cjs/services/documentTemplate.js.map +1 -1
- package/dist/cjs/types/session.js +6 -0
- package/dist/cjs/types/session.js.map +1 -0
- package/dist/cjs/utils/customFieldValidation.js +62 -0
- package/dist/cjs/utils/customFieldValidation.js.map +1 -0
- package/dist/esm/components/document-collection/DocumentError.js +2 -0
- package/dist/esm/components/document-collection/DocumentError.js.map +1 -1
- package/dist/esm/components/selfie/SelfieConfirmation.js +1 -1
- package/dist/esm/components/selfie/SelfieConfirmation.js.map +1 -1
- package/dist/esm/components/selfie/Video.js +2 -2
- package/dist/esm/components/selfie/Video.js.map +1 -1
- package/dist/esm/components/selfie/hooks/useVideoRecorderStyles.js +2 -2
- package/dist/esm/components/selfie/hooks/useVideoRecorderStyles.js.map +1 -1
- package/dist/esm/components/selfie/selfie-flow/SelfieFlow.js +7 -3
- package/dist/esm/components/selfie/selfie-flow/SelfieFlow.js.map +1 -1
- package/dist/esm/components/selfie/selfie-flow/SelfieProcessing.js +2 -7
- package/dist/esm/components/selfie/selfie-flow/SelfieProcessing.js.map +1 -1
- package/dist/esm/components/selfie/selfie-flow/SelfieRecorder.js +2 -2
- package/dist/esm/components/selfie/selfie-flow/SelfieRecorder.js.map +1 -1
- package/dist/esm/components/session/DocumentCheck.js +2 -2
- package/dist/esm/components/session/DocumentCheck.js.map +1 -1
- package/dist/esm/components/session/Selfie.js +7 -5
- package/dist/esm/components/session/Selfie.js.map +1 -1
- package/dist/esm/components/session/UserInputForm/CustomFormFields.js +42 -45
- package/dist/esm/components/session/UserInputForm/CustomFormFields.js.map +1 -1
- package/dist/esm/components/session/UserInputForm/DatePickerField.js +132 -0
- package/dist/esm/components/session/UserInputForm/DatePickerField.js.map +1 -0
- package/dist/esm/components/session/UserInputForm.js +2 -2
- package/dist/esm/components/session/UserInputForm.js.map +1 -1
- package/dist/esm/components/signature-electronic/DocusealSignature.js +2 -1
- package/dist/esm/components/signature-electronic/DocusealSignature.js.map +1 -1
- package/dist/esm/components/signature-electronic/SignatureElectronic.js +2 -1
- package/dist/esm/components/signature-electronic/SignatureElectronic.js.map +1 -1
- package/dist/esm/components/signature-electronic/SignatureElectronicIntroduction.js +2 -1
- package/dist/esm/components/signature-electronic/SignatureElectronicIntroduction.js.map +1 -1
- package/dist/esm/components/start-flow/CGU.js +5 -2
- package/dist/esm/components/start-flow/CGU.js.map +1 -1
- package/dist/esm/components/start-flow/Start.js +5 -2
- package/dist/esm/components/start-flow/Start.js.map +1 -1
- package/dist/esm/components/template/ExternalVerificationNodeHandler.js +2 -1
- package/dist/esm/components/template/ExternalVerificationNodeHandler.js.map +1 -1
- package/dist/esm/components/ui/Button.js +5 -3
- package/dist/esm/components/ui/Button.js.map +1 -1
- package/dist/esm/components/ui/SelectComponent.js +3 -3
- package/dist/esm/components/ui/SelectComponent.js.map +1 -1
- package/dist/esm/hooks/useUserInputForm.js +92 -31
- package/dist/esm/hooks/useUserInputForm.js.map +1 -1
- package/dist/esm/i18n/en.json.js +19 -5
- package/dist/esm/i18n/en.json.js.map +1 -1
- package/dist/esm/i18n/fr.json.js +19 -5
- package/dist/esm/i18n/fr.json.js.map +1 -1
- package/dist/esm/index.css.js +1 -1
- package/dist/esm/node_modules/date-fns/locale/_lib/buildFormatLongFn.js +11 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildFormatLongFn.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildLocalizeFn.js +65 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildLocalizeFn.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildMatchFn.js +60 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildMatchFn.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js +23 -0
- package/dist/esm/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatDistance.js +104 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatDistance.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatLong.js +42 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatLong.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatRelative.js +14 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/formatRelative.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/localize.js +190 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/localize.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/match.js +135 -0
- package/dist/esm/node_modules/date-fns/locale/en-US/_lib/match.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/en-US.js +29 -0
- package/dist/esm/node_modules/date-fns/locale/en-US.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatDistance.js +103 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatDistance.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatLong.js +42 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatLong.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatRelative.js +14 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/formatRelative.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/localize.js +168 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/localize.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/match.js +136 -0
- package/dist/esm/node_modules/date-fns/locale/fr/_lib/match.js.map +1 -0
- package/dist/esm/node_modules/date-fns/locale/fr.js +29 -0
- package/dist/esm/node_modules/date-fns/locale/fr.js.map +1 -0
- package/dist/esm/providers/I18nProvider.js +2 -2
- package/dist/esm/providers/I18nProvider.js.map +1 -1
- package/dist/esm/services/documentTemplate.js +1 -1
- package/dist/esm/services/documentTemplate.js.map +1 -1
- package/dist/esm/types/session.js +4 -0
- package/dist/esm/types/session.js.map +1 -0
- package/dist/esm/utils/customFieldValidation.js +56 -0
- package/dist/esm/utils/customFieldValidation.js.map +1 -0
- package/jest.config.js +1 -0
- package/package.json +4 -1
|
@@ -47,9 +47,11 @@ var DocumentError = function (_a) {
|
|
|
47
47
|
return (jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full w-full", children: [jsxRuntime.jsx("div", { className: "flex-1 px-4 py-6 pt-11 md:px-8 md:py-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto space-y-6", children: [jsxRuntime.jsx("div", { className: "text-center", children: jsxRuntime.jsx("div", { className: "mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4", children: jsxRuntime.jsx("div", { className: "w-8 h-8 bg-red-500 rounded-full flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-white text-lg", children: "\u2715" }) }) }) }), jsxRuntime.jsxs("div", { className: "text-center space-y-4", children: [jsxRuntime.jsx(Title.default, { className: "text-xl md:text-2xl lg:text-3xl text-red-600", children: t("errors.verification_failed", "Vérification échouée") }), jsxRuntime.jsx(Subtitle.default, { className: "text-sm text-gray-600 leading-relaxed", children: isRetryAllowed
|
|
48
48
|
? t("errors.verification_failed_subtitle", {
|
|
49
49
|
documentType: getDocumentLabel(documentType),
|
|
50
|
+
defaultValue: "Nous n'avons pas pu valider votre {{documentType}}. Veuillez vérifier les points ci-dessous et réessayer.",
|
|
50
51
|
})
|
|
51
52
|
: t("errors.verification_failed_subtitle_no_retry", {
|
|
52
53
|
documentType: getDocumentLabel(documentType),
|
|
54
|
+
defaultValue: "Nous n'avons pas pu valider votre {{documentType}}. Veuillez vérifier les points ci-dessous.",
|
|
53
55
|
}) })] }), jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [jsxRuntime.jsx("h3", { className: "font-medium text-red-900 mb-2", children: t("errors.problems_detected", "Problèmes détectés") }), jsxRuntime.jsx("div", { className: "text-sm text-red-800 space-y-1", children: validationPoints.map(function (point, index) { return (jsxRuntime.jsx("p", { children: point }, index)); }) })] }), !isRetryAllowed && (jsxRuntime.jsxs("div", { className: "bg-orange-50 border border-orange-200 rounded-lg p-4", children: [jsxRuntime.jsx("h3", { className: "font-medium text-orange-900 mb-2", children: t("errors.resubmission.max_attempts_reached", "Nombre maximum de tentatives atteint") }), jsxRuntime.jsx("p", { className: "text-sm text-orange-800", children: maxResubmissionAttempts !== undefined
|
|
54
56
|
? t("errors.resubmission.max_attempts_reached_description")
|
|
55
57
|
: t("errors.resubmission.no_resubmission_allowed") })] })), getUserGuidance() && (jsxRuntime.jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [jsxRuntime.jsxs("h3", { className: "font-medium text-yellow-900 mb-2", children: ["\uD83D\uDCA1 ", t("errors.improvement_tips", "Conseils d'amélioration")] }), jsxRuntime.jsx("p", { className: "text-sm text-yellow-800", children: getUserGuidance() })] })), isRetryAllowed && (jsxRuntime.jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [jsxRuntime.jsx("h3", { className: "font-medium text-blue-900 mb-2", children: t("errors.next_steps", "Prochaines étapes") }), jsxRuntime.jsx("p", { className: "text-sm text-blue-800", children: t("errors.next_steps_description", "Veuillez reprendre les photos de votre document en suivant les conseils d'amélioration pour une meilleure qualité.") })] }))] }) }), jsxRuntime.jsx("div", { className: "sticky bottom-0 md:static bg-white border-t md:border-t-0 p-4 md:p-0 md:pb-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto", children: [jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3 md:hidden", children: [onBackToUserInput && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onBackToUserInput, type: "back", children: t("errors.back_to_user_input", "Retour aux informations d'identité") })), retryCount >= 1 && isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onContinueAnyway, type: "back", children: t("errors.continue_anyway", "Poursuivre tout de même") })), isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onRetry, type: "continue", children: t("errors.retry_verification", "Recommencer la vérification") })), !isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onContinueAnyway, type: "back", children: t("errors.continue_anyway", "Poursuivre tout de même") }))] }), jsxRuntime.jsx("div", { className: "hidden md:flex flex-col space-y-3", children: jsxRuntime.jsxs("div", { className: "flex justify-center space-x-3", children: [onBackToUserInput && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onBackToUserInput, type: "back", children: t("errors.back_to_user_input", "Retour aux informations d'identité") })), retryCount >= 1 && isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onContinueAnyway, type: "back", children: t("errors.continue_anyway", "Poursuivre tout de même") })), isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onRetry, type: "continue", children: t("errors.retry_verification", "Recommencer la vérification") })), !isRetryAllowed && (jsxRuntime.jsx(ButtonDesktop.default, { onClick: onContinueAnyway, type: "continue", children: t("errors.continue_anyway", "Poursuivre tout de même") }))] }) })] }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentError.js","sources":["../../../../../src/components/document-collection/DocumentError.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport Button from \"../ui/Button\";\nimport ButtonDesktop from \"../ui/ButtonDesktop\";\nimport { useI18n } from \"../../hooks/useI18n\";\nimport { getValidationPoints } from \"../../utils/validationUtils\";\nimport type { DocumentErrorProps } from \"./types\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\n\nconst DocumentError: React.FC<DocumentErrorProps> = ({\n documentType,\n documentTypeLabel,\n onRetry,\n onContinueAnyway,\n onBackToUserInput,\n retryCount = 0,\n predictions = [],\n errorDetails,\n allowResubmission,\n maxResubmissionAttempts,\n isRetryAllowed = true,\n errorCode,\n}) => {\n const { t } = useI18n();\n const [validationPoints, setValidationPoints] = useState<string[]>([]);\n\n useEffect(() => {\n // Use shared utility to get validation points\n setValidationPoints(\n getValidationPoints(errorCode, predictions, t, \"error\"),\n );\n }, [predictions, errorCode, t]);\n\n // Get user guidance message if available\n const getUserGuidance = (): string | null => {\n if (!errorCode) return null;\n const guidance = t(`user_guidance.${errorCode}`, \"\");\n return guidance || null;\n };\n\n const getDocumentLabel = (documentType: string): string => {\n if (documentTypeLabel) return documentTypeLabel;\n\n const translated = t(documentType);\n // If no translation, use default fallbacks\n if (translated === documentType) {\n switch (documentType) {\n case \"national_id\":\n return t(\"documentTypes.idCard\", \"carte nationale d'identité\");\n case \"passport\":\n return t(\"documentTypes.passport\", \"passeport\");\n case \"driving_license\":\n return t(\"documentTypes.driving_license\", \"permis de conduire\");\n default:\n return t(\"documentTypes.document\", \"document\");\n }\n }\n return translated;\n };\n\n return (\n <div className=\"flex flex-col justify-between h-full w-full\">\n {/* Main content area */}\n <div className=\"flex-1 px-4 py-6 pt-11 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Error icon */}\n <div className=\"text-center\">\n <div className=\"mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4\">\n <div className=\"w-8 h-8 bg-red-500 rounded-full flex items-center justify-center\">\n <span className=\"text-white text-lg\">✕</span>\n </div>\n </div>\n </div>\n\n {/* Header */}\n <div className=\"text-center space-y-4\">\n <Title className=\"text-xl md:text-2xl lg:text-3xl text-red-600\">\n {t(\"errors.verification_failed\", \"Vérification échouée\")}\n </Title>\n <Subtitle className=\"text-sm text-gray-600 leading-relaxed\">\n {isRetryAllowed\n ? t(\"errors.verification_failed_subtitle\", {\n documentType: getDocumentLabel(documentType),\n })\n : t(\"errors.verification_failed_subtitle_no_retry\", {\n documentType: getDocumentLabel(documentType),\n })}\n </Subtitle>\n </div>\n\n {/* Error details - Validation Points */}\n <div className=\"bg-red-50 border border-red-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-red-900 mb-2\">\n {t(\"errors.problems_detected\", \"Problèmes détectés\")}\n </h3>\n <div className=\"text-sm text-red-800 space-y-1\">\n {validationPoints.map((point, index) => (\n <p key={index}>{point}</p>\n ))}\n </div>\n </div>\n\n {/* Resubmission limit message */}\n {!isRetryAllowed && (\n <div className=\"bg-orange-50 border border-orange-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-orange-900 mb-2\">\n {t(\n \"errors.resubmission.max_attempts_reached\",\n \"Nombre maximum de tentatives atteint\",\n )}\n </h3>\n <p className=\"text-sm text-orange-800\">\n {maxResubmissionAttempts !== undefined\n ? t(\"errors.resubmission.max_attempts_reached_description\")\n : t(\"errors.resubmission.no_resubmission_allowed\")}\n </p>\n </div>\n )}\n\n {/* User guidance - specific advice based on error code */}\n {getUserGuidance() && (\n <div className=\"bg-yellow-50 border border-yellow-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-yellow-900 mb-2\">\n 💡 {t(\"errors.improvement_tips\", \"Conseils d'amélioration\")}\n </h3>\n <p className=\"text-sm text-yellow-800\">{getUserGuidance()}</p>\n </div>\n )}\n\n {/* Next steps */}\n {isRetryAllowed && (\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-blue-900 mb-2\">\n {t(\"errors.next_steps\", \"Prochaines étapes\")}\n </h3>\n <p className=\"text-sm text-blue-800\">\n {t(\n \"errors.next_steps_description\",\n \"Veuillez reprendre les photos de votre document en suivant les conseils d'amélioration pour une meilleure qualité.\",\n )}\n </p>\n </div>\n )}\n </div>\n </div>\n\n {/* Footer with buttons */}\n <div className=\"sticky bottom-0 md:static bg-white border-t md:border-t-0 p-4 md:p-0 md:pb-8\">\n <div className=\"w-full max-w-md mx-auto\">\n {/* Mobile layout */}\n <div className=\"flex flex-col space-y-3 md:hidden\">\n {onBackToUserInput && (\n <ButtonDesktop\n onClick={onBackToUserInput}\n type=\"back\"\n >\n {t(\n \"errors.back_to_user_input\",\n \"Retour aux informations d'identité\",\n )}\n </ButtonDesktop>\n )}\n {retryCount >= 1 && isRetryAllowed && (\n <ButtonDesktop\n onClick={onContinueAnyway}\n type=\"back\"\n >\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n {isRetryAllowed && (\n <ButtonDesktop onClick={onRetry} type=\"continue\">\n {t(\"errors.retry_verification\", \"Recommencer la vérification\")}\n </ButtonDesktop>\n )}\n {!isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"back\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n </div>\n\n {/* Desktop layout */}\n <div className=\"hidden md:flex flex-col space-y-3\">\n <div className=\"flex justify-center space-x-3\">\n {onBackToUserInput && (\n <ButtonDesktop\n onClick={onBackToUserInput}\n type=\"back\"\n >\n {t(\n \"errors.back_to_user_input\",\n \"Retour aux informations d'identité\",\n )}\n </ButtonDesktop>\n )}\n {retryCount >= 1 && isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"back\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n {isRetryAllowed && (\n <ButtonDesktop onClick={onRetry} type=\"continue\">\n {t(\n \"errors.retry_verification\",\n \"Recommencer la vérification\",\n )}\n </ButtonDesktop>\n )}\n {!isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"continue\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default DocumentError;\nexport type { DocumentErrorProps };\n"],"names":["useI18n","useState","useEffect","getValidationPoints","_jsxs","_jsx","Title","Subtitle","ButtonDesktop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DocumentError.js","sources":["../../../../../src/components/document-collection/DocumentError.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport Button from \"../ui/Button\";\nimport ButtonDesktop from \"../ui/ButtonDesktop\";\nimport { useI18n } from \"../../hooks/useI18n\";\nimport { getValidationPoints } from \"../../utils/validationUtils\";\nimport type { DocumentErrorProps } from \"./types\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\n\nconst DocumentError: React.FC<DocumentErrorProps> = ({\n documentType,\n documentTypeLabel,\n onRetry,\n onContinueAnyway,\n onBackToUserInput,\n retryCount = 0,\n predictions = [],\n errorDetails,\n allowResubmission,\n maxResubmissionAttempts,\n isRetryAllowed = true,\n errorCode,\n}) => {\n const { t } = useI18n();\n const [validationPoints, setValidationPoints] = useState<string[]>([]);\n\n useEffect(() => {\n // Use shared utility to get validation points\n setValidationPoints(\n getValidationPoints(errorCode, predictions, t, \"error\"),\n );\n }, [predictions, errorCode, t]);\n\n // Get user guidance message if available\n const getUserGuidance = (): string | null => {\n if (!errorCode) return null;\n const guidance = t(`user_guidance.${errorCode}`, \"\");\n return guidance || null;\n };\n\n const getDocumentLabel = (documentType: string): string => {\n if (documentTypeLabel) return documentTypeLabel;\n\n const translated = t(documentType);\n // If no translation, use default fallbacks\n if (translated === documentType) {\n switch (documentType) {\n case \"national_id\":\n return t(\"documentTypes.idCard\", \"carte nationale d'identité\");\n case \"passport\":\n return t(\"documentTypes.passport\", \"passeport\");\n case \"driving_license\":\n return t(\"documentTypes.driving_license\", \"permis de conduire\");\n default:\n return t(\"documentTypes.document\", \"document\");\n }\n }\n return translated;\n };\n\n return (\n <div className=\"flex flex-col justify-between h-full w-full\">\n {/* Main content area */}\n <div className=\"flex-1 px-4 py-6 pt-11 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Error icon */}\n <div className=\"text-center\">\n <div className=\"mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4\">\n <div className=\"w-8 h-8 bg-red-500 rounded-full flex items-center justify-center\">\n <span className=\"text-white text-lg\">✕</span>\n </div>\n </div>\n </div>\n\n {/* Header */}\n <div className=\"text-center space-y-4\">\n <Title className=\"text-xl md:text-2xl lg:text-3xl text-red-600\">\n {t(\"errors.verification_failed\", \"Vérification échouée\")}\n </Title>\n <Subtitle className=\"text-sm text-gray-600 leading-relaxed\">\n {isRetryAllowed\n ? t(\"errors.verification_failed_subtitle\", {\n documentType: getDocumentLabel(documentType),\n defaultValue:\n \"Nous n'avons pas pu valider votre {{documentType}}. Veuillez vérifier les points ci-dessous et réessayer.\",\n })\n : t(\"errors.verification_failed_subtitle_no_retry\", {\n documentType: getDocumentLabel(documentType),\n defaultValue:\n \"Nous n'avons pas pu valider votre {{documentType}}. Veuillez vérifier les points ci-dessous.\",\n })}\n </Subtitle>\n </div>\n\n {/* Error details - Validation Points */}\n <div className=\"bg-red-50 border border-red-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-red-900 mb-2\">\n {t(\"errors.problems_detected\", \"Problèmes détectés\")}\n </h3>\n <div className=\"text-sm text-red-800 space-y-1\">\n {validationPoints.map((point, index) => (\n <p key={index}>{point}</p>\n ))}\n </div>\n </div>\n\n {/* Resubmission limit message */}\n {!isRetryAllowed && (\n <div className=\"bg-orange-50 border border-orange-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-orange-900 mb-2\">\n {t(\n \"errors.resubmission.max_attempts_reached\",\n \"Nombre maximum de tentatives atteint\",\n )}\n </h3>\n <p className=\"text-sm text-orange-800\">\n {maxResubmissionAttempts !== undefined\n ? t(\"errors.resubmission.max_attempts_reached_description\")\n : t(\"errors.resubmission.no_resubmission_allowed\")}\n </p>\n </div>\n )}\n\n {/* User guidance - specific advice based on error code */}\n {getUserGuidance() && (\n <div className=\"bg-yellow-50 border border-yellow-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-yellow-900 mb-2\">\n 💡 {t(\"errors.improvement_tips\", \"Conseils d'amélioration\")}\n </h3>\n <p className=\"text-sm text-yellow-800\">{getUserGuidance()}</p>\n </div>\n )}\n\n {/* Next steps */}\n {isRetryAllowed && (\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-4\">\n <h3 className=\"font-medium text-blue-900 mb-2\">\n {t(\"errors.next_steps\", \"Prochaines étapes\")}\n </h3>\n <p className=\"text-sm text-blue-800\">\n {t(\n \"errors.next_steps_description\",\n \"Veuillez reprendre les photos de votre document en suivant les conseils d'amélioration pour une meilleure qualité.\",\n )}\n </p>\n </div>\n )}\n </div>\n </div>\n\n {/* Footer with buttons */}\n <div className=\"sticky bottom-0 md:static bg-white border-t md:border-t-0 p-4 md:p-0 md:pb-8\">\n <div className=\"w-full max-w-md mx-auto\">\n {/* Mobile layout */}\n <div className=\"flex flex-col space-y-3 md:hidden\">\n {onBackToUserInput && (\n <ButtonDesktop\n onClick={onBackToUserInput}\n type=\"back\"\n >\n {t(\n \"errors.back_to_user_input\",\n \"Retour aux informations d'identité\",\n )}\n </ButtonDesktop>\n )}\n {retryCount >= 1 && isRetryAllowed && (\n <ButtonDesktop\n onClick={onContinueAnyway}\n type=\"back\"\n >\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n {isRetryAllowed && (\n <ButtonDesktop onClick={onRetry} type=\"continue\">\n {t(\"errors.retry_verification\", \"Recommencer la vérification\")}\n </ButtonDesktop>\n )}\n {!isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"back\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n </div>\n\n {/* Desktop layout */}\n <div className=\"hidden md:flex flex-col space-y-3\">\n <div className=\"flex justify-center space-x-3\">\n {onBackToUserInput && (\n <ButtonDesktop\n onClick={onBackToUserInput}\n type=\"back\"\n >\n {t(\n \"errors.back_to_user_input\",\n \"Retour aux informations d'identité\",\n )}\n </ButtonDesktop>\n )}\n {retryCount >= 1 && isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"back\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n {isRetryAllowed && (\n <ButtonDesktop onClick={onRetry} type=\"continue\">\n {t(\n \"errors.retry_verification\",\n \"Recommencer la vérification\",\n )}\n </ButtonDesktop>\n )}\n {!isRetryAllowed && (\n <ButtonDesktop onClick={onContinueAnyway} type=\"continue\">\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default DocumentError;\nexport type { DocumentErrorProps };\n"],"names":["useI18n","useState","useEffect","getValidationPoints","_jsxs","_jsx","Title","Subtitle","ButtonDesktop"],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ var SelfieConfirmation = function (_a) {
|
|
|
46
46
|
if (!imageUrl) {
|
|
47
47
|
return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full bg-white", children: jsxRuntime.jsxs("div", { className: "text-center p-6 max-w-md mx-auto", children: [jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 text-yellow-500", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }) }), jsxRuntime.jsx(Title.default, { className: "text-xl mb-2", children: t("selfie.confirmation.no_display_title", "Impossible d'afficher le selfie") }), jsxRuntime.jsx("p", { className: "mb-6 text-sm text-gray-600", children: t("selfie.confirmation.no_display_desc", "Nous n'avons pas pu traiter correctement votre selfie.") }), jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, className: "md:max-w-xs mx-auto", children: t("selfie.confirmation.retake", "Reprendre le selfie") })] }) }));
|
|
48
48
|
}
|
|
49
|
-
return (jsxRuntime.jsx(MobilePageLayout.default, { header: jsxRuntime.jsxs("div", { className: "p-4 text-center bg-white border-b border-gray-100", children: [jsxRuntime.jsx(Title.default, { className: "text-xl md:text-2xl", children: t("selfie.confirmation.title", "Confirmez votre selfie") }), jsxRuntime.jsx(Subtitle.default, { className: "text-xs text-gray-600 mt-2 md:text-sm", children: t("selfie.confirmation.subtitle", "Vérifiez que votre visage est clairement visible") })] }), footer: jsxRuntime.jsx(PageActions.default, { primary: jsxRuntime.jsx(Button.default, { onClick: onConfirm, children: t("selfie.confirmation.confirm", "Confirmer") }), secondary: jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, children: t("selfie.confirmation.retake", "Reprendre le selfie") }) }), className: "bg-white", children: jsxRuntime.jsx("div", { className: "px-4 py-6 md:px-8 md:py-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto space-y-6", children: [jsxRuntime.jsx("div", { className: "w-full bg-white rounded-lg
|
|
49
|
+
return (jsxRuntime.jsx(MobilePageLayout.default, { header: jsxRuntime.jsxs("div", { className: "p-4 text-center bg-white border-b border-gray-100", children: [jsxRuntime.jsx(Title.default, { className: "text-xl md:text-2xl", children: t("selfie.confirmation.title", "Confirmez votre selfie") }), jsxRuntime.jsx(Subtitle.default, { className: "text-xs text-gray-600 mt-2 md:text-sm", children: t("selfie.confirmation.subtitle", "Vérifiez que votre visage est clairement visible") })] }), footer: jsxRuntime.jsx(PageActions.default, { primary: jsxRuntime.jsx(Button.default, { onClick: onConfirm, children: t("selfie.confirmation.confirm", "Confirmer") }), secondary: jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, children: t("selfie.confirmation.retake", "Reprendre le selfie") }) }), className: "bg-white", children: jsxRuntime.jsx("div", { className: "px-4 py-6 md:px-8 md:py-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto space-y-6", children: [jsxRuntime.jsx("div", { className: "w-full bg-white rounded-lg shadow-md", children: jsxRuntime.jsxs("div", { className: "relative rounded-lg border-2 border-[#11E5C5] flex items-center justify-center bg-white", children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "Selfie captur\u00E9", className: "w-full h-auto object-contain rounded-lg", style: { maxHeight: "50vh" }, onError: function () {
|
|
50
50
|
setError("Impossible d'afficher l'image du selfie");
|
|
51
51
|
} }), jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3", children: jsxRuntime.jsx("p", { className: "text-white text-xs text-center", children: t("selfie.confirmation.overlay_success", "Selfie capturé avec succès") }) })] }) }), jsxRuntime.jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [jsxRuntime.jsx("h3", { className: "font-medium text-sm mb-3", children: t("selfie.confirmation.checklist_title", "Vérifiez que :") }), jsxRuntime.jsxs("ul", { className: "space-y-2 text-xs text-gray-700", children: [jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_visible", "Votre visage est bien visible et occupe la majeure partie de l'image")] }), jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_well_lit", "L'image est nette et bien éclairée")] }), jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_no_object", "Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)")] })] })] }), jsxRuntime.jsx("canvas", { ref: canvasRef, style: { display: "none" } })] }) }) }));
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieConfirmation.js","sources":["../../../../../src/components/selfie/SelfieConfirmation.tsx"],"sourcesContent":["/**\n * SelfieConfirmation component\n *\n * Displays the captured selfie and allows the user to confirm or retake it.\n *\n * @param {Object} props - Component props\n * @param {SelfieCaptureData} props.selfieData - The captured selfie data containing media blob and metadata\n * @param {Function} props.onConfirm - Function called when user confirms the selfie\n * @param {Function} props.onRetake - Function called when user wants to retake the selfie\n * @returns {JSX.Element} The selfie confirmation UI component\n */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport Button from \"../ui/Button\";\nimport PageActions from \"../ui/PageActions\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SelfieConfirmationProps {\n selfieData: SelfieCaptureData;\n setSelfiePhoto: (photo: string) => void;\n onConfirm: () => void;\n onRetake: () => void;\n}\n\nconst SelfieConfirmation = ({\n selfieData,\n setSelfiePhoto,\n onConfirm,\n onRetake,\n}: SelfieConfirmationProps) => {\n const { t } = useI18n();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<string | null>(null);\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n setIsLoading(true);\n setError(null);\n\n if (!selfieData?.media) {\n setError(t(\"selfie.confirmation.errors.no_data\", \"Aucune donnée de selfie disponible\"));\n setIsLoading(false);\n return;\n }\n\n // Use pre-captured thumbnail from live video stream\n if (selfieData.thumbnail) {\n setImageUrl(selfieData.thumbnail);\n setSelfiePhoto(selfieData.thumbnail);\n setIsLoading(false);\n return;\n }\n\n // No thumbnail available (should not happen)\n setError(t(\"selfie.confirmation.errors.no_preview\", \"Aucune preview disponible\"));\n setIsLoading(false);\n }, [selfieData, setSelfiePhoto]);\n\n if (isLoading) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6\">\n <div className=\"mb-4 text-gray-700\">\n {t(\"selfie.confirmation.loading\", \"Traitement de votre selfie...\")}\n </div>\n <div className=\"w-12 h-12 border-4 border-[#11E5C5] border-t-transparent rounded-full animate-spin mx-auto\"></div>\n </div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-red-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.error_title\", \"Une erreur est survenue\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{error}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n if (!imageUrl) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-yellow-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.no_display_title\", \"Impossible d'afficher le selfie\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{t(\"selfie.confirmation.no_display_desc\", \"Nous n'avons pas pu traiter correctement votre selfie.\")}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <MobilePageLayout\n header={\n <div className=\"p-4 text-center bg-white border-b border-gray-100\">\n <Title className=\"text-xl md:text-2xl\">{t(\"selfie.confirmation.title\", \"Confirmez votre selfie\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 mt-2 md:text-sm\">{t(\"selfie.confirmation.subtitle\", \"Vérifiez que votre visage est clairement visible\")}</Subtitle>\n </div>\n }\n footer={\n <PageActions\n primary={\n <Button onClick={onConfirm}>\n {t(\"selfie.confirmation.confirm\", \"Confirmer\")}\n </Button>\n }\n secondary={\n <Button variant=\"secondary\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n }\n />\n }\n className=\"bg-white\"\n >\n <div className=\"px-4 py-6 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Selfie display with frame */}\n <div className=\"w-full bg-white rounded-lg overflow-hidden shadow-md\">\n <div className=\"relative rounded-lg overflow-hidden border-2 border-[#11E5C5]\">\n <img\n src={imageUrl}\n alt=\"Selfie capturé\"\n className=\"w-full h-64 md:h-80 object-cover bg-white\"\n onError={() => {\n setError(\"Impossible d'afficher l'image du selfie\");\n }}\n />\n {/* Overlay pour améliorer la lisibilité */}\n <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3\">\n <p className=\"text-white text-xs text-center\">{t(\"selfie.confirmation.overlay_success\", \"Selfie capturé avec succès\")}</p>\n </div>\n </div>\n </div>\n\n {/* Checklist de confirmation */}\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <h3 className=\"font-medium text-sm mb-3\">{t(\"selfie.confirmation.checklist_title\", \"Vérifiez que :\")}</h3>\n <ul className=\"space-y-2 text-xs text-gray-700\">\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_visible\", \"Votre visage est bien visible et occupe la majeure partie de l'image\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_well_lit\", \"L'image est nette et bien éclairée\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_no_object\", \"Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)\")}\n </li>\n </ul>\n </div>\n\n {/* Canvas caché utilisé pour le traitement des images */}\n <canvas ref={canvasRef} style={{ display: \"none\" }} />\n </div>\n </div>\n </MobilePageLayout>\n );\n};\n\nexport default SelfieConfirmation;\n"],"names":["useI18n","useState","useRef","useEffect","_jsx","_jsxs","Title","Button","MobilePageLayout","Subtitle","PageActions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelfieConfirmation.js","sources":["../../../../../src/components/selfie/SelfieConfirmation.tsx"],"sourcesContent":["/**\n * SelfieConfirmation component\n *\n * Displays the captured selfie and allows the user to confirm or retake it.\n *\n * @param {Object} props - Component props\n * @param {SelfieCaptureData} props.selfieData - The captured selfie data containing media blob and metadata\n * @param {Function} props.onConfirm - Function called when user confirms the selfie\n * @param {Function} props.onRetake - Function called when user wants to retake the selfie\n * @returns {JSX.Element} The selfie confirmation UI component\n */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport Button from \"../ui/Button\";\nimport PageActions from \"../ui/PageActions\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SelfieConfirmationProps {\n selfieData: SelfieCaptureData;\n setSelfiePhoto: (photo: string) => void;\n onConfirm: () => void;\n onRetake: () => void;\n}\n\nconst SelfieConfirmation = ({\n selfieData,\n setSelfiePhoto,\n onConfirm,\n onRetake,\n}: SelfieConfirmationProps) => {\n const { t } = useI18n();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<string | null>(null);\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n setIsLoading(true);\n setError(null);\n\n if (!selfieData?.media) {\n setError(t(\"selfie.confirmation.errors.no_data\", \"Aucune donnée de selfie disponible\"));\n setIsLoading(false);\n return;\n }\n\n // Use pre-captured thumbnail from live video stream\n if (selfieData.thumbnail) {\n setImageUrl(selfieData.thumbnail);\n setSelfiePhoto(selfieData.thumbnail);\n setIsLoading(false);\n return;\n }\n\n // No thumbnail available (should not happen)\n setError(t(\"selfie.confirmation.errors.no_preview\", \"Aucune preview disponible\"));\n setIsLoading(false);\n }, [selfieData, setSelfiePhoto]);\n\n if (isLoading) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6\">\n <div className=\"mb-4 text-gray-700\">\n {t(\"selfie.confirmation.loading\", \"Traitement de votre selfie...\")}\n </div>\n <div className=\"w-12 h-12 border-4 border-[#11E5C5] border-t-transparent rounded-full animate-spin mx-auto\"></div>\n </div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-red-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.error_title\", \"Une erreur est survenue\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{error}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n if (!imageUrl) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-yellow-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.no_display_title\", \"Impossible d'afficher le selfie\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{t(\"selfie.confirmation.no_display_desc\", \"Nous n'avons pas pu traiter correctement votre selfie.\")}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <MobilePageLayout\n header={\n <div className=\"p-4 text-center bg-white border-b border-gray-100\">\n <Title className=\"text-xl md:text-2xl\">{t(\"selfie.confirmation.title\", \"Confirmez votre selfie\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 mt-2 md:text-sm\">{t(\"selfie.confirmation.subtitle\", \"Vérifiez que votre visage est clairement visible\")}</Subtitle>\n </div>\n }\n footer={\n <PageActions\n primary={\n <Button onClick={onConfirm}>\n {t(\"selfie.confirmation.confirm\", \"Confirmer\")}\n </Button>\n }\n secondary={\n <Button variant=\"secondary\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n }\n />\n }\n className=\"bg-white\"\n >\n <div className=\"px-4 py-6 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Selfie display with frame */}\n <div className=\"w-full bg-white rounded-lg shadow-md\">\n <div className=\"relative rounded-lg border-2 border-[#11E5C5] flex items-center justify-center bg-white\">\n <img\n src={imageUrl}\n alt=\"Selfie capturé\"\n className=\"w-full h-auto object-contain rounded-lg\"\n style={{ maxHeight: \"50vh\" }}\n onError={() => {\n setError(\"Impossible d'afficher l'image du selfie\");\n }}\n />\n {/* Overlay pour améliorer la lisibilité */}\n <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3\">\n <p className=\"text-white text-xs text-center\">{t(\"selfie.confirmation.overlay_success\", \"Selfie capturé avec succès\")}</p>\n </div>\n </div>\n </div>\n\n {/* Checklist de confirmation */}\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <h3 className=\"font-medium text-sm mb-3\">{t(\"selfie.confirmation.checklist_title\", \"Vérifiez que :\")}</h3>\n <ul className=\"space-y-2 text-xs text-gray-700\">\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_visible\", \"Votre visage est bien visible et occupe la majeure partie de l'image\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_well_lit\", \"L'image est nette et bien éclairée\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_no_object\", \"Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)\")}\n </li>\n </ul>\n </div>\n\n {/* Canvas caché utilisé pour le traitement des images */}\n <canvas ref={canvasRef} style={{ display: \"none\" }} />\n </div>\n </div>\n </MobilePageLayout>\n );\n};\n\nexport default SelfieConfirmation;\n"],"names":["useI18n","useState","useRef","useEffect","_jsx","_jsxs","Title","Button","MobilePageLayout","Subtitle","PageActions"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var SelfieFlow = require('./selfie-flow/SelfieFlow.js');
|
|
|
10
10
|
var VideoResetStyles = require('./VideoResetStyles.js');
|
|
11
11
|
|
|
12
12
|
var Video = function (_a) {
|
|
13
|
-
var setSelfieData = _a.setSelfieData, setStep = _a.setStep, onBack = _a.onBack;
|
|
13
|
+
var setSelfieData = _a.setSelfieData, setStep = _a.setStep, onBack = _a.onBack, btnBg = _a.btnBg, btnText = _a.btnText;
|
|
14
14
|
// Effet pour ajouter la classe au body lorsque le composant est monté
|
|
15
15
|
React.useEffect(function () {
|
|
16
16
|
// Empêcher le scroll sur le body lorsque la capture est active
|
|
@@ -32,7 +32,7 @@ var Video = function (_a) {
|
|
|
32
32
|
setStep(1); // Move to the next step after selfie capture
|
|
33
33
|
}, 300);
|
|
34
34
|
};
|
|
35
|
-
return (jsxRuntime.jsxs("div", { className: "w-full h-full overflow-hidden flex flex-col", children: [jsxRuntime.jsx(VideoResetStyles.default, {}), jsxRuntime.jsx(SelfieFlow.default, { handleSelfie: handleSelfie, onBack: onBack })] }));
|
|
35
|
+
return (jsxRuntime.jsxs("div", { className: "w-full h-full overflow-hidden flex flex-col", children: [jsxRuntime.jsx(VideoResetStyles.default, {}), jsxRuntime.jsx(SelfieFlow.default, { handleSelfie: handleSelfie, onBack: onBack, btnBg: btnBg, btnText: btnText })] }));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
exports.default = Video;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sources":["../../../../../src/components/selfie/Video.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport \"./Video.css\";\nimport \"./VideoFixes.css\";\nimport SelfieFlow from \"./selfie-flow/SelfieFlow\";\nimport VideoResetStyles from \"./VideoResetStyles\";\n\ninterface VideoProps {\n setSelfieData: (selfieData: SelfieCaptureData) => void;\n setStep: (step: number) => void;\n onBack?: () => void;\n}\n\nconst Video = ({ setSelfieData, setStep, onBack }: VideoProps) => {\n // Effet pour ajouter la classe au body lorsque le composant est monté\n useEffect(() => {\n // Empêcher le scroll sur le body lorsque la capture est active\n document.body.classList.add(\"selfie-active\");\n\n // Ajouter une classe pour gérer le plein écran sur mobile\n document.documentElement.classList.add(\"selfie-fullscreen\");\n\n return () => {\n // Nettoyer en enlevant les classes lors du démontage\n document.body.classList.remove(\"selfie-active\");\n document.documentElement.classList.remove(\"selfie-fullscreen\");\n };\n }, []);\n\n const handleSelfie = (e: Event) => {\n const data = (e as CustomEvent<SelfieCaptureData>).detail;\n\n // Attendre un court instant avant de passer à l'écran de confirmation\n // pour donner le temps à l'utilisateur de voir que la capture est terminée\n setTimeout(() => {\n setSelfieData(data);\n setStep(1); // Move to the next step after selfie capture\n }, 300);\n };\n\n return (\n <div className=\"w-full h-full overflow-hidden flex flex-col\">\n <VideoResetStyles />\n <SelfieFlow handleSelfie={handleSelfie} onBack={onBack} />\n </div>\n );\n};\n\nexport default Video;\n"],"names":["useEffect","_jsxs","_jsx","VideoResetStyles","SelfieFlow"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Video.js","sources":["../../../../../src/components/selfie/Video.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport \"./Video.css\";\nimport \"./VideoFixes.css\";\nimport SelfieFlow from \"./selfie-flow/SelfieFlow\";\nimport VideoResetStyles from \"./VideoResetStyles\";\n\ninterface VideoProps {\n setSelfieData: (selfieData: SelfieCaptureData) => void;\n setStep: (step: number) => void;\n onBack?: () => void;\n btnBg?: string;\n btnText?: string;\n}\n\nconst Video = ({ setSelfieData, setStep, onBack, btnBg, btnText }: VideoProps) => {\n // Effet pour ajouter la classe au body lorsque le composant est monté\n useEffect(() => {\n // Empêcher le scroll sur le body lorsque la capture est active\n document.body.classList.add(\"selfie-active\");\n\n // Ajouter une classe pour gérer le plein écran sur mobile\n document.documentElement.classList.add(\"selfie-fullscreen\");\n\n return () => {\n // Nettoyer en enlevant les classes lors du démontage\n document.body.classList.remove(\"selfie-active\");\n document.documentElement.classList.remove(\"selfie-fullscreen\");\n };\n }, []);\n\n const handleSelfie = (e: Event) => {\n const data = (e as CustomEvent<SelfieCaptureData>).detail;\n\n // Attendre un court instant avant de passer à l'écran de confirmation\n // pour donner le temps à l'utilisateur de voir que la capture est terminée\n setTimeout(() => {\n setSelfieData(data);\n setStep(1); // Move to the next step after selfie capture\n }, 300);\n };\n\n return (\n <div className=\"w-full h-full overflow-hidden flex flex-col\">\n <VideoResetStyles />\n <SelfieFlow handleSelfie={handleSelfie} onBack={onBack} btnBg={btnBg} btnText={btnText} />\n </div>\n );\n};\n\nexport default Video;\n"],"names":["useEffect","_jsxs","_jsx","VideoResetStyles","SelfieFlow"],"mappings":";;;;;;;;;;;AAeA,IAAM,KAAK,GAAG,UAAC,EAA8D,EAAA;AAA5D,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;;AAE7D,IAAAA,eAAS,CAAC,YAAA;;QAER,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;;QAG5C,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;QAE3D,OAAO,YAAA;;YAEL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;YAC/C,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC;AAChE,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,IAAM,YAAY,GAAG,UAAC,CAAQ,EAAA;AAC5B,QAAA,IAAM,IAAI,GAAI,CAAoC,CAAC,MAAM;;;AAIzD,QAAA,UAAU,CAAC,YAAA;YACT,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC,EAAE,GAAG,CAAC;AACT,IAAA,CAAC;AAED,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,CAC1DC,cAAA,CAACC,wBAAgB,EAAA,EAAA,CAAG,EACpBD,cAAA,CAACE,kBAAU,IAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CACtF;AAEV;;;;"}
|
|
@@ -9,8 +9,8 @@ var React = require('react');
|
|
|
9
9
|
* le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.
|
|
10
10
|
*/
|
|
11
11
|
var useVideoRecorderStyles = function (btnBg, btnText) {
|
|
12
|
-
var resolvedBtnBg = "#11E5C5";
|
|
13
|
-
var resolvedBtnText = "#3C3C40";
|
|
12
|
+
var resolvedBtnBg = btnBg !== null && btnBg !== void 0 ? btnBg : "#11E5C5";
|
|
13
|
+
var resolvedBtnText = btnText !== null && btnText !== void 0 ? btnText : "#3C3C40";
|
|
14
14
|
React.useEffect(function () {
|
|
15
15
|
// Créer un élément style pour injecter des règles CSS
|
|
16
16
|
var styleElement = document.createElement("style");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = (btnBg?: string, btnText?: string) => {\n const resolvedBtnBg = btnBg ?? \"#11E5C5\";\n const resolvedBtnText = btnText ?? \"#3C3C40\";\n\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vidéo prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* Sélecteurs très spécifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Préserver les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ${resolvedBtnBg} !important;\n color: ${resolvedBtnText} !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ${resolvedBtnBg} !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n `;\n\n // Ajouter l'élément style au head du document\n document.head.appendChild(styleElement);\n\n // Nettoyer en supprimant l'élément style lors du démontage du composant\n return () => {\n const existingStyle = document.getElementById(\n \"video-recorder-custom-styles\"\n );\n if (existingStyle) {\n document.head.removeChild(existingStyle);\n }\n };\n }, [resolvedBtnBg, resolvedBtnText]);\n};\n\nexport default useVideoRecorderStyles;\n"],"names":["useEffect"],"mappings":";;;;;;AAEA;;;AAGG;AACH,IAAM,sBAAsB,GAAG,UAAC,KAAc,EAAE,OAAgB,EAAA;IAC9D,IAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = (btnBg?: string, btnText?: string) => {\n const resolvedBtnBg = btnBg ?? \"#11E5C5\";\n const resolvedBtnText = btnText ?? \"#3C3C40\";\n\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vidéo prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* Sélecteurs très spécifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Préserver les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ${resolvedBtnBg} !important;\n color: ${resolvedBtnText} !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ${resolvedBtnBg} !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n `;\n\n // Ajouter l'élément style au head du document\n document.head.appendChild(styleElement);\n\n // Nettoyer en supprimant l'élément style lors du démontage du composant\n return () => {\n const existingStyle = document.getElementById(\n \"video-recorder-custom-styles\"\n );\n if (existingStyle) {\n document.head.removeChild(existingStyle);\n }\n };\n }, [resolvedBtnBg, resolvedBtnText]);\n};\n\nexport default useVideoRecorderStyles;\n"],"names":["useEffect"],"mappings":";;;;;;AAEA;;;AAGG;AACH,IAAM,sBAAsB,GAAG,UAAC,KAAc,EAAE,OAAgB,EAAA;IAC9D,IAAM,aAAa,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS;IACxC,IAAM,eAAe,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,GAAI,SAAS;AAE5C,IAAAA,eAAS,CAAC,YAAA;;QAER,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,YAAY,CAAC,EAAE,GAAG,8BAA8B;;QAGhD,YAAY,CAAC,WAAW,GAAG,mpEAAA,CAAA,MAAA,CA6DH,aAAa,0CACxB,eAAe,EAAA,0MAAA,CAAA,CAAA,MAAA,CAOJ,aAAa,EAAA,gRAAA,CAUpC;;AAGD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;QAGvC,OAAO,YAAA;YACL,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAC3C,8BAA8B,CAC/B;YACD,IAAI,aAAa,EAAE;AACjB,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;YAC1C;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACtC;;;;"}
|
|
@@ -9,8 +9,9 @@ var InstructionsSelfie = require('./InstructionsSelfie.js');
|
|
|
9
9
|
var SelfieRecorder = require('./SelfieRecorder.js');
|
|
10
10
|
|
|
11
11
|
var SelfieFlow = function (_a) {
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var _b;
|
|
13
|
+
var handleSelfie = _a.handleSelfie, onBack = _a.onBack, btnBg = _a.btnBg, btnText = _a.btnText;
|
|
14
|
+
var _c = React.useState(-1), internalStep = _c[0], setInternalStep = _c[1]; // Commencer à -1 pour la pré-introduction
|
|
14
15
|
var handleBack = function () {
|
|
15
16
|
if (internalStep > -1) {
|
|
16
17
|
setInternalStep(internalStep - 1);
|
|
@@ -20,7 +21,10 @@ var SelfieFlow = function (_a) {
|
|
|
20
21
|
onBack();
|
|
21
22
|
}
|
|
22
23
|
};
|
|
23
|
-
return (jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col",
|
|
24
|
+
return (jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col", style: (_b = {},
|
|
25
|
+
_b["--dk-btn-bg"] = btnBg !== null && btnBg !== void 0 ? btnBg : "#11E5C5",
|
|
26
|
+
_b["--dk-btn-text"] = btnText !== null && btnText !== void 0 ? btnText : "#3C3C40",
|
|
27
|
+
_b), children: [internalStep === -1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(SelfiePreIntroduction.default, { onContinue: function () { return setInternalStep(0); }, onBack: handleBack }) })), internalStep === 0 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(InstructionsSelfie.default, { setStep: setInternalStep, onBack: function () { return setInternalStep(-1); } }) })), internalStep === 1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full overflow-hidden", children: jsxRuntime.jsx(SelfieRecorder.default, { handleSelfie: handleSelfie, btnBg: btnBg, btnText: btnText }) }))] }));
|
|
24
28
|
};
|
|
25
29
|
|
|
26
30
|
exports.default = SelfieFlow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieFlow.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieFlow.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport SelfiePreIntroduction from \"./SelfiePreIntroduction\";\nimport InstructionsSelfie from \"./InstructionsSelfie\";\nimport SelfieRecorder from \"./SelfieRecorder\";\n\ninterface SelfieFlowProps {\n handleSelfie: (e: Event) => void;\n onBack?: () => void;\n}\n\nconst SelfieFlow = ({ handleSelfie, onBack }: SelfieFlowProps) => {\n const [internalStep, setInternalStep] = useState(-1); // Commencer à -1 pour la pré-introduction\n\n const handleBack = () => {\n if (internalStep > -1) {\n setInternalStep(internalStep - 1);\n } else if (internalStep === -1 && onBack) {\n // Si on est à la première étape et qu'on a une fonction de retour parent, l'utiliser\n onBack();\n }\n };\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"SelfieFlow.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieFlow.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport SelfiePreIntroduction from \"./SelfiePreIntroduction\";\nimport InstructionsSelfie from \"./InstructionsSelfie\";\nimport SelfieRecorder from \"./SelfieRecorder\";\n\ninterface SelfieFlowProps {\n handleSelfie: (e: Event) => void;\n onBack?: () => void;\n btnBg?: string;\n btnText?: string;\n}\n\nconst SelfieFlow = ({ handleSelfie, onBack, btnBg, btnText }: SelfieFlowProps) => {\n const [internalStep, setInternalStep] = useState(-1); // Commencer à -1 pour la pré-introduction\n\n const handleBack = () => {\n if (internalStep > -1) {\n setInternalStep(internalStep - 1);\n } else if (internalStep === -1 && onBack) {\n // Si on est à la première étape et qu'on a une fonction de retour parent, l'utiliser\n onBack();\n }\n };\n\n return (\n <div\n className=\"h-full w-full flex flex-col\"\n style={{\n [\"--dk-btn-bg\" as string]: btnBg ?? \"#11E5C5\",\n [\"--dk-btn-text\" as string]: btnText ?? \"#3C3C40\",\n }}\n >\n {internalStep === -1 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <SelfiePreIntroduction\n onContinue={() => setInternalStep(0)}\n onBack={handleBack}\n />\n </div>\n )}\n {internalStep === 0 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <InstructionsSelfie\n setStep={setInternalStep}\n onBack={() => setInternalStep(-1)}\n />\n </div>\n )}\n {internalStep === 1 && (\n <div className=\"flex-1 flex flex-col h-full overflow-hidden\">\n <SelfieRecorder handleSelfie={handleSelfie} btnBg={btnBg} btnText={btnText} />\n </div>\n )}\n </div>\n );\n};\n\nexport default SelfieFlow;\n"],"names":["useState","_jsxs","_jsx","SelfiePreIntroduction","InstructionsSelfie","SelfieRecorder"],"mappings":";;;;;;;;;;AAYA,IAAM,UAAU,GAAG,UAAC,EAAyD,EAAA;;QAAvD,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;AAClD,IAAA,IAAA,EAAA,GAAkCA,cAAQ,CAAC,EAAE,CAAC,EAA7C,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAAgB,CAAC;AAErD,IAAA,IAAM,UAAU,GAAG,YAAA;AACjB,QAAA,IAAI,YAAY,GAAG,EAAE,EAAE;AACrB,YAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC;QACnC;AAAO,aAAA,IAAI,YAAY,KAAK,EAAE,IAAI,MAAM,EAAE;;AAExC,YAAA,MAAM,EAAE;QACV;AACF,IAAA,CAAC;AAED,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,GAAA,EAAA,GAAA,EAAA;YACH,EAAA,CAAC,aAAuB,IAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,SAAS;YAC7C,EAAA,CAAC,eAAyB,IAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,GAAI,SAAS;4BAGlD,YAAY,KAAK,EAAE,KAClBC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,eAACC,6BAAqB,EAAA,EACpB,UAAU,EAAE,YAAA,EAAM,OAAA,eAAe,CAAC,CAAC,CAAC,CAAA,CAAlB,CAAkB,EACpC,MAAM,EAAE,UAAU,EAAA,CAClB,GACE,CACP,EACA,YAAY,KAAK,CAAC,KACjBD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,YAC1CA,cAAA,CAACE,0BAAkB,IACjB,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,YAAA,EAAM,OAAA,eAAe,CAAC,EAAE,CAAC,CAAA,CAAnB,CAAmB,EAAA,CACjC,EAAA,CACE,CACP,EACA,YAAY,KAAK,CAAC,KACjBF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,eAACG,sBAAc,EAAA,EAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,GAC1E,CACP,CAAA,EAAA,CACG;AAEV;;;;"}
|
|
@@ -14,13 +14,8 @@ var sessionMemoryStore = require('../../../services/sessionMemoryStore.js');
|
|
|
14
14
|
var ButtonDesktop = require('../../ui/ButtonDesktop.js');
|
|
15
15
|
|
|
16
16
|
var processingSteps = [
|
|
17
|
-
{
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
key: "face_detection",
|
|
22
|
-
},
|
|
23
|
-
{ title: "Vérification de sécurité", subtitle: "Contrôle de vivacité" },
|
|
17
|
+
{ key: "analysis" },
|
|
18
|
+
{ key: "face_detection" },
|
|
24
19
|
{ key: "liveness" },
|
|
25
20
|
{ key: "finalization" },
|
|
26
21
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieProcessing.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieProcessing.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { codeToStep } from \"../../../services/utils\";\nimport type { SelfieCaptureData } from \"../../../types/selfie\";\nimport { analyzeSelfie } from \"../../../services/analysis\";\nimport { getActiveSessionId } from \"../../../services/sessionMemoryStore\";\nimport ButtonDesktop from \"../../ui/ButtonDesktop\";\n\ninterface SelfieProcessingProps {\n onProcessingComplete: (success: boolean) => void;\n selfieVideo: SelfieCaptureData | null;\n selfiePhoto: string | null;\n onRetake: () => void;\n onContinueAnyway?: () => void;\n}\n\nconst processingSteps = [\n {\n key: \"analysis\",\n },\n {\n key: \"face_detection\",\n },\n { title: \"Vérification de sécurité\", subtitle: \"Contrôle de vivacité\" },\n { key: \"liveness\" },\n { key: \"finalization\" },\n];\nconst SelfieProcessing = ({\n onProcessingComplete,\n selfieVideo,\n selfiePhoto,\n onRetake,\n onContinueAnyway,\n}: SelfieProcessingProps) => {\n const { t } = useI18n();\n const [currentStep, setCurrentStep] = useState(0);\n const [hasError, setHasError] = useState(false);\n const [isDone, setIsDone] = useState(false);\n const [conformityCode, setConformityCode] = useState<string | null>(null);\n\n const analysisStartedRef = useRef(false);\n useEffect(() => {\n // Prevent multiple analysis runs\n if (analysisStartedRef.current) return;\n if (!selfieVideo || !selfiePhoto) return;\n\n analysisStartedRef.current = true;\n\n // Timeout simple : 60 secondes pour tous\n const timeoutId = setTimeout(() => {\n if (!isDone) {\n console.error(\"⏰ Selfie analysis timeout after 60 seconds\");\n setHasError(true);\n setIsDone(true);\n onProcessingComplete(false);\n }\n }, 60000);\n\n const processFiles = async () => {\n const sessionId = getActiveSessionId();\n if (!sessionId) {\n console.error(\"❌ No session ID found\");\n setHasError(true);\n onProcessingComplete(false);\n setIsDone(true);\n clearTimeout(timeoutId);\n return;\n }\n\n console.log(\"🚀 Starting selfie analysis...\");\n\n try {\n // Délai minimum simple : 2 secondes\n const [response] = await Promise.all([\n analyzeSelfie(sessionId, selfieVideo, selfiePhoto),\n new Promise((resolve) => setTimeout(resolve, 2000)),\n ]);\n\n console.log(\"✅ Analysis response:\", response);\n clearTimeout(timeoutId);\n\n // Handle Unissey response format\n let isSuccess = false;\n let conformityCodeToSet = \"4\"; // Default to error\n\n if (response && response.data) {\n // Check if analysis was successful based on real Unissey response structure\n const data = response.data;\n const details = data.details;\n const faceComparison = details?.face_comparison;\n\n // Success: face match with high confidence\n if (\n data.is_match &&\n faceComparison?.result === \"match\"\n // faceComparison?.confidence_level === \"high\" Pas assez explicit\n ) {\n isSuccess = true;\n conformityCodeToSet = \"1.0\"; // Success code\n } else if (details) {\n // Check specific failure reasons\n if (faceComparison?.result !== \"match\") {\n conformityCodeToSet = \"2.0\"; // Face comparison failed\n } else if (faceComparison?.confidence_level !== \"high\") {\n conformityCodeToSet = \"3.0\"; // Low confidence\n } else {\n conformityCodeToSet = \"4.0\"; // Generic error\n }\n }\n }\n\n console.log(\"📊 Selfie analysis result:\", {\n isSuccess,\n conformityCode: conformityCodeToSet,\n isMatch: response?.data?.is_match,\n confidenceLevel:\n response?.data?.details?.face_comparison?.confidence_level,\n comparisonResult: response?.data?.details?.face_comparison?.result,\n });\n\n setConformityCode(conformityCodeToSet);\n setIsDone(true);\n\n // Don't call onProcessingComplete here - let the animation effect handle it\n } catch (error) {\n console.error(\"💥 Selfie analysis failed:\", error);\n clearTimeout(timeoutId);\n setHasError(true);\n setIsDone(true);\n onProcessingComplete(false);\n }\n };\n\n processFiles();\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [onProcessingComplete, selfieVideo, selfiePhoto, isDone]);\n\n useEffect(() => {\n // While analysis is not finished, stay at step 0\n if (!isDone && !hasError) {\n setCurrentStep(0);\n return;\n }\n // We want stepToStop to be the step in error (the one corresponding to conformityCode)\n let stepToStop = codeToStep(conformityCode || \"4\");\n // If codeToStep returns 0 (generic error), stop at the first step\n if (stepToStop === 0) stepToStop = 1;\n console.log(\"Step to stop (error):\", stepToStop);\n\n // When analysis is finished (success or error), start the animation\n const interval = setInterval(() => {\n setCurrentStep((prev) => {\n if (prev < stepToStop - 1) {\n return prev + 1;\n } else {\n clearInterval(interval);\n if (stepToStop < 4) setHasError(true);\n onProcessingComplete(stepToStop === 4);\n return prev; // Stop at the step in error\n }\n });\n }, 500); // Adjust the speed of the animation\n return () => clearInterval(interval);\n }, [onProcessingComplete, hasError, isDone, conformityCode]);\n\n return (\n <div className=\"flex flex-col justify-between h-full w-full\">\n <div className=\"flex-1 px-4 py-6 pt-11 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n <div className=\"text-center space-y-4\">\n <Title className=\"text-xl md:text-2xl lg:text-3xl\">\n {hasError\n ? t(\"selfie.processing.error_title\", \"Échec de l'analyse\")\n : t(\"selfie.processing.title\", \"Analyse en cours\")}\n </Title>\n <Subtitle className=\"text-sm text-gray-600 leading-relaxed\">\n {hasError\n ? t(\n \"selfie.processing.error_subtitle\",\n \"Une erreur est survenue lors de l'analyse du selfie. Veuillez réessayer.\",\n )\n : t(\n \"selfie.processing.subtitle\",\n \"Nous analysons votre selfie. Cela peut prendre quelques instants.\",\n )}\n </Subtitle>\n </div>\n\n <div className=\"w-full\">\n <div className=\"space-y-5\">\n {processingSteps.map(\n (step, index) =>\n step.key && (\n <div key={index} className=\"flex items-start\">\n <div className=\"mr-4 mt-1 flex-shrink-0\">\n {hasError && index === currentStep ? (\n // Step in error - red cross\n <div className=\"flex items-center justify-center w-6 h-6 rounded-full bg-red-500 text-white text-xs font-bold\">\n ×\n </div>\n ) : index < currentStep ? (\n // Completed step - green check\n <div className=\"flex items-center justify-center w-6 h-6 rounded-full bg-[#11E5C5] text-white text-xs\">\n ✓\n </div>\n ) : index === currentStep ? (\n // Current step - spinner\n <div className=\"w-6 h-6 rounded-full border-2 border-t-[#11E5C5] border-r-[#11E5C5] border-b-[#11E5C5] border-l-transparent animate-spin\"></div>\n ) : (\n // Upcoming step - gray circle\n <div className=\"w-6 h-6 rounded-full border-2 border-gray-300\"></div>\n )}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"font-medium text-[#3C3C40] text-sm\">\n {t(`selfie.processing.steps.${step.key}.title`)}\n </p>\n <p className=\"text-xs text-gray-500 mt-1\">\n {t(`selfie.processing.steps.${step.key}.subtitle`)}\n </p>\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n\n <div className=\"w-full\">\n <div className=\"bg-gray-200 rounded-full h-2\">\n <div\n className={\n hasError\n ? \"bg-red-500 h-2 rounded-full transition-all duration-500 ease-out\"\n : \"bg-[#11E5C5] h-2 rounded-full transition-all duration-500 ease-out\"\n }\n style={{\n width: `${\n ((currentStep + 1) / processingSteps.length) * 100\n }%`,\n }}\n ></div>\n </div>\n <p className=\"text-xs text-gray-500 mt-2 text-center\">\n {t(\"selfie.processing.step_of\", {\n current: currentStep + 1,\n total: processingSteps.length,\n })}\n </p>\n </div>\n\n {/* Footer with buttons */}\n {hasError && (\n <div className=\"sticky bottom-0 bg-white border-t border-gray-100 p-4 md:p-6\">\n <div className=\"w-full max-w-md mx-auto\">\n {/* Mobile layout - stacked buttons */}\n <div className=\"flex flex-col space-y-3 md:hidden\">\n {onContinueAnyway && (\n <ButtonDesktop type=\"back\" onClick={onContinueAnyway}>\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n <ButtonDesktop type=\"continue\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </ButtonDesktop>\n </div>\n\n {/* Desktop layout - horizontal buttons */}\n <div className=\"hidden md:flex gap-3 justify-between items-center\">\n {onContinueAnyway && (\n <ButtonDesktop type=\"back\" onClick={onContinueAnyway}>\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n <ButtonDesktop type=\"continue\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </ButtonDesktop>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieProcessing;\n"],"names":["useI18n","useState","useRef","useEffect","__awaiter","getActiveSessionId","analyzeSelfie","codeToStep","_jsx","_jsxs","Title","Subtitle","ButtonDesktop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelfieProcessing.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieProcessing.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { codeToStep } from \"../../../services/utils\";\nimport type { SelfieCaptureData } from \"../../../types/selfie\";\nimport { analyzeSelfie } from \"../../../services/analysis\";\nimport { getActiveSessionId } from \"../../../services/sessionMemoryStore\";\nimport ButtonDesktop from \"../../ui/ButtonDesktop\";\n\ninterface SelfieProcessingProps {\n onProcessingComplete: (success: boolean) => void;\n selfieVideo: SelfieCaptureData | null;\n selfiePhoto: string | null;\n onRetake: () => void;\n onContinueAnyway?: () => void;\n}\n\nconst processingSteps = [\n { key: \"analysis\" },\n { key: \"face_detection\" },\n { key: \"liveness\" },\n { key: \"finalization\" },\n];\nconst SelfieProcessing = ({\n onProcessingComplete,\n selfieVideo,\n selfiePhoto,\n onRetake,\n onContinueAnyway,\n}: SelfieProcessingProps) => {\n const { t } = useI18n();\n const [currentStep, setCurrentStep] = useState(0);\n const [hasError, setHasError] = useState(false);\n const [isDone, setIsDone] = useState(false);\n const [conformityCode, setConformityCode] = useState<string | null>(null);\n\n const analysisStartedRef = useRef(false);\n useEffect(() => {\n // Prevent multiple analysis runs\n if (analysisStartedRef.current) return;\n if (!selfieVideo || !selfiePhoto) return;\n\n analysisStartedRef.current = true;\n\n // Timeout simple : 60 secondes pour tous\n const timeoutId = setTimeout(() => {\n if (!isDone) {\n console.error(\"⏰ Selfie analysis timeout after 60 seconds\");\n setHasError(true);\n setIsDone(true);\n onProcessingComplete(false);\n }\n }, 60000);\n\n const processFiles = async () => {\n const sessionId = getActiveSessionId();\n if (!sessionId) {\n console.error(\"❌ No session ID found\");\n setHasError(true);\n onProcessingComplete(false);\n setIsDone(true);\n clearTimeout(timeoutId);\n return;\n }\n\n console.log(\"🚀 Starting selfie analysis...\");\n\n try {\n // Délai minimum simple : 2 secondes\n const [response] = await Promise.all([\n analyzeSelfie(sessionId, selfieVideo, selfiePhoto),\n new Promise((resolve) => setTimeout(resolve, 2000)),\n ]);\n\n console.log(\"✅ Analysis response:\", response);\n clearTimeout(timeoutId);\n\n // Handle Unissey response format\n let isSuccess = false;\n let conformityCodeToSet = \"4\"; // Default to error\n\n if (response && response.data) {\n // Check if analysis was successful based on real Unissey response structure\n const data = response.data;\n const details = data.details;\n const faceComparison = details?.face_comparison;\n\n // Success: face match with high confidence\n if (\n data.is_match &&\n faceComparison?.result === \"match\"\n // faceComparison?.confidence_level === \"high\" Pas assez explicit\n ) {\n isSuccess = true;\n conformityCodeToSet = \"1.0\"; // Success code\n } else if (details) {\n // Check specific failure reasons\n if (faceComparison?.result !== \"match\") {\n conformityCodeToSet = \"2.0\"; // Face comparison failed\n } else if (faceComparison?.confidence_level !== \"high\") {\n conformityCodeToSet = \"3.0\"; // Low confidence\n } else {\n conformityCodeToSet = \"4.0\"; // Generic error\n }\n }\n }\n\n console.log(\"📊 Selfie analysis result:\", {\n isSuccess,\n conformityCode: conformityCodeToSet,\n isMatch: response?.data?.is_match,\n confidenceLevel:\n response?.data?.details?.face_comparison?.confidence_level,\n comparisonResult: response?.data?.details?.face_comparison?.result,\n });\n\n setConformityCode(conformityCodeToSet);\n setIsDone(true);\n\n // Don't call onProcessingComplete here - let the animation effect handle it\n } catch (error) {\n console.error(\"💥 Selfie analysis failed:\", error);\n clearTimeout(timeoutId);\n setHasError(true);\n setIsDone(true);\n onProcessingComplete(false);\n }\n };\n\n processFiles();\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [onProcessingComplete, selfieVideo, selfiePhoto, isDone]);\n\n useEffect(() => {\n // While analysis is not finished, stay at step 0\n if (!isDone && !hasError) {\n setCurrentStep(0);\n return;\n }\n // We want stepToStop to be the step in error (the one corresponding to conformityCode)\n let stepToStop = codeToStep(conformityCode || \"4\");\n // If codeToStep returns 0 (generic error), stop at the first step\n if (stepToStop === 0) stepToStop = 1;\n console.log(\"Step to stop (error):\", stepToStop);\n\n // When analysis is finished (success or error), start the animation\n const interval = setInterval(() => {\n setCurrentStep((prev) => {\n if (prev < stepToStop - 1) {\n return prev + 1;\n } else {\n clearInterval(interval);\n if (stepToStop < 4) setHasError(true);\n onProcessingComplete(stepToStop === 4);\n return prev; // Stop at the step in error\n }\n });\n }, 500); // Adjust the speed of the animation\n return () => clearInterval(interval);\n }, [onProcessingComplete, hasError, isDone, conformityCode]);\n\n return (\n <div className=\"flex flex-col justify-between h-full w-full\">\n <div className=\"flex-1 px-4 py-6 pt-11 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n <div className=\"text-center space-y-4\">\n <Title className=\"text-xl md:text-2xl lg:text-3xl\">\n {hasError\n ? t(\"selfie.processing.error_title\", \"Échec de l'analyse\")\n : t(\"selfie.processing.title\", \"Analyse en cours\")}\n </Title>\n <Subtitle className=\"text-sm text-gray-600 leading-relaxed\">\n {hasError\n ? t(\n \"selfie.processing.error_subtitle\",\n \"Une erreur est survenue lors de l'analyse du selfie. Veuillez réessayer.\",\n )\n : t(\n \"selfie.processing.subtitle\",\n \"Nous analysons votre selfie. Cela peut prendre quelques instants.\",\n )}\n </Subtitle>\n </div>\n\n <div className=\"w-full\">\n <div className=\"space-y-5\">\n {processingSteps.map(\n (step, index) =>\n step.key && (\n <div key={index} className=\"flex items-start\">\n <div className=\"mr-4 mt-1 flex-shrink-0\">\n {hasError && index === currentStep ? (\n // Step in error - red cross\n <div className=\"flex items-center justify-center w-6 h-6 rounded-full bg-red-500 text-white text-xs font-bold\">\n ×\n </div>\n ) : index < currentStep ? (\n // Completed step - green check\n <div className=\"flex items-center justify-center w-6 h-6 rounded-full bg-[#11E5C5] text-white text-xs\">\n ✓\n </div>\n ) : index === currentStep ? (\n // Current step - spinner\n <div className=\"w-6 h-6 rounded-full border-2 border-t-[#11E5C5] border-r-[#11E5C5] border-b-[#11E5C5] border-l-transparent animate-spin\"></div>\n ) : (\n // Upcoming step - gray circle\n <div className=\"w-6 h-6 rounded-full border-2 border-gray-300\"></div>\n )}\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"font-medium text-[#3C3C40] text-sm\">\n {t(`selfie.processing.steps.${step.key}.title`)}\n </p>\n <p className=\"text-xs text-gray-500 mt-1\">\n {t(`selfie.processing.steps.${step.key}.subtitle`)}\n </p>\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n\n <div className=\"w-full\">\n <div className=\"bg-gray-200 rounded-full h-2\">\n <div\n className={\n hasError\n ? \"bg-red-500 h-2 rounded-full transition-all duration-500 ease-out\"\n : \"bg-[#11E5C5] h-2 rounded-full transition-all duration-500 ease-out\"\n }\n style={{\n width: `${\n ((currentStep + 1) / processingSteps.length) * 100\n }%`,\n }}\n ></div>\n </div>\n <p className=\"text-xs text-gray-500 mt-2 text-center\">\n {t(\"selfie.processing.step_of\", {\n current: currentStep + 1,\n total: processingSteps.length,\n })}\n </p>\n </div>\n\n {/* Footer with buttons */}\n {hasError && (\n <div className=\"sticky bottom-0 bg-white border-t border-gray-100 p-4 md:p-6\">\n <div className=\"w-full max-w-md mx-auto\">\n {/* Mobile layout - stacked buttons */}\n <div className=\"flex flex-col space-y-3 md:hidden\">\n {onContinueAnyway && (\n <ButtonDesktop type=\"back\" onClick={onContinueAnyway}>\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n <ButtonDesktop type=\"continue\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </ButtonDesktop>\n </div>\n\n {/* Desktop layout - horizontal buttons */}\n <div className=\"hidden md:flex gap-3 justify-between items-center\">\n {onContinueAnyway && (\n <ButtonDesktop type=\"back\" onClick={onContinueAnyway}>\n {t(\"errors.continue_anyway\", \"Poursuivre tout de même\")}\n </ButtonDesktop>\n )}\n <ButtonDesktop type=\"continue\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </ButtonDesktop>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieProcessing;\n"],"names":["useI18n","useState","useRef","useEffect","__awaiter","getActiveSessionId","analyzeSelfie","codeToStep","_jsx","_jsxs","Title","Subtitle","ButtonDesktop"],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ var SelfieRecorder = function (_a) {
|
|
|
28
28
|
var _g = React.useState("idle"), recordingState = _g[0], setRecordingState = _g[1];
|
|
29
29
|
var capturedThumbnailRef = React.useRef(null);
|
|
30
30
|
var _h = useLiveFrameCapture.useLiveFrameCapture(), captureFrame = _h.captureFrame, cleanup = _h.cleanup;
|
|
31
|
-
useVideoRecorderStyles.default();
|
|
31
|
+
useVideoRecorderStyles.default(btnBg, btnText);
|
|
32
32
|
React.useEffect(function () {
|
|
33
33
|
document.body.classList.add("recording-selfie");
|
|
34
34
|
var cleanupObserver = videoElementStyles.setupVideoElementsObserver();
|
|
@@ -175,7 +175,7 @@ var SelfieRecorder = function (_a) {
|
|
|
175
175
|
"data-playsinline": "true",
|
|
176
176
|
"data-autoplay": "true",
|
|
177
177
|
"data-muted": "true"
|
|
178
|
-
}), { strings: unisseyStrings.getUnisseyStrings(t) })) }), jsxRuntime.jsx("div", { className: "shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative", style: { zIndex: 9999 }, children: jsxRuntime.jsxs("div", { className: "max-w-md mx-auto", children: [jsxRuntime.jsx("div", { className: "text-center text-xs text-gray-400 mt-3", children: t("selfie.recorder.note") }), jsxRuntime.jsxs(Button.default, { onClick: recordStarting, className: "w-full py-3 md:py-4 relative selfie-button", disabled: disableButton || !recorderReady, children: [recordingState === "idle" && t("selfie.recorder.start"), recordingState === "preparing" && t("selfie.recorder.preparing"), recordingState === "recording" && (jsxRuntime.jsxs("span", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("span", { className: "mr-2", children: t("selfie.recorder.recording_label") }), jsxRuntime.jsxs("span", { className: "flex space-x-1 loading-dots", children: [jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" }), jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" }), jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" })] })] })), recordingState === "processing" && t("selfie.recorder.processing")] })] }) })] }));
|
|
178
|
+
}), { strings: unisseyStrings.getUnisseyStrings(t) })) }), jsxRuntime.jsx("div", { className: "shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative", style: { zIndex: 9999 }, children: jsxRuntime.jsxs("div", { className: "max-w-md mx-auto", children: [jsxRuntime.jsx("div", { className: "text-center text-xs text-gray-400 mt-3", children: t("selfie.recorder.note") }), jsxRuntime.jsxs(Button.default, { onClick: recordStarting, className: "w-full py-3 md:py-4 relative selfie-button", disabled: disableButton || !recorderReady, style: { backgroundColor: btnBg !== null && btnBg !== void 0 ? btnBg : "#11E5C5", color: btnText !== null && btnText !== void 0 ? btnText : "#3C3C40" }, children: [recordingState === "idle" && t("selfie.recorder.start"), recordingState === "preparing" && t("selfie.recorder.preparing"), recordingState === "recording" && (jsxRuntime.jsxs("span", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("span", { className: "mr-2", children: t("selfie.recorder.recording_label") }), jsxRuntime.jsxs("span", { className: "flex space-x-1 loading-dots", children: [jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" }), jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" }), jsxRuntime.jsx("span", { className: "h-1 w-1 bg-white rounded-full" })] })] })), recordingState === "processing" && t("selfie.recorder.processing")] })] }) })] }));
|
|
179
179
|
};
|
|
180
180
|
|
|
181
181
|
exports.default = SelfieRecorder;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieRecorder.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieRecorder.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\";\nimport { AcquisitionPreset, VideoRecorder } from \"@unissey-web/sdk-react\";\nimport Button from \"../../ui/Button\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport useVideoRecorderStyles from \"../hooks/useVideoRecorderStyles\";\nimport { setupVideoElementsObserver } from \"../utils/videoElementStyles\";\nimport { delay, isIOS, waitForVideoFrame, getRecorderVideoElement } from \"../utils/selfieCaptureUtils\";\nimport { useLiveFrameCapture } from \"../hooks/useLiveFrameCapture\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { getUnisseyStrings } from \"../utils/unisseyStrings\";\n\ninterface SelfieRecorderProps {\n handleSelfie: (e: Event) => void;\n onBeginCapture?: () => void;\n isCapturing?: boolean;\n btnBg?: string;\n btnText?: string;\n}\n\ninterface VideoRecorderRef extends HTMLElement {\n capture: () => void;\n}\n\nconst SelfieRecorder = ({\n handleSelfie,\n onBeginCapture = () => { },\n isCapturing = false,\n btnBg,\n btnText,\n}: SelfieRecorderProps) => {\n const { t } = useI18n();\n const isMobile = useIsMobile(768);\n const recorderRef = useRef<VideoRecorderRef | null>(null);\n const [disableButton, setDisableButton] = useState(false);\n const [recorderReady, setRecorderReady] = useState(false);\n const [recordingState, setRecordingState] = useState<\n \"idle\" | \"preparing\" | \"recording\" | \"processing\"\n >(\"idle\");\n const capturedThumbnailRef = useRef<string | null>(null);\n const { captureFrame, cleanup } = useLiveFrameCapture();\n\n useVideoRecorderStyles();\n\n useEffect(() => {\n document.body.classList.add(\"recording-selfie\");\n const cleanupObserver = setupVideoElementsObserver();\n\n // iOS-specific fix: Add required attributes to video elements after mount\n if (isIOS()) {\n const addIOSVideoAttributes = () => {\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder) => {\n // Try to access shadow DOM and video elements\n try {\n const shadowRoot = (recorder as any).shadowRoot;\n if (shadowRoot) {\n const videoElements = shadowRoot.querySelectorAll(\"video\");\n videoElements.forEach((video: HTMLVideoElement) => {\n video.setAttribute(\"playsinline\", \"true\");\n video.setAttribute(\"autoplay\", \"true\");\n video.setAttribute(\"muted\", \"true\");\n // Ensure video plays inline and autoplays\n video.playsInline = true;\n video.autoplay = true;\n video.muted = true;\n });\n }\n } catch (error) {\n console.log(\"Could not access shadow DOM:\", error);\n }\n\n // Also set attributes on the component itself\n recorder.setAttribute(\"playsinline\", \"true\");\n recorder.setAttribute(\"autoplay\", \"true\");\n recorder.setAttribute(\"muted\", \"true\");\n });\n };\n\n // Apply immediately and also after a delay to catch dynamically created elements\n addIOSVideoAttributes();\n const iosTimeout = setTimeout(addIOSVideoAttributes, 500);\n const iosInterval = setInterval(addIOSVideoAttributes, 1000);\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n clearTimeout(iosTimeout);\n clearInterval(iosInterval);\n };\n }\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n };\n }, [cleanup]);\n\n const recordStarting = () => {\n if (!recorderReady || recordingState !== \"idle\") return;\n onBeginCapture();\n setRecordingState(\"preparing\");\n setDisableButton(true);\n\n const triggerCapture = async () => {\n try {\n await waitForVideoFrame(recorderRef.current);\n await delay(200);\n setRecordingState(\"recording\");\n\n // Capture a frame from the live video during recording (after a short delay)\n setTimeout(() => {\n const videoElement = getRecorderVideoElement(recorderRef.current);\n if (videoElement) {\n const thumbnail = captureFrame(videoElement);\n capturedThumbnailRef.current = thumbnail;\n }\n }, 1000); // Capture frame 1 second into recording\n\n recorderRef.current?.capture();\n } catch (error) {\n console.error(\"SelfieRecorder: failed to capture frame\", error);\n setRecordingState(\"idle\");\n setDisableButton(false);\n }\n };\n\n void triggerCapture();\n };\n\n useEffect(() => {\n const interval = setInterval(() => {\n const status = (recorderRef.current as any)?.sdkJsStatus;\n const isReady = status === \"ready\" || status === \"running\";\n setRecorderReady((prev) => (prev !== isReady ? isReady : prev));\n }, 500);\n return () => clearInterval(interval);\n }, []);\n\n const handleRecordCompleted = (e: Event) => {\n const customEvent = e as CustomEvent<{ media?: Blob; metadata?: string }>;\n if (!customEvent.detail?.media || customEvent.detail.media.size === 0) {\n console.error(\"❌ No valid media captured\");\n\n // iOS-specific debugging\n if (isIOS()) {\n console.log(\"🍎 iOS detected - checking video elements for proper attributes\");\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder, index) => {\n console.log(`VideoRecorder ${index}:`, {\n playsinline: recorder.getAttribute(\"playsinline\"),\n autoplay: recorder.getAttribute(\"autoplay\"),\n muted: recorder.getAttribute(\"muted\")\n });\n });\n }\n\n setRecordingState(\"idle\");\n setDisableButton(false);\n return;\n }\n\n // Attach the captured thumbnail to the event\n const enhancedEvent = new CustomEvent('record-completed', {\n detail: {\n media: customEvent.detail.media,\n metadata: customEvent.detail.metadata || '',\n thumbnail: capturedThumbnailRef.current || undefined,\n }\n });\n\n setRecordingState(\"processing\");\n handleSelfie(enhancedEvent);\n };\n\n return (\n <div\n className=\"selfie selfie-recorder-root flex flex-col\"\n style={{\n [\"--dk-btn-bg\" as string]: btnBg ?? \"#11E5C5\",\n [\"--dk-btn-text\" as string]: btnText ?? \"#3C3C40\",\n position: isMobile ? \"fixed\" : \"relative\",\n inset: isMobile ? 0 : \"auto\",\n zIndex: isMobile ? 50 : \"auto\",\n height: \"100%\",\n width: \"100%\",\n }}\n >\n <div className=\"p-4 text-center bg-white shrink-0\">\n <Title className=\"text-lg md:text-xl mb-1\">{t(\"selfie.recorder.title\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 md:text-sm\">{t(\"selfie.recorder.subtitle\")}</Subtitle>\n </div>\n\n <div className=\"video-container flex-1 relative overflow-hidden\">\n <VideoRecorder\n ref={recorderRef as any}\n preset={AcquisitionPreset.SELFIE_OPTIMIZED}\n hideCaptureBtn\n faceChecker=\"enabled\"\n disableDebugMode\n onRecordCompleted={handleRecordCompleted}\n onRecord={recordStarting}\n style={{ width: \"100%\", height: \"100%\" }}\n className=\"video-recorder-no-radius w-full h-full\"\n {...(isIOS() && {\n \"data-playsinline\": \"true\",\n \"data-autoplay\": \"true\",\n \"data-muted\": \"true\"\n })}\n strings={getUnisseyStrings(t)}\n />\n </div>\n\n <div className=\"shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative\" style={{ zIndex: 9999 }}>\n <div className=\"max-w-md mx-auto\">\n <div className=\"text-center text-xs text-gray-400 mt-3\">\n {t(\"selfie.recorder.note\")}\n </div>\n\n <Button\n onClick={recordStarting}\n className=\"w-full py-3 md:py-4 relative selfie-button\"\n disabled={disableButton || !recorderReady}\n >\n {recordingState === \"idle\" && t(\"selfie.recorder.start\")}\n {recordingState === \"preparing\" && t(\"selfie.recorder.preparing\")}\n {recordingState === \"recording\" && (\n <span className=\"flex items-center justify-center\">\n <span className=\"mr-2\">{t(\"selfie.recorder.recording_label\")}</span>\n <span className=\"flex space-x-1 loading-dots\">\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n </span>\n </span>\n )}\n {recordingState === \"processing\" && t(\"selfie.recorder.processing\")}\n </Button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieRecorder;\n"],"names":["useI18n","useIsMobile","useRef","useState","useLiveFrameCapture","useVideoRecorderStyles","useEffect","setupVideoElementsObserver","isIOS","__awaiter","waitForVideoFrame","delay","getRecorderVideoElement","_jsxs","_jsx","Title","Subtitle","VideoRecorder","__assign","AcquisitionPreset","getUnisseyStrings","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelfieRecorder.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieRecorder.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\";\nimport { AcquisitionPreset, VideoRecorder } from \"@unissey-web/sdk-react\";\nimport Button from \"../../ui/Button\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport useVideoRecorderStyles from \"../hooks/useVideoRecorderStyles\";\nimport { setupVideoElementsObserver } from \"../utils/videoElementStyles\";\nimport { delay, isIOS, waitForVideoFrame, getRecorderVideoElement } from \"../utils/selfieCaptureUtils\";\nimport { useLiveFrameCapture } from \"../hooks/useLiveFrameCapture\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { getUnisseyStrings } from \"../utils/unisseyStrings\";\n\ninterface SelfieRecorderProps {\n handleSelfie: (e: Event) => void;\n onBeginCapture?: () => void;\n isCapturing?: boolean;\n btnBg?: string;\n btnText?: string;\n}\n\ninterface VideoRecorderRef extends HTMLElement {\n capture: () => void;\n}\n\nconst SelfieRecorder = ({\n handleSelfie,\n onBeginCapture = () => { },\n isCapturing = false,\n btnBg,\n btnText,\n}: SelfieRecorderProps) => {\n const { t } = useI18n();\n const isMobile = useIsMobile(768);\n const recorderRef = useRef<VideoRecorderRef | null>(null);\n const [disableButton, setDisableButton] = useState(false);\n const [recorderReady, setRecorderReady] = useState(false);\n const [recordingState, setRecordingState] = useState<\n \"idle\" | \"preparing\" | \"recording\" | \"processing\"\n >(\"idle\");\n const capturedThumbnailRef = useRef<string | null>(null);\n const { captureFrame, cleanup } = useLiveFrameCapture();\n\n useVideoRecorderStyles(btnBg, btnText);\n\n useEffect(() => {\n document.body.classList.add(\"recording-selfie\");\n const cleanupObserver = setupVideoElementsObserver();\n\n // iOS-specific fix: Add required attributes to video elements after mount\n if (isIOS()) {\n const addIOSVideoAttributes = () => {\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder) => {\n // Try to access shadow DOM and video elements\n try {\n const shadowRoot = (recorder as any).shadowRoot;\n if (shadowRoot) {\n const videoElements = shadowRoot.querySelectorAll(\"video\");\n videoElements.forEach((video: HTMLVideoElement) => {\n video.setAttribute(\"playsinline\", \"true\");\n video.setAttribute(\"autoplay\", \"true\");\n video.setAttribute(\"muted\", \"true\");\n // Ensure video plays inline and autoplays\n video.playsInline = true;\n video.autoplay = true;\n video.muted = true;\n });\n }\n } catch (error) {\n console.log(\"Could not access shadow DOM:\", error);\n }\n\n // Also set attributes on the component itself\n recorder.setAttribute(\"playsinline\", \"true\");\n recorder.setAttribute(\"autoplay\", \"true\");\n recorder.setAttribute(\"muted\", \"true\");\n });\n };\n\n // Apply immediately and also after a delay to catch dynamically created elements\n addIOSVideoAttributes();\n const iosTimeout = setTimeout(addIOSVideoAttributes, 500);\n const iosInterval = setInterval(addIOSVideoAttributes, 1000);\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n clearTimeout(iosTimeout);\n clearInterval(iosInterval);\n };\n }\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n };\n }, [cleanup]);\n\n const recordStarting = () => {\n if (!recorderReady || recordingState !== \"idle\") return;\n onBeginCapture();\n setRecordingState(\"preparing\");\n setDisableButton(true);\n\n const triggerCapture = async () => {\n try {\n await waitForVideoFrame(recorderRef.current);\n await delay(200);\n setRecordingState(\"recording\");\n\n // Capture a frame from the live video during recording (after a short delay)\n setTimeout(() => {\n const videoElement = getRecorderVideoElement(recorderRef.current);\n if (videoElement) {\n const thumbnail = captureFrame(videoElement);\n capturedThumbnailRef.current = thumbnail;\n }\n }, 1000); // Capture frame 1 second into recording\n\n recorderRef.current?.capture();\n } catch (error) {\n console.error(\"SelfieRecorder: failed to capture frame\", error);\n setRecordingState(\"idle\");\n setDisableButton(false);\n }\n };\n\n void triggerCapture();\n };\n\n useEffect(() => {\n const interval = setInterval(() => {\n const status = (recorderRef.current as any)?.sdkJsStatus;\n const isReady = status === \"ready\" || status === \"running\";\n setRecorderReady((prev) => (prev !== isReady ? isReady : prev));\n }, 500);\n return () => clearInterval(interval);\n }, []);\n\n const handleRecordCompleted = (e: Event) => {\n const customEvent = e as CustomEvent<{ media?: Blob; metadata?: string }>;\n if (!customEvent.detail?.media || customEvent.detail.media.size === 0) {\n console.error(\"❌ No valid media captured\");\n\n // iOS-specific debugging\n if (isIOS()) {\n console.log(\"🍎 iOS detected - checking video elements for proper attributes\");\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder, index) => {\n console.log(`VideoRecorder ${index}:`, {\n playsinline: recorder.getAttribute(\"playsinline\"),\n autoplay: recorder.getAttribute(\"autoplay\"),\n muted: recorder.getAttribute(\"muted\")\n });\n });\n }\n\n setRecordingState(\"idle\");\n setDisableButton(false);\n return;\n }\n\n // Attach the captured thumbnail to the event\n const enhancedEvent = new CustomEvent('record-completed', {\n detail: {\n media: customEvent.detail.media,\n metadata: customEvent.detail.metadata || '',\n thumbnail: capturedThumbnailRef.current || undefined,\n }\n });\n\n setRecordingState(\"processing\");\n handleSelfie(enhancedEvent);\n };\n\n return (\n <div\n className=\"selfie selfie-recorder-root flex flex-col\"\n style={{\n [\"--dk-btn-bg\" as string]: btnBg ?? \"#11E5C5\",\n [\"--dk-btn-text\" as string]: btnText ?? \"#3C3C40\",\n position: isMobile ? \"fixed\" : \"relative\",\n inset: isMobile ? 0 : \"auto\",\n zIndex: isMobile ? 50 : \"auto\",\n height: \"100%\",\n width: \"100%\",\n }}\n >\n <div className=\"p-4 text-center bg-white shrink-0\">\n <Title className=\"text-lg md:text-xl mb-1\">{t(\"selfie.recorder.title\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 md:text-sm\">{t(\"selfie.recorder.subtitle\")}</Subtitle>\n </div>\n\n <div className=\"video-container flex-1 relative overflow-hidden\">\n <VideoRecorder\n ref={recorderRef as any}\n preset={AcquisitionPreset.SELFIE_OPTIMIZED}\n hideCaptureBtn\n faceChecker=\"enabled\"\n disableDebugMode\n onRecordCompleted={handleRecordCompleted}\n onRecord={recordStarting}\n style={{ width: \"100%\", height: \"100%\" }}\n className=\"video-recorder-no-radius w-full h-full\"\n {...(isIOS() && {\n \"data-playsinline\": \"true\",\n \"data-autoplay\": \"true\",\n \"data-muted\": \"true\"\n })}\n strings={getUnisseyStrings(t)}\n />\n </div>\n\n <div className=\"shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative\" style={{ zIndex: 9999 }}>\n <div className=\"max-w-md mx-auto\">\n <div className=\"text-center text-xs text-gray-400 mt-3\">\n {t(\"selfie.recorder.note\")}\n </div>\n\n <Button\n onClick={recordStarting}\n className=\"w-full py-3 md:py-4 relative selfie-button\"\n disabled={disableButton || !recorderReady}\n style={{ backgroundColor: btnBg ?? \"#11E5C5\", color: btnText ?? \"#3C3C40\" }}\n >\n {recordingState === \"idle\" && t(\"selfie.recorder.start\")}\n {recordingState === \"preparing\" && t(\"selfie.recorder.preparing\")}\n {recordingState === \"recording\" && (\n <span className=\"flex items-center justify-center\">\n <span className=\"mr-2\">{t(\"selfie.recorder.recording_label\")}</span>\n <span className=\"flex space-x-1 loading-dots\">\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n </span>\n </span>\n )}\n {recordingState === \"processing\" && t(\"selfie.recorder.processing\")}\n </Button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieRecorder;\n"],"names":["useI18n","useIsMobile","useRef","useState","useLiveFrameCapture","useVideoRecorderStyles","useEffect","setupVideoElementsObserver","isIOS","__awaiter","waitForVideoFrame","delay","getRecorderVideoElement","_jsxs","_jsx","Title","Subtitle","VideoRecorder","__assign","AcquisitionPreset","getUnisseyStrings","Button"],"mappings":"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"}
|