videomail-client 13.3.2 → 13.4.0

package/dist/cjs/index.cjs

@@ -10664,7 +10664,7 @@ var __webpack_exports__ = {};
     var client = __webpack_require__("./node_modules/superagent/lib/client.js");
     var client_default = /*#__PURE__*/ __webpack_require__.n(client);
     var package_namespaceObject = {
-        rE: "13.3.2"
+        rE: "13.4.0"
     };
     var defined = __webpack_require__("./node_modules/defined/index.js");
     var defined_default = /*#__PURE__*/ __webpack_require__.n(defined);
@@ -14952,7 +14952,8 @@ var __webpack_exports__ = {};
             height: void 0,
             facingMode: "user",
             facingModeButton: false,
-            stretch: false
+            stretch: false,
+            mobileBreakPoint: void 0
         },
         image: {
             quality: 0.42,
@@ -15102,13 +15103,17 @@ var __webpack_exports__ = {};
     var document_visibility = __webpack_require__("./node_modules/document-visibility/index.js");
     var document_visibility_default = /*#__PURE__*/ __webpack_require__.n(document_visibility);
     function limitHeight(height, options, calledFrom) {
+        const dimension = {
+            unit: "px"
+        };
         let limitedHeight = document.documentElement.clientHeight;
         if (height) limitedHeight = Math.min(height, limitedHeight);
         if (limitedHeight < 1) throw error_createError({
             message: `Limited height ${limitedHeight} cannot be less than 1! (Called from ${calledFrom})`,
             options
         });
-        return limitedHeight;
+        dimension.value = limitedHeight;
+        return dimension;
     }
     const dimensions_limitHeight = limitHeight;
     function getOuterWidth(element) {
@@ -15122,6 +15127,9 @@ var __webpack_exports__ = {};
     }
     const dimensions_getOuterWidth = getOuterWidth;
     function limitWidth(element, options, width) {
+        const limitedDimension = {
+            unit: "px"
+        };
         let limitedWidth;
         const outerWidth = dimensions_getOuterWidth(element);
         limitedWidth = width && "number" == typeof width ? outerWidth > 0 && outerWidth < width ? outerWidth : width : outerWidth;
@@ -15129,9 +15137,22 @@ var __webpack_exports__ = {};
             message: "Limited width cannot be less than 1!",
             options
         });
-        return limitedWidth;
+        limitedDimension.value = limitedWidth;
+        return limitedDimension;
     }
     const dimensions_limitWidth = limitWidth;
+    function useFullWidth(mobileBreakPoint) {
+        if (void 0 === mobileBreakPoint) return;
+        const viewportWidth = window.innerWidth;
+        if (viewportWidth < mobileBreakPoint) {
+            const dimension = {
+                unit: "%",
+                value: 100
+            };
+            return dimension;
+        }
+    }
+    const dimensions_useFullWidth = useFullWidth;
     var contains = __webpack_require__("./node_modules/contains/index.js");
     var contains_default = /*#__PURE__*/ __webpack_require__.n(contains);
     function disableElement(element) {
@@ -16151,15 +16172,25 @@ var __webpack_exports__ = {};
                 this.notify("Connected");
                 if (this.options.loadUserMediaOnRecord) this.hide();
             });
