videomail-client 15.7.17 → 15.7.18

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.17"
+        rE: "15.7.18"
     };
     function isAudioEnabled(options) {
         return Boolean(options.audio.enabled);
@@ -14783,18 +14783,18 @@ var __webpack_exports__ = {};
             if (showParams) this.options.logger.debug(`${this.name} emits ${eventName} with ${util_pretty(params)}`);
             else this.options.logger.debug(`${this.name} emits ${eventName}`);
             try {
-                Despot.EMITTER.emit(eventName, ...params);
+                this.emitter.emit(eventName, ...params);
             } catch (exc) {
-                if (exc instanceof error_VideomailError) Despot.EMITTER.emit("ERROR", {
+                if (exc instanceof error_VideomailError) this.emitter.emit("ERROR", {
                     err: exc
                 });
-                else Despot.EMITTER.emit("ERROR", {
+                else this.emitter.emit("ERROR", {
                     exc
                 });
             }
         }
         on(eventName, callback) {
-            return Despot.EMITTER.on(eventName, callback);
+            return this.emitter.on(eventName, callback);
         }
         once(eventName, listener) {
             const callback = (...params)=>{
@@ -14804,23 +14804,30 @@ var __webpack_exports__ = {};
             const unbind = this.on(eventName, callback);
             return unbind;
         }
-        static getListeners(eventName) {
-            return Despot.EMITTER.events[eventName];
+        getListeners(eventName) {
+            return this.emitter.events[eventName];
         }
-        static removeListener(eventName) {
-            delete Despot.EMITTER.events[eventName];
+        removeListener(eventName) {
+            delete this.emitter.events[eventName];
         }
-        static removeAllListeners() {
-            Despot.EMITTER.events = {};
+        removeAllListeners() {
+            this.emitter.events = {};
         }
         constructor(name, options){
             Despot_define_property(this, "name", void 0);
+            Despot_define_property(this, "emitter", void 0);
             Despot_define_property(this, "options", void 0);
             this.name = name;
             this.options = options;
+            let emitter = Despot.emitters.get(options);
+            if (!emitter) {
+                emitter = createNanoEvents();
+                Despot.emitters.set(options, emitter);
+            }
+            this.emitter = emitter;
         }
     }
-    Despot_define_property(Despot, "EMITTER", createNanoEvents());
+    Despot_define_property(Despot, "emitters", new WeakMap());
     const util_Despot = Despot;
     function getValidity(element) {
         const validity = "validity" in element ? element.validity : void 0;
@@ -14931,27 +14938,33 @@ var __webpack_exports__ = {};
             this.options.logger.debug("Form: loadVideomail()");
             for (const formControl of this.formElement.elements){
                 const name = formControl.getAttribute("name");
-                if (name) {
+                if (name && this.isRegisteredFormField(formControl)) {
                     let value = videomail[name];
                     const tagName = formControl.tagName;
                     if (this.options.callbacks.adjustFormValueBeforePopulating) value = this.options.callbacks.adjustFormValueBeforePopulating(name, value, videomail);
-                    switch(tagName){
+                    if (null != value) switch(tagName){
                         case "INPUT":
                             {
                                 const inputControl = formControl;
                                 if (Array.isArray(value)) inputControl.value = value.join(", ");
-                                else inputControl.value = value;
+                                else inputControl.value = String(value);
                                 break;
                             }
                         case "TEXTAREA":
                             {
                                 const textArea = formControl;
-                                textArea.value = value;
+                                textArea.value = String(value);
+                                break;
+                            }
+                        case "SELECT":
+                            {
+                                const select = formControl;
+                                select.value = String(value);
                                 break;
                             }
                         default:
                             throw error_createError({
-                                message: `Unsupported form control tag name $${tagName} found`,
+                                message: `Unsupported form control tag name ${tagName} found`,
                                 options: this.options
                             });
                     }
@@ -15000,8 +15013,8 @@ var __webpack_exports__ = {};
                 for(let i = 0, len = inputElements.length; i < len; i++){
                     const inputElement = inputElements[i];
                     const type = null == inputElement ? void 0 : inputElement.getAttribute("type");
-                    if ("radio" === type || "select" === type) null == inputElement || inputElement.addEventListener("change", this.container.validate.bind(this.container));
-                    else null == inputElement || inputElement.addEventListener("input", this.container.validate.bind(this.container));
+                    if ("radio" === type || (null == inputElement ? void 0 : inputElement.tagName) === "SELECT") null == inputElement || inputElement.addEventListener("change", this.validate);
+                    else null == inputElement || inputElement.addEventListener("input", this.validate);
                 }
             }
             this.on("PREVIEW", (params)=>{
@@ -15046,8 +15059,8 @@ var __webpack_exports__ = {};
             const inputElements = this.getRegisteredFormElements();
             for (const inputElement of inputElements){
                 const type = inputElement.getAttribute("type");
-                if ("radio" === type || "select" === type) inputElement.removeEventListener("change", this.container.validate.bind(this.container));
-                else inputElement.removeEventListener("input", this.container.validate.bind(this.container));
+                if ("radio" === type || "SELECT" === inputElement.tagName) inputElement.removeEventListener("change", this.validate);
+                else inputElement.removeEventListener("input", this.validate);
             }
         }
         hideSubmitButton() {
@@ -15057,7 +15070,7 @@ var __webpack_exports__ = {};
         unload() {
             this.options.logger.debug("Form: unload()");
             this.removeAllInputListeners();
-            util_Despot.removeAllListeners();
+            this.removeAllListeners();
             this.stopListeningToSubmitEvents();
             this.resetForm();
         }
@@ -15067,7 +15080,7 @@ var __webpack_exports__ = {};
             const inputElements = this.getRegisteredFormElements();
             for (const inputElement of inputElements){
                 const type = inputElement.getAttribute("type");
-                if ((null == type ? void 0 : type.toLowerCase()) === "hidden") inputElement.setAttribute("value", "");
+                if ((null == type ? void 0 : type.toLowerCase()) === "hidden") inputElement.value = "";
             }
         }
         startListeningToSubmitEvents() {
@@ -15120,7 +15133,9 @@ 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, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
+            super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "validate", (event)=>{
+                this.container.validate(event);
+            }), form_define_property(this, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
             this.container = container;
             this.formElement = formElement;
             this.FORM_FIELDS = {
@@ -18063,7 +18078,7 @@ var __webpack_exports__ = {};
             if (this.built) {
                 this.reset();
                 this.options.logger.debug("Buttons: unload()");
-                util_Despot.removeAllListeners();
+                this.removeAllListeners();
                 this.hide();
                 this.built = false;
             }
@@ -18113,7 +18128,8 @@ var __webpack_exports__ = {};
         fire(cb) {
             this.unload();
             this.hide();
-            setTimeout(function() {
+            this.fireTimeoutId = window.setTimeout(()=>{
+                this.fireTimeoutId = void 0;
                 cb();
             }, 0);
         }
@@ -18123,15 +18139,16 @@ var __webpack_exports__ = {};
                 if (void 0 !== this.countdown) {
                     this.countdown--;
                     if (this.countdown < 1) this.fire(cb);
-                    else if (this.countdownElement) this.countdownElement.innerHTML = this.countdown.toString();
+                    else if (this.countdownElement) this.countdownElement.textContent = this.countdown.toString();
                 }
             }
         }
         start(cb) {
             if (!this.countdownElement) throw new Error("Unable to start countdown without an element");
             if ("number" != typeof this.options.video.countdown) throw new TypeError(`The defined countdown is not a valid number: ${this.options.video.countdown}`);
+            this.unload();
             this.countdown = this.options.video.countdown;
-            this.countdownElement.innerHTML = this.countdown.toString();
+            this.countdownElement.textContent = this.countdown.toString();
             this.show();
             this.intervalId = window.setInterval(this.countBackward.bind(this, cb), 950);
         }
@@ -18156,12 +18173,14 @@ var __webpack_exports__ = {};
             html_showElement(this.countdownElement);
         }
         isCountingDown() {
-            return Boolean(this.intervalId);
+            return void 0 !== this.intervalId;
         }
         unload() {
-            clearInterval(this.intervalId);
+            if (void 0 !== this.intervalId) window.clearInterval(this.intervalId);
+            if (void 0 !== this.fireTimeoutId) window.clearTimeout(this.fireTimeoutId);
             this.paused = false;
             this.intervalId = void 0;
+            this.fireTimeoutId = void 0;
         }
         hide() {
             html_hideElement(this.countdownElement);
@@ -18172,6 +18191,7 @@ var __webpack_exports__ = {};
             countdown_define_property(this, "options", void 0);
             countdown_define_property(this, "countdownElement", void 0);
             countdown_define_property(this, "intervalId", void 0);
+            countdown_define_property(this, "fireTimeoutId", void 0);
             countdown_define_property(this, "countdown", void 0);
             countdown_define_property(this, "paused", false);
             this.visuals = visuals;
@@ -19291,7 +19311,7 @@ var __webpack_exports__ = {};
         }
         audioRecord(audioCallback) {
             var _this_audioRecorder;
-            util_Despot.removeListener("SENDING_FIRST_FRAME");
+            this.removeListener("SENDING_FIRST_FRAME");
             null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.record(audioCallback);
         }
         init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, switchingFacingMode) {
@@ -19308,7 +19328,7 @@ var __webpack_exports__ = {};
                 var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
                 this.options.logger.debug("UserMedia: unloadAllEventListeners()");
                 this.unloadRemainingEventListeners();
-                util_Despot.removeListener("SENDING_FIRST_FRAME");
+                this.removeListener("SENDING_FIRST_FRAME");
                 null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("play", onPlay);
                 null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener("loadedmetadata", onLoadedMetaData);
             };
@@ -19978,7 +19998,7 @@ var __webpack_exports__ = {};
             this.clearUserMediaTimeout();
             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 = util_Despot.getListeners("ERROR");
+            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({
@@ -20081,7 +20101,7 @@ var __webpack_exports__ = {};
                 this.clearUserMediaTimeout();
                 this.options.logger.debug("Recorder: failed to load genuine user media");
                 this.userMediaLoading = false;
-                const errorListeners = util_Despot.getListeners("ERROR");
+                const errorListeners = this.getListeners("ERROR");
                 if (null == errorListeners ? void 0 : errorListeners.length) this.emit("ERROR", {
                     exc
                 });
@@ -20725,12 +20745,12 @@ var __webpack_exports__ = {};
                 heightValue = this.videomail.height;
                 if (widthValue && heightValue) ratio = heightValue / widthValue;
             }
-            if (!widthValue) {
+            if (!widthValue && (videoHeight > 0 || this.options.video.height)) {
                 const newWidthDimensions = dimensions_calculateWidth(responsive, this.options, videoHeight, ratio);
                 const newWidth = newWidthDimensions.value;
                 widthValue = newWidth;
             }
-            if (!heightValue) {
+            if (!heightValue && (videoWidth > 0 || this.options.video.width)) {
                 let element = this.visuals.getElement();
                 if (!element) element = document.body;
                 const newDimensions = dimensions_calculateHeight(responsive, videoWidth, this.options, ratio, element);
@@ -20742,14 +20762,15 @@ var __webpack_exports__ = {};
             else this.replayElement.style.height = "auto";
         }
         setVideomail(newVideomail, playerOnly = false) {
-            var _this_videomail_recordingStats;
+            var _this_replayElement, _this_videomail_recordingStats;
             this.videomail = newVideomail;
+            null == (_this_replayElement = this.replayElement) || _this_replayElement.setAttribute("controls", "controls");
             if (this.videomail.mp4) this.setMp4Source(this.videomail.mp4);
             if (this.videomail.webm) this.setWebMSource(this.videomail.webm);
             if (this.videomail.vtt) this.setTrackSource(this.videomail.vtt);
             if (this.videomail.poster) {
-                var _this_replayElement;
-                null == (_this_replayElement = this.replayElement) || _this_replayElement.setAttribute("poster", this.videomail.poster);
+                var _this_replayElement1;
+                null == (_this_replayElement1 = this.replayElement) || _this_replayElement1.setAttribute("poster", this.videomail.poster);
             }
             this.copyAttributes(this.videomail);
             const sampleRate = null == (_this_videomail_recordingStats = this.videomail.recordingStats) ? void 0 : _this_videomail_recordingStats.sampleRate;
@@ -20770,7 +20791,7 @@ var __webpack_exports__ = {};
             } else html_showElement(this.replayElement);
             if (playerOnly) html_showElement(this.replayElement.parentElement);
             else this.visuals.show();
-            if (hasAudio) this.replayElement.setAttribute("volume", "1");
+            if (hasAudio) this.replayElement.volume = 1;
             else if (!isAudioEnabled(this.options)) this.replayElement.setAttribute("muted", "true");
             this.replayElement.load();
             if (this.videomail) this.replayElement.addEventListener("canplaythrough", ()=>{
@@ -20841,7 +20862,7 @@ var __webpack_exports__ = {};
         }
         unload(params) {
             this.options.logger.debug("Replay: unload()");
-            util_Despot.removeAllListeners();
+            this.removeAllListeners();
             if (null == params ? void 0 : params.startingOver) this.hide();
             else {
                 var _this_replayElement;
@@ -21515,7 +21536,7 @@ var __webpack_exports__ = {};
                     exc
                 });
             } finally{
-                util_Despot.removeAllListeners();
+                this.removeAllListeners();
                 this.built = this.submitted = false;
             }
         }

package/dist/esm/index.js

@@ -3620,7 +3620,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "15.7.17"
+    rE: "15.7.18"
 };
 function isAudioEnabled(options) {
     return Boolean(options.audio.enabled);
@@ -4053,18 +4053,18 @@ class Despot {
         if (showParams) this.options.logger.debug(`${this.name} emits ${eventName} with ${util_pretty(params)}`);
         else this.options.logger.debug(`${this.name} emits ${eventName}`);
         try {
-            Despot.EMITTER.emit(eventName, ...params);
+            this.emitter.emit(eventName, ...params);
         } catch (exc) {
-            if (exc instanceof error_VideomailError) Despot.EMITTER.emit("ERROR", {
+            if (exc instanceof error_VideomailError) this.emitter.emit("ERROR", {
                 err: exc
             });
-            else Despot.EMITTER.emit("ERROR", {
+            else this.emitter.emit("ERROR", {
                 exc
             });
         }
     }
     on(eventName, callback) {
-        return Despot.EMITTER.on(eventName, callback);
+        return this.emitter.on(eventName, callback);
     }
     once(eventName, listener) {
         const callback = (...params)=>{
@@ -4074,23 +4074,30 @@ class Despot {
         const unbind = this.on(eventName, callback);
         return unbind;
     }
-    static getListeners(eventName) {
-        return Despot.EMITTER.events[eventName];
+    getListeners(eventName) {
+        return this.emitter.events[eventName];
     }
-    static removeListener(eventName) {
-        delete Despot.EMITTER.events[eventName];
+    removeListener(eventName) {
+        delete this.emitter.events[eventName];
     }
-    static removeAllListeners() {
-        Despot.EMITTER.events = {};
+    removeAllListeners() {
+        this.emitter.events = {};
     }
     constructor(name, options){
         Despot_define_property(this, "name", void 0);
+        Despot_define_property(this, "emitter", void 0);
         Despot_define_property(this, "options", void 0);
         this.name = name;
         this.options = options;
+        let emitter = Despot.emitters.get(options);
+        if (!emitter) {
+            emitter = createNanoEvents();
+            Despot.emitters.set(options, emitter);
+        }
+        this.emitter = emitter;
     }
 }
-Despot_define_property(Despot, "EMITTER", createNanoEvents());
+Despot_define_property(Despot, "emitters", new WeakMap());
 const util_Despot = Despot;
 function getValidity(element) {
     const validity = "validity" in element ? element.validity : void 0;
@@ -4175,27 +4182,33 @@ class Form extends util_Despot {
         this.options.logger.debug("Form: loadVideomail()");
         for (const formControl of this.formElement.elements){
             const name = formControl.getAttribute("name");
-            if (name) {
+            if (name && this.isRegisteredFormField(formControl)) {
                 let value = videomail[name];
                 const tagName = formControl.tagName;
                 if (this.options.callbacks.adjustFormValueBeforePopulating) value = this.options.callbacks.adjustFormValueBeforePopulating(name, value, videomail);
-                switch(tagName){
+                if (null != value) switch(tagName){
                     case "INPUT":
                         {
                             const inputControl = formControl;
                             if (Array.isArray(value)) inputControl.value = value.join(", ");
-                            else inputControl.value = value;
+                            else inputControl.value = String(value);
                             break;
                         }
                     case "TEXTAREA":
                         {
                             const textArea = formControl;
-                            textArea.value = value;
+                            textArea.value = String(value);
+                            break;
+                        }
+                    case "SELECT":
+                        {
+                            const select = formControl;
+                            select.value = String(value);
                             break;
                         }
                     default:
                         throw error_createError({
-                            message: `Unsupported form control tag name $${tagName} found`,
+                            message: `Unsupported form control tag name ${tagName} found`,
                             options: this.options
                         });
                 }
@@ -4244,8 +4257,8 @@ class Form extends util_Despot {
             for(let i = 0, len = inputElements.length; i < len; i++){
                 const inputElement = inputElements[i];
                 const type = inputElement?.getAttribute("type");
-                if ("radio" === type || "select" === type) inputElement?.addEventListener("change", this.container.validate.bind(this.container));
-                else inputElement?.addEventListener("input", this.container.validate.bind(this.container));
+                if ("radio" === type || inputElement?.tagName === "SELECT") inputElement?.addEventListener("change", this.validate);
+                else inputElement?.addEventListener("input", this.validate);
             }
         }
         this.on("PREVIEW", (params)=>{
@@ -4288,8 +4301,8 @@ class Form extends util_Despot {
         const inputElements = this.getRegisteredFormElements();
         for (const inputElement of inputElements){
             const type = inputElement.getAttribute("type");
-            if ("radio" === type || "select" === type) inputElement.removeEventListener("change", this.container.validate.bind(this.container));
-            else inputElement.removeEventListener("input", this.container.validate.bind(this.container));
+            if ("radio" === type || "SELECT" === inputElement.tagName) inputElement.removeEventListener("change", this.validate);
+            else inputElement.removeEventListener("input", this.validate);
         }
     }
     hideSubmitButton() {
@@ -4299,7 +4312,7 @@ class Form extends util_Despot {
     unload() {
         this.options.logger.debug("Form: unload()");
         this.removeAllInputListeners();
-        util_Despot.removeAllListeners();
+        this.removeAllListeners();
         this.stopListeningToSubmitEvents();
         this.resetForm();
     }
@@ -4309,7 +4322,7 @@ class Form extends util_Despot {
         const inputElements = this.getRegisteredFormElements();
         for (const inputElement of inputElements){
             const type = inputElement.getAttribute("type");
-            if (type?.toLowerCase() === "hidden") inputElement.setAttribute("value", "");
+            if (type?.toLowerCase() === "hidden") inputElement.value = "";
         }
     }
     startListeningToSubmitEvents() {
@@ -4359,7 +4372,9 @@ 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, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
+        super("Form", options), form_define_property(this, "container", void 0), form_define_property(this, "formElement", void 0), form_define_property(this, "validate", (event)=>{
+            this.container.validate(event);
+        }), form_define_property(this, "keyInput", void 0), form_define_property(this, "FORM_FIELDS", {});
         this.container = container;
         this.formElement = formElement;
         this.FORM_FIELDS = {
@@ -5226,7 +5241,7 @@ class Buttons extends util_Despot {
         if (this.built) {
             this.reset();
             this.options.logger.debug("Buttons: unload()");
-            util_Despot.removeAllListeners();
+            this.removeAllListeners();
             this.hide();
             this.built = false;
         }
@@ -5276,7 +5291,8 @@ class Countdown {
     fire(cb) {
         this.unload();
         this.hide();
-        setTimeout(function() {
+        this.fireTimeoutId = window.setTimeout(()=>{
+            this.fireTimeoutId = void 0;
             cb();
         }, 0);
     }
@@ -5286,15 +5302,16 @@ class Countdown {
             if (void 0 !== this.countdown) {
                 this.countdown--;
                 if (this.countdown < 1) this.fire(cb);
-                else if (this.countdownElement) this.countdownElement.innerHTML = this.countdown.toString();
+                else if (this.countdownElement) this.countdownElement.textContent = this.countdown.toString();
             }
         }
     }
     start(cb) {
         if (!this.countdownElement) throw new Error("Unable to start countdown without an element");
         if ("number" != typeof this.options.video.countdown) throw new TypeError(`The defined countdown is not a valid number: ${this.options.video.countdown}`);
+        this.unload();
         this.countdown = this.options.video.countdown;
-        this.countdownElement.innerHTML = this.countdown.toString();
+        this.countdownElement.textContent = this.countdown.toString();
         this.show();
         this.intervalId = window.setInterval(this.countBackward.bind(this, cb), 950);
     }
@@ -5318,12 +5335,14 @@ class Countdown {
         html_showElement(this.countdownElement);
     }
     isCountingDown() {
-        return Boolean(this.intervalId);
+        return void 0 !== this.intervalId;
     }
     unload() {
-        clearInterval(this.intervalId);
+        if (void 0 !== this.intervalId) window.clearInterval(this.intervalId);
+        if (void 0 !== this.fireTimeoutId) window.clearTimeout(this.fireTimeoutId);
         this.paused = false;
         this.intervalId = void 0;
+        this.fireTimeoutId = void 0;
     }
     hide() {
         html_hideElement(this.countdownElement);
@@ -5334,6 +5353,7 @@ class Countdown {
         countdown_define_property(this, "options", void 0);
         countdown_define_property(this, "countdownElement", void 0);
         countdown_define_property(this, "intervalId", void 0);
+        countdown_define_property(this, "fireTimeoutId", void 0);
         countdown_define_property(this, "countdown", void 0);
         countdown_define_property(this, "paused", false);
         this.visuals = visuals;
@@ -6329,7 +6349,7 @@ class UserMedia extends util_Despot {
         });
     }
     audioRecord(audioCallback) {
-        util_Despot.removeListener("SENDING_FIRST_FRAME");
+        this.removeListener("SENDING_FIRST_FRAME");
         this.audioRecorder?.record(audioCallback);
     }
     init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, switchingFacingMode) {
@@ -6345,7 +6365,7 @@ class UserMedia extends util_Despot {
         const unloadAllEventListeners = ()=>{
             this.options.logger.debug("UserMedia: unloadAllEventListeners()");
             this.unloadRemainingEventListeners();
-            util_Despot.removeListener("SENDING_FIRST_FRAME");
+            this.removeListener("SENDING_FIRST_FRAME");
             this.rawVisualUserMedia?.removeEventListener("play", onPlay);
             this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
         };
@@ -7002,7 +7022,7 @@ class Recorder extends util_Despot {
         this.clearUserMediaTimeout();
         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 = util_Despot.getListeners("ERROR");
+        const errorListeners = this.getListeners("ERROR");
         if (errorListeners?.length) {
             if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
                 const videomailError = error_createError({
@@ -7105,7 +7125,7 @@ class Recorder extends util_Despot {
             this.clearUserMediaTimeout();
             this.options.logger.debug("Recorder: failed to load genuine user media");
             this.userMediaLoading = false;
-            const errorListeners = util_Despot.getListeners("ERROR");
+            const errorListeners = this.getListeners("ERROR");
             if (errorListeners?.length) this.emit("ERROR", {
                 exc
             });
@@ -7734,12 +7754,12 @@ class Replay extends util_Despot {
             heightValue = this.videomail.height;
             if (widthValue && heightValue) ratio = heightValue / widthValue;
         }
-        if (!widthValue) {
+        if (!widthValue && (videoHeight > 0 || this.options.video.height)) {
             const newWidthDimensions = dimensions_calculateWidth(responsive, this.options, videoHeight, ratio);
             const newWidth = newWidthDimensions.value;
             widthValue = newWidth;
         }
-        if (!heightValue) {
+        if (!heightValue && (videoWidth > 0 || this.options.video.width)) {
             let element = this.visuals.getElement();
             if (!element) element = document.body;
             const newDimensions = dimensions_calculateHeight(responsive, videoWidth, this.options, ratio, element);
@@ -7752,6 +7772,7 @@ class Replay extends util_Despot {
     }
     setVideomail(newVideomail, playerOnly = false) {
         this.videomail = newVideomail;
+        this.replayElement?.setAttribute("controls", "controls");
         if (this.videomail.mp4) this.setMp4Source(this.videomail.mp4);
         if (this.videomail.webm) this.setWebMSource(this.videomail.webm);
         if (this.videomail.vtt) this.setTrackSource(this.videomail.vtt);
@@ -7774,7 +7795,7 @@ class Replay extends util_Despot {
         } else html_showElement(this.replayElement);
         if (playerOnly) html_showElement(this.replayElement.parentElement);
         else this.visuals.show();
-        if (hasAudio) this.replayElement.setAttribute("volume", "1");
+        if (hasAudio) this.replayElement.volume = 1;
         else if (!isAudioEnabled(this.options)) this.replayElement.setAttribute("muted", "true");
         this.replayElement.load();
         if (this.videomail) this.replayElement.addEventListener("canplaythrough", ()=>{
@@ -7835,7 +7856,7 @@ class Replay extends util_Despot {
     }
     unload(params) {
         this.options.logger.debug("Replay: unload()");
-        util_Despot.removeAllListeners();
+        this.removeAllListeners();
         if (params?.startingOver) this.hide();
         else {
             this.replayElement?.remove();
@@ -8467,7 +8488,7 @@ class Container extends util_Despot {
                 exc
             });
         } finally{
-            util_Despot.removeAllListeners();
+            this.removeAllListeners();
             this.built = this.submitted = false;
         }
     }

package/dist/esm/util/Despot.d.ts

@@ -2,13 +2,14 @@ import { VideomailEvents } from "../types/events/index.js";
 import { VideomailClientOptions } from "../types/options.js";
 declare class Despot {
     private readonly name;
+    private readonly emitter;
     protected options: VideomailClientOptions;
-    protected static EMITTER: import("nanoevents").Emitter<VideomailEvents>;
+    private static readonly emitters;
     protected constructor(name: string, options: VideomailClientOptions);
     protected emit<E extends keyof VideomailEvents>(eventName: E, ...params: Parameters<VideomailEvents[E]>): void;
     on<E extends keyof VideomailEvents>(eventName: E, callback: VideomailEvents[E]): import("nanoevents").Unsubscribe;
     once<E extends keyof VideomailEvents>(eventName: E, listener: VideomailEvents[E]): import("nanoevents").Unsubscribe;
-    protected static getListeners<E extends keyof VideomailEvents>(eventName: E): Partial<{
+    protected getListeners<E extends keyof VideomailEvents>(eventName: E): Partial<{
         ASKING_WEBCAM_PERMISSION: (() => void)[];
         BEGIN_AUDIO_ENCODING: (() => void)[];
         BEGIN_VIDEO_ENCODING: (() => void)[];
@@ -54,7 +55,7 @@ declare class Despot {
         VISIBLE: (() => void)[];
         WINDOW_RESIZE: ((source: string) => void)[];
     }>[E];
-    protected static removeListener(eventName: keyof VideomailEvents): void;
-    protected static removeAllListeners(): void;
+    protected removeListener(eventName: keyof VideomailEvents): void;
+    protected removeAllListeners(): void;
 }
 export default Despot;

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

@@ -12,6 +12,7 @@ export type FormMethodType = (typeof FormMethod)[keyof typeof FormMethod];
 declare class Form extends Despot {
     private readonly container;
     private readonly formElement;
+    private readonly validate;
     private keyInput?;
     private readonly FORM_FIELDS;
     constructor(container: Container, formElement: HTMLFormElement, options: VideomailClientOptions);

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

@@ -5,6 +5,7 @@ declare class Countdown {
     private readonly options;
     private countdownElement?;
     private intervalId?;
+    private fireTimeoutId?;
     private countdown?;
     private paused;
     constructor(visuals: Visuals, options: VideomailClientOptions);

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.17"
+                rE: "15.7.18"
             };
             function isAudioEnabled(options) {
                 return Boolean(options.audio.enabled);
@@ -14760,11 +14760,18 @@
                 });
             class Despot {
                 name;
+                emitter;
                 options;
-                static EMITTER = createNanoEvents();
+                static emitters = new WeakMap();
                 constructor(name, options){
                     this.name = name;
                     this.options = options;
+                    let emitter = Despot.emitters.get(options);
+                    if (!emitter) {
+                        emitter = createNanoEvents();
+                        Despot.emitters.set(options, emitter);
+                    }
+                    this.emitter = emitter;
                 }
                 emit(eventName, ...params) {
                     const firstParam = params[0];
@@ -14772,18 +14779,18 @@
                     if (showParams) this.options.logger.debug(`${this.name} emits ${eventName} with ${util_pretty(params)}`);
                     else this.options.logger.debug(`${this.name} emits ${eventName}`);
                     try {
-                        Despot.EMITTER.emit(eventName, ...params);
+                        this.emitter.emit(eventName, ...params);
                     } catch (exc) {
-                        if (exc instanceof error_VideomailError) Despot.EMITTER.emit("ERROR", {
+                        if (exc instanceof error_VideomailError) this.emitter.emit("ERROR", {
                             err: exc
                         });
-                        else Despot.EMITTER.emit("ERROR", {
+                        else this.emitter.emit("ERROR", {
                             exc
                         });
                     }
                 }
                 on(eventName, callback) {
-                    return Despot.EMITTER.on(eventName, callback);
+                    return this.emitter.on(eventName, callback);
                 }
                 once(eventName, listener) {
                     const callback = (...params)=>{
@@ -14793,14 +14800,14 @@
                     const unbind = this.on(eventName, callback);
                     return unbind;
                 }
-                static getListeners(eventName) {
-                    return Despot.EMITTER.events[eventName];
+                getListeners(eventName) {
+                    return this.emitter.events[eventName];
                 }
-                static removeListener(eventName) {
-                    delete Despot.EMITTER.events[eventName];
+                removeListener(eventName) {
+                    delete this.emitter.events[eventName];
                 }
-                static removeAllListeners() {
-                    Despot.EMITTER.events = {};
+                removeAllListeners() {
+                    this.emitter.events = {};
                 }
             }
             const util_Despot = Despot;
@@ -14839,6 +14846,9 @@
             class Form extends util_Despot {
                 container;
                 formElement;
+                validate = (event)=>{
+                    this.container.validate(event);
+                };
                 keyInput;
                 FORM_FIELDS = {};
                 constructor(container, formElement, options){
@@ -14897,27 +14907,33 @@
                     this.options.logger.debug("Form: loadVideomail()");
                     for (const formControl of this.formElement.elements){
                         const name = formControl.getAttribute("name");
-                        if (name) {
+                        if (name && this.isRegisteredFormField(formControl)) {
                             let value = videomail[name];
                             const tagName = formControl.tagName;
                             if (this.options.callbacks.adjustFormValueBeforePopulating) value = this.options.callbacks.adjustFormValueBeforePopulating(name, value, videomail);
-                            switch(tagName){
+                            if (null != value) switch(tagName){
                                 case "INPUT":
                                     {
                                         const inputControl = formControl;
                                         if (Array.isArray(value)) inputControl.value = value.join(", ");
-                                        else inputControl.value = value;
+                                        else inputControl.value = String(value);
                                         break;
                                     }
                                 case "TEXTAREA":
                                     {
                                         const textArea = formControl;
-                                        textArea.value = value;
+                                        textArea.value = String(value);
+                                        break;
+                                    }
+                                case "SELECT":
+                                    {
+                                        const select = formControl;
+                                        select.value = String(value);
                                         break;
                                     }
                                 default:
                                     throw error_createError({
-                                        message: `Unsupported form control tag name $${tagName} found`,
+                                        message: `Unsupported form control tag name ${tagName} found`,
                                         options: this.options
                                     });
                             }
@@ -14966,8 +14982,8 @@
                         for(let i = 0, len = inputElements.length; i < len; i++){
                             const inputElement = inputElements[i];
                             const type = inputElement?.getAttribute("type");
-                            if ("radio" === type || "select" === type) inputElement?.addEventListener("change", this.container.validate.bind(this.container));
-                            else inputElement?.addEventListener("input", this.container.validate.bind(this.container));
+                            if ("radio" === type || inputElement?.tagName === "SELECT") inputElement?.addEventListener("change", this.validate);
+                            else inputElement?.addEventListener("input", this.validate);
                         }
                     }
                     this.on("PREVIEW", (params)=>{
@@ -15010,8 +15026,8 @@
                     const inputElements = this.getRegisteredFormElements();
                     for (const inputElement of inputElements){
                         const type = inputElement.getAttribute("type");
-                        if ("radio" === type || "select" === type) inputElement.removeEventListener("change", this.container.validate.bind(this.container));
-                        else inputElement.removeEventListener("input", this.container.validate.bind(this.container));
+                        if ("radio" === type || "SELECT" === inputElement.tagName) inputElement.removeEventListener("change", this.validate);
+                        else inputElement.removeEventListener("input", this.validate);
                     }
                 }
                 hideSubmitButton() {
@@ -15021,7 +15037,7 @@
                 unload() {
                     this.options.logger.debug("Form: unload()");
                     this.removeAllInputListeners();
-                    util_Despot.removeAllListeners();
+                    this.removeAllListeners();
                     this.stopListeningToSubmitEvents();
                     this.resetForm();
                 }
@@ -15031,7 +15047,7 @@
                     const inputElements = this.getRegisteredFormElements();
                     for (const inputElement of inputElements){
                         const type = inputElement.getAttribute("type");
-                        if (type?.toLowerCase() === "hidden") inputElement.setAttribute("value", "");
+                        if (type?.toLowerCase() === "hidden") inputElement.value = "";
                     }
                 }
                 startListeningToSubmitEvents() {
@@ -17915,7 +17931,7 @@
                     if (this.built) {
                         this.reset();
                         this.options.logger.debug("Buttons: unload()");
-                        util_Despot.removeAllListeners();
+                        this.removeAllListeners();
                         this.hide();
                         this.built = false;
                     }
@@ -17952,6 +17968,7 @@
                 options;
                 countdownElement;
                 intervalId;
+                fireTimeoutId;
                 countdown;
                 paused = false;
                 constructor(visuals, options){
@@ -17961,7 +17978,8 @@
                 fire(cb) {
                     this.unload();
                     this.hide();
-                    setTimeout(function() {
+                    this.fireTimeoutId = window.setTimeout(()=>{
+                        this.fireTimeoutId = void 0;
                         cb();
                     }, 0);
                 }
@@ -17971,15 +17989,16 @@
                         if (void 0 !== this.countdown) {
                             this.countdown--;
                             if (this.countdown < 1) this.fire(cb);
-                            else if (this.countdownElement) this.countdownElement.innerHTML = this.countdown.toString();
+                            else if (this.countdownElement) this.countdownElement.textContent = this.countdown.toString();
                         }
                     }
                 }
                 start(cb) {
                     if (!this.countdownElement) throw new Error("Unable to start countdown without an element");
                     if ("number" != typeof this.options.video.countdown) throw new TypeError(`The defined countdown is not a valid number: ${this.options.video.countdown}`);
+                    this.unload();
                     this.countdown = this.options.video.countdown;
-                    this.countdownElement.innerHTML = this.countdown.toString();
+                    this.countdownElement.textContent = this.countdown.toString();
                     this.show();
                     this.intervalId = window.setInterval(this.countBackward.bind(this, cb), 950);
                 }
@@ -18003,12 +18022,14 @@
                     html_showElement(this.countdownElement);
                 }
                 isCountingDown() {
-                    return Boolean(this.intervalId);
+                    return void 0 !== this.intervalId;
                 }
                 unload() {
-                    clearInterval(this.intervalId);
+                    if (void 0 !== this.intervalId) window.clearInterval(this.intervalId);
+                    if (void 0 !== this.fireTimeoutId) window.clearTimeout(this.fireTimeoutId);
                     this.paused = false;
                     this.intervalId = void 0;
+                    this.fireTimeoutId = void 0;
                 }
                 hide() {
                     html_hideElement(this.countdownElement);
@@ -19048,7 +19069,7 @@
                     });
                 }
                 audioRecord(audioCallback) {
-                    util_Despot.removeListener("SENDING_FIRST_FRAME");
+                    this.removeListener("SENDING_FIRST_FRAME");
                     this.audioRecorder?.record(audioCallback);
                 }
                 init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, switchingFacingMode) {
@@ -19064,7 +19085,7 @@
                     const unloadAllEventListeners = ()=>{
                         this.options.logger.debug("UserMedia: unloadAllEventListeners()");
                         this.unloadRemainingEventListeners();
-                        util_Despot.removeListener("SENDING_FIRST_FRAME");
+                        this.removeListener("SENDING_FIRST_FRAME");
                         this.rawVisualUserMedia?.removeEventListener("play", onPlay);
                         this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
                     };
@@ -19747,7 +19768,7 @@
                     this.clearUserMediaTimeout();
                     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 = util_Despot.getListeners("ERROR");
+                    const errorListeners = this.getListeners("ERROR");
                     if (errorListeners?.length) {
                         if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
                             const videomailError = error_createError({
@@ -19850,7 +19871,7 @@
                         this.clearUserMediaTimeout();
                         this.options.logger.debug("Recorder: failed to load genuine user media");
                         this.userMediaLoading = false;
-                        const errorListeners = util_Despot.getListeners("ERROR");
+                        const errorListeners = this.getListeners("ERROR");
                         if (errorListeners?.length) this.emit("ERROR", {
                             exc
                         });
@@ -20471,12 +20492,12 @@
                         heightValue = this.videomail.height;
                         if (widthValue && heightValue) ratio = heightValue / widthValue;
                     }
-                    if (!widthValue) {
+                    if (!widthValue && (videoHeight > 0 || this.options.video.height)) {
                         const newWidthDimensions = dimensions_calculateWidth(responsive, this.options, videoHeight, ratio);
                         const newWidth = newWidthDimensions.value;
                         widthValue = newWidth;
                     }
-                    if (!heightValue) {
+                    if (!heightValue && (videoWidth > 0 || this.options.video.width)) {
                         let element = this.visuals.getElement();
                         if (!element) element = document.body;
                         const newDimensions = dimensions_calculateHeight(responsive, videoWidth, this.options, ratio, element);
@@ -20489,6 +20510,7 @@
                 }
                 setVideomail(newVideomail, playerOnly = false) {
                     this.videomail = newVideomail;
+                    this.replayElement?.setAttribute("controls", "controls");
                     if (this.videomail.mp4) this.setMp4Source(this.videomail.mp4);
                     if (this.videomail.webm) this.setWebMSource(this.videomail.webm);
                     if (this.videomail.vtt) this.setTrackSource(this.videomail.vtt);
@@ -20511,7 +20533,7 @@
                     } else html_showElement(this.replayElement);
                     if (playerOnly) html_showElement(this.replayElement.parentElement);
                     else this.visuals.show();
-                    if (hasAudio) this.replayElement.setAttribute("volume", "1");
+                    if (hasAudio) this.replayElement.volume = 1;
                     else if (!isAudioEnabled(this.options)) this.replayElement.setAttribute("muted", "true");
                     this.replayElement.load();
                     if (this.videomail) this.replayElement.addEventListener("canplaythrough", ()=>{
@@ -20572,7 +20594,7 @@
                 }
                 unload(params) {
                     this.options.logger.debug("Replay: unload()");
-                    util_Despot.removeAllListeners();
+                    this.removeAllListeners();
                     if (params?.startingOver) this.hide();
                     else {
                         this.replayElement?.remove();
@@ -21204,7 +21226,7 @@
                             exc
                         });
                     } finally{
-                        util_Despot.removeAllListeners();
+                        this.removeAllListeners();
                         this.built = this.submitted = false;
                     }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "15.7.17",
+  "version": "15.7.18",
   "description": "A wicked npm package to record videos directly in the browser, for Deaf and Sign Language!",
   "keywords": [
     "webcam",
@@ -51,6 +51,7 @@
     "lint:inspect": "eslint --inspect-config",
     "prettier": "prettier --check ./etc ./src ./.storybook *.ts *.js",
     "prettier:fix": "prettier --write ./etc ./src ./.storybook *.ts *.js",
+    "quality": "npm run test && npm run prettier && npm run lint && npm run types",
     "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",
     "test": "cross-env ENVIRON=test vitest --watch=false",