videomail-client 15.7.19 → 15.8.1

package/dist/cjs/index.cjs

@@ -10972,7 +10972,7 @@ var __webpack_exports__ = {};
     var client = __webpack_require__("Q");
     var client_default = /*#__PURE__*/ __webpack_require__.n(client);
     var package_namespaceObject = {
-        rE: "15.7.19"
+        rE: "15.8.1"
     };
     function isAudioEnabled(options) {
         return Boolean(options.audio.enabled);
@@ -19290,7 +19290,8 @@ var __webpack_exports__ = {};
         }
         hasInvalidDimensions() {
             if (!this.rawVisualUserMedia) return false;
-            return this.rawVisualUserMedia.videoWidth < 3 || this.rawVisualUserMedia.videoHeight < 3;
+            const { videoWidth, videoHeight } = this.rawVisualUserMedia;
+            return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
         }
         logEvent(eventType, params) {
             this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${util_pretty(params)}`);
@@ -19629,13 +19630,16 @@ var __webpack_exports__ = {};
             }
         }
         sendPings() {
+            this.stopPings();
             this.pingInterval = window.setInterval(()=>{
                 this.options.logger.debug("Recorder: pinging...");
                 this.writeStream(Buffer.from(""));
             }, this.options.timeouts.pingInterval);
         }
         stopPings() {
-            clearInterval(this.pingInterval);
+            if (void 0 === this.pingInterval) return;
+            window.clearInterval(this.pingInterval);
+            this.pingInterval = void 0;
         }
         onAudioSample(audioSample) {
             this.samplesCount++;
@@ -19666,24 +19670,27 @@ var __webpack_exports__ = {};
             }
         }
         clearRetryTimeout() {
-            if (!this.retryTimeout) return;
+            if (void 0 === this.retryTimeout) return;
             this.options.logger.debug("Recorder: clearRetryTimeout()");
             window.clearTimeout(this.retryTimeout);
             this.retryTimeout = void 0;
         }
         clearConnectionTimeout() {
-            if (!this.connectionTimeout) return;
+            if (void 0 === this.connectionTimeout) return;
             this.options.logger.debug("Recorder: clearConnectionTimeout()");
             window.clearTimeout(this.connectionTimeout);
             this.connectionTimeout = void 0;
         }
+        isOnline() {
+            return navigator.onLine;
+        }
         failConnection(params) {
             if (this.connectionFailed || this.connected || this.unloaded) return;
             this.connectionFailed = true;
             this.connecting = false;
             this.clearConnectionTimeout();
             const { url2Connect, cause } = params;
-            const online = navigator.onLine;
+            const online = this.isOnline();
             const elapsedMs = this.connectingStartedAt ? Date.now() - this.connectingStartedAt : void 0;
             const closeEvent = this.lastCloseEvent;
             const socketError = this.lastSocketError;
@@ -19873,7 +19880,10 @@ var __webpack_exports__ = {};
                 if (this.stream) {
                     const connectionTimeoutMs = this.options.timeouts.connection;
                     this.connectionTimeout = window.setTimeout(()=>{
-                        this.failConnection({
+                        if (this.isOnline() && this.isUserMediaLoaded()) {
+                            this.options.logger.debug(`${PIPE_SYMBOL}Reconnecting due to connection timeout.`);
+                            this.initSocket();
+                        } else this.failConnection({
                             url2Connect,
                             cause: "timeout"
                         });
@@ -20001,19 +20011,23 @@ var __webpack_exports__ = {};
             const characteristics = null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.getCharacteristics();
             this.options.logger.debug(`Recorder: userMediaErrorCallback(), name: ${err.name}, message: ${err.message} and Webcam characteristics: ${characteristics ? util_pretty(characteristics) : "none"}`);
             const errorListeners = this.getListeners("ERROR");
-            if (null == errorListeners ? void 0 : errorListeners.length) {
-                if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
-                    const videomailError = error_createError({
-                        err,
-                        options: this.options,
-                        usedConstraints
-                    });
-                    this.emit("ERROR", {
-                        err: videomailError
-                    });
-                } else this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
-                this.retryTimeout = window.setTimeout(this.initSocket.bind(this), this.options.timeouts.userMedia);
-            } else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
+            if (null == errorListeners ? void 0 : errorListeners.length) if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
+                const videomailError = error_createError({
+                    err,
+                    options: this.options,
+                    usedConstraints
+                });
+                this.emit("ERROR", {
+                    err: videomailError
+                });
+            } else {
+                this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
+                this.retryTimeout = window.setTimeout(()=>{
+                    this.retryTimeout = void 0;
+                    this.loadUserMedia();
+                }, this.options.timeouts.userMedia);
+            }
+            else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
             else {
                 this.options.logger.debug(`Recorder: no error listeners attached but throwing error ${util_pretty(err)}`);
                 throw error_createError({
@@ -20070,8 +20084,8 @@ var __webpack_exports__ = {};
                     ideal: idealHeight
                 };
             }
-            this.options.logger.debug(`Recorder: our webcam constraints are: ${util_pretty(constraints)}`);
-            this.options.logger.debug(`Recorder: available webcam constraints are: ${util_pretty(navigator.mediaDevices.getSupportedConstraints())}`);
+            this.options.logger.debug(util_summarize("Recorder: our webcam constraints are:", constraints));
+            this.options.logger.debug(util_summarize("Recorder: available webcam constraints are:", navigator.mediaDevices.getSupportedConstraints()));
             const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
             streamPromise.then((localStream)=>{
                 this.getUserMediaCallback(localStream, params);
@@ -20237,7 +20251,8 @@ var __webpack_exports__ = {};
                 limitReached
             });
             null == (_this_loop = this.loop) || _this_loop.complete();
-            setTimeout(()=>{
+            this.stopTimeout = window.setTimeout(()=>{
+                this.stopTimeout = void 0;
                 this.stopTime = Date.now();
                 const videoType = this.replay.getVideoType();
                 if (!videoType) throw new Error("Unable to video record when no video type is defined.");
@@ -20287,6 +20302,9 @@ var __webpack_exports__ = {};
             this.reset();
             this.clearUserMediaTimeout();
             this.clearConnectionTimeout();
+            this.clearRetryTimeout();
+            this.clearStopTimeout();
+            this.stopPings();
             this.connecting = false;
             if (this.userMedia) this.userMedia.unloadRemainingEventListeners();
             if (this.submitting) ;
@@ -20310,12 +20328,17 @@ var __webpack_exports__ = {};
             }
         }
         clearUserMediaTimeout() {
-            if (this.userMediaTimeout) {
+            if (void 0 !== this.userMediaTimeout) {
                 this.options.logger.debug("Recorder: clearUserMediaTimeout()");
                 window.clearTimeout(this.userMediaTimeout);
                 this.userMediaTimeout = void 0;
             }
         }
+        clearStopTimeout() {
+            if (void 0 === this.stopTimeout) return;
+            window.clearTimeout(this.stopTimeout);
+            this.stopTimeout = void 0;
+        }
         validate() {
             return this.connected && void 0 === this.canvas;
         }
@@ -20699,7 +20722,7 @@ var __webpack_exports__ = {};
             return this.userMediaLoaded;
         }
         constructor(visuals, replay, options){
-            super("Recorder", options), recorder_define_property(this, "visuals", void 0), recorder_define_property(this, "replay", void 0), recorder_define_property(this, "loop", void 0), recorder_define_property(this, "originalAnimationFrameObject", void 0), recorder_define_property(this, "samplesCount", 0), recorder_define_property(this, "framesCount", 0), recorder_define_property(this, "recordingStats", void 0), recorder_define_property(this, "confirmedFrameNumber", 0), recorder_define_property(this, "confirmedSampleNumber", 0), recorder_define_property(this, "recorderElement", void 0), recorder_define_property(this, "userMedia", void 0), recorder_define_property(this, "userMediaTimeout", void 0), recorder_define_property(this, "retryTimeout", void 0), recorder_define_property(this, "connectionTimeout", void 0), recorder_define_property(this, "frameProgress", void 0), recorder_define_property(this, "sampleProgress", void 0), recorder_define_property(this, "canvas", void 0), recorder_define_property(this, "ctx", void 0), recorder_define_property(this, "userMediaLoaded", void 0), recorder_define_property(this, "userMediaLoading", false), recorder_define_property(this, "submitting", false), recorder_define_property(this, "unloaded", void 0), recorder_define_property(this, "stopTime", void 0), recorder_define_property(this, "stream", void 0), recorder_define_property(this, "connecting", false), recorder_define_property(this, "connected", false), recorder_define_property(this, "connectionFailed", false), recorder_define_property(this, "blocking", false), recorder_define_property(this, "built", false), recorder_define_property(this, "key", void 0), recorder_define_property(this, "waitingTime", void 0), recorder_define_property(this, "connectingStartedAt", void 0), recorder_define_property(this, "lastCloseEvent", void 0), recorder_define_property(this, "lastSocketError", void 0), recorder_define_property(this, "pingInterval", void 0), recorder_define_property(this, "frame", void 0), recorder_define_property(this, "recordingBuffer", void 0), recorder_define_property(this, "facingMode", void 0);
+            super("Recorder", options), recorder_define_property(this, "visuals", void 0), recorder_define_property(this, "replay", void 0), recorder_define_property(this, "loop", void 0), recorder_define_property(this, "originalAnimationFrameObject", void 0), recorder_define_property(this, "samplesCount", 0), recorder_define_property(this, "framesCount", 0), recorder_define_property(this, "recordingStats", void 0), recorder_define_property(this, "confirmedFrameNumber", 0), recorder_define_property(this, "confirmedSampleNumber", 0), recorder_define_property(this, "recorderElement", void 0), recorder_define_property(this, "userMedia", void 0), recorder_define_property(this, "userMediaTimeout", void 0), recorder_define_property(this, "retryTimeout", void 0), recorder_define_property(this, "connectionTimeout", void 0), recorder_define_property(this, "stopTimeout", void 0), recorder_define_property(this, "frameProgress", void 0), recorder_define_property(this, "sampleProgress", void 0), recorder_define_property(this, "canvas", void 0), recorder_define_property(this, "ctx", void 0), recorder_define_property(this, "userMediaLoaded", void 0), recorder_define_property(this, "userMediaLoading", false), recorder_define_property(this, "submitting", false), recorder_define_property(this, "unloaded", void 0), recorder_define_property(this, "stopTime", void 0), recorder_define_property(this, "stream", void 0), recorder_define_property(this, "connecting", false), recorder_define_property(this, "connected", false), recorder_define_property(this, "connectionFailed", false), recorder_define_property(this, "blocking", false), recorder_define_property(this, "built", false), recorder_define_property(this, "key", void 0), recorder_define_property(this, "waitingTime", void 0), recorder_define_property(this, "connectingStartedAt", void 0), recorder_define_property(this, "lastCloseEvent", void 0), recorder_define_property(this, "lastSocketError", void 0), recorder_define_property(this, "pingInterval", void 0), recorder_define_property(this, "frame", void 0), recorder_define_property(this, "recordingBuffer", void 0), recorder_define_property(this, "facingMode", void 0);
             this.visuals = visuals;
             this.replay = replay;
             this.facingMode = options.video.facingMode;
@@ -21391,18 +21414,11 @@ var __webpack_exports__ = {};
         }
         initEvents(playerOnly = false) {
             this.options.logger.debug(`Container: initEvents (playerOnly = ${playerOnly})`);
-            if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", ()=>{
-                if (!this.built) return;
-                this.emit("WINDOW_RESIZE", "container");
-            });
-            if (this.options.enableAutoUnload) window.addEventListener("beforeunload", (e)=>{
-                this.unload({
-                    e
-                });
-            }, {
+            if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", this.handleWindowResize);
+            if (this.options.enableAutoUnload) window.addEventListener("beforeunload", this.handleBeforeUnload, {
                 once: true
             });
-            if (!playerOnly) this.visibility.onChange((visible)=>{
+            if (!playerOnly) this.stopListeningToVisibility = this.visibility.onChange((visible)=>{
                 if (this.built) if (visible) {
                     if (isAutoPauseEnabled(this.options) && this.isCountingDown()) this.resume();
                     this.emit("VISIBLE");
@@ -21412,19 +21428,7 @@ var __webpack_exports__ = {};
                 }
             });
             if (this.options.enableSpace) {
-                if (!playerOnly) window.addEventListener("keydown", (e)=>{
-                    const element = e.target;
-                    const tagName = element.tagName;
-                    const isEditable = element.isContentEditable || "true" === element.contentEditable;
-                    if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase()) {
-                        const code = e.code;
-                        if ("Space" === code) {
-                            e.preventDefault();
-                            if (this.options.enablePause) this.visuals.pauseOrResume();
-                            else this.visuals.recordOrStop();
-                        }
-                    }
-                });
+                if (!playerOnly) window.addEventListener("keydown", this.handleKeyDown);
             }
             this.on("ERROR", (params)=>{
                 this.processError(params);
@@ -21461,6 +21465,14 @@ var __webpack_exports__ = {};
             }
             this.endWaiting();
         }
+        removeBrowserEventListeners() {
+            var _this_stopListeningToVisibility, _this;
+            window.removeEventListener("resize", this.handleWindowResize);
+            window.removeEventListener("beforeunload", this.handleBeforeUnload);
+            window.removeEventListener("keydown", this.handleKeyDown);
+            null == (_this_stopListeningToVisibility = (_this = this).stopListeningToVisibility) || _this_stopListeningToVisibility.call(_this);
+            this.stopListeningToVisibility = void 0;
+        }
         hideMySelf() {
             html_hideElement(this.containerElement);
         }
@@ -21532,6 +21544,7 @@ var __webpack_exports__ = {};
                     exc
                 });
             } finally{
+                this.removeBrowserEventListeners();
                 this.removeAllListeners();
                 this.built = this.submitted = false;
             }
@@ -21813,7 +21826,22 @@ var __webpack_exports__ = {};
             this.visuals.setLimitSeconds(limitSeconds);
         }
         constructor(options){
-            super("Container", options), container_define_property(this, "visibility", document_visibility_default()()), container_define_property(this, "htmlElement", document.querySelector("html")), container_define_property(this, "visuals", void 0), container_define_property(this, "buttons", void 0), container_define_property(this, "resource", void 0), container_define_property(this, "form", void 0), container_define_property(this, "hasError", false), container_define_property(this, "submitted", false), container_define_property(this, "lastValidation", false), container_define_property(this, "containerElement", void 0), container_define_property(this, "built", false);
+            super("Container", options), container_define_property(this, "visibility", document_visibility_default()()), container_define_property(this, "htmlElement", document.querySelector("html")), container_define_property(this, "visuals", void 0), container_define_property(this, "buttons", void 0), container_define_property(this, "resource", void 0), container_define_property(this, "form", void 0), container_define_property(this, "hasError", false), container_define_property(this, "submitted", false), container_define_property(this, "lastValidation", false), container_define_property(this, "containerElement", void 0), container_define_property(this, "built", false), container_define_property(this, "stopListeningToVisibility", void 0), container_define_property(this, "handleWindowResize", ()=>{
+                if (this.built) this.emit("WINDOW_RESIZE", "container");
+            }), container_define_property(this, "handleBeforeUnload", (e)=>{
+                this.unload({
+                    e
+                });
+            }), container_define_property(this, "handleKeyDown", (e)=>{
+                const element = e.target;
+                const tagName = element.tagName;
+                const isEditable = element.isContentEditable || "true" === element.contentEditable;
+                if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase() && "Space" === e.code) {
+                    e.preventDefault();
+                    if (this.options.enablePause) this.visuals.pauseOrResume();
+                    else this.visuals.recordOrStop();
+                }
+            });
             this.visuals = new wrappers_visuals(this, options);
             this.buttons = new buttons(this, options);
             this.resource = new src_resource(options);

package/dist/esm/index.js

@@ -3620,7 +3620,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "15.7.19"
+    rE: "15.8.1"
 };
 function isAudioEnabled(options) {
     return Boolean(options.audio.enabled);
@@ -6333,7 +6333,8 @@ class UserMedia extends util_Despot {
     }
     hasInvalidDimensions() {
         if (!this.rawVisualUserMedia) return false;
-        return this.rawVisualUserMedia.videoWidth < 3 || this.rawVisualUserMedia.videoHeight < 3;
+        const { videoWidth, videoHeight } = this.rawVisualUserMedia;
+        return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
     }
     logEvent(eventType, params) {
         this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${util_pretty(params)}`);
