videomail-client 16.0.1 → 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.1"
+        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);
@@ -20096,6 +20129,7 @@ var __webpack_exports__ = {};
             this.options.logger.debug(debugLine);
             const canReconnect = this.canReconnectAfterStreamClose();
             this.connected = false;
+            this.stopPings();
             if (this.shouldIgnoreStreamClose()) return;
             if (this.mediaTransmissionStarted) this.failInterruptedRecording();
             else if (canReconnect) {
@@ -20112,7 +20146,38 @@ var __webpack_exports__ = {};
             }, 0);
         }
         shouldIgnoreStreamClose() {
-            return this.recordingTransportFailed || Boolean(this.unloaded);
+            return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
+        }
+        handleStreamError(url2Connect, err) {
+            var _this_lastSocketError;
+            if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
+            else this.lastSocketError = serializeError(err);
+            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
+                error: serializeError(err)
+            });
+            this.options.logger.debug(debugLine);
+            if (this.validate()) {
+                this.connected = false;
+                this.stopPings();
+                this.discardSocket();
+                return;
+            }
+            if (!this.connected) return void this.handleConnectionFailure({
+                url2Connect,
+                cause: "error"
+            });
+            const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
+                cause: null != (_this_lastSocketError = this.lastSocketError) ? _this_lastSocketError : err
+            });
+            if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
+            this.emit("ERROR", {
+                err: error_createError({
+                    message: "WebSocket stream error",
+                    explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
+                    options: this.options,
+                    exc: streamError
+                })
+            });
         }
         sendPings() {
             this.stopPings();
@@ -20123,6 +20188,7 @@ var __webpack_exports__ = {};
         }
         stopPings() {
             if (void 0 === this.pingInterval) return;
+            this.options.logger.debug("Recorder: stopping pings...");
             window.clearInterval(this.pingInterval);
             this.pingInterval = void 0;
         }
