videomail-client 16.0.2 → 16.0.3

package/README.md

@@ -260,25 +260,7 @@ You can also retrieve this data with `videomailClient.getByKey()`.
 
 ## Form Submissions
 
-With `enableAutoSubmission` enabled (the default), a recorded video and an explicit form `action` produce two requests: the client sends Videomail first, then POSTs the original form fields to that action after success. Without a recorded video, the client POSTs the form directly to its action.
-
-For first-party Videomail forms without an explicit `action`, a recorded video is sent in one request to the Videomail API; listen for `SUBMITTED` to handle the response. Set `enableAutoSubmission: false` when a host framework owns form submission, then let that integration resume its submission after `SUBMITTED`.
-
-If this does not work, verify that the configured selectors identify the form and its submit button:
-
-```ts
-selectors: {
-  formId: undefined,
-  submitButtonId: undefined,
-  submitButtonSelector: undefined,
-}
-```
-
-When these values are `undefined` (the defaults), the client detects the nearest form and a button with `type="submit"` automatically.
-
-### Include videomail meta data in Form Submissions
-
-When the client sends the second, host-form request, enable `submitWithVideomail` to include full videomail metadata under the `videomail` key. Otherwise the original form fields include the videomail alias, which can later be resolved with `videomailClient.getByAlias(alias)`.
+How to configure, inject meta data and test form submissions with the Videomail client can be found in [Form Submissions ✏️](./docs/FORM_SUBMISSIONS.md).
 
 ## Privacy and error reporting
 

package/dist/cjs/index.cjs

@@ -11115,7 +11115,7 @@ var __webpack_exports__ = {};
     var client = __webpack_require__("Q");
     var client_default = /*#__PURE__*/ __webpack_require__.n(client);
     var package_namespaceObject = {
-        rE: "16.0.2"
+        rE: "16.0.3"
     };
     function isAudioEnabled(options) {
         return Boolean(options.audio.enabled);
@@ -15271,13 +15271,35 @@ var __webpack_exports__ = {};
                 if ((null == type ? void 0 : type.toLowerCase()) === "hidden") inputElement.value = "";
             }
         }
-        startListeningToSubmitEvents() {
+        connectSubmitButton() {
             const submitButton = this.container.getSubmitButton();
-            if (submitButton) submitButton.onclick = this.doTheSubmit.bind(this);
+            if (!submitButton) return;
+            if (submitButton.form === this.formElement) return;
+            if (!this.formElement.id) {
+                let formId;
+                do formId = `videomail-form-${Form.nextFormId++}`;
+                while (document.getElementById(formId))
+                this.formElement.id = formId;
+                this.generatedFormId = formId;
+            }
+            this.submitButton = submitButton;
+            this.submitButtonFormAttribute = submitButton.getAttribute("form");
+            submitButton.setAttribute("form", this.formElement.id);
+        }
+        startListeningToSubmitEvents() {
+            this.connectSubmitButton();
+            this.formElement.addEventListener("submit", this.handleSubmit);
         }
         stopListeningToSubmitEvents() {
-            const submitButton = this.container.getSubmitButton();
-            if (submitButton) submitButton.onclick = null;
+            this.formElement.removeEventListener("submit", this.handleSubmit);
+            if (this.submitButton) {
+                if (null === this.submitButtonFormAttribute) this.submitButton.removeAttribute("form");
+                else this.submitButton.setAttribute("form", this.submitButtonFormAttribute);
+                this.submitButton = void 0;
+                this.submitButtonFormAttribute = null;
+            }
+            if (this.generatedFormId === this.formElement.id) this.formElement.removeAttribute("id");
+            this.generatedFormId = void 0;
         }
         doTheSubmit(e) {
             return _async_to_generator(function*() {
@@ -15286,6 +15308,7 @@ var __webpack_exports__ = {};
                     this.options.logger.debug(`Form: doTheSubmit(${string_pretty(e)})`);
                     e.preventDefault();
                 } else this.options.logger.debug("Form: doTheSubmit()");
+                if (this.isSubmitting) return false;
                 const hasHostAction = this.formElement.hasAttribute("action");
                 const url = null != (_this_formElement_getAttribute = this.formElement.getAttribute("action")) ? _this_formElement_getAttribute : this.options.apiUrl;
                 const method = this.formElement.getAttribute("method");
@@ -15300,7 +15323,14 @@ var __webpack_exports__ = {};
                     default:
                         chosenMethod = FormMethod.POST;
                 }
-                if (this.container.hasElement()) yield this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+                if (this.container.hasElement()) {
+                    this.isSubmitting = true;
+                    try {
+                        yield this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+                    } finally{
+                        this.isSubmitting = false;
+                    }
+                }
                 return false;
             }).call(this);
         }