@@ -6658,13 +6659,16 @@ class Recorder extends util_Despot {
         }
     }
     sendPings() {
+        this.stopPings();
         this.pingInterval = window.setInterval(()=>{
             this.options.logger.debug("Recorder: pinging...");
             this.writeStream(Buffer.from(""));
         }, this.options.timeouts.pingInterval);
     }
     stopPings() {
-        clearInterval(this.pingInterval);
+        if (void 0 === this.pingInterval) return;
+        window.clearInterval(this.pingInterval);
+        this.pingInterval = void 0;
     }
     onAudioSample(audioSample) {
         this.samplesCount++;
@@ -6695,24 +6699,27 @@ class Recorder extends util_Despot {
         }
     }
     clearRetryTimeout() {
-        if (!this.retryTimeout) return;
+        if (void 0 === this.retryTimeout) return;
         this.options.logger.debug("Recorder: clearRetryTimeout()");
         window.clearTimeout(this.retryTimeout);
         this.retryTimeout = void 0;
     }
     clearConnectionTimeout() {
-        if (!this.connectionTimeout) return;
+        if (void 0 === this.connectionTimeout) return;
         this.options.logger.debug("Recorder: clearConnectionTimeout()");
         window.clearTimeout(this.connectionTimeout);
         this.connectionTimeout = void 0;
     }
