videomail-client 13.3.2 → 13.4.0

package/dist/esm/index.js

@@ -3606,7 +3606,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "13.3.2"
+    rE: "13.4.0"
 };
 function canPlayType_canPlayType(video, type) {
     const canPlayType = video.canPlayType(`video/${type}`);
@@ -4492,7 +4492,8 @@ const options_options = {
         height: void 0,
         facingMode: "user",
         facingModeButton: false,
-        stretch: false
+        stretch: false,
+        mobileBreakPoint: void 0
     },
     image: {
         quality: 0.42,
@@ -4630,13 +4631,17 @@ main_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(main.A, main_options);
 main.A && main.A.locals && main.A.locals;
 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) {
@@ -4650,6 +4655,9 @@ function getOuterWidth(element) {
 }
 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;
@@ -4657,9 +4665,22 @@ function limitWidth(element, options, width) {
         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;
 function disableElement(element) {
     if (!element) return;
     if ("INPUT" === element.tagName || "BUTTON" === element.tagName) element.setAttribute("disabled", "true");
@@ -5585,15 +5606,25 @@ class Notifier extends util_Despot {
             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() {
@@ -5732,7 +5763,7 @@ const notifier = Notifier;
 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
@@ -5753,24 +5784,38 @@ function getRatio(options, videoHeight, videoWidth) {
 }
 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
@@ -5781,7 +5826,8 @@ function calculateWidth(responsive, videoHeight, options, ratio) {
         message: "Calculated width cannot be smaller than 1!",
         options
     });
-    return calculatedWidth;
+    dimension.value = calculatedWidth;
+    return dimension;
 }
 const dimensions_calculateWidth = calculateWidth;
 const CHANNELS = 1;
@@ -6108,8 +6154,8 @@ class UserMedia extends util_Despot {
     }
     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;
@@ -6128,14 +6174,25 @@ class UserMedia extends util_Despot {
     }
     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!",
@@ -6149,7 +6206,10 @@ class UserMedia extends util_Despot {
                 options: this.options
             });
         }
-        if (responsive) rawHeight = this.recorder.limitHeight(rawHeight);
+        if (responsive) {
+            const heightDimension = this.recorder.limitHeight(rawHeight);
+            rawHeight = heightDimension.value;
+        }
         return rawHeight;
     }
     getRawVisuals() {
@@ -6368,13 +6428,13 @@ class Recorder extends util_Despot {
         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
         });
@@ -6555,8 +6615,8 @@ class Recorder extends util_Despot {
             };
         } 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) {
@@ -6970,13 +7030,17 @@ class Recorder extends util_Despot {
     }
     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() {
@@ -7024,6 +7088,9 @@ class Recorder extends util_Despot {
         this.on("SWITCH_FACING_MODE", ()=>{
             this.switchFacingMode();
         });
+        this.on("WINDOW_RESIZE", ()=>{
+            this.correctDimensions();
+        });
     }
     buildElement() {
         this.recorderElement = document.createElement("video");
@@ -7041,7 +7108,6 @@ class Recorder extends util_Despot {
         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) {
@@ -7073,13 +7139,36 @@ class Recorder extends util_Despot {
     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;
@@ -7430,13 +7519,22 @@ class Visuals extends util_Despot {
             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() {
@@ -7744,6 +7842,9 @@ class Container extends util_Despot {
     }
     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
@@ -7781,6 +7882,9 @@ class Container extends util_Despot {
             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();
         });
@@ -7788,8 +7892,9 @@ class Container extends util_Despot {
     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() {
@@ -7813,8 +7918,10 @@ class Container extends util_Despot {
         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/dist/esm/types/dimension.d.ts

@@ -0,0 +1,8 @@
+type AbsoluteUnit = "px" | "pt" | "pc" | "in" | "cm" | "mm" | "Q";
+type RelativeUnit = "em" | "rem" | "%" | "vw" | "vh" | "vmin" | "vmax" | "ex" | "ch";
+type CSSUnit = AbsoluteUnit | RelativeUnit;
+export interface Dimension {
+    unit: CSSUnit;
+    value?: number | undefined;
+}
+export {};

package/dist/esm/types/events/index.d.ts

@@ -88,4 +88,5 @@ export interface VideomailEvents {
     VALID: () => void;
     VALIDATING: (params?: ValidatingParams) => void;
     VISIBLE: () => void;
+    WINDOW_RESIZE: () => void;
 }

package/dist/esm/types/options.d.ts

@@ -64,6 +64,7 @@ export interface VideomailClientOptions {
         facingMode: ConstrainDOMString;
         facingModeButton: boolean;
         stretch: boolean;
+        mobileBreakPoint?: number | undefined;
     };
     image: {
         quality: number;

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

@@ -52,6 +52,7 @@ declare class Despot {
         VALID: (() => void)[];
         VALIDATING: ((params?: import("../types/events").ValidatingParams) => void)[];
         VISIBLE: (() => void)[];
+        WINDOW_RESIZE: (() => void)[];
     }>[E];
     protected static removeListener(eventName: keyof VideomailEvents): void;
     protected static removeAllListeners(): void;

package/dist/esm/util/html/dimensions/calculateHeight.d.ts

@@ -1,3 +1,4 @@
+import { Dimension } from "../../../types/dimension";
 import { VideomailClientOptions } from "../../../types/options";
-declare function calculateHeight(responsive: boolean, videoWidth: number, options: VideomailClientOptions, target: string, ratio?: number, element?: HTMLElement | null): number;
+declare function calculateHeight(responsive: boolean, videoWidth: number, options: VideomailClientOptions, target: string, ratio?: number, element?: HTMLElement | null): Dimension;
 export default calculateHeight;

package/dist/esm/util/html/dimensions/calculateWidth.d.ts

@@ -1,3 +1,4 @@
+import { Dimension } from "../../../types/dimension";
 import { VideomailClientOptions } from "../../../types/options";
-declare function calculateWidth(responsive: boolean, videoHeight: number, options: VideomailClientOptions, ratio?: number): number;
+declare function calculateWidth(responsive: boolean, videoHeight: number, options: VideomailClientOptions, ratio?: number): Dimension;
 export default calculateWidth;

package/dist/esm/util/html/dimensions/figureMinHeight.d.ts

@@ -1,3 +1,3 @@
 import { VideomailClientOptions } from "../../../types/options";
-declare function figureMinHeight(height: number, options: VideomailClientOptions): number;
+declare function figureMinHeight(height: number | undefined, options: VideomailClientOptions): number | undefined;
 export default figureMinHeight;

package/dist/esm/util/html/dimensions/limitHeight.d.ts

@@ -1,3 +1,4 @@
+import { Dimension } from "../../../types/dimension";
 import { VideomailClientOptions } from "../../../types/options";
-declare function limitHeight(height: number | undefined, options: VideomailClientOptions, calledFrom: string): number;
+declare function limitHeight(height: number | undefined, options: VideomailClientOptions, calledFrom: string): Dimension;
 export default limitHeight;

package/dist/esm/util/html/dimensions/limitWidth.d.ts

@@ -1,3 +1,4 @@
+import { Dimension } from "../../../types/dimension";
 import { VideomailClientOptions } from "../../../types/options";
-declare function limitWidth(element: HTMLElement, options: VideomailClientOptions, width?: number): number;
+declare function limitWidth(element: HTMLElement, options: VideomailClientOptions, width?: number): Dimension;
 export default limitWidth;

package/dist/esm/util/html/dimensions/useFullWidth.d.ts

@@ -0,0 +1,3 @@
+import { Dimension } from "../../../types/dimension";
+declare function useFullWidth(mobileBreakPoint?: number): Dimension | undefined;
+export default useFullWidth;

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

@@ -41,8 +41,8 @@ declare class Container extends Despot {
     private unloadChildren;
     private hideMySelf;
     private submitVideomail;
-    limitWidth(width?: number): number | undefined;
-    limitHeight(height: number): number;
+    limitWidth(width?: number): import("../types/dimension").Dimension | undefined;
+    limitHeight(height: number): import("../types/dimension").Dimension;
     private areVisualsHidden;
     hasElement(): boolean;
     getSubmitButton(): HTMLButtonElement | undefined;

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

@@ -1,3 +1,4 @@
+import { Dimension } from "../../types/dimension";
 import { VideomailClientOptions } from "../../types/options";
 import { RecordingStats } from "../../types/RecordingStats";
 import Despot from "../../util/Despot";
@@ -100,16 +101,16 @@ declare class Recorder extends Despot {
     isRecording(): boolean;
     hide(): void;
     isUnloaded(): boolean | undefined;
-    getRecorderWidth(responsive: boolean): number | undefined;
-    getRecorderHeight(responsive: boolean, useBoundingClientRect?: boolean): number | undefined;
+    getRecorderWidth(responsive: boolean): Dimension | undefined;
+    getRecorderHeight(responsive: boolean, useBoundingClientRect?: boolean): Dimension;
     private getRatio;
-    calculateWidth(responsive: boolean): number;
-    calculateHeight(responsive: boolean): number;
+    calculateWidth(responsive: boolean): Dimension;
+    calculateHeight(responsive: boolean): Dimension;
     getRawVisualUserMedia(): HTMLVideoElement | null | undefined;
     isConnected(): boolean;
     isConnecting(): boolean;
-    limitWidth(width?: number): number | undefined;
-    limitHeight(height: number): number;
+    limitWidth(width?: number): Dimension | undefined;
+    limitHeight(height: number): Dimension;
     isUserMediaLoaded(): boolean | undefined;
 }
 export default Recorder;

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

@@ -1,3 +1,4 @@
+import { Dimension } from "../../types/dimension";
 import { VideomailClientOptions } from "../../types/options";
 import Despot from "../../util/Despot";
 import { AudioProcessCB } from "../../util/html/media/AudioRecorder";
@@ -32,8 +33,8 @@ declare class UserMedia extends Despot {
     getVideoHeight(): number | undefined;
     getVideoWidth(): number | undefined;
     hasVideoWidth(): boolean | 0 | undefined;
-    getRawWidth(responsive: boolean): number | undefined;
-    getRawHeight(responsive: boolean): number;
+    getRawWidth(responsive: boolean): Dimension;
+    getRawHeight(responsive: boolean): number | undefined;
     getRawVisuals(): HTMLVideoElement | null | undefined;
     pause(): void;
     isPaused(): boolean;

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

@@ -1,4 +1,5 @@
 import { ShowParams } from "../client";
+import { Dimension } from "../types/dimension";
 import { VideomailClientOptions } from "../types/options";
 import Despot from "../util/Despot";
 import VideomailError from "../util/error/VideomailError";
@@ -52,10 +53,10 @@ declare class Visuals extends Despot {
     showReplayOnly(): void;
     isRecorderUnloaded(): boolean | undefined;
     isConnecting(): boolean;
-    getRecorderWidth(responsive: boolean): number | undefined;
-    getRecorderHeight(responsive: boolean, useBoundingClientRect?: boolean): number | undefined;
-    limitWidth(width?: number): number | undefined;
-    limitHeight(height: number): number;
+    getRecorderWidth(responsive: boolean): Dimension | undefined;
+    getRecorderHeight(responsive: boolean, useBoundingClientRect?: boolean): Dimension;
+    limitWidth(width?: number): Dimension | undefined;
+    limitHeight(height: number): Dimension;
     getReplay(): Replay;
     getBoundingClientRect(): DOMRect | undefined;
     checkTimer(elapsedTime: number): void;