@@ -15322,9 +15352,11 @@ var __webpack_exports__ = {};
             html_showElement(this.formElement);
         }
         constructor(container, formElement, options){
-            super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "validate", (event)=>{
+            super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "keyInput", void 0), form_define_property(this, "submitButton", void 0), form_define_property(this, "submitButtonFormAttribute", null), form_define_property(this, "generatedFormId", void 0), form_define_property(this, "isSubmitting", false), form_define_property(this, "FORM_FIELDS", {}), form_define_property(this, "validate", (event)=>{
                 this.container.validate(event);
-            }), form_define_property(this, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
+            }), form_define_property(this, "handleSubmit", (event)=>{
+                if (!event.defaultPrevented) this.doTheSubmit(event);
+            });
             this.container = container;
             this.formElement = formElement;
             this.FORM_FIELDS = {
@@ -15340,6 +15372,7 @@ var __webpack_exports__ = {};
             };
         }
     }
+    form_define_property(Form, "nextFormId", 0);
     const wrappers_form = Form;
     function resource_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
         try {
@@ -18025,7 +18058,7 @@ var __webpack_exports__ = {};
             html_disableElement(radioButtonElement);
             return radioButtonElement;
         }
-        makeButton(buttonClass, text, clickHandler, show, id, type, selector, disabled = true) {
+        makeButton(buttonClass, text, clickHandler, show, id, type = "button", selector, disabled = true) {
             let buttonElement;
             if (id) buttonElement = document.querySelector(`#${id}`);
             else if (selector) buttonElement = document.querySelector(selector);

package/dist/esm/index.js

@@ -3620,7 +3620,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "16.0.2"
+    rE: "16.0.3"
 };
 function isAudioEnabled(options) {
     return Boolean(options.audio.enabled);
@@ -4368,19 +4368,42 @@ class Form extends util_Despot {
             if (type?.toLowerCase() === "hidden") inputElement.value = "";
         }
     }
-    startListeningToSubmitEvents() {
+    connectSubmitButton() {
         const submitButton = this.container.getSubmitButton();
-        if (submitButton) submitButton.onclick = this.doTheSubmit.bind(this);
+        if (!submitButton) return;
+        if (submitButton.form === this.formElement) return;
+        if (!this.formElement.id) {
+            let formId;
+            do formId = `videomail-form-${Form.nextFormId++}`;
+            while (document.getElementById(formId))
+            this.formElement.id = formId;
+            this.generatedFormId = formId;
+        }
+        this.submitButton = submitButton;
+        this.submitButtonFormAttribute = submitButton.getAttribute("form");
+        submitButton.setAttribute("form", this.formElement.id);
+    }
+    startListeningToSubmitEvents() {
+        this.connectSubmitButton();
+        this.formElement.addEventListener("submit", this.handleSubmit);
     }
     stopListeningToSubmitEvents() {
-        const submitButton = this.container.getSubmitButton();
-        if (submitButton) submitButton.onclick = null;
+        this.formElement.removeEventListener("submit", this.handleSubmit);
+        if (this.submitButton) {
+            if (null === this.submitButtonFormAttribute) this.submitButton.removeAttribute("form");
+            else this.submitButton.setAttribute("form", this.submitButtonFormAttribute);
+            this.submitButton = void 0;
+            this.submitButtonFormAttribute = null;
+        }
+        if (this.generatedFormId === this.formElement.id) this.formElement.removeAttribute("id");
+        this.generatedFormId = void 0;
     }
     async doTheSubmit(e) {
         if (e) {
             this.options.logger.debug(`Form: doTheSubmit(${string_pretty(e)})`);
             e.preventDefault();
         } else this.options.logger.debug("Form: doTheSubmit()");
+        if (this.isSubmitting) return false;
         const hasHostAction = this.formElement.hasAttribute("action");
         const url = this.formElement.getAttribute("action") ?? this.options.apiUrl;
         const method = this.formElement.getAttribute("method");
@@ -4395,7 +4418,14 @@ class Form extends util_Despot {
             default:
                 chosenMethod = FormMethod.POST;
         }
-        if (this.container.hasElement()) await this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+        if (this.container.hasElement()) {
+            this.isSubmitting = true;
+            try {
+                await this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+            } finally{
+                this.isSubmitting = false;
+            }
+        }
         return false;
     }
     getInvalidElement() {
@@ -4416,9 +4446,11 @@ class Form extends util_Despot {
         html_showElement(this.formElement);
     }
     constructor(container, formElement, options){
-        super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "validate", (event)=>{
+        super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "keyInput", void 0), form_define_property(this, "submitButton", void 0), form_define_property(this, "submitButtonFormAttribute", null), form_define_property(this, "generatedFormId", void 0), form_define_property(this, "isSubmitting", false), form_define_property(this, "FORM_FIELDS", {}), form_define_property(this, "validate", (event)=>{
             this.container.validate(event);
-        }), form_define_property(this, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
+        }), form_define_property(this, "handleSubmit", (event)=>{
+            if (!event.defaultPrevented) this.doTheSubmit(event);
+        });
         this.container = container;
         this.formElement = formElement;
         this.FORM_FIELDS = {
@@ -4434,6 +4466,7 @@ class Form extends util_Despot {
         };
     }
 }
+form_define_property(Form, "nextFormId", 0);
 const wrappers_form = Form;
 function resource_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
@@ -4970,7 +5003,7 @@ class Buttons extends util_Despot {
         html_disableElement(radioButtonElement);
         return radioButtonElement;
     }
-    makeButton(buttonClass, text, clickHandler, show, id, type, selector, disabled = true) {
+    makeButton(buttonClass, text, clickHandler, show, id, type = "button", selector, disabled = true) {
         let buttonElement;
         buttonElement = id ? document.querySelector(`#${id}`) : selector ? document.querySelector(selector) : this.buttonsElement?.querySelector(`.${buttonClass}`);
         if (buttonElement) buttonElement = html_adjustButton(buttonElement, show, type, disabled);

package/dist/esm/wrappers/form.d.ts

@@ -10,12 +10,18 @@ export declare const FormMethod: {
 };
 export type FormMethodType = (typeof FormMethod)[keyof typeof FormMethod];
 declare class Form extends Despot {
+    private static nextFormId;
     private readonly container;
     private readonly formElement;
-    private readonly validate;
     private keyInput?;
+    private submitButton;
+    private submitButtonFormAttribute;
+    private generatedFormId;
+    private isSubmitting;
     private readonly FORM_FIELDS;
     constructor(container: Container, formElement: HTMLFormElement, options: VideomailClientOptions);
+    private readonly validate;
+    private readonly handleSubmit;
     private getData;
     transformFormData(formInputs: FormInputs): {
         url?: string;
@@ -405,9 +411,10 @@ declare class Form extends Despot {
     private hideSubmitButton;
     unload(): void;
     private resetForm;
+    private connectSubmitButton;
     private startListeningToSubmitEvents;
     private stopListeningToSubmitEvents;
-    doTheSubmit(e?: any): Promise<boolean>;
+    doTheSubmit(e?: Event): Promise<boolean>;
     getInvalidElement(): Element | null;
     findSubmitButton(): HTMLButtonElement | null;
     hide(): void;

package/dist/umd/index.js

@@ -11121,7 +11121,7 @@
             var client = __webpack_require__("Q");
             var client_default = /*#__PURE__*/ __webpack_require__.n(client);
             var package_namespaceObject = {
-                rE: "16.0.2"
+                rE: "16.0.3"
             };
             function isAudioEnabled(options) {
                 return Boolean(options.audio.enabled);
@@ -15029,12 +15029,14 @@
                 GET: "get"
             };
             class Form extends util_Despot {
+                static nextFormId = 0;
                 container;
                 formElement;
-                validate = (event)=>{
-                    this.container.validate(event);
-                };
                 keyInput;
+                submitButton;
+                submitButtonFormAttribute = null;
+                generatedFormId;
+                isSubmitting = false;
                 FORM_FIELDS = {};
                 constructor(container, formElement, options){
                     super("Form", options);
@@ -15052,6 +15054,12 @@
                         sendCopy: options.selectors.sendCopyInputName
                     };
                 }
+                validate = (event)=>{
+                    this.container.validate(event);
+                };
+                handleSubmit = (event)=>{
+                    if (!event.defaultPrevented) this.doTheSubmit(event);
+                };
                 getData() {
                     return getFormData(this.formElement, {
                         includeDisabled: true
@@ -15235,19 +15243,42 @@
                         if (type?.toLowerCase() === "hidden") inputElement.value = "";
                     }
                 }
-                startListeningToSubmitEvents() {
+                connectSubmitButton() {
                     const submitButton = this.container.getSubmitButton();
-                    if (submitButton) submitButton.onclick = this.doTheSubmit.bind(this);
+                    if (!submitButton) return;
+                    if (submitButton.form === this.formElement) return;
+                    if (!this.formElement.id) {
+                        let formId;
+                        do formId = `videomail-form-${Form.nextFormId++}`;
+                        while (document.getElementById(formId))
+                        this.formElement.id = formId;
+                        this.generatedFormId = formId;
+                    }
+                    this.submitButton = submitButton;
+                    this.submitButtonFormAttribute = submitButton.getAttribute("form");
+                    submitButton.setAttribute("form", this.formElement.id);
+                }
+                startListeningToSubmitEvents() {
+                    this.connectSubmitButton();
+                    this.formElement.addEventListener("submit", this.handleSubmit);
                 }
                 stopListeningToSubmitEvents() {
-                    const submitButton = this.container.getSubmitButton();
-                    if (submitButton) submitButton.onclick = null;
+                    this.formElement.removeEventListener("submit", this.handleSubmit);
+                    if (this.submitButton) {
+                        if (null === this.submitButtonFormAttribute) this.submitButton.removeAttribute("form");
+                        else this.submitButton.setAttribute("form", this.submitButtonFormAttribute);
+                        this.submitButton = void 0;
+                        this.submitButtonFormAttribute = null;
+                    }
+                    if (this.generatedFormId === this.formElement.id) this.formElement.removeAttribute("id");
+                    this.generatedFormId = void 0;
                 }
                 async doTheSubmit(e) {
                     if (e) {
                         this.options.logger.debug(`Form: doTheSubmit(${string_pretty(e)})`);
                         e.preventDefault();
                     } else this.options.logger.debug("Form: doTheSubmit()");
+                    if (this.isSubmitting) return false;
                     const hasHostAction = this.formElement.hasAttribute("action");
                     const url = this.formElement.getAttribute("action") ?? this.options.apiUrl;
                     const method = this.formElement.getAttribute("method");
@@ -15262,7 +15293,14 @@
                         default:
                             chosenMethod = FormMethod.POST;
                     }
-                    if (this.container.hasElement()) await this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+                    if (this.container.hasElement()) {
+                        this.isSubmitting = true;
+                        try {
+                            await this.container.submitAll(this.getData(), chosenMethod, url, hasHostAction);
+                        } finally{
+                            this.isSubmitting = false;
+                        }
+                    }
                     return false;
                 }
                 getInvalidElement() {
@@ -17888,7 +17926,7 @@
                     html_disableElement(radioButtonElement);
                     return radioButtonElement;
                 }
-                makeButton(buttonClass, text, clickHandler, show, id, type, selector, disabled = true) {
+                makeButton(buttonClass, text, clickHandler, show, id, type = "button", selector, disabled = true) {
                     let buttonElement;
                     buttonElement = id ? document.querySelector(`#${id}`) : selector ? document.querySelector(selector) : this.buttonsElement?.querySelector(`.${buttonClass}`);
                     if (buttonElement) buttonElement = html_adjustButton(buttonElement, show, type, disabled);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "16.0.2",
+  "version": "16.0.3",
   "description": "A wicked npm package to record videos directly in the browser, for Deaf and Sign Language!",
   "keywords": [
     "webcam",
@@ -53,7 +53,7 @@
     "prettier:fix": "prettier --write ./etc ./src ./.storybook *.ts *.js",
     "quality": "npm run test && npm run prettier && npm run lint && npm run types && npm run audit",
     "release": "release-it --only-version --config ./etc/release-it.ts",
-    "storybook": "cross-env BROWSER=chromium storybook dev -p 8443 --https --ssl-cert ./etc/ssl-certs/localhost.crt --ssl-key ./etc/ssl-certs/localhost.key",
+    "storybook": "cross-env BROWSER=chromium storybook dev -p 8443 -h localhost --https --ssl-cert ./etc/ssl-certs/localhost.crt --ssl-key ./etc/ssl-certs/localhost.key",
     "test": "cross-env ENVIRON=test vitest --watch=false",
     "types": "tsc --noEmit",
     "types:config": "tsc --showConfig"
@@ -113,7 +113,7 @@
     "eslint-plugin-simple-import-sort": "14.0.0",
     "globals": "17.13.0",
     "jsdom": "30.1.3",
-    "msw": "2.15.0",
+    "msw": "3.0.3",
     "msw-storybook-addon": "3.0.3",
     "prettier": "3.9.10",
     "prettier-plugin-curly": "0.4.1",