@quadible/web-sdk
Version:
The web sdk for Quadible's behavioral authentication service.
199 lines • 7.07 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const eventemitter2_1 = require("eventemitter2");
const logoBase64DataUrl_1 = require("./logoBase64DataUrl");
const spinnerHtml_1 = require("./spinnerHtml");
const WebcamWireframe_1 = __importDefault(require("./WebcamWireframe"));
class WebcamDialog extends eventemitter2_1.EventEmitter2 {
options;
container = document.createElement('div');
dialog = document.createElement('div');
video = document.createElement('video');
wireframe = document.createElement('div');
submit = document.createElement('button');
error = document.createElement('div');
webcamWireframe;
isSubmitLocked = false;
constructor(options) {
super();
this.options = options;
}
show() {
this.buildDialog();
this.injectDialog();
this.video = this.options.videoWorker.video;
this.webcamWireframe = new WebcamWireframe_1.default({
videoWorker: this.options.videoWorker,
wrapper: this.wireframe,
wireframe: {
zoom: 3.36,
mOpac: 1,
wfOpac: 0.13,
contrast: 1.7,
saturation: 0,
zDepth: 100,
noiseStrength: 182,
showOriginalVideo: false
}
});
this.options.videoWorker.on('predictions', ({ predictions }) => {
this.submit.disabled =
Boolean(!predictions.length) ||
this.isSubmitLocked;
});
}
dispose() {
this.container.remove();
this.webcamWireframe.dispose();
}
lockSubmit() {
this.isSubmitLocked = true;
this.submit.disabled = true;
}
unlockSubmit() {
this.isSubmitLocked = false;
}
clearErrorMessage() {
this.error.style.display = 'none';
}
showErrorMessage(message) {
this.error.innerText = message;
this.error.style.display = 'block';
}
buildDialog() {
this.container.append(this.dialog);
this.wireframe.innerHTML = spinnerHtml_1.spinnerHtml;
this.dialog.append(this.wireframe);
this.container.addEventListener('click', e => {
if (e.target === this.container) {
if (this.options.clickOutsideToClose) {
this.dispose();
this.emit('canceled');
}
}
});
this.submit.addEventListener('click', e => {
this.emit('submit', this.webcamWireframe.lastFrameWithPredictions?.imageBase64);
});
Object.assign(this.container.style, {
position: 'fixed',
top: '0px',
left: '0px',
width: '100%',
height: '100%',
background: 'rgb(0 0 0 / 42%)',
zIndex: 9999
});
Object.assign(this.wireframe.style, {
position: 'absolute',
width: '100%',
height: 'calc(100% - 50px)',
borderRadius: '10px 10px 0 0',
overflow: 'hidden'
});
Object.assign(this.dialog.style, {
position: 'absolute',
top: '50%',
left: '50%',
width: '400px',
height: '500px',
background: 'white',
borderRadius: '10px',
transform: 'translate(-50%, -50%)',
boxShadow: '0 15px 30px #00000024'
});
Object.assign(this.video.style, {
width: '200px',
height: '200px',
margin: '10px auto',
display: 'block',
borderRadius: '10px',
boxShadow: '0 8px 15px #00000078'
});
const footer = document.createElement('div');
const logo = document.createElement('img');
const poweredBy = document.createElement('span');
const submitButtonClassName = 'quadible-submit-btn';
this.submit.innerText = 'Submit';
this.submit.classList.add(submitButtonClassName);
this.submit.disabled = true;
const font = document.createElement('style');
font.innerHTML = `
-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('${this.options.serviceUrl}/v1/websdk/dependency?url=${encodeURIComponent('https://fonts.gstatic.com/s/worksans/v17/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXNig.ttf')}') format('truetype');
}
.${submitButtonClassName}:disabled {
pointer-events: none;
background-color: rgb(155 155 155) !important;
background-image: linear-gradient(107deg, rgb(236 236 236) 0%, rgb(184 184 184) 100%) !important;
}
`;
document.head.appendChild(font);
Object.assign(this.submit.style, {
backgroundColor: '#febb97',
backgroundImage: 'linear-gradient(107deg, #febb97 0%, #f73e6e 100%)',
borderRadius: '25px 25px 25px 25px',
fontFamily: '"Work Sans", Sans-serif',
display: 'inline-block',
border: 'none',
float: 'right',
color: 'white',
textTransform: 'uppercase',
padding: '10px 20px',
margin: '7px',
outline: 'none',
cursor: 'pointer'
});
logo.src = logoBase64DataUrl_1.logoBase64DataUrl;
poweredBy.innerText = 'Powered by';
footer.append(poweredBy, logo, this.submit);
Object.assign(poweredBy.style, {
fontFamily: `'Work Sans', sans-serif`,
display: 'inline-block',
verticalAlign: 'top',
width: '91px',
padding: '18px 0 0',
height: '50px',
fontSize: '14px'
});
Object.assign(logo.style, {
display: 'inline-block',
width: '50px'
});
Object.assign(footer.style, {
position: 'absolute',
width: '100%',
top: '450px',
height: '50px',
boxSizing: 'border-box',
paddingLeft: '15px',
verticalAlign: 'top'
});
Object.assign(this.error.style, {
position: 'absolute',
bottom: '60px',
color: 'red',
fontFamily: '\'Work Sans\'',
background: '#000000bf',
padding: '3px 5px',
borderRadius: '5px',
left: '50%',
transform: 'translate(-50%, 0)',
textAlign: 'center',
display: 'none'
});
this.dialog.append(this.error, footer);
}
injectDialog() {
document.body.append(this.container);
}
}
exports.default = WebcamDialog;
//# sourceMappingURL=WebcamDialog.js.map