videomail-client 13.3.3 → 13.4.0

package/dist/umd/index.js

@@ -10670,7 +10670,7 @@
             var client = __webpack_require__("./node_modules/superagent/lib/client.js");
             var client_default = /*#__PURE__*/ __webpack_require__.n(client);
             var package_namespaceObject = {
-                rE: "13.3.3"
+                rE: "13.4.0"
             };
             var defined = __webpack_require__("./node_modules/defined/index.js");
             var defined_default = /*#__PURE__*/ __webpack_require__.n(defined);
@@ -14827,7 +14827,8 @@
                     height: void 0,
                     facingMode: "user",
                     facingModeButton: false,
-                    stretch: false
+                    stretch: false,
+                    mobileBreakPoint: void 0
                 },
                 image: {
                     quality: 0.42,
@@ -14967,13 +14968,17 @@
             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) {
@@ -14987,6 +14992,9 @@
             }
             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;
@@ -14994,9 +15002,22 @@
                     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) {
@@ -15924,15 +15945,25 @@
                         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() {
@@ -16134,7 +16165,7 @@
             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
@@ -16155,24 +16186,38 @@
             }
             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 = 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
@@ -16183,7 +16228,8 @@
                     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 {
@@ -16523,8 +16569,8 @@
                 }
                 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;
@@ -16543,14 +16589,25 @@
                 }
                 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 = 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!",
@@ -16564,7 +16621,10 @@
                             options: this.options
                         });
                     }
-                    if (responsive) rawHeight = this.recorder.limitHeight(rawHeight);
+                    if (responsive) {
+                        const heightDimension = this.recorder.limitHeight(rawHeight);
+                        rawHeight = heightDimension.value;
+                    }
                     return rawHeight;
                 }
                 getRawVisuals() {
@@ -16783,13 +16843,13 @@
                     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);
                     const duration = args.duration ?? -1;
                     this.emit("PREVIEW", {
                         key: this.key,
-                        width,
-                        height,
+                        width: widthDimension?.value,
+                        height: heightDimension.value,
                         hasAudio,
                         duration
                     });
@@ -16970,8 +17030,8 @@
                         };
                     } else if (constraints.video && true !== constraints.video) {
                         const limitedWidth = this.limitWidth();
-                        if (limitedWidth) constraints.video.width = {
-                            ideal: limitedWidth
+                        if (limitedWidth?.value) constraints.video.width = {
+                            ideal: limitedWidth.value
                         };
                     }
                     if (this.options.video.height && constraints.video && true !== constraints.video) {
@@ -17385,13 +17445,17 @@
                 }
                 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 (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() {
@@ -17439,6 +17503,9 @@
                     this.on("SWITCH_FACING_MODE", ()=>{
                         this.switchFacingMode();
                     });
+                    this.on("WINDOW_RESIZE", ()=>{
+                        this.correctDimensions();
+                    });
                 }
                 buildElement() {
                     this.recorderElement = document.createElement("video");
@@ -17456,7 +17523,6 @@
                     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%";
                     this.userMedia ??= new visuals_userMedia(this, this.options);
                     this.show();
                     if (this.built) {
@@ -17488,13 +17554,36 @@
                 getRecorderWidth(responsive) {
                     if (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;
@@ -17845,13 +17934,22 @@
                         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() {
@@ -18159,6 +18257,9 @@
                 }
                 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
@@ -18196,6 +18297,9 @@
                         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();
                     });
@@ -18203,8 +18307,9 @@
                 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 (dimension?.value) this.containerElement.style.width = `${dimension.value}${dimension.unit}`;
                     }
                 }
                 removeDimensions() {
@@ -18228,8 +18333,10 @@
                     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 = widthDimension?.value;
+                        videomailFormData.height = heightDimension.value;
                         return await this.resource.post(videomailFormData);
                     }
                     if (method === FormMethod.PUT) return await this.resource.put(videomailFormData);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "13.3.3",
+  "version": "13.4.0",
   "description": "A wicked npm package to record videos directly in the browser, wohooo!",
   "keywords": [
     "webcam",
@@ -91,7 +91,7 @@
     "@types/node": "24.10.0",
     "@types/superagent": "8.1.9",
     "@types/ua-parser-js": "0.7.39",
-    "@vitest/eslint-plugin": "1.4.1",
+    "@vitest/eslint-plugin": "1.4.2",
     "audit-ci": "7.1.0",
     "chromatic": "13.3.3",
     "cross-env": "10.1.0",
@@ -100,13 +100,13 @@
     "eslint-plugin-de-morgan": "2.0.0",
     "eslint-plugin-depend": "1.3.1",
     "eslint-plugin-import-x": "4.16.1",
-    "eslint-plugin-package-json": "0.64.0",
+    "eslint-plugin-package-json": "0.65.3",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-regexp": "2.10.0",
     "eslint-plugin-security": "3.0.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-storybook": "9.1.16",
-    "globals": "16.4.0",
+    "globals": "16.5.0",
     "jsdom": "27.1.0",
     "msw": "2.11.6",
     "msw-storybook-addon": "2.0.6",
@@ -120,7 +120,7 @@
     "type-fest": "5.2.0",
     "typescript": "5.9.3",
     "typescript-eslint": "8.41.0",
-    "vitest": "4.0.7"
+    "vitest": "4.0.8"
   },
   "engines": {
     "node": "^24.11.0",