@@ -20275,7 +20341,7 @@ var __webpack_exports__ = {};
             });
         }
         shouldIgnoreConnectionFailure() {
-            return this.connectionFailed || this.connected || Boolean(this.unloaded);
+            return this.connectionFailed || this.connected || Boolean(this.unloaded) || this.validate();
         }
         calculateFrameProgress() {
             return `${(this.confirmedFrameNumber / (this.framesCount || 1) * 100).toFixed(2)}%`;
@@ -20483,29 +20549,7 @@ var __webpack_exports__ = {};
                     }
                 });
                 stream.on("error", (err)=>{
-                    var _this_lastSocketError;
-                    if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
-                    else this.lastSocketError = serializeError(err);
-                    const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
-                        error: serializeError(err)
-                    });
-                    this.options.logger.debug(debugLine);
-                    if (!this.connected) return void this.handleConnectionFailure({
-                        url2Connect,
-                        cause: "error"
-                    });
-                    const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
-                        cause: null != (_this_lastSocketError = this.lastSocketError) ? _this_lastSocketError : err
-                    });
-                    if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
-                    this.emit("ERROR", {
-                        err: error_createError({
-                            message: "WebSocket stream error",
-                            explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
-                            options: this.options,
-                            exc: streamError
-                        })
-                    });
+                    this.handleStreamError(url2Connect, err);
                 });
                 stream.on("drain", ()=>{
                     this.handleStreamDrain(stream);
@@ -20853,6 +20897,7 @@ var __webpack_exports__ = {};
         }
         back(cb) {
             this.emit("GOING_BACK");
+            this.key = void 0;
             this.recordingDimensions = void 0;
             this.unloaded = false;
             this.show();
@@ -20919,7 +20964,7 @@ var __webpack_exports__ = {};
             this.stopTimeout = void 0;
         }
         validate() {
-            return this.connected && void 0 === this.canvas;
+            return Boolean(this.key) && void 0 === this.canvas;
         }
         isReady() {
             var _this_userMedia;

package/dist/esm/index.js

@@ -3620,7 +3620,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "16.0.1"
+    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);
@@ -6875,6 +6908,7 @@ class Recorder extends util_Despot {
         this.options.logger.debug(debugLine);
         const canReconnect = this.canReconnectAfterStreamClose();
         this.connected = false;
+        this.stopPings();
         if (this.shouldIgnoreStreamClose()) return;
         if (this.mediaTransmissionStarted) this.failInterruptedRecording();
         else if (canReconnect) {
@@ -6891,7 +6925,37 @@ class Recorder extends util_Despot {
         }, 0);
     }
     shouldIgnoreStreamClose() {
-        return this.recordingTransportFailed || Boolean(this.unloaded);
+        return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
+    }
+    handleStreamError(url2Connect, err) {
+        if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
+        else this.lastSocketError = serializeError(err);
+        const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
+            error: serializeError(err)
+        });
+        this.options.logger.debug(debugLine);
+        if (this.validate()) {
+            this.connected = false;
+            this.stopPings();
+            this.discardSocket();
+            return;
+        }
+        if (!this.connected) return void this.handleConnectionFailure({
+            url2Connect,
+            cause: "error"
+        });
+        const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
+            cause: this.lastSocketError ?? err
+        });
+        if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
+        this.emit("ERROR", {
+            err: error_createError({
+                message: "WebSocket stream error",
+                explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
+                options: this.options,
+                exc: streamError
+            })
+        });
     }
     sendPings() {
         this.stopPings();
@@ -6902,6 +6966,7 @@ class Recorder extends util_Despot {
     }
     stopPings() {
         if (void 0 === this.pingInterval) return;
+        this.options.logger.debug("Recorder: stopping pings...");
         window.clearInterval(this.pingInterval);
         this.pingInterval = void 0;
     }
@@ -7053,7 +7118,7 @@ class Recorder extends util_Despot {
         });
     }
     shouldIgnoreConnectionFailure() {
-        return this.connectionFailed || this.connected || Boolean(this.unloaded);
+        return this.connectionFailed || this.connected || Boolean(this.unloaded) || this.validate();
     }
     calculateFrameProgress() {
         return `${(this.confirmedFrameNumber / (this.framesCount || 1) * 100).toFixed(2)}%`;
@@ -7259,28 +7324,7 @@ class Recorder extends util_Despot {
                 }
             });
             stream.on("error", (err)=>{
-                if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
-                else this.lastSocketError = serializeError(err);
-                const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
-                    error: serializeError(err)
-                });
-                this.options.logger.debug(debugLine);
-                if (!this.connected) return void this.handleConnectionFailure({
-                    url2Connect,
-                    cause: "error"
-                });
-                const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
-                    cause: this.lastSocketError ?? err
-                });
-                if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
-                this.emit("ERROR", {
-                    err: error_createError({
-                        message: "WebSocket stream error",
-                        explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
-                        options: this.options,
-                        exc: streamError
-                    })
-                });
+                this.handleStreamError(url2Connect, err);
             });
             stream.on("drain", ()=>{
                 this.handleStreamDrain(stream);
@@ -7621,6 +7665,7 @@ class Recorder extends util_Despot {
     }
     back(cb) {
         this.emit("GOING_BACK");
+        this.key = void 0;
         this.recordingDimensions = void 0;
         this.unloaded = false;
         this.show();
@@ -7685,7 +7730,7 @@ class Recorder extends util_Despot {
         this.stopTimeout = void 0;
     }
     validate() {
-        return this.connected && void 0 === this.canvas;
+        return Boolean(this.key) && void 0 === this.canvas;
     }
     isReady() {
         return this.userMedia?.isReady();

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/esm/wrappers/visuals/recorder.d.ts

@@ -83,6 +83,7 @@ declare class Recorder extends Despot {
     private shouldReportStreamClose;
     private handleStreamClose;
     private shouldIgnoreStreamClose;
+    private handleStreamError;
     private sendPings;
     private stopPings;
     private onAudioSample;

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.1"
+                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);
@@ -19852,6 +19890,7 @@
                     this.options.logger.debug(debugLine);
                     const canReconnect = this.canReconnectAfterStreamClose();
                     this.connected = false;
+                    this.stopPings();
                     if (this.shouldIgnoreStreamClose()) return;
                     if (this.mediaTransmissionStarted) this.failInterruptedRecording();
                     else if (canReconnect) {
@@ -19868,7 +19907,37 @@
                     }, 0);
                 }
                 shouldIgnoreStreamClose() {
-                    return this.recordingTransportFailed || Boolean(this.unloaded);
+                    return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
+                }
+                handleStreamError(url2Connect, err) {
+                    if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
+                    else this.lastSocketError = serializeError(err);
+                    const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
+                        error: serializeError(err)
+                    });
+                    this.options.logger.debug(debugLine);
+                    if (this.validate()) {
+                        this.connected = false;
+                        this.stopPings();
+                        this.discardSocket();
+                        return;
+                    }
+                    if (!this.connected) return void this.handleConnectionFailure({
+                        url2Connect,
+                        cause: "error"
+                    });
+                    const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
+                        cause: this.lastSocketError ?? err
+                    });
+                    if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
+                    this.emit("ERROR", {
+                        err: error_createError({
+                            message: "WebSocket stream error",
+                            explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
+                            options: this.options,
+                            exc: streamError
+                        })
+                    });
                 }
                 sendPings() {
                     this.stopPings();
@@ -19879,6 +19948,7 @@
                 }
                 stopPings() {
                     if (void 0 === this.pingInterval) return;
+                    this.options.logger.debug("Recorder: stopping pings...");
                     window.clearInterval(this.pingInterval);
                     this.pingInterval = void 0;
                 }
@@ -20030,7 +20100,7 @@
                     });
                 }
                 shouldIgnoreConnectionFailure() {
-                    return this.connectionFailed || this.connected || Boolean(this.unloaded);
+                    return this.connectionFailed || this.connected || Boolean(this.unloaded) || this.validate();
                 }
                 calculateFrameProgress() {
                     return `${(this.confirmedFrameNumber / (this.framesCount || 1) * 100).toFixed(2)}%`;
@@ -20236,28 +20306,7 @@
                             }
                         });
                         stream.on("error", (err)=>{
-                            if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
-                            else this.lastSocketError = serializeError(err);
-                            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
-                                error: serializeError(err)
-                            });
-                            this.options.logger.debug(debugLine);
-                            if (!this.connected) return void this.handleConnectionFailure({
-                                url2Connect,
-                                cause: "error"
-                            });
-                            const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
-                                cause: this.lastSocketError ?? err
-                            });
-                            if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
-                            this.emit("ERROR", {
-                                err: error_createError({
-                                    message: "WebSocket stream error",
-                                    explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
-                                    options: this.options,
-                                    exc: streamError
-                                })
-                            });
+                            this.handleStreamError(url2Connect, err);
                         });
                         stream.on("drain", ()=>{
                             this.handleStreamDrain(stream);
@@ -20598,6 +20647,7 @@
                 }
                 back(cb) {
                     this.emit("GOING_BACK");
+                    this.key = void 0;
                     this.recordingDimensions = void 0;
                     this.unloaded = false;
                     this.show();
@@ -20662,7 +20712,7 @@
                     this.stopTimeout = void 0;
                 }
                 validate() {
-                    return this.connected && void 0 === this.canvas;
+                    return Boolean(this.key) && void 0 === this.canvas;
                 }
                 isReady() {
                     return this.userMedia?.isReady();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "16.0.1",
+  "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",