+    isOnline() {
+        return navigator.onLine;
+    }
     failConnection(params) {
         if (this.connectionFailed || this.connected || this.unloaded) return;
         this.connectionFailed = true;
         this.connecting = false;
         this.clearConnectionTimeout();
         const { url2Connect, cause } = params;
-        const online = navigator.onLine;
+        const online = this.isOnline();
         const elapsedMs = this.connectingStartedAt ? Date.now() - this.connectingStartedAt : void 0;
         const closeEvent = this.lastCloseEvent;
         const socketError = this.lastSocketError;
@@ -6901,7 +6908,10 @@ class Recorder extends util_Despot {
             if (this.stream) {
                 const connectionTimeoutMs = this.options.timeouts.connection;
                 this.connectionTimeout = window.setTimeout(()=>{
-                    this.failConnection({
+                    if (this.isOnline() && this.isUserMediaLoaded()) {
+                        this.options.logger.debug(`${PIPE_SYMBOL}Reconnecting due to connection timeout.`);
+                        this.initSocket();
+                    } else this.failConnection({
                         url2Connect,
                         cause: "timeout"
                     });
@@ -7026,19 +7036,23 @@ class Recorder extends util_Despot {
         const characteristics = this.userMedia?.getCharacteristics();
         this.options.logger.debug(`Recorder: userMediaErrorCallback(), name: ${err.name}, message: ${err.message} and Webcam characteristics: ${characteristics ? util_pretty(characteristics) : "none"}`);
         const errorListeners = this.getListeners("ERROR");
-        if (errorListeners?.length) {
-            if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
-                const videomailError = error_createError({
-                    err,
-                    options: this.options,
-                    usedConstraints
-                });
-                this.emit("ERROR", {
-                    err: videomailError
-                });
-            } else this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
-            this.retryTimeout = window.setTimeout(this.initSocket.bind(this), this.options.timeouts.userMedia);
-        } else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
+        if (errorListeners?.length) if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
+            const videomailError = error_createError({
+                err,
+                options: this.options,
+                usedConstraints
+            });
+            this.emit("ERROR", {
+                err: videomailError
+            });
+        } else {
+            this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
+            this.retryTimeout = window.setTimeout(()=>{
+                this.retryTimeout = void 0;
+                this.loadUserMedia();
+            }, this.options.timeouts.userMedia);
+        }
+        else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
         else {
             this.options.logger.debug(`Recorder: no error listeners attached but throwing error ${util_pretty(err)}`);
             throw error_createError({
@@ -7095,8 +7109,8 @@ class Recorder extends util_Despot {
                 ideal: idealHeight
             };
         }
-        this.options.logger.debug(`Recorder: our webcam constraints are: ${util_pretty(constraints)}`);
-        this.options.logger.debug(`Recorder: available webcam constraints are: ${util_pretty(navigator.mediaDevices.getSupportedConstraints())}`);
+        this.options.logger.debug(util_summarize("Recorder: our webcam constraints are:", constraints));
+        this.options.logger.debug(util_summarize("Recorder: available webcam constraints are:", navigator.mediaDevices.getSupportedConstraints()));
         const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
         streamPromise.then((localStream)=>{
             this.getUserMediaCallback(localStream, params);
@@ -7258,7 +7272,8 @@ class Recorder extends util_Despot {
             limitReached
         });
         this.loop?.complete();
-        setTimeout(()=>{
+        this.stopTimeout = window.setTimeout(()=>{
+            this.stopTimeout = void 0;
             this.stopTime = Date.now();
             const videoType = this.replay.getVideoType();
             if (!videoType) throw new Error("Unable to video record when no video type is defined.");
@@ -7307,6 +7322,9 @@ class Recorder extends util_Despot {
         this.reset();
         this.clearUserMediaTimeout();
         this.clearConnectionTimeout();
+        this.clearRetryTimeout();
+        this.clearStopTimeout();
+        this.stopPings();
         this.connecting = false;
         if (this.userMedia) this.userMedia.unloadRemainingEventListeners();
         if (this.submitting) ;
@@ -7329,12 +7347,17 @@ class Recorder extends util_Despot {
         }
     }
     clearUserMediaTimeout() {
-        if (this.userMediaTimeout) {
+        if (void 0 !== this.userMediaTimeout) {
             this.options.logger.debug("Recorder: clearUserMediaTimeout()");
             window.clearTimeout(this.userMediaTimeout);
             this.userMediaTimeout = void 0;
         }
     }
+    clearStopTimeout() {
+        if (void 0 === this.stopTimeout) return;
+        window.clearTimeout(this.stopTimeout);
+        this.stopTimeout = void 0;
+    }
     validate() {
         return this.connected && void 0 === this.canvas;
     }
@@ -7710,7 +7733,7 @@ class Recorder extends util_Despot {
         return this.userMediaLoaded;
     }
     constructor(visuals, replay, options){
-        super("Recorder", options), recorder_define_property(this, "visuals", void 0), recorder_define_property(this, "replay", void 0), recorder_define_property(this, "loop", void 0), recorder_define_property(this, "originalAnimationFrameObject", void 0), recorder_define_property(this, "samplesCount", 0), recorder_define_property(this, "framesCount", 0), recorder_define_property(this, "recordingStats", void 0), recorder_define_property(this, "confirmedFrameNumber", 0), recorder_define_property(this, "confirmedSampleNumber", 0), recorder_define_property(this, "recorderElement", void 0), recorder_define_property(this, "userMedia", void 0), recorder_define_property(this, "userMediaTimeout", void 0), recorder_define_property(this, "retryTimeout", void 0), recorder_define_property(this, "connectionTimeout", void 0), recorder_define_property(this, "frameProgress", void 0), recorder_define_property(this, "sampleProgress", void 0), recorder_define_property(this, "canvas", void 0), recorder_define_property(this, "ctx", void 0), recorder_define_property(this, "userMediaLoaded", void 0), recorder_define_property(this, "userMediaLoading", false), recorder_define_property(this, "submitting", false), recorder_define_property(this, "unloaded", void 0), recorder_define_property(this, "stopTime", void 0), recorder_define_property(this, "stream", void 0), recorder_define_property(this, "connecting", false), recorder_define_property(this, "connected", false), recorder_define_property(this, "connectionFailed", false), recorder_define_property(this, "blocking", false), recorder_define_property(this, "built", false), recorder_define_property(this, "key", void 0), recorder_define_property(this, "waitingTime", void 0), recorder_define_property(this, "connectingStartedAt", void 0), recorder_define_property(this, "lastCloseEvent", void 0), recorder_define_property(this, "lastSocketError", void 0), recorder_define_property(this, "pingInterval", void 0), recorder_define_property(this, "frame", void 0), recorder_define_property(this, "recordingBuffer", void 0), recorder_define_property(this, "facingMode", void 0);
+        super("Recorder", options), recorder_define_property(this, "visuals", void 0), recorder_define_property(this, "replay", void 0), recorder_define_property(this, "loop", void 0), recorder_define_property(this, "originalAnimationFrameObject", void 0), recorder_define_property(this, "samplesCount", 0), recorder_define_property(this, "framesCount", 0), recorder_define_property(this, "recordingStats", void 0), recorder_define_property(this, "confirmedFrameNumber", 0), recorder_define_property(this, "confirmedSampleNumber", 0), recorder_define_property(this, "recorderElement", void 0), recorder_define_property(this, "userMedia", void 0), recorder_define_property(this, "userMediaTimeout", void 0), recorder_define_property(this, "retryTimeout", void 0), recorder_define_property(this, "connectionTimeout", void 0), recorder_define_property(this, "stopTimeout", void 0), recorder_define_property(this, "frameProgress", void 0), recorder_define_property(this, "sampleProgress", void 0), recorder_define_property(this, "canvas", void 0), recorder_define_property(this, "ctx", void 0), recorder_define_property(this, "userMediaLoaded", void 0), recorder_define_property(this, "userMediaLoading", false), recorder_define_property(this, "submitting", false), recorder_define_property(this, "unloaded", void 0), recorder_define_property(this, "stopTime", void 0), recorder_define_property(this, "stream", void 0), recorder_define_property(this, "connecting", false), recorder_define_property(this, "connected", false), recorder_define_property(this, "connectionFailed", false), recorder_define_property(this, "blocking", false), recorder_define_property(this, "built", false), recorder_define_property(this, "key", void 0), recorder_define_property(this, "waitingTime", void 0), recorder_define_property(this, "connectingStartedAt", void 0), recorder_define_property(this, "lastCloseEvent", void 0), recorder_define_property(this, "lastSocketError", void 0), recorder_define_property(this, "pingInterval", void 0), recorder_define_property(this, "frame", void 0), recorder_define_property(this, "recordingBuffer", void 0), recorder_define_property(this, "facingMode", void 0);
         this.visuals = visuals;
         this.replay = replay;
         this.facingMode = options.video.facingMode;
@@ -8351,18 +8374,11 @@ class Container extends util_Despot {
     }
     initEvents(playerOnly = false) {
         this.options.logger.debug(`Container: initEvents (playerOnly = ${playerOnly})`);
-        if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", ()=>{
-            if (!this.built) return;
-            this.emit("WINDOW_RESIZE", "container");
-        });
-        if (this.options.enableAutoUnload) window.addEventListener("beforeunload", (e)=>{
-            this.unload({
-                e
-            });
-        }, {
+        if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", this.handleWindowResize);
+        if (this.options.enableAutoUnload) window.addEventListener("beforeunload", this.handleBeforeUnload, {
             once: true
         });
-        if (!playerOnly) this.visibility.onChange((visible)=>{
+        if (!playerOnly) this.stopListeningToVisibility = this.visibility.onChange((visible)=>{
             if (this.built) if (visible) {
                 if (isAutoPauseEnabled(this.options) && this.isCountingDown()) this.resume();
                 this.emit("VISIBLE");
@@ -8372,19 +8388,7 @@ class Container extends util_Despot {
             }
         });
         if (this.options.enableSpace) {
-            if (!playerOnly) window.addEventListener("keydown", (e)=>{
-                const element = e.target;
-                const tagName = element.tagName;
-                const isEditable = element.isContentEditable || "true" === element.contentEditable;
-                if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase()) {
-                    const code = e.code;
-                    if ("Space" === code) {
-                        e.preventDefault();
-                        if (this.options.enablePause) this.visuals.pauseOrResume();
-                        else this.visuals.recordOrStop();
-                    }
-                }
-            });
+            if (!playerOnly) window.addEventListener("keydown", this.handleKeyDown);
         }
         this.on("ERROR", (params)=>{
             this.processError(params);
@@ -8421,6 +8425,13 @@ class Container extends util_Despot {
         }
         this.endWaiting();
     }
+    removeBrowserEventListeners() {
+        window.removeEventListener("resize", this.handleWindowResize);
+        window.removeEventListener("beforeunload", this.handleBeforeUnload);
+        window.removeEventListener("keydown", this.handleKeyDown);
+        this.stopListeningToVisibility?.();
+        this.stopListeningToVisibility = void 0;
+    }
     hideMySelf() {
         html_hideElement(this.containerElement);
     }
@@ -8487,6 +8498,7 @@ class Container extends util_Despot {
                 exc
             });
         } finally{
+            this.removeBrowserEventListeners();
             this.removeAllListeners();
             this.built = this.submitted = false;
         }
@@ -8756,7 +8768,22 @@ class Container extends util_Despot {
         this.visuals.setLimitSeconds(limitSeconds);
     }
     constructor(options){
-        super("Container", options), container_define_property(this, "visibility", document_visibility()), container_define_property(this, "htmlElement", document.querySelector("html")), container_define_property(this, "visuals", void 0), container_define_property(this, "buttons", void 0), container_define_property(this, "resource", void 0), container_define_property(this, "form", void 0), container_define_property(this, "hasError", false), container_define_property(this, "submitted", false), container_define_property(this, "lastValidation", false), container_define_property(this, "containerElement", void 0), container_define_property(this, "built", false);
+        super("Container", options), container_define_property(this, "visibility", document_visibility()), container_define_property(this, "htmlElement", document.querySelector("html")), container_define_property(this, "visuals", void 0), container_define_property(this, "buttons", void 0), container_define_property(this, "resource", void 0), container_define_property(this, "form", void 0), container_define_property(this, "hasError", false), container_define_property(this, "submitted", false), container_define_property(this, "lastValidation", false), container_define_property(this, "containerElement", void 0), container_define_property(this, "built", false), container_define_property(this, "stopListeningToVisibility", void 0), container_define_property(this, "handleWindowResize", ()=>{
+            if (this.built) this.emit("WINDOW_RESIZE", "container");
+        }), container_define_property(this, "handleBeforeUnload", (e)=>{
+            this.unload({
+                e
+            });
+        }), container_define_property(this, "handleKeyDown", (e)=>{
+            const element = e.target;
+            const tagName = element.tagName;
+            const isEditable = element.isContentEditable || "true" === element.contentEditable;
+            if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase() && "Space" === e.code) {
+                e.preventDefault();
+                if (this.options.enablePause) this.visuals.pauseOrResume();
+                else this.visuals.recordOrStop();
+            }
+        });
         this.visuals = new wrappers_visuals(this, options);
         this.buttons = new buttons(this, options);
         this.resource = new src_resource(options);

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

@@ -28,6 +28,10 @@ declare class Container extends Despot {
     private lastValidation;
     private containerElement?;
     private built;
+    private stopListeningToVisibility?;
+    private readonly handleWindowResize;
+    private readonly handleBeforeUnload;
+    private readonly handleKeyDown;
     constructor(options: VideomailClientOptions);
     private buildChildren;
     build(buildOptions?: BuildOptions): HTMLElement | null | undefined;
@@ -39,6 +43,7 @@ declare class Container extends Despot {
     private correctDimensions;
     private removeDimensions;
     private unloadChildren;
+    private removeBrowserEventListeners;
     private hideMySelf;
     private submitVideomail;
     limitWidth(width?: number): import("../types/dimension.js").Dimension | undefined;

package/dist/esm/wrappers/visuals/recorder.d.ts

@@ -26,6 +26,7 @@ declare class Recorder extends Despot {
     private userMediaTimeout?;
     private retryTimeout?;
     private connectionTimeout?;
+    private stopTimeout?;
     private frameProgress?;
     private sampleProgress?;
     private canvas?;
@@ -59,6 +60,7 @@ declare class Recorder extends Despot {
     private onUserMediaReady;
     private clearRetryTimeout;
     private clearConnectionTimeout;
+    private isOnline;
     private failConnection;
     private calculateFrameProgress;
     private calculateSampleProgress;
@@ -88,6 +90,7 @@ declare class Recorder extends Despot {
     unload(params?: UnloadParams): void;
     reset(): void;
     private clearUserMediaTimeout;
+    private clearStopTimeout;
     validate(): boolean;
     isReady(): boolean | undefined;
     pause(params?: PauseParams): void;

package/dist/umd/index.js

@@ -10978,7 +10978,7 @@
             var client = __webpack_require__("Q");
             var client_default = /*#__PURE__*/ __webpack_require__.n(client);
             var package_namespaceObject = {
-                rE: "15.7.19"
+                rE: "15.8.1"
             };
             function isAudioEnabled(options) {
                 return Boolean(options.audio.enabled);
@@ -19062,7 +19062,8 @@
                 }
                 hasInvalidDimensions() {
                     if (!this.rawVisualUserMedia) return false;
-                    return this.rawVisualUserMedia.videoWidth < 3 || this.rawVisualUserMedia.videoHeight < 3;
+                    const { videoWidth, videoHeight } = this.rawVisualUserMedia;
+                    return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
                 }
                 logEvent(eventType, params) {
                     this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${util_pretty(params)}`);
@@ -19332,6 +19333,7 @@
                 userMediaTimeout;
                 retryTimeout;
                 connectionTimeout;
+                stopTimeout;
                 frameProgress;
                 sampleProgress;
                 canvas;
@@ -19406,13 +19408,16 @@
                     }
                 }
                 sendPings() {
+                    this.stopPings();
                     this.pingInterval = window.setInterval(()=>{
                         this.options.logger.debug("Recorder: pinging...");
                         this.writeStream(Buffer.from(""));
                     }, this.options.timeouts.pingInterval);
                 }
                 stopPings() {
-                    clearInterval(this.pingInterval);
+                    if (void 0 === this.pingInterval) return;
+                    window.clearInterval(this.pingInterval);
+                    this.pingInterval = void 0;
                 }
                 onAudioSample(audioSample) {
                     this.samplesCount++;
@@ -19443,24 +19448,27 @@
                     }
                 }
                 clearRetryTimeout() {
-                    if (!this.retryTimeout) return;
+                    if (void 0 === this.retryTimeout) return;
                     this.options.logger.debug("Recorder: clearRetryTimeout()");
                     window.clearTimeout(this.retryTimeout);
                     this.retryTimeout = void 0;
                 }
                 clearConnectionTimeout() {
-                    if (!this.connectionTimeout) return;
+                    if (void 0 === this.connectionTimeout) return;
                     this.options.logger.debug("Recorder: clearConnectionTimeout()");
                     window.clearTimeout(this.connectionTimeout);
                     this.connectionTimeout = void 0;
                 }
+                isOnline() {
+                    return navigator.onLine;
+                }
                 failConnection(params) {
                     if (this.connectionFailed || this.connected || this.unloaded) return;
                     this.connectionFailed = true;
                     this.connecting = false;
                     this.clearConnectionTimeout();
                     const { url2Connect, cause } = params;
-                    const online = navigator.onLine;
+                    const online = this.isOnline();
                     const elapsedMs = this.connectingStartedAt ? Date.now() - this.connectingStartedAt : void 0;
                     const closeEvent = this.lastCloseEvent;
                     const socketError = this.lastSocketError;
@@ -19649,7 +19657,10 @@
                         if (this.stream) {
                             const connectionTimeoutMs = this.options.timeouts.connection;
                             this.connectionTimeout = window.setTimeout(()=>{
-                                this.failConnection({
+                                if (this.isOnline() && this.isUserMediaLoaded()) {
+                                    this.options.logger.debug(`${PIPE_SYMBOL}Reconnecting due to connection timeout.`);
+                                    this.initSocket();
+                                } else this.failConnection({
                                     url2Connect,
                                     cause: "timeout"
                                 });
@@ -19774,19 +19785,23 @@
                     const characteristics = this.userMedia?.getCharacteristics();
                     this.options.logger.debug(`Recorder: userMediaErrorCallback(), name: ${err.name}, message: ${err.message} and Webcam characteristics: ${characteristics ? util_pretty(characteristics) : "none"}`);
                     const errorListeners = this.getListeners("ERROR");
-                    if (errorListeners?.length) {
-                        if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
-                            const videomailError = error_createError({
-                                err,
-                                options: this.options,
-                                usedConstraints
-                            });
-                            this.emit("ERROR", {
-                                err: videomailError
-                            });
-                        } else this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
-                        this.retryTimeout = window.setTimeout(this.initSocket.bind(this), this.options.timeouts.userMedia);
-                    } else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
+                    if (errorListeners?.length) if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
+                        const videomailError = error_createError({
+                            err,
+                            options: this.options,
+                            usedConstraints
+                        });
+                        this.emit("ERROR", {
+                            err: videomailError
+                        });
+                    } else {
+                        this.options.logger.debug(`Recorder: ignore user media error ${util_pretty(err)}`);
+                        this.retryTimeout = window.setTimeout(()=>{
+                            this.retryTimeout = void 0;
+                            this.loadUserMedia();
+                        }, this.options.timeouts.userMedia);
+                    }
+                    else if (this.unloaded) this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${util_pretty(err)}`);
                     else {
                         this.options.logger.debug(`Recorder: no error listeners attached but throwing error ${util_pretty(err)}`);
                         throw error_createError({
@@ -19843,8 +19858,8 @@
                             ideal: idealHeight
                         };
                     }
-                    this.options.logger.debug(`Recorder: our webcam constraints are: ${util_pretty(constraints)}`);
-                    this.options.logger.debug(`Recorder: available webcam constraints are: ${util_pretty(navigator.mediaDevices.getSupportedConstraints())}`);
+                    this.options.logger.debug(util_summarize("Recorder: our webcam constraints are:", constraints));
+                    this.options.logger.debug(util_summarize("Recorder: available webcam constraints are:", navigator.mediaDevices.getSupportedConstraints()));
                     const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
                     streamPromise.then((localStream)=>{
                         this.getUserMediaCallback(localStream, params);
@@ -20006,7 +20021,8 @@
                         limitReached
                     });
                     this.loop?.complete();
-                    setTimeout(()=>{
+                    this.stopTimeout = window.setTimeout(()=>{
+                        this.stopTimeout = void 0;
                         this.stopTime = Date.now();
                         const videoType = this.replay.getVideoType();
                         if (!videoType) throw new Error("Unable to video record when no video type is defined.");
@@ -20055,6 +20071,9 @@
                     this.reset();
                     this.clearUserMediaTimeout();
                     this.clearConnectionTimeout();
+                    this.clearRetryTimeout();
+                    this.clearStopTimeout();
+                    this.stopPings();
                     this.connecting = false;
                     if (this.userMedia) this.userMedia.unloadRemainingEventListeners();
                     if (this.submitting) ;
@@ -20077,12 +20096,17 @@
                     }
                 }
                 clearUserMediaTimeout() {
-                    if (this.userMediaTimeout) {
+                    if (void 0 !== this.userMediaTimeout) {
                         this.options.logger.debug("Recorder: clearUserMediaTimeout()");
                         window.clearTimeout(this.userMediaTimeout);
                         this.userMediaTimeout = void 0;
                     }
                 }
+                clearStopTimeout() {
+                    if (void 0 === this.stopTimeout) return;
+                    window.clearTimeout(this.stopTimeout);
+                    this.stopTimeout = void 0;
+                }
                 validate() {
                     return this.connected && void 0 === this.canvas;
                 }
@@ -21011,6 +21035,25 @@
                 lastValidation = false;
                 containerElement;
                 built = false;
+                stopListeningToVisibility;
+                handleWindowResize = ()=>{
+                    if (this.built) this.emit("WINDOW_RESIZE", "container");
+                };
+                handleBeforeUnload = (e)=>{
+                    this.unload({
+                        e
+                    });
+                };
+                handleKeyDown = (e)=>{
+                    const element = e.target;
+                    const tagName = element.tagName;
+                    const isEditable = element.isContentEditable || "true" === element.contentEditable;
+                    if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase() && "Space" === e.code) {
+                        e.preventDefault();
+                        if (this.options.enablePause) this.visuals.pauseOrResume();
+                        else this.visuals.recordOrStop();
+                    }
+                };
                 constructor(options){
                     super("Container", options);
                     this.visuals = new wrappers_visuals(this, options);
@@ -21093,18 +21136,11 @@
                 }
                 initEvents(playerOnly = false) {
                     this.options.logger.debug(`Container: initEvents (playerOnly = ${playerOnly})`);
-                    if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", ()=>{
-                        if (!this.built) return;
-                        this.emit("WINDOW_RESIZE", "container");
-                    });
-                    if (this.options.enableAutoUnload) window.addEventListener("beforeunload", (e)=>{
-                        this.unload({
-                            e
-                        });
-                    }, {
+                    if (this.options.recalculateDimensionsOnWindowResize) window.addEventListener("resize", this.handleWindowResize);
+                    if (this.options.enableAutoUnload) window.addEventListener("beforeunload", this.handleBeforeUnload, {
                         once: true
                     });
-                    if (!playerOnly) this.visibility.onChange((visible)=>{
+                    if (!playerOnly) this.stopListeningToVisibility = this.visibility.onChange((visible)=>{
                         if (this.built) if (visible) {
                             if (isAutoPauseEnabled(this.options) && this.isCountingDown()) this.resume();
                             this.emit("VISIBLE");
@@ -21114,19 +21150,7 @@
                         }
                     });
                     if (this.options.enableSpace) {
-                        if (!playerOnly) window.addEventListener("keydown", (e)=>{
-                            const element = e.target;
-                            const tagName = element.tagName;
-                            const isEditable = element.isContentEditable || "true" === element.contentEditable;
-                            if (!isEditable && tagName && "INPUT" !== tagName.toUpperCase() && "TEXTAREA" !== tagName.toUpperCase()) {
-                                const code = e.code;
-                                if ("Space" === code) {
-                                    e.preventDefault();
-                                    if (this.options.enablePause) this.visuals.pauseOrResume();
-                                    else this.visuals.recordOrStop();
-                                }
-                            }
-                        });
+                        if (!playerOnly) window.addEventListener("keydown", this.handleKeyDown);
                     }
                     this.on("ERROR", (params)=>{
                         this.processError(params);
@@ -21163,6 +21187,13 @@
                     }
                     this.endWaiting();
                 }
+                removeBrowserEventListeners() {
+                    window.removeEventListener("resize", this.handleWindowResize);
+                    window.removeEventListener("beforeunload", this.handleBeforeUnload);
+                    window.removeEventListener("keydown", this.handleKeyDown);
+                    this.stopListeningToVisibility?.();
+                    this.stopListeningToVisibility = void 0;
+                }
                 hideMySelf() {
                     html_hideElement(this.containerElement);
                 }
@@ -21229,6 +21260,7 @@
                             exc
                         });
                     } finally{
+                        this.removeBrowserEventListeners();
                         this.removeAllListeners();
                         this.built = this.submitted = false;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "15.7.19",
+  "version": "15.8.1",
   "description": "A wicked npm package to record videos directly in the browser, for Deaf and Sign Language!",
   "keywords": [
     "webcam",
@@ -88,11 +88,11 @@
     "@rsbuild/plugin-node-polyfill": "1.4.6",
     "@rsbuild/plugin-stylus": "2.0.1",
     "@rsdoctor/rspack-plugin": "1.6.4",
-    "@rslib/core": "1.0.2",
-    "@storybook/addon-a11y": "10.6.0",
-    "@storybook/addon-docs": "10.6.0",
-    "@storybook/addon-links": "10.6.0",
-    "@storybook/html": "10.6.0",
+    "@rslib/core": "1.0.3",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-links": "10.6.1",
+    "@storybook/html": "10.6.1",
     "@tsconfig/node26": "26.0.1",
     "@tsconfig/strictest": "2.0.8",
     "@types/defined": "1.0.2",
@@ -121,7 +121,7 @@
     "prettier-plugin-packagejson": "3.0.2",
     "prettier-plugin-sh": "0.20.2",
     "release-it": "21.1.0",
-    "storybook": "10.6.0",
+    "storybook": "10.6.1",
     "storybook-html-rsbuild": "3.6.0",
     "type-fest": "5.10.0",
     "typescript": "6.0.3",