+            this.on("WINDOW_RESIZE", ()=>{
+                this.correctNotifierDimensions();
+            });
         }
         correctNotifierDimensions() {
             if (!this.notifyElement) return;
             if (this.options.video.stretch) {
+                const heightDimension = this.visuals.getRecorderHeight(true, true);
                 this.notifyElement.style.width = "auto";
-                this.notifyElement.style.height = `${this.visuals.getRecorderHeight(true, true)}px`;
+                this.notifyElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
             } else {
-                this.notifyElement.style.width = `${this.visuals.getRecorderWidth(true)}px`;
-                this.notifyElement.style.height = `${this.visuals.getRecorderHeight(true)}px`;
+                let heightDimension;
+                let widthDimension = dimensions_useFullWidth(this.options.video.mobileBreakPoint);
+                if (!widthDimension) {
+                    widthDimension = this.visuals.getRecorderWidth(true);
+                    heightDimension = this.visuals.getRecorderHeight(true);
+                }
+                if (widthDimension) this.notifyElement.style.width = `${widthDimension.value}${widthDimension.unit}`;
+                if (heightDimension) this.notifyElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
             }
         }
         show() {
@@ -16373,7 +16404,7 @@ var __webpack_exports__ = {};
     function figureMinHeight(height, options) {
         let minHeight;
         if (options.video.height) {
-            minHeight = Math.min(options.video.height, height);
+            minHeight = height ? Math.min(options.video.height, height) : options.video.height;
             if (minHeight < 1) throw error_createError({
                 message: `Got a min height less than 1 (${minHeight})!`,
                 options
@@ -16394,24 +16425,38 @@ var __webpack_exports__ = {};
     }
     const dimensions_getRatio = getRatio;
     function calculateHeight(responsive, videoWidth, options, target, ratio, element) {
+        const dimension = {
+            unit: "px"
+        };
         let width = videoWidth;
         if (width < 1) throw error_createError({
             message: `Unable to calculate height for target ${target} when width is less than 1 (= ${width}) and responsive mode is set to ${responsive}`,
             options
         });
-        if (responsive && element) width = dimensions_limitWidth(element, options, width);
+        if (responsive && element) {
+            const limitedDimension = dimensions_limitWidth(element, options, width);
+            width = limitedDimension.value;
+        }
         const chosenRatio = null != ratio ? ratio : dimensions_getRatio(options, void 0, videoWidth);
-        const height = Math.round(width * chosenRatio);
-        if (Number.isInteger(height) && height < 1) throw error_createError({
+        const height = width ? Math.round(width * chosenRatio) : void 0;
+        if (height && Number.isInteger(height) && height < 1) throw error_createError({
             message: "Just calculated a height less than 1 which is wrong.",
             options
         });
-        return dimensions_figureMinHeight(height, options);
+        const minHeight = dimensions_figureMinHeight(height, options);
+        dimension.value = minHeight;
+        return dimension;
     }
     const dimensions_calculateHeight = calculateHeight;
     function calculateWidth(responsive, videoHeight, options, ratio) {
+        const dimension = {
+            unit: "px"
+        };
         let height = dimensions_figureMinHeight(videoHeight, options);
-        if (responsive) height = dimensions_limitHeight(height, options, "calculateWidth");
+        if (responsive) {
+            const limitedDimension = dimensions_limitHeight(height, options, "calculateWidth");
+            height = limitedDimension.value;
+        }
         if (!height || height < 1) throw error_createError({
             message: `Height ${height} cannot be smaller than 1 when calculating width.`,
             options
@@ -16422,7 +16467,8 @@ var __webpack_exports__ = {};
             message: "Calculated width cannot be smaller than 1!",
             options
         });
-        return calculatedWidth;
+        dimension.value = calculatedWidth;
+        return dimension;
     }
     const dimensions_calculateWidth = calculateWidth;
     class audio_sample_modern_t {
@@ -16779,8 +16825,8 @@ var __webpack_exports__ = {};
         }
         createCanvas() {
             const canvas = document.createElement("canvas");
-            const rawWidth = this.getRawWidth(true);
-            if (rawWidth) canvas.width = rawWidth;
+            const dimension = this.getRawWidth(true);
+            if (dimension.value) canvas.width = dimension.value;
             const rawHeight = this.getRawHeight(true);
             if (rawHeight) canvas.height = rawHeight;
             return canvas;
@@ -16799,14 +16845,25 @@ var __webpack_exports__ = {};
         }
         getRawWidth(responsive) {
             let rawWidth = this.getVideoWidth();
-            if (this.options.video.width || this.options.video.height) rawWidth = responsive ? this.recorder.calculateWidth(responsive) : this.options.video.width;
-            if (responsive) rawWidth = this.recorder.limitWidth(rawWidth);
-            return rawWidth;
+            const dimension = {
+                unit: "px"
+            };
+            if (this.options.video.width || this.options.video.height) if (responsive) {
+                const dimension = this.recorder.calculateWidth(responsive);
+                rawWidth = dimension.value;
+            } else rawWidth = this.options.video.width;
+            if (responsive) {
+                const dimension = this.recorder.limitWidth(rawWidth);
+                rawWidth = null == dimension ? void 0 : dimension.value;
+            }
+            dimension.value = rawWidth;
+            return dimension;
         }
         getRawHeight(responsive) {
             let rawHeight;
             if (this.options.video.width || this.options.video.height) {
-                rawHeight = this.recorder.calculateHeight(responsive);
+                const heightDimension = this.recorder.calculateHeight(responsive);
+                rawHeight = heightDimension.value;
                 if (!rawHeight || rawHeight < 1) throw error_createError({
                     message: "Bad dimensions",
                     explanation: "Calculated raw height cannot be less than 1!",
@@ -16820,7 +16877,10 @@ var __webpack_exports__ = {};
                     options: this.options
                 });
             }
-            if (responsive) rawHeight = this.recorder.limitHeight(rawHeight);
+            if (responsive) {
+                const heightDimension = this.recorder.limitHeight(rawHeight);
+                rawHeight = heightDimension.value;
+            }
             return rawHeight;
         }
         getRawVisuals() {
@@ -17020,14 +17080,14 @@ var __webpack_exports__ = {};
             if (args.mp4) this.replay.setMp4Source(`${args.mp4 + constants.SITE_NAME_LABEL}/${this.options.siteName}/videomail.mp4`, true);
             if (args.webm) this.replay.setWebMSource(`${args.webm + constants.SITE_NAME_LABEL}/${this.options.siteName}/videomail.webm`, true);
             this.hide();
-            const width = this.getRecorderWidth(true);
-            const height = this.getRecorderHeight(true);
+            const widthDimension = this.getRecorderWidth(true);
+            const heightDimension = this.getRecorderHeight(true);
             var _args_duration;
             const duration = null != (_args_duration = args.duration) ? _args_duration : -1;
             this.emit("PREVIEW", {
                 key: this.key,
-                width,
-                height,
+                width: null == widthDimension ? void 0 : widthDimension.value,
+                height: heightDimension.value,
                 hasAudio,
                 duration
             });
@@ -17210,8 +17270,8 @@ var __webpack_exports__ = {};
                 };
             } else if (constraints.video && true !== constraints.video) {
                 const limitedWidth = this.limitWidth();
-                if (limitedWidth) constraints.video.width = {
-                    ideal: limitedWidth
+                if (null == limitedWidth ? void 0 : limitedWidth.value) constraints.video.width = {
+                    ideal: limitedWidth.value
                 };
             }
             if (this.options.video.height && constraints.video && true !== constraints.video) {
@@ -17635,13 +17695,17 @@ var __webpack_exports__ = {};
         }
         correctDimensions() {
             if (!this.recorderElement) return;
-            if (this.options.video.width) {
-                const recorderWidth = this.getRecorderWidth(true);
-                if (recorderWidth) this.recorderElement.width = recorderWidth;
-            }
-            if (this.options.video.height) {
-                const recorderHeight = this.getRecorderHeight(true);
-                if (recorderHeight) this.recorderElement.height = recorderHeight;
+            const widthDimension = dimensions_useFullWidth(this.options.video.mobileBreakPoint);
+            if (this.options.video.stretch || widthDimension) this.recorderElement.style.width = "100%";
+            else {
+                if (this.options.video.width) {
+                    const recorderWidth = this.getRecorderWidth(true);
+                    if (null == recorderWidth ? void 0 : recorderWidth.value) this.recorderElement.width = recorderWidth.value;
+                }
+                if (this.options.video.height) {
+                    const recorderHeight = this.getRecorderHeight(true);
+                    if (recorderHeight.value) this.recorderElement.height = recorderHeight.value;
+                }
             }
         }
         switchFacingMode() {
@@ -17689,6 +17753,9 @@ var __webpack_exports__ = {};
             this.on("SWITCH_FACING_MODE", ()=>{
                 this.switchFacingMode();
             });
+            this.on("WINDOW_RESIZE", ()=>{
+                this.correctDimensions();
+            });
         }
         buildElement() {
             this.recorderElement = document.createElement("video");
@@ -17707,7 +17774,6 @@ var __webpack_exports__ = {};
             this.recorderElement.style.transform = "rotateY(180deg)";
             this.recorderElement.style["-webkit-transform"] = "rotateY(180deg)";
             this.recorderElement.style["-moz-transform"] = "rotateY(180deg)";
-            if (this.options.video.stretch) this.recorderElement.style.width = "100%";
             null != this.userMedia || (this.userMedia = new visuals_userMedia(this, this.options));
             this.show();
             if (this.built) {
@@ -17742,13 +17808,36 @@ var __webpack_exports__ = {};
             var _this_userMedia;
             if (null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.hasVideoWidth()) return this.userMedia.getRawWidth(responsive);
             if (responsive && this.options.video.width) return this.limitWidth(this.options.video.width);
-            return this.options.video.width;
+            const dimension = {
+                unit: "px",
+                value: this.options.video.width
+            };
+            return dimension;
         }
         getRecorderHeight(responsive, useBoundingClientRect) {
-            if (this.recorderElement && useBoundingClientRect) return this.recorderElement.getBoundingClientRect().height;
-            if (this.userMedia) return this.userMedia.getRawHeight(responsive);
+            if (this.recorderElement && useBoundingClientRect) {
+                const height = this.recorderElement.getBoundingClientRect().height;
+                const dimension = {
+                    unit: "px",
+                    value: height
+                };
+                return dimension;
+            }
+            if (this.userMedia) {
+                const height = this.userMedia.getRawHeight(responsive);
+                const dimension = {
+                    unit: "px",
+                    value: height
+                };
+                return dimension;
+            }
             if (responsive && this.options.video.height) return this.calculateHeight(responsive);
-            return this.options.video.height;
+            const height = this.options.video.height;
+            const dimension = {
+                unit: "px",
+                value: height
+            };
+            return dimension;
         }
         getRatio() {
             let ratio;
@@ -18126,13 +18215,22 @@ var __webpack_exports__ = {};
                 this.on("ERROR", ()=>{
                     if (util_getBrowser(this.options).isMobile()) this.removeDimensions();
                 });
+                this.on("WINDOW_RESIZE", ()=>{
+                    this.correctDimensions();
+                });
             }
         }
         correctDimensions() {
             if (this.options.video.stretch) this.removeDimensions();
             else if (this.visualsElement) {
-                this.visualsElement.style.width = `${this.getRecorderWidth(true)}px`;
-                this.visualsElement.style.height = `${this.getRecorderHeight(true)}px`;
+                let heightDimension;
+                let widthDimension = dimensions_useFullWidth(this.options.video.mobileBreakPoint);
+                if (!widthDimension) {
+                    widthDimension = this.getRecorderWidth(true);
+                    heightDimension = this.getRecorderHeight(true);
+                }
+                if (widthDimension) this.visualsElement.style.width = `${widthDimension.value}${widthDimension.unit}`;
+                if (heightDimension) this.visualsElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
             }
         }
         removeDimensions() {
@@ -18473,6 +18571,9 @@ var __webpack_exports__ = {};
         }
         initEvents(playerOnly = false) {
             this.options.logger.debug(`Container: initEvents (playerOnly = ${playerOnly})`);
+            window.addEventListener("resize", ()=>{
+                this.emit("WINDOW_RESIZE");
+            });
             if (this.options.enableAutoUnload) window.addEventListener("beforeunload", (e)=>{
                 this.unload({
                     e
@@ -18510,6 +18611,9 @@ var __webpack_exports__ = {};
                 const browser = util_getBrowser(this.options);
                 if (browser.isMobile()) this.removeDimensions();
             });
+            this.on("WINDOW_RESIZE", ()=>{
+                this.correctDimensions();
+            });
             if (!playerOnly) this.on("LOADED_META_DATA", ()=>{
                 this.correctDimensions();
             });
@@ -18517,8 +18621,9 @@ var __webpack_exports__ = {};
         correctDimensions() {
             if (this.options.video.stretch) this.removeDimensions();
             else if (this.containerElement) {
-                const width = this.visuals.getRecorderWidth(true);
-                if (width) this.containerElement.style.width = `${width}px`;
+                let dimension = dimensions_useFullWidth(this.options.video.mobileBreakPoint);
+                if (!dimension) dimension = this.visuals.getRecorderWidth(true);
+                if (null == dimension ? void 0 : dimension.value) this.containerElement.style.width = `${dimension.value}${dimension.unit}`;
             }
         }
         removeDimensions() {
@@ -18544,8 +18649,10 @@ var __webpack_exports__ = {};
                 if (!videomailFormData) throw new Error("No videomail form data defined");
                 if (method === FormMethod.POST) {
                     videomailFormData.recordingStats = this.visuals.getRecordingStats();
-                    videomailFormData.width = this.visuals.getRecorderWidth(true);
-                    videomailFormData.height = this.visuals.getRecorderHeight(true);
+                    const widthDimension = this.visuals.getRecorderWidth(true);
+                    const heightDimension = this.visuals.getRecorderHeight(true);
+                    videomailFormData.width = null == widthDimension ? void 0 : widthDimension.value;
+                    videomailFormData.height = heightDimension.value;
                     return yield this.resource.post(videomailFormData);
                 }
                 if (method === FormMethod.PUT) return yield this.resource.put(videomailFormData);