{"version":3,"sources":["components/Modals/SignView/Shield3.js"],"names":["shield3Support","captureUserMedia","constraints","navigator","mediaDevices","getUserMedia","hasGetUserMedia","webkitGetUserMedia","mozGetUserMedia","msGetUserMedia","video","frameRate","ideal","max","width","height","audio","Shield3Modal","t","useTranslation","useSign","modal","contractId","shield3Statement","jwt","contract","dispatch","isMobile","checkIsMobile","queryClient","useQueryClient","useState","status","setStatus","progress","setProgress","isNoPermsGivenOpen","setIsNoPermsGivenOpen","isNoSupportOpen","setIsNoSupportOpen","videoRef","useRef","recorderRef","fallbackRecorder","fileRef","useSignViewFooterActions","doAction","buttons","handleClose","type","CONTROL_MODAL","close","SHIELD3_MODAL","handleReset","useMutation","payload","fetcher","sendShield3Video","onSuccess","data","toast","success","shield3ValidationRequired","proceedToSign","find","b","id","bootbox","confirm","textT","cancel","color","label","callback","dispatchAction","handleAction","invalidateQueries","onError","error","message","mutateSendShield3Video","mutate","isLoadingSend","isLoading","onProgress","Math","floor","loaded","total","uploadFileV2","url","mutateUploadVideoAcceptance","isLoadingUpload","toggleNoPermsGiven","open","toggleNoSupport","current","camera","stop","reset","destroy","src","srcObject","controls","handleStartRecording","a","click","browserVersion","Number","deviceSpecs","browser","version","shield3SupportedVersion","name","console","log","stream","RecordRTC","startRecording","test","handleStopRecording","stopRecording","muted","volume","blob","getBlob","URL","createObjectURL","File","handleSend","file","isOpen","includes","toggle","className","style","wordBreak","Controls","onStart","onStop","onReset","onSend","isDisabled","alt","autoPlay","ref","onChange","evt","target","files","accept","capture","hidden","NoPermsGivenModal","NoSupportModal","size","clsx","onClick","disabled","os","replace"],"mappings":"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","file":"static/js/19.9ee800c2.chunk.js","sourcesContent":["import React, { useState, useRef } from 'react';\r\nimport clsx from 'clsx';\r\nimport { useMutation, useQueryClient } from 'react-query';\r\nimport { toast } from 'components/Shared/Toast';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, Input, ButtonGroup } from 'reactstrap';\r\nimport RecordRTC from 'recordrtc';\r\n\r\nimport { isMobile as checkIsMobile } from 'utils';\r\nimport { fetcher } from 'api/client';\r\nimport { sendShield3Video } from 'api/actions/contracts';\r\nimport { uploadFileV2 } from 'api/actions/file';\r\nimport { useSign, CONTROL_MODAL, SHIELD3_MODAL } from 'context/signview';\r\nimport bootbox from 'components/Modals/Bootbox';\r\n\r\nimport { useSignViewFooterActions } from 'components/Sign/Footer';\r\n\r\nconst shield3Support = {\r\n    'Edge': 81,\r\n    'Chrome': 81,\r\n    'Firefox': 76,\r\n    'Opera': 68,\r\n    'Safari': -1 // Not supported\r\n}\r\n\r\nfunction captureUserMedia(constraints) {\r\n    return navigator.mediaDevices.getUserMedia(constraints);\r\n};\r\n\r\nconst hasGetUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||\r\n    navigator.mozGetUserMedia || navigator.msGetUserMedia);\r\n\r\n\r\nconst constraints = { video: { frameRate: { ideal: 30, max: 60 }, width: 640, height: 480 }, audio: true };\r\n\r\n\r\n\r\nexport default function Shield3Modal() {\r\n    const { t } = useTranslation();\r\n    const [{ modal, contractId, shield3Statement, jwt, contract }, dispatch] = useSign();\r\n\r\n    const isMobile = checkIsMobile();\r\n\r\n    const queryClient = useQueryClient();\r\n    const [status, setStatus] = useState('idle')\r\n    const [progress, setProgress] = useState(0)\r\n    const [isNoPermsGivenOpen, setIsNoPermsGivenOpen] = useState(false)\r\n    const [isNoSupportOpen, setIsNoSupportOpen] = useState(false)\r\n    const videoRef = useRef(null);\r\n    const recorderRef = useRef(null);\r\n    const fallbackRecorder = useRef(null);\r\n    const fileRef = useRef(null);\r\n    const { doAction, buttons } = useSignViewFooterActions();\r\n    \r\n    const handleClose = () => {\r\n        dispatch({ type: CONTROL_MODAL, close: SHIELD3_MODAL })\r\n        handleReset();\r\n    }\r\n\r\n    const { mutate: mutateSendShield3Video, isLoading: isLoadingSend } = useMutation((payload) => fetcher(sendShield3Video(payload), jwt), {\r\n        onSuccess: (data) => {\r\n            toast.success(t('modals.agreement.correct_save_agreement_video'))\r\n            if (!contract.shield3ValidationRequired) {\r\n                const proceedToSign = buttons.find(b => b.id === 'show_sign');\r\n                bootbox.confirm({\r\n                    textT: '<strong>Has enviado tu videodeclaración</strong>. <br/> Ya puedes proceder con la firma del documento',\r\n                    buttons: {\r\n                        cancel: {\r\n                            color: 'secondary'\r\n                        },\r\n                        proceedToSign: {\r\n                            label: proceedToSign.label,\r\n                            callback: () => doAction(proceedToSign.dispatchAction, proceedToSign.handleAction)\r\n                        },\r\n                       \r\n                    }\r\n                })            \r\n            }\r\n            queryClient.invalidateQueries('client-contract');\r\n            handleClose();\r\n        },\r\n        onError: (error) => {\r\n            toast.error(t(`errors.${error.message}`, t('errors.GeneralError')))\r\n        },\r\n    })\r\n\r\n    const onProgress = (data) => {\r\n        setProgress(Math.floor((data.loaded / data.total) * 100))\r\n    }\r\n\r\n    const { mutate: mutateUploadVideoAcceptance, isLoading: isLoadingUpload } = useMutation((payload) => fetcher(uploadFileV2(payload, onProgress), jwt), {\r\n        onSuccess: (data) => {\r\n            mutateSendShield3Video({\r\n                contractId: contractId,\r\n                video: data.url\r\n            })\r\n        },\r\n        onError: (error) => {\r\n            toast.error(t(`errors.${error.message}`, t('errors.GeneralError')))\r\n        },\r\n    })\r\n\r\n    const toggleNoPermsGiven = () => setIsNoPermsGivenOpen(open => !open)\r\n    const toggleNoSupport = () => setIsNoSupportOpen(open => !open)\r\n\r\n    const handleReset = () => {\r\n        if(recorderRef.current !== null){\r\n            recorderRef.current.camera.stop();\r\n            recorderRef.current.reset()\r\n            recorderRef.current.destroy();\r\n        }\r\n        videoRef.current.src = null;\r\n        videoRef.current.srcObject = null;\r\n        videoRef.current.controls = false;\r\n        recorderRef.current = null;\r\n        fileRef.current = null;\r\n        setStatus('idle')\r\n    }\r\n    const handleStartRecording = async () => {\r\n        if (!hasGetUserMedia) {\r\n            // alert(\"Your browser cannot stream from your webcam. Please switch to Chrome or Firefox.\");\r\n            if (checkIsMobile()) {\r\n                fallbackRecorder.current.click()\r\n            } else {\r\n                toggleNoSupport();\r\n            }\r\n\r\n            return;\r\n        }\r\n\r\n        try {\r\n            const browserVersion = Number(navigator.deviceSpecs.browser.version);\r\n            const shield3SupportedVersion = shield3Support[navigator.deviceSpecs.browser.name];\r\n            console.log({ browserVersion, shield3SupportedVersion })\r\n            // if (browserVersion < shield3SupportedVersion || shield3SupportedVersion === -1) {\r\n            //     toggleNoSupport()\r\n            //     return;\r\n            // } else {\r\n            const stream = await captureUserMedia(constraints);\r\n            videoRef.current.srcObject = stream;\r\n            recorderRef.current = RecordRTC(stream, { type: 'video' });\r\n            recorderRef.current.startRecording();\r\n            recorderRef.current.camera = stream;\r\n            // recorderRef.current.setRecordingDuration()\r\n            setStatus('recording')\r\n\r\n            // setTimeout(() => {\r\n            //     handleStopRecording()\r\n            // }, 30 * 1000)\r\n            // }\r\n\r\n        } catch (error) {\r\n            const { name, message } = error;\r\n            if (name === 'NotAllowedError' || /permission.*denied/ig.test(message)) {\r\n                toggleNoPermsGiven()\r\n            }\r\n            console.error('Error accessing media devices.', error);\r\n        }\r\n    }\r\n\r\n    const handleStopRecording = () => {\r\n        recorderRef.current.stopRecording(() => {\r\n            videoRef.current.controls = true;\r\n            videoRef.current.src = null;\r\n            videoRef.current.srcObject = null;\r\n            videoRef.current.muted = false;\r\n            videoRef.current.volume = 1;\r\n            const blob = recorderRef.current.getBlob();\r\n            setStatus('recorded')\r\n            videoRef.current.src = URL.createObjectURL(blob);\r\n            const fileName = 'video.webm';\r\n            fileRef.current = new File([blob], fileName, {\r\n                type: 'video/webm',\r\n            });\r\n            recorderRef.current.camera.stop();\r\n            recorderRef.current.reset()\r\n            // recorderRef.current.destroy();\r\n            recorderRef.current = null;\r\n        })\r\n    }\r\n\r\n    const handleFallbackRecorderChange = (evt) => {\r\n        setStatus('recorded')\r\n        const file = evt.target.files[0];\r\n        videoRef.current.controls = true;\r\n        videoRef.current.muted = false;\r\n        videoRef.current.volume = 1;\r\n        videoRef.current.src = URL.createObjectURL(file);\r\n        fileRef.current = file\r\n    }\r\n\r\n    const handleSend = () => {\r\n        const file = fileRef.current;\r\n        // const reader = new FileReader();\r\n\r\n        // reader.onload = async (readerEvent) => {\r\n        //   const data = readerEvent.target.result;\r\n        mutateUploadVideoAcceptance(file);\r\n        // };\r\n        // reader.readAsDataURL(file);\r\n    }\r\n\r\n    return (\r\n        <Modal isOpen={modal.includes(SHIELD3_MODAL)}>\r\n            <ModalHeader toggle={handleClose}>\r\n                {t('sign.shield3.record_video')}\r\n            </ModalHeader>\r\n            <ModalBody className=\"p-4\">\r\n                <p className=\"text-muted text-center mx-auto mb-4\">\r\n                    {t('sign.shield3.accept_instruction')}{' '}\r\n                    <b className=\"text-dark\"> {t('sign.shield3.start_recording')}</b> {t('sign.shield3.read_aloud')}\r\n                </p>\r\n                <div id=\"videodiv\" className=\"text-center\">\r\n                    <span className=\"d-inline-block mb-3\" style={{ wordBreak: 'break-word' }}>\r\n                        <i>{shield3Statement}</i>\r\n                    </span><br />\r\n                    {isMobile &&\r\n                        <Controls\r\n                            status={status}\r\n                            onStart={handleStartRecording}\r\n                            onStop={handleStopRecording}\r\n                            onReset={handleReset}\r\n                            onSend={handleSend}\r\n                            isDisabled={isLoadingUpload || isLoadingSend}\r\n                        />\r\n                    }\r\n                    {isLoadingSend &&\r\n                        <div id=\"uploading-video\">\r\n                            <img src=\"/images/mini-loader.svg\" alt=\"loader\" />\r\n                            <span> {t('sign.shield3.sending_video')}... </span>\r\n                        </div>\r\n                    }\r\n                    {isLoadingUpload &&\r\n                        <div id=\"uploading-video\">\r\n                            <span>{progress}%</span>\r\n                            <img src=\"/images/mini-loader.svg\" alt=\"loader\" />\r\n                            <span> {t('sign.shield3.uploading_video')}...</span>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        <video autoPlay muted ref={videoRef} width=\"300\" />\r\n                        <input ref={fallbackRecorder} onChange={handleFallbackRecorderChange} type=\"file\" accept=\"video/*\" capture=\"user\" hidden name=\"recorder\" id=\"recorder\" style={{ 'display': 'none' }}></input>\r\n                    </div>\r\n                </div>\r\n            </ModalBody>\r\n            {!isMobile &&\r\n                <ModalFooter className=\"border-top\">\r\n                    <Controls\r\n                        status={status}\r\n                        onStart={handleStartRecording}\r\n                        onStop={handleStopRecording}\r\n                        onReset={handleReset}\r\n                        onSend={handleSend}\r\n                        isDisabled={isLoadingUpload}\r\n                    />\r\n                </ModalFooter>\r\n            }\r\n            <NoPermsGivenModal isOpen={isNoPermsGivenOpen} toggle={toggleNoPermsGiven} />\r\n            <NoSupportModal isOpen={isNoSupportOpen} toggle={toggleNoSupport} />\r\n        </Modal >\r\n    )\r\n}\r\n\r\nfunction Controls({ status, isDisabled, onStart, onStop, onReset, onSend }) {\r\n    const { t } = useTranslation();\r\n    return (\r\n        <ButtonGroup id=\"mobile-Buttons\" className=\"d-flex flex-grow-1\">\r\n            <Button\r\n                size=\"xl\"\r\n                color='primary'\r\n                className={clsx( !['recording', 'recorded'].includes(status) && 'd-flex justify-content-center', ['recording', 'recorded'].includes(status) && 'd-none')}\r\n                id=\"btn-start-recording\"\r\n                onClick={onStart}\r\n                disabled={isDisabled}\r\n            >\r\n                {t('sign.shield3.start_recording')}\r\n            </Button>\r\n            <Button\r\n                size=\"xl\"\r\n                color='secondary'\r\n                className={clsx(status !== 'recording' && 'd-none', status === 'recording' && 'd-flex justify-content-center')}\r\n                id=\"btn-stop-recording\"\r\n                onClick={onStop}\r\n                disabled={isDisabled}\r\n            >\r\n                {t('sign.shield3.stop_recording')}\r\n            </Button>\r\n            <Button\r\n                size=\"xl\"\r\n                color='secondary'\r\n                className={clsx(status !== 'recorded' && 'd-none')}\r\n                id=\"btn-restart-recording\"\r\n                onClick={onReset}\r\n                disabled={isDisabled}\r\n            >\r\n                {t('sign.shield3.reinit_recording')}\r\n            </Button>\r\n            <Button\r\n                size=\"xl\"\r\n                color='primary'\r\n                className={clsx(status !== 'recorded' && 'd-none')}\r\n                id=\"btn-send-recording\"\r\n                onClick={onSend}\r\n                disabled={isDisabled}\r\n            >\r\n                {t('sign.shield3.send_recording')}\r\n            </Button>\r\n        </ButtonGroup>\r\n    )\r\n}\r\n\r\n\r\nfunction NoPermsGivenModal({ isOpen, toggle }) {\r\n    const { t } = useTranslation();\r\n    const os = navigator.deviceSpecs.os;\r\n    const browser = navigator.deviceSpecs.browser;\r\n\r\n    return (\r\n        <Modal isOpen={isOpen}>\r\n            <ModalHeader toggle={toggle}>\r\n                {t('sign.shield3.missing_permissions')}\r\n            </ModalHeader>\r\n            <ModalBody className=\"modal-body p-5\">\r\n                <section className=\"negotiate-section text-center\">\r\n                    <p><strong>{t('sign.shield3.permissions_required')}</strong></p>\r\n                    {/** Instrucciones */}\r\n                    {/** Instrucciones pc */}\r\n                    {['Macintosh', 'Windows'].includes(os.name) &&\r\n                        <span>{t('sign.shield3.enable_camera_device', { replace: { browser: browser.name } })}.</span>\r\n                    }\r\n\r\n                    {['iPhone', 'Ipad', 'Android'].includes(os.name) &&\r\n                        <span>{t('sign.shield3.enable_camera')}.</span>\r\n                    }\r\n\r\n                    {/* img src=\"/images/sign/contract.svg\" alt=\"\" width=\"100px\" className=\"mt-5\"> */}\r\n                </section>\r\n            </ModalBody>\r\n            <ModalFooter>\r\n                <ButtonGroup>\r\n                    <Button color=\"primary\" onClick={toggle}>\r\n                        {t('sign.shield3.close')}\r\n                    </Button>\r\n                </ButtonGroup>\r\n            </ModalFooter>\r\n        </Modal>\r\n    )\r\n}\r\nfunction NoSupportModal({ isOpen, toggle }) {\r\n    const { t } = useTranslation();\r\n\r\n    return (\r\n        <Modal isOpen={isOpen}>\r\n            <ModalHeader toggle={toggle}>\r\n                {t('sign.shield3.shield3')}\r\n            </ModalHeader>\r\n            <ModalBody>\r\n                <section className=\"negotiate-section text-center\">\r\n                    <p><strong>{t('sign.shield3.not_supported_in_browser')}</strong></p>\r\n                </section>\r\n            </ModalBody>\r\n            <ModalFooter>\r\n                <ButtonGroup className=\"d-flex flex-grow-1\">\r\n                    <Button size=\"xl\" color=\"btn-primary\" onClick={toggle}>\r\n                        {t('sign.shield3.close')}\r\n                    </Button>\r\n                </ButtonGroup>\r\n            </ModalFooter>\r\n        </Modal>\r\n    )\r\n}\r\n"],"sourceRoot":""}