biometry-sdk 2.1.2 → 2.2.0

package/dist/react.js

@@ -1,1328 +0,0 @@
-import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-
-var BiometryAttributes;
-(function (BiometryAttributes) {
-    BiometryAttributes["ApiKey"] = "api-key";
-    BiometryAttributes["UserFullname"] = "user-fullname";
-})(BiometryAttributes || (BiometryAttributes = {}));
-var BiometryEnrollmentState;
-(function (BiometryEnrollmentState) {
-    BiometryEnrollmentState["Loading"] = "loading";
-    BiometryEnrollmentState["Success"] = "success";
-    BiometryEnrollmentState["ErrorNoFace"] = "error-no-face";
-    BiometryEnrollmentState["ErrorMultipleFaces"] = "error-multiple-faces";
-    BiometryEnrollmentState["ErrorNotCentered"] = "error-not-centered";
-    BiometryEnrollmentState["ErrorOther"] = "error-other";
-})(BiometryEnrollmentState || (BiometryEnrollmentState = {}));
-
-class BiometryEnrollment extends HTMLElement {
-    constructor() {
-        super();
-        this.videoElement = null;
-        this.canvasElement = null;
-        this.captureButton = null;
-        this.shadow = this.attachShadow({ mode: "open" });
-        this.toggleState = this.toggleState.bind(this);
-        this.capturePhoto = this.capturePhoto.bind(this);
-    }
-    static get observedAttributes() {
-        return Object.values(BiometryAttributes);
-    }
-    get endpoint() {
-        return this.getAttribute("endpoint");
-    }
-    set endpoint(value) {
-        const current = this.getAttribute("endpoint");
-        if (value !== null && value !== current) {
-            this.setAttribute("endpoint", value);
-        }
-        else if (value === null && current !== null) {
-            this.removeAttribute("endpoint");
-        }
-    }
-    get userFullname() {
-        return this.getAttribute("user-fullname");
-    }
-    set userFullname(value) {
-        if (value) {
-            this.setAttribute("user-fullname", value);
-        }
-        else {
-            this.removeAttribute("user-fullname");
-        }
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === "endpoint" || name === "user-fullname") {
-            if (name === "endpoint") {
-                this.endpoint = newValue;
-            }
-            else if (name === "user-fullname") {
-                this.userFullname = newValue;
-            }
-            this.validateAttributes();
-        }
-    }
-    connectedCallback() {
-        this.validateAttributes();
-        this.init();
-    }
-    disconnectedCallback() {
-        this.cleanup();
-        if (this.captureButton) {
-            this.captureButton.removeEventListener("click", this.capturePhoto);
-        }
-    }
-    validateAttributes() {
-        if (!this.endpoint) {
-            console.error("Endpoint is required.");
-            this.toggleState(BiometryEnrollmentState.ErrorOther);
-            return;
-        }
-        if (!this.userFullname) {
-            console.error("User fullname is required.");
-            this.toggleState(BiometryEnrollmentState.ErrorOther);
-            return;
-        }
-    }
-    init() {
-        this.shadow.innerHTML = `
-    <style>
-      .wrapper {
-        position: relative;
-      }
-      video {
-        transform: scaleX(-1); /* Flip video for preview */
-        max-width: 100%;
-        border-radius: var(--border-radius, 8px);
-      }
-      canvas {
-        display: none;
-      }
-    </style>
-    <div class="wrapper">
-      <slot name="video">
-        <video id="video" autoplay playsinline></video>
-      </slot>
-      <slot name="canvas">
-        <canvas id="canvas" style="display: none;"></canvas>
-      </slot>
-      <slot name="button">
-        <button id="button">Capture Photo</button>
-      </slot>
-      <div class="status">
-        <slot name="loading" class="loading"></slot>
-        <slot name="success" class="success"></slot>
-        <slot name="error-no-face" class="error-no-face"></slot>
-        <slot name="error-multiple-faces" class="error-multiple-faces"></slot>
-        <slot name="error-not-centered" class="error-not-centered"></slot>
-        <slot name="error-other" class="error-other"></slot>
-      </div>
-    </div>
-  `;
-        this.attachSlotListeners();
-        this.setupCamera();
-        this.toggleState("");
-    }
-    cleanup() {
-        if (this.videoElement?.srcObject) {
-            const tracks = this.videoElement.srcObject.getTracks();
-            tracks.forEach((track) => track.stop());
-        }
-        if (this.videoElement) {
-            this.videoElement.srcObject = null;
-        }
-    }
-    attachSlotListeners() {
-        const videoSlot = this.shadow.querySelector('slot[name="video"]');
-        const canvasSlot = this.shadow.querySelector('slot[name="canvas"]');
-        const buttonSlot = this.shadow.querySelector('slot[name="button"]');
-        const assignedVideoElements = videoSlot.assignedElements();
-        this.videoElement = (assignedVideoElements.length > 0 ? assignedVideoElements[0] : null) || this.shadow.querySelector("#video");
-        const assignedCanvasElements = canvasSlot.assignedElements();
-        this.canvasElement = (assignedCanvasElements.length > 0 ? assignedCanvasElements[0] : null) || this.shadow.querySelector("#canvas");
-        const assignedButtonElements = buttonSlot.assignedElements();
-        this.captureButton = (assignedButtonElements.length > 0 ? assignedButtonElements[0] : null) || this.shadow.querySelector("#button");
-        if (!this.videoElement) {
-            console.error("Video element is missing.");
-            return;
-        }
-        if (!this.captureButton) {
-            console.error("Capture button is missing.");
-            return;
-        }
-        else {
-            this.captureButton.addEventListener("click", this.capturePhoto);
-        }
-    }
-    setupCamera() {
-        if (!this.videoElement) {
-            console.error("Video element is missing.");
-            return;
-        }
-        navigator.mediaDevices
-            .getUserMedia({ video: true })
-            .then((stream) => {
-            this.videoElement.srcObject = stream;
-        })
-            .catch((error) => {
-            console.error("Error accessing camera:", error);
-        });
-    }
-    async capturePhoto() {
-        try {
-            if (!this.videoElement || !this.canvasElement) {
-                console.error("Essential elements are not initialized.");
-                return;
-            }
-            const context = this.canvasElement.getContext("2d");
-            this.canvasElement.width = this.videoElement.videoWidth;
-            this.canvasElement.height = this.videoElement.videoHeight;
-            context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
-            this.toggleState("loading");
-            this.canvasElement.toBlob(async (blob) => {
-                try {
-                    if (!blob) {
-                        console.error("Failed to capture photo.");
-                        this.toggleState(BiometryEnrollmentState.ErrorOther);
-                        return;
-                    }
-                    const file = new File([blob], "onboard-face.jpg", { type: "image/jpeg" });
-                    const formData = new FormData();
-                    formData.append('photo', file);
-                    formData.append('userFullname', this.userFullname || '');
-                    const response = await fetch(this.endpoint, {
-                        method: 'POST',
-                        body: formData
-                    });
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const result = await response.json();
-                    this.resultCode = result?.code;
-                    this.description = result?.description || "Unknown error occurred.";
-                    switch (this.resultCode) {
-                        case 0:
-                            this.toggleState(BiometryEnrollmentState.Success);
-                            break;
-                        case 1:
-                            this.toggleState(BiometryEnrollmentState.ErrorNoFace);
-                            break;
-                        case 2:
-                            this.toggleState(BiometryEnrollmentState.ErrorMultipleFaces);
-                            break;
-                        case 3:
-                            this.toggleState(BiometryEnrollmentState.ErrorNotCentered);
-                            break;
-                        default:
-                            this.toggleState(BiometryEnrollmentState.ErrorOther);
-                    }
-                    console.log("Enrollment result:", result);
-                }
-                catch (error) {
-                    console.error("Error in toBlob callback:", error);
-                    this.toggleState(BiometryEnrollmentState.ErrorOther);
-                }
-            }, "image/jpeg");
-        }
-        catch (error) {
-            console.error("Error capturing photo:", error);
-            this.toggleState(BiometryEnrollmentState.ErrorOther);
-        }
-    }
-    toggleState(state) {
-        const slots = [
-            BiometryEnrollmentState.Loading,
-            BiometryEnrollmentState.Success,
-            BiometryEnrollmentState.ErrorNoFace,
-            BiometryEnrollmentState.ErrorMultipleFaces,
-            BiometryEnrollmentState.ErrorNotCentered,
-            BiometryEnrollmentState.ErrorOther,
-        ];
-        slots.forEach((slotName) => {
-            const slot = this.shadow.querySelector(`slot[name="${slotName}"]`);
-            if (slot) {
-                slot.style.display = slotName === state ? "block" : "none";
-            }
-        });
-    }
-}
-customElements.define("biometry-enrollment", BiometryEnrollment);
-
-const BiometryEnrollmentWrapper = forwardRef(({ endpoint, userFullname, className, style, children, ...rest }, ref) => {
-    const elementRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-        validateAttributes: () => {
-            elementRef.current?.validateAttributes();
-        },
-        init: () => {
-            elementRef.current?.init();
-        },
-        cleanup: () => {
-            elementRef.current?.cleanup();
-        },
-    }));
-    useEffect(() => {
-        if (elementRef.current) {
-            if (endpoint !== undefined)
-                elementRef.current.setAttribute("endpoint", endpoint);
-            if (userFullname !== undefined)
-                elementRef.current.setAttribute("user-fullname", userFullname);
-        }
-    }, [endpoint, userFullname]);
-    return React.createElement("biometry-enrollment", {
-        ref: elementRef,
-        className,
-        style,
-        ...rest,
-    }, children);
-});
-BiometryEnrollmentWrapper.displayName = "BiometryEnrollment";
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var fixWebmDuration = {exports: {}};
-
-var hasRequiredFixWebmDuration;
-
-function requireFixWebmDuration () {
-	if (hasRequiredFixWebmDuration) return fixWebmDuration.exports;
-	hasRequiredFixWebmDuration = 1;
-	(function (module) {
-		(function (name, definition) {
-		    if (module.exports) { // CommonJS / Node.js
-		        module.exports = definition();
-		    } else { // Direct include
-		        window.ysFixWebmDuration = definition();
-		    }
-		})('fix-webm-duration', function () {
-		    /*
-		     * This is the list of possible WEBM file sections by their IDs.
-		     * Possible types: Container, Binary, Uint, Int, String, Float, Date
-		     */
-		    var sections = {
-		        0xa45dfa3: { name: 'EBML', type: 'Container' },
-		        0x286: { name: 'EBMLVersion', type: 'Uint' },
-		        0x2f7: { name: 'EBMLReadVersion', type: 'Uint' },
-		        0x2f2: { name: 'EBMLMaxIDLength', type: 'Uint' },
-		        0x2f3: { name: 'EBMLMaxSizeLength', type: 'Uint' },
-		        0x282: { name: 'DocType', type: 'String' },
-		        0x287: { name: 'DocTypeVersion', type: 'Uint' },
-		        0x285: { name: 'DocTypeReadVersion', type: 'Uint' },
-		        0x6c: { name: 'Void', type: 'Binary' },
-		        0x3f: { name: 'CRC-32', type: 'Binary' },
-		        0xb538667: { name: 'SignatureSlot', type: 'Container' },
-		        0x3e8a: { name: 'SignatureAlgo', type: 'Uint' },
-		        0x3e9a: { name: 'SignatureHash', type: 'Uint' },
-		        0x3ea5: { name: 'SignaturePublicKey', type: 'Binary' },
-		        0x3eb5: { name: 'Signature', type: 'Binary' },
-		        0x3e5b: { name: 'SignatureElements', type: 'Container' },
-		        0x3e7b: { name: 'SignatureElementList', type: 'Container' },
-		        0x2532: { name: 'SignedElement', type: 'Binary' },
-		        0x8538067: { name: 'Segment', type: 'Container' },
-		        0x14d9b74: { name: 'SeekHead', type: 'Container' },
-		        0xdbb: { name: 'Seek', type: 'Container' },
-		        0x13ab: { name: 'SeekID', type: 'Binary' },
-		        0x13ac: { name: 'SeekPosition', type: 'Uint' },
-		        0x549a966: { name: 'Info', type: 'Container' },
-		        0x33a4: { name: 'SegmentUID', type: 'Binary' },
-		        0x3384: { name: 'SegmentFilename', type: 'String' },
-		        0x1cb923: { name: 'PrevUID', type: 'Binary' },
-		        0x1c83ab: { name: 'PrevFilename', type: 'String' },
-		        0x1eb923: { name: 'NextUID', type: 'Binary' },
-		        0x1e83bb: { name: 'NextFilename', type: 'String' },
-		        0x444: { name: 'SegmentFamily', type: 'Binary' },
-		        0x2924: { name: 'ChapterTranslate', type: 'Container' },
-		        0x29fc: { name: 'ChapterTranslateEditionUID', type: 'Uint' },
-		        0x29bf: { name: 'ChapterTranslateCodec', type: 'Uint' },
-		        0x29a5: { name: 'ChapterTranslateID', type: 'Binary' },
-		        0xad7b1: { name: 'TimecodeScale', type: 'Uint' },
-		        0x489: { name: 'Duration', type: 'Float' },
-		        0x461: { name: 'DateUTC', type: 'Date' },
-		        0x3ba9: { name: 'Title', type: 'String' },
-		        0xd80: { name: 'MuxingApp', type: 'String' },
-		        0x1741: { name: 'WritingApp', type: 'String' },
-		        // 0xf43b675: { name: 'Cluster', type: 'Container' },
-		        0x67: { name: 'Timecode', type: 'Uint' },
-		        0x1854: { name: 'SilentTracks', type: 'Container' },
-		        0x18d7: { name: 'SilentTrackNumber', type: 'Uint' },
-		        0x27: { name: 'Position', type: 'Uint' },
-		        0x2b: { name: 'PrevSize', type: 'Uint' },
-		        0x23: { name: 'SimpleBlock', type: 'Binary' },
-		        0x20: { name: 'BlockGroup', type: 'Container' },
-		        0x21: { name: 'Block', type: 'Binary' },
-		        0x22: { name: 'BlockVirtual', type: 'Binary' },
-		        0x35a1: { name: 'BlockAdditions', type: 'Container' },
-		        0x26: { name: 'BlockMore', type: 'Container' },
-		        0x6e: { name: 'BlockAddID', type: 'Uint' },
-		        0x25: { name: 'BlockAdditional', type: 'Binary' },
-		        0x1b: { name: 'BlockDuration', type: 'Uint' },
-		        0x7a: { name: 'ReferencePriority', type: 'Uint' },
-		        0x7b: { name: 'ReferenceBlock', type: 'Int' },
-		        0x7d: { name: 'ReferenceVirtual', type: 'Int' },
-		        0x24: { name: 'CodecState', type: 'Binary' },
-		        0x35a2: { name: 'DiscardPadding', type: 'Int' },
-		        0xe: { name: 'Slices', type: 'Container' },
-		        0x68: { name: 'TimeSlice', type: 'Container' },
-		        0x4c: { name: 'LaceNumber', type: 'Uint' },
-		        0x4d: { name: 'FrameNumber', type: 'Uint' },
-		        0x4b: { name: 'BlockAdditionID', type: 'Uint' },
-		        0x4e: { name: 'Delay', type: 'Uint' },
-		        0x4f: { name: 'SliceDuration', type: 'Uint' },
-		        0x48: { name: 'ReferenceFrame', type: 'Container' },
-		        0x49: { name: 'ReferenceOffset', type: 'Uint' },
-		        0x4a: { name: 'ReferenceTimeCode', type: 'Uint' },
-		        0x2f: { name: 'EncryptedBlock', type: 'Binary' },
-		        0x654ae6b: { name: 'Tracks', type: 'Container' },
-		        0x2e: { name: 'TrackEntry', type: 'Container' },
-		        0x57: { name: 'TrackNumber', type: 'Uint' },
-		        0x33c5: { name: 'TrackUID', type: 'Uint' },
-		        0x3: { name: 'TrackType', type: 'Uint' },
-		        0x39: { name: 'FlagEnabled', type: 'Uint' },
-		        0x8: { name: 'FlagDefault', type: 'Uint' },
-		        0x15aa: { name: 'FlagForced', type: 'Uint' },
-		        0x1c: { name: 'FlagLacing', type: 'Uint' },
-		        0x2de7: { name: 'MinCache', type: 'Uint' },
-		        0x2df8: { name: 'MaxCache', type: 'Uint' },
-		        0x3e383: { name: 'DefaultDuration', type: 'Uint' },
-		        0x34e7a: { name: 'DefaultDecodedFieldDuration', type: 'Uint' },
-		        0x3314f: { name: 'TrackTimecodeScale', type: 'Float' },
-		        0x137f: { name: 'TrackOffset', type: 'Int' },
-		        0x15ee: { name: 'MaxBlockAdditionID', type: 'Uint' },
-		        0x136e: { name: 'Name', type: 'String' },
-		        0x2b59c: { name: 'Language', type: 'String' },
-		        0x6: { name: 'CodecID', type: 'String' },
-		        0x23a2: { name: 'CodecPrivate', type: 'Binary' },
-		        0x58688: { name: 'CodecName', type: 'String' },
-		        0x3446: { name: 'AttachmentLink', type: 'Uint' },
-		        0x1a9697: { name: 'CodecSettings', type: 'String' },
-		        0x1b4040: { name: 'CodecInfoURL', type: 'String' },
-		        0x6b240: { name: 'CodecDownloadURL', type: 'String' },
-		        0x2a: { name: 'CodecDecodeAll', type: 'Uint' },
-		        0x2fab: { name: 'TrackOverlay', type: 'Uint' },
-		        0x16aa: { name: 'CodecDelay', type: 'Uint' },
-		        0x16bb: { name: 'SeekPreRoll', type: 'Uint' },
-		        0x2624: { name: 'TrackTranslate', type: 'Container' },
-		        0x26fc: { name: 'TrackTranslateEditionUID', type: 'Uint' },
-		        0x26bf: { name: 'TrackTranslateCodec', type: 'Uint' },
-		        0x26a5: { name: 'TrackTranslateTrackID', type: 'Binary' },
-		        0x60: { name: 'Video', type: 'Container' },
-		        0x1a: { name: 'FlagInterlaced', type: 'Uint' },
-		        0x13b8: { name: 'StereoMode', type: 'Uint' },
-		        0x13c0: { name: 'AlphaMode', type: 'Uint' },
-		        0x13b9: { name: 'OldStereoMode', type: 'Uint' },
-		        0x30: { name: 'PixelWidth', type: 'Uint' },
-		        0x3a: { name: 'PixelHeight', type: 'Uint' },
-		        0x14aa: { name: 'PixelCropBottom', type: 'Uint' },
-		        0x14bb: { name: 'PixelCropTop', type: 'Uint' },
-		        0x14cc: { name: 'PixelCropLeft', type: 'Uint' },
-		        0x14dd: { name: 'PixelCropRight', type: 'Uint' },
-		        0x14b0: { name: 'DisplayWidth', type: 'Uint' },
-		        0x14ba: { name: 'DisplayHeight', type: 'Uint' },
-		        0x14b2: { name: 'DisplayUnit', type: 'Uint' },
-		        0x14b3: { name: 'AspectRatioType', type: 'Uint' },
-		        0xeb524: { name: 'ColourSpace', type: 'Binary' },
-		        0xfb523: { name: 'GammaValue', type: 'Float' },
-		        0x383e3: { name: 'FrameRate', type: 'Float' },
-		        0x61: { name: 'Audio', type: 'Container' },
-		        0x35: { name: 'SamplingFrequency', type: 'Float' },
-		        0x38b5: { name: 'OutputSamplingFrequency', type: 'Float' },
-		        0x1f: { name: 'Channels', type: 'Uint' },
-		        0x3d7b: { name: 'ChannelPositions', type: 'Binary' },
-		        0x2264: { name: 'BitDepth', type: 'Uint' },
-		        0x62: { name: 'TrackOperation', type: 'Container' },
-		        0x63: { name: 'TrackCombinePlanes', type: 'Container' },
-		        0x64: { name: 'TrackPlane', type: 'Container' },
-		        0x65: { name: 'TrackPlaneUID', type: 'Uint' },
-		        0x66: { name: 'TrackPlaneType', type: 'Uint' },
-		        0x69: { name: 'TrackJoinBlocks', type: 'Container' },
-		        0x6d: { name: 'TrackJoinUID', type: 'Uint' },
-		        0x40: { name: 'TrickTrackUID', type: 'Uint' },
-		        0x41: { name: 'TrickTrackSegmentUID', type: 'Binary' },
-		        0x46: { name: 'TrickTrackFlag', type: 'Uint' },
-		        0x47: { name: 'TrickMasterTrackUID', type: 'Uint' },
-		        0x44: { name: 'TrickMasterTrackSegmentUID', type: 'Binary' },
-		        0x2d80: { name: 'ContentEncodings', type: 'Container' },
-		        0x2240: { name: 'ContentEncoding', type: 'Container' },
-		        0x1031: { name: 'ContentEncodingOrder', type: 'Uint' },
-		        0x1032: { name: 'ContentEncodingScope', type: 'Uint' },
-		        0x1033: { name: 'ContentEncodingType', type: 'Uint' },
-		        0x1034: { name: 'ContentCompression', type: 'Container' },
-		        0x254: { name: 'ContentCompAlgo', type: 'Uint' },
-		        0x255: { name: 'ContentCompSettings', type: 'Binary' },
-		        0x1035: { name: 'ContentEncryption', type: 'Container' },
-		        0x7e1: { name: 'ContentEncAlgo', type: 'Uint' },
-		        0x7e2: { name: 'ContentEncKeyID', type: 'Binary' },
-		        0x7e3: { name: 'ContentSignature', type: 'Binary' },
-		        0x7e4: { name: 'ContentSigKeyID', type: 'Binary' },
-		        0x7e5: { name: 'ContentSigAlgo', type: 'Uint' },
-		        0x7e6: { name: 'ContentSigHashAlgo', type: 'Uint' },
-		        0xc53bb6b: { name: 'Cues', type: 'Container' },
-		        0x3b: { name: 'CuePoint', type: 'Container' },
-		        0x33: { name: 'CueTime', type: 'Uint' },
-		        0x37: { name: 'CueTrackPositions', type: 'Container' },
-		        0x77: { name: 'CueTrack', type: 'Uint' },
-		        0x71: { name: 'CueClusterPosition', type: 'Uint' },
-		        0x70: { name: 'CueRelativePosition', type: 'Uint' },
-		        0x32: { name: 'CueDuration', type: 'Uint' },
-		        0x1378: { name: 'CueBlockNumber', type: 'Uint' },
-		        0x6a: { name: 'CueCodecState', type: 'Uint' },
-		        0x5b: { name: 'CueReference', type: 'Container' },
-		        0x16: { name: 'CueRefTime', type: 'Uint' },
-		        0x17: { name: 'CueRefCluster', type: 'Uint' },
-		        0x135f: { name: 'CueRefNumber', type: 'Uint' },
-		        0x6b: { name: 'CueRefCodecState', type: 'Uint' },
-		        0x941a469: { name: 'Attachments', type: 'Container' },
-		        0x21a7: { name: 'AttachedFile', type: 'Container' },
-		        0x67e: { name: 'FileDescription', type: 'String' },
-		        0x66e: { name: 'FileName', type: 'String' },
-		        0x660: { name: 'FileMimeType', type: 'String' },
-		        0x65c: { name: 'FileData', type: 'Binary' },
-		        0x6ae: { name: 'FileUID', type: 'Uint' },
-		        0x675: { name: 'FileReferral', type: 'Binary' },
-		        0x661: { name: 'FileUsedStartTime', type: 'Uint' },
-		        0x662: { name: 'FileUsedEndTime', type: 'Uint' },
-		        0x43a770: { name: 'Chapters', type: 'Container' },
-		        0x5b9: { name: 'EditionEntry', type: 'Container' },
-		        0x5bc: { name: 'EditionUID', type: 'Uint' },
-		        0x5bd: { name: 'EditionFlagHidden', type: 'Uint' },
-		        0x5db: { name: 'EditionFlagDefault', type: 'Uint' },
-		        0x5dd: { name: 'EditionFlagOrdered', type: 'Uint' },
-		        0x36: { name: 'ChapterAtom', type: 'Container' },
-		        0x33c4: { name: 'ChapterUID', type: 'Uint' },
-		        0x1654: { name: 'ChapterStringUID', type: 'String' },
-		        0x11: { name: 'ChapterTimeStart', type: 'Uint' },
-		        0x12: { name: 'ChapterTimeEnd', type: 'Uint' },
-		        0x18: { name: 'ChapterFlagHidden', type: 'Uint' },
-		        0x598: { name: 'ChapterFlagEnabled', type: 'Uint' },
-		        0x2e67: { name: 'ChapterSegmentUID', type: 'Binary' },
-		        0x2ebc: { name: 'ChapterSegmentEditionUID', type: 'Uint' },
-		        0x23c3: { name: 'ChapterPhysicalEquiv', type: 'Uint' },
-		        0xf: { name: 'ChapterTrack', type: 'Container' },
-		        0x9: { name: 'ChapterTrackNumber', type: 'Uint' },
-		        0x0: { name: 'ChapterDisplay', type: 'Container' },
-		        0x5: { name: 'ChapString', type: 'String' },
-		        0x37c: { name: 'ChapLanguage', type: 'String' },
-		        0x37e: { name: 'ChapCountry', type: 'String' },
-		        0x2944: { name: 'ChapProcess', type: 'Container' },
-		        0x2955: { name: 'ChapProcessCodecID', type: 'Uint' },
-		        0x50d: { name: 'ChapProcessPrivate', type: 'Binary' },
-		        0x2911: { name: 'ChapProcessCommand', type: 'Container' },
-		        0x2922: { name: 'ChapProcessTime', type: 'Uint' },
-		        0x2933: { name: 'ChapProcessData', type: 'Binary' },
-		        0x254c367: { name: 'Tags', type: 'Container' },
-		        0x3373: { name: 'Tag', type: 'Container' },
-		        0x23c0: { name: 'Targets', type: 'Container' },
-		        0x28ca: { name: 'TargetTypeValue', type: 'Uint' },
-		        0x23ca: { name: 'TargetType', type: 'String' },
-		        0x23c5: { name: 'TagTrackUID', type: 'Uint' },
-		        0x23c9: { name: 'TagEditionUID', type: 'Uint' },
-		        0x23c4: { name: 'TagChapterUID', type: 'Uint' },
-		        0x23c6: { name: 'TagAttachmentUID', type: 'Uint' },
-		        0x27c8: { name: 'SimpleTag', type: 'Container' },
-		        0x5a3: { name: 'TagName', type: 'String' },
-		        0x47a: { name: 'TagLanguage', type: 'String' },
-		        0x484: { name: 'TagDefault', type: 'Uint' },
-		        0x487: { name: 'TagString', type: 'String' },
-		        0x485: { name: 'TagBinary', type: 'Binary' }
-		    };
-
-		    function doInherit(newClass, baseClass) {
-		        newClass.prototype = Object.create(baseClass.prototype);
-		        newClass.prototype.constructor = newClass;
-		    }
-
-		    function WebmBase(name, type) {
-		        this.name = name || 'Unknown';
-		        this.type = type || 'Unknown';
-		    }
-		    WebmBase.prototype.updateBySource = function() { };
-		    WebmBase.prototype.setSource = function(source) {
-		        this.source = source;
-		        this.updateBySource();
-		    };
-		    WebmBase.prototype.updateByData = function() { };
-		    WebmBase.prototype.setData = function(data) {
-		        this.data = data;
-		        this.updateByData();
-		    };
-
-		    function WebmUint(name, type) {
-		        WebmBase.call(this, name, type || 'Uint');
-		    }
-		    doInherit(WebmUint, WebmBase);
-		    function padHex(hex) {
-		        return hex.length % 2 === 1 ? '0' + hex : hex;
-		    }
-		    WebmUint.prototype.updateBySource = function() {
-		        // use hex representation of a number instead of number value
-		        this.data = '';
-		        for (var i = 0; i < this.source.length; i++) {
-		            var hex = this.source[i].toString(16);
-		            this.data += padHex(hex);
-		        }
-		    };
-		    WebmUint.prototype.updateByData = function() {
-		        var length = this.data.length / 2;
-		        this.source = new Uint8Array(length);
-		        for (var i = 0; i < length; i++) {
-		            var hex = this.data.substr(i * 2, 2);
-		            this.source[i] = parseInt(hex, 16);
-		        }
-		    };
-		    WebmUint.prototype.getValue = function() {
-		        return parseInt(this.data, 16);
-		    };
-		    WebmUint.prototype.setValue = function(value) {
-		        this.setData(padHex(value.toString(16)));
-		    };
-
-		    function WebmFloat(name, type) {
-		        WebmBase.call(this, name, type || 'Float');
-		    }
-		    doInherit(WebmFloat, WebmBase);
-		    WebmFloat.prototype.getFloatArrayType = function() {
-		        return this.source && this.source.length === 4 ? Float32Array : Float64Array;
-		    };
-		    WebmFloat.prototype.updateBySource = function() {
-		        var byteArray = this.source.reverse();
-		        var floatArrayType = this.getFloatArrayType();
-		        var floatArray = new floatArrayType(byteArray.buffer);
-		        this.data = floatArray[0];
-		    };
-		    WebmFloat.prototype.updateByData = function() {
-		        var floatArrayType = this.getFloatArrayType();
-		        var floatArray = new floatArrayType([ this.data ]);
-		        var byteArray = new Uint8Array(floatArray.buffer);
-		        this.source = byteArray.reverse();
-		    };
-		    WebmFloat.prototype.getValue = function() {
-		        return this.data;
-		    };
-		    WebmFloat.prototype.setValue = function(value) {
-		        this.setData(value);
-		    };
-
-		    function WebmContainer(name, type) {
-		        WebmBase.call(this, name, type || 'Container');
-		    }
-		    doInherit(WebmContainer, WebmBase);
-		    WebmContainer.prototype.readByte = function() {
-		        return this.source[this.offset++];
-		    };
-		    WebmContainer.prototype.readUint = function() {
-		        var firstByte = this.readByte();
-		        var bytes = 8 - firstByte.toString(2).length;
-		        var value = firstByte - (1 << (7 - bytes));
-		        for (var i = 0; i < bytes; i++) {
-		            // don't use bit operators to support x86
-		            value *= 256;
-		            value += this.readByte();
-		        }
-		        return value;
-		    };
-		    WebmContainer.prototype.updateBySource = function() {
-		        this.data = [];
-		        for (this.offset = 0; this.offset < this.source.length; this.offset = end) {
-		            var id = this.readUint();
-		            var len = this.readUint();
-		            var end = Math.min(this.offset + len, this.source.length);
-		            var data = this.source.slice(this.offset, end);
-
-		            var info = sections[id] || { name: 'Unknown', type: 'Unknown' };
-		            var ctr = WebmBase;
-		            switch (info.type) {
-		                case 'Container':
-		                    ctr = WebmContainer;
-		                    break;
-		                case 'Uint':
-		                    ctr = WebmUint;
-		                    break;
-		                case 'Float':
-		                    ctr = WebmFloat;
-		                    break;
-		            }
-		            var section = new ctr(info.name, info.type);
-		            section.setSource(data);
-		            this.data.push({
-		                id: id,
-		                idHex: id.toString(16),
-		                data: section
-		            });
-		        }
-		    };
-		    WebmContainer.prototype.writeUint = function(x, draft) {
-		        for (var bytes = 1, flag = 0x80; x >= flag && bytes < 8; bytes++, flag *= 0x80) { }
-
-		        if (!draft) {
-		            var value = flag + x;
-		            for (var i = bytes - 1; i >= 0; i--) {
-		                // don't use bit operators to support x86
-		                var c = value % 256;
-		                this.source[this.offset + i] = c;
-		                value = (value - c) / 256;
-		            }
-		        }
-
-		        this.offset += bytes;
-		    };
-		    WebmContainer.prototype.writeSections = function(draft) {
-		        this.offset = 0;
-		        for (var i = 0; i < this.data.length; i++) {
-		            var section = this.data[i],
-		                content = section.data.source,
-		                contentLength = content.length;
-		            this.writeUint(section.id, draft);
-		            this.writeUint(contentLength, draft);
-		            if (!draft) {
-		                this.source.set(content, this.offset);
-		            }
-		            this.offset += contentLength;
-		        }
-		        return this.offset;
-		    };
-		    WebmContainer.prototype.updateByData = function() {
-		        // run without accessing this.source to determine total length - need to know it to create Uint8Array
-		        var length = this.writeSections('draft');
-		        this.source = new Uint8Array(length);
-		        // now really write data
-		        this.writeSections();
-		    };
-		    WebmContainer.prototype.getSectionById = function(id) {
-		        for (var i = 0; i < this.data.length; i++) {
-		            var section = this.data[i];
-		            if (section.id === id) {
-		                return section.data;
-		            }
-		        }
-		        return null;
-		    };
-
-		    function WebmFile(source) {
-		        WebmContainer.call(this, 'File', 'File');
-		        this.setSource(source);
-		    }
-		    doInherit(WebmFile, WebmContainer);
-		    WebmFile.prototype.fixDuration = function(duration, options) {
-		        var logger = options && options.logger;
-		        if (logger === undefined) {
-		            logger = function(message) {
-		                console.log(message);
-		            };
-		        } else if (!logger) {
-		            logger = function() { };
-		        }
-
-		        var segmentSection = this.getSectionById(0x8538067);
-		        if (!segmentSection) {
-		            logger('[fix-webm-duration] Segment section is missing');
-		            return false;
-		        }
-
-		        var infoSection = segmentSection.getSectionById(0x549a966);
-		        if (!infoSection) {
-		            logger('[fix-webm-duration] Info section is missing');
-		            return false;
-		        }
-
-		        var timeScaleSection = infoSection.getSectionById(0xad7b1);
-		        if (!timeScaleSection) {
-		            logger('[fix-webm-duration] TimecodeScale section is missing');
-		            return false;
-		        }
-
-		        var durationSection = infoSection.getSectionById(0x489);
-		        if (durationSection) {
-		            if (durationSection.getValue() <= 0) {
-		                logger(`[fix-webm-duration] Duration section is present, but the value is ${durationSection.getValue()}`);
-		                durationSection.setValue(duration);
-		            } else {
-		                logger(`[fix-webm-duration] Duration section is present, and the value is ${durationSection.getValue()}`);
-		                return false;
-		            }
-		        } else {
-		            logger('[fix-webm-duration] Duration section is missing');
-		            // append Duration section
-		            durationSection = new WebmFloat('Duration', 'Float');
-		            durationSection.setValue(duration);
-		            infoSection.data.push({
-		                id: 0x489,
-		                data: durationSection
-		            });
-		        }
-
-		        // set default time scale to 1 millisecond (1000000 nanoseconds)
-		        timeScaleSection.setValue(1000000);
-		        infoSection.updateByData();
-		        segmentSection.updateByData();
-		        this.updateByData();
-
-		        return true;
-		    };
-		    WebmFile.prototype.toBlob = function(mimeType) {
-		        return new Blob([ this.source.buffer ], { type: mimeType || 'video/webm' });
-		    };
-
-		    function fixWebmDuration(blob, duration, callback, options) {
-		        // The callback may be omitted - then the third argument is options
-		        if (typeof callback === "object") {
-		            options = callback;
-		            callback = undefined;
-		        }
-
-		        if (!callback) {
-		            return new Promise(function(resolve) {
-		                fixWebmDuration(blob, duration, resolve, options);
-		            });
-		        }
-
-		        try {
-		            var reader = new FileReader();
-		            reader.onloadend = function() {
-		                try {
-		                    var file = new WebmFile(new Uint8Array(reader.result));
-		                    if (file.fixDuration(duration, options)) {
-		                        blob = file.toBlob(blob.type);
-		                    }
-		                } catch (ex) {
-		                    // ignore
-		                }
-		                callback(blob);
-		            };
-		            reader.readAsArrayBuffer(blob);
-		        } catch (ex) {
-		            callback(blob);
-		        }
-		    }
-
-		    // Support AMD import default
-		    fixWebmDuration.default = fixWebmDuration;
-
-		    return fixWebmDuration;
-		}); 
-	} (fixWebmDuration));
-	return fixWebmDuration.exports;
-}
-
-var fixWebmDurationExports = requireFixWebmDuration();
-var ysFixWebmDuration = /*@__PURE__*/getDefaultExportFromCjs(fixWebmDurationExports);
-
-class ProcessVideo extends HTMLElement {
-    constructor() {
-        super();
-        this.previewStream = null;
-        this.recordedChunks = [];
-        this.mediaRecorder = null;
-        this.videoFile = null;
-        this.startTime = 0;
-        this.timerInterval = null;
-        this.recordingTimeout = null;
-        this.errorState = null;
-        this.timeLimit = 30;
-        this.phrase = this.generateDefaultPhrase();
-        // Attach shadow DOM and initialize UI
-        this.attachShadow({ mode: 'open' });
-        this.initializeUI();
-    }
-    get endpoint() {
-        return this.getAttribute("endpoint");
-    }
-    set endpoint(value) {
-        const current = this.getAttribute("endpoint");
-        if (value !== null && value !== current) {
-            this.setAttribute("endpoint", value);
-        }
-        else if (value === null && current !== null) {
-            this.removeAttribute("endpoint");
-        }
-    }
-    disconnectedCallback() {
-        this.stopRecording();
-        if (this.previewStream) {
-            this.previewStream.getTracks().forEach(track => track.stop());
-        }
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (name === 'endpoint' && newValue !== this.endpoint) {
-            this.endpoint = newValue;
-        }
-    }
-    generateDefaultPhrase() {
-        return Math.random().toString().slice(2, 10); // 8-digit random phrase
-    }
-    initializeUI() {
-        const phraseDisplay = this.phrase
-            .split("")
-            .map((digit) => `<span class="digit">${digit}</span>`)
-            .join(" ");
-        this.shadowRoot.innerHTML = `
-    <style>
-      :host {
-        display: block;
-        font-family: Arial, sans-serif;
-        --primary-color: #007bff;
-        --secondary-color: #6c757d;
-        --button-bg: var(--primary-color);
-        --button-text-color: #fff;
-        --input-border-color: var(--secondary-color);
-        --input-focus-border-color: var(--primary-color);
-        --spacing: 16px;
-        --button-padding: 10px 20px;
-        --border-radius: 4px;
-      }
-      
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing);
-        padding: var(--spacing);
-        max-width: 500px;
-        margin: 0 auto;
-        text-align: center;
-      }
-
-      .video-wrapper {
-        position: relative;
-        display: inline-block;
-      }
-
-      #timer-overlay {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        padding: 5px 10px;
-        border-radius: 4px;
-        font-family: Arial, sans-serif;
-        font-size: 14px;
-      }
-
-      video {
-        max-width: 100%;
-        border-radius: var(--border-radius);
-      }
-
-      input[type="text"], input[type="file"] {
-        padding: var(--button-padding);
-        border: 1px solid var(--input-border-color);
-        border-radius: var(--border-radius);
-        width: 100%;
-        max-width: 100%;
-      }
-
-      input[type="text"]:focus, input[type="file"]:focus {
-        outline: none;
-        border-color: var(--input-focus-border-color);
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      .phrase-display {
-        font-size: 24px;
-        font-weight: bold;
-        display: flex;
-        gap: 8px;
-        justify-content: center;
-      }
-      .digit {
-        padding: 4px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        text-align: center;
-        width: 24px;
-      }
-
-    </style>
-    <div class="container">
-      <slot name="video">
-        <div class="video-wrapper">
-          <video id="video-preview" muted autoplay></video>
-          <div id="timer-overlay" class="hidden">00:00</div>
-        </div>
-      </slot>
-      <slot name="phrase-display">
-        <div class="phrase-display">
-          ${phraseDisplay}
-        </div>
-      </slot>
-      <slot name="record-button">
-        <button id="record-button">Start Recording</button>
-      </slot>
-      <slot name="stop-button">
-        <button id="stop-button" disabled>Stop Recording</button>
-      </slot>
-      <slot name="file-input">
-        <input type="file" accept="video/*" id="file-input" />
-      </slot>
-      <slot name="submit-button">
-        <button id="submit-button">Submit Video</button>
-      </slot>
-      <slot name="loading">
-        <div class="message">Loading...</div>
-      </slot>
-      <slot name="error">
-        <div class="message error">An error occurred</div>
-      </slot>
-      <slot name="success">
-        <div class="message success">Video submitted successfully!</div>
-      </slot>
-    </div>
-    `;
-        this.attachSlotListeners();
-        this.setupPreview();
-        this.toggleState(null);
-    }
-    attachSlotListeners() {
-        const videoSlot = this.shadowRoot.querySelector('slot[name="video"]');
-        const recordButtonSlot = this.shadowRoot.querySelector('slot[name="record-button"]');
-        const stopButtonSlot = this.shadowRoot.querySelector('slot[name="stop-button"]');
-        const fileInputSlot = this.shadowRoot.querySelector('slot[name="file-input"]');
-        const submitButtonSlot = this.shadowRoot.querySelector('slot[name="submit-button"]');
-        this.videoElement = this.getSlotElement(videoSlot, '#video-preview', HTMLVideoElement);
-        this.recordButton = this.getSlotElement(recordButtonSlot, '#record-button', HTMLButtonElement);
-        this.stopButton = this.getSlotElement(stopButtonSlot, '#stop-button', HTMLButtonElement);
-        this.fileInput = this.getSlotElement(fileInputSlot, '#file-input', HTMLInputElement);
-        this.submitButton = this.getSlotElement(submitButtonSlot, '#submit-button', HTMLButtonElement);
-        if (this.fileInput) {
-            this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
-        }
-        if (this.recordButton) {
-            this.recordButton.addEventListener("click", () => this.startRecording());
-        }
-        if (this.stopButton) {
-            this.stopButton.addEventListener("click", () => this.stopRecording());
-        }
-        if (this.submitButton) {
-            this.submitButton.addEventListener("click", () => this.handleSubmit());
-        }
-    }
-    getSlotElement(slot, fallbackSelector, elementType) {
-        const assignedElements = slot.assignedElements();
-        return (assignedElements.length > 0 ? assignedElements[0] : null) || this.shadowRoot.querySelector(fallbackSelector);
-    }
-    replaceSlotContent(slotName, content) {
-        const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-        if (slot) {
-            if (typeof content === 'string') {
-                slot.innerHTML = content;
-            }
-            else if (content instanceof HTMLElement) {
-                slot.innerHTML = '';
-                slot.appendChild(content);
-            }
-        }
-    }
-    removeSlotListener(slotName, event, callback) {
-        const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-        if (slot) {
-            const assignedNodes = slot.assignedElements();
-            assignedNodes.forEach((node) => {
-                node.removeEventListener(event, callback);
-            });
-        }
-    }
-    toggleState(state) {
-        const states = ['loading', 'success', 'error'];
-        states.forEach((slotName) => {
-            const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`);
-            if (slot) {
-                slot.style.display = slotName === state ? 'block' : 'none';
-            }
-        });
-    }
-    convertPhraseToWords(phrase) {
-        const digitWords = [
-            "zero", "one", "two", "three", "four",
-            "five", "six", "seven", "eight", "nine"
-        ];
-        return phrase
-            .split("")
-            .map((digit) => digitWords[parseInt(digit, 10)])
-            .join(" ");
-    }
-    async setupPreview() {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-            this.previewStream = stream;
-            this.videoElement.srcObject = stream;
-            this.videoElement.controls = false;
-            this.videoElement.play();
-        }
-        catch (error) {
-            this.toggleState('error');
-            console.error('Error setting up video preview:', error);
-        }
-    }
-    async startTimer() {
-        const timerOverlay = this.shadowRoot.querySelector('#timer-overlay');
-        timerOverlay.textContent = '00:00';
-        timerOverlay.classList.remove('hidden');
-        let seconds = 0;
-        this.timerInterval = setInterval(() => {
-            seconds++;
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            timerOverlay.textContent = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
-        }, 1000);
-        this.recordingTimeout = setTimeout(() => {
-            this.stopRecording();
-        }, this.timeLimit * 1000);
-    }
-    async stopTimer() {
-        if (this.recordingTimeout) {
-            clearTimeout(this.recordingTimeout);
-        }
-        if (this.timerInterval) {
-            clearInterval(this.timerInterval);
-            this.timerInterval = null;
-        }
-        const timerOverlay = this.shadowRoot.querySelector('#timer-overlay');
-        timerOverlay.classList.add('hidden');
-    }
-    async startRecording() {
-        if (!window.MediaRecorder) {
-            console.error('MediaRecorder API is not supported in this browser');
-            return;
-        }
-        try {
-            if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-                console.log('Recording already in progress.');
-                return;
-            }
-            if (!this.previewStream) {
-                console.log('Initializing preview stream...');
-                this.previewStream = await navigator.mediaDevices.getUserMedia({
-                    video: true,
-                    audio: true,
-                });
-            }
-            this.videoElement.muted = true;
-            this.videoElement.srcObject = this.previewStream;
-            this.videoElement.currentTime = 0;
-            await this.videoElement.play();
-            this.mediaRecorder = new MediaRecorder(this.previewStream);
-            this.recordedChunks = [];
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    this.recordedChunks.push(event.data);
-                }
-            };
-            this.mediaRecorder.onstop = () => {
-                const duration = Date.now() - this.startTime;
-                const buggyBlob = new Blob(this.recordedChunks, { type: 'video/webm' });
-                ysFixWebmDuration(buggyBlob, duration, { logger: false })
-                    .then((fixedBlob) => {
-                    this.onStopMediaRecorder(fixedBlob);
-                });
-            };
-            this.mediaRecorder.start();
-            this.startTimer();
-            this.startTime = Date.now();
-            this.recordButton.disabled = true;
-            this.stopButton.disabled = false;
-            this.videoElement.controls = false;
-        }
-        catch (error) {
-            console.error('Error starting video recording:', error);
-        }
-    }
-    stopRecording() {
-        try {
-            if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') {
-                console.log('No recording in progress.');
-                return;
-            }
-            this.mediaRecorder.stop();
-            if (this.previewStream) {
-                this.previewStream.getTracks().forEach(track => track.stop());
-            }
-            this.videoElement.srcObject = null;
-            this.videoElement.src = '';
-            this.videoElement.controls = false;
-            this.recordButton.disabled = false;
-            this.stopButton.disabled = true;
-            this.mediaRecorder = null;
-            this.previewStream = null;
-        }
-        catch (error) {
-            console.error('Error stopping video recording:', error);
-        }
-    }
-    onStopMediaRecorder(blob) {
-        const videoURL = URL.createObjectURL(blob);
-        this.videoFile = new File([blob], 'recorded_video.webm', { type: 'video/webm' });
-        this.recordedChunks = [];
-        this.videoElement.src = videoURL;
-        this.videoElement.controls = true;
-        this.videoElement.play();
-        this.videoElement.muted = false;
-        this.stopTimer();
-        // Clean up the object URL when the video loads
-        this.videoElement.onloadeddata = () => {
-            URL.revokeObjectURL(videoURL);
-        };
-    }
-    handleFileUpload(event) {
-        const file = event.target.files?.[0];
-        if (file?.type?.startsWith('video/')) {
-            if (file.size > 100 * 1024 * 1024) { // 100MB limit
-                this.toggleState('error');
-                console.error('File size exceeds limit of 100MB');
-                return;
-            }
-            this.videoFile = file;
-            this.videoElement.src = URL.createObjectURL(file);
-            this.videoElement.play();
-        }
-        else {
-            this.toggleState('error');
-            console.error('Please select a valid video file.');
-        }
-    }
-    async handleSubmit() {
-        if (!this.videoFile) {
-            this.toggleState('error');
-            console.error('No video file to submit.');
-            return;
-        }
-        if (!this.endpoint) {
-            this.toggleState('error');
-            console.error('Endpoint must be provided.');
-            return;
-        }
-        if (!this.userFullname) {
-            this.toggleState('error');
-            console.error('User full name must be provided.');
-            return;
-        }
-        this.toggleState('loading');
-        try {
-            const formData = new FormData();
-            formData.append('video', this.videoFile);
-            formData.append('phrase', this.convertPhraseToWords(this.phrase));
-            formData.append('userFullname', this.userFullname);
-            const response = await fetch(this.endpoint, {
-                method: 'POST',
-                body: formData
-            });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const result = await response.json();
-            console.log('Response from endpoint:', result);
-            this.toggleState('success');
-        }
-        catch (error) {
-            this.toggleState('error');
-            console.error('Error submitting video:', error);
-        }
-    }
-    static get observedAttributes() {
-        return ['endpoint', 'user-fullname'];
-    }
-    get userFullname() {
-        return this.getAttribute('user-fullname');
-    }
-    set userFullname(value) {
-        if (value) {
-            this.setAttribute('user-fullname', value);
-        }
-        else {
-            this.removeAttribute('user-fullname');
-        }
-    }
-    get isRecording() {
-        return this.mediaRecorder?.state === 'recording';
-    }
-    get currentPhrase() {
-        return this.phrase;
-    }
-    get videoDuration() {
-        return this.videoElement?.duration || null;
-    }
-    get currentFile() {
-        return this.videoFile;
-    }
-    get currentStream() {
-        return this.previewStream;
-    }
-    get videoElementRef() {
-        return this.videoElement;
-    }
-    get fileInputRef() {
-        return this.fileInput;
-    }
-    get recordingTimeLimit() {
-        return this.timeLimit;
-    }
-    set recordingTimeLimit(value) {
-        this.timeLimit = value;
-        if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
-            if (this.recordingTimeout) {
-                clearTimeout(this.recordingTimeout);
-            }
-            this.recordingTimeout = setTimeout(() => this.stopRecording(), this.timeLimit * 1000);
-        }
-    }
-}
-customElements.define('process-video', ProcessVideo);
-
-const ProcessVideoWrapper = forwardRef(({ endpoint, userFullname, className, style, children, ...rest }, ref) => {
-    const elementRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-        startRecording: () => elementRef.current.startRecording(),
-        stopRecording: () => elementRef.current.stopRecording(),
-        handleSubmit: () => elementRef.current.handleSubmit(),
-        get currentPhrase() {
-            return elementRef.current.currentPhrase;
-        },
-        get isRecording() {
-            return elementRef.current.isRecording;
-        },
-        get videoDuration() {
-            return elementRef.current.videoDuration;
-        },
-        get currentFile() {
-            return elementRef.current.currentFile;
-        },
-        get currentStream() {
-            return elementRef.current.currentStream;
-        },
-        get videoElementRef() {
-            return elementRef.current.videoElementRef;
-        },
-        get fileInputRef() {
-            return elementRef.current.fileInputRef;
-        },
-        get recordingTimeLimit() {
-            return elementRef.current.recordingTimeLimit;
-        },
-        setRecordingTimeLimit(value) {
-            elementRef.current.recordingTimeLimit = value;
-        },
-    }));
-    useEffect(() => {
-        if (elementRef.current) {
-            if (endpoint !== undefined)
-                elementRef.current.setAttribute("endpoint", endpoint);
-            if (userFullname !== undefined)
-                elementRef.current.setAttribute("user-fullname", userFullname);
-        }
-    }, [endpoint, userFullname]);
-    return React.createElement("process-video", {
-        ref: elementRef,
-        className,
-        style,
-        ...rest,
-    }, children);
-});
-ProcessVideoWrapper.displayName = "ProcessVideo";
-
-export { BiometryEnrollmentWrapper as BiometryEnrollment, ProcessVideoWrapper as ProcessVideo };
-//# sourceMappingURL=react.js.map