Correct calculations and wordings of some dimensions

Author: binarykitchen

package-lock.json

@@ -91,7 +91,7 @@
     "@types/node": "24.10.1",
     "@types/superagent": "8.1.9",
     "@types/ua-parser-js": "0.7.39",
-    "@vitest/eslint-plugin": "1.5.2",
+    "@vitest/eslint-plugin": "1.6.4",
     "audit-ci": "7.1.0",
     "chromatic": "13.3.4",
     "cross-env": "10.1.0",

package.json

@@ -398,7 +398,7 @@ class Container extends Despot {
       const heightDimension = this.visuals.getRecorderHeight(true);
 
       videomailFormData.width = widthDimension?.value;
-      videomailFormData.height = heightDimension.value;
+      videomailFormData.height = heightDimension?.value;
 
       return await this.resource.post(videomailFormData);
     } else if (method === FormMethod.PUT) {

src/wrappers/container.ts

@@ -167,7 +167,10 @@ class Notifier extends Despot {
       const heightDimension = this.visuals.getRecorderHeight(true, true);
 
       this.notifyElement.style.width = "auto";
-      this.notifyElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
+
+      if (heightDimension) {
+        this.notifyElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
+      }
     } else {
       let heightDimension: Dimension | undefined;
       let widthDimension = useFullWidth(this.options.video.mobileBreakPoint);

src/wrappers/visuals/notifier.ts

@@ -338,7 +338,7 @@ class Recorder extends Despot {
     this.emit("PREVIEW", {
       key: this.key,
       width: widthDimension?.value,
-      height: heightDimension.value,
+      height: heightDimension?.value,
       hasAudio,
       duration,
     });
@@ -1348,7 +1348,7 @@ class Recorder extends Despot {
       if (this.options.video.height) {
         const recorderHeight = this.getRecorderHeight(true);
 
-        if (recorderHeight.value) {
+        if (recorderHeight?.value) {
           this.recorderElement.height = recorderHeight.value;
         } else {
           this.recorderElement.style.removeProperty("height");
@@ -1542,36 +1542,34 @@ class Recorder extends Despot {
   }
 
   public getRecorderHeight(responsive: boolean, useBoundingClientRect?: boolean) {
+    let recorderHeight: Dimension | undefined;
+
     if (this.recorderElement && useBoundingClientRect) {
       const height = this.recorderElement.getBoundingClientRect().height;
 
-      const dimension: Dimension = {
+      recorderHeight = {
         unit: "px",
         value: height,
       };
-
-      return dimension;
     } else if (this.userMedia) {
       const height = this.userMedia.getRawHeight(responsive);
 
-      const dimension: Dimension = {
+      recorderHeight = {
         unit: "px",
         value: height,
       };
-
-      return dimension;
     } else if (responsive && this.options.video.height) {
-      return this.calculateHeight(responsive);
-    }
-
-    const height = this.options.video.height;
+      recorderHeight = this.calculateHeight(responsive);
+    } else if (this.options.video.height) {
+      const height = this.options.video.height;
 
-    const dimension: Dimension = {
-      unit: "px",
-      value: height,
-    };
+      recorderHeight = {
+        unit: "px",
+        value: height,
+      };
+    }
 
-    return dimension;
+    return recorderHeight;
   }
 
   private getRatio() {
@@ -1608,21 +1606,33 @@ class Recorder extends Despot {
   }
 
   public calculateHeight(responsive: boolean) {
-    let videoWidth: number | undefined;
+    let videoDimension: Dimension | undefined;
 
     if (this.userMedia) {
-      videoWidth = this.userMedia.getVideoWidth();
+      const videoHeight = this.userMedia.getVideoHeight();
+
+      videoDimension = {
+        value: videoHeight,
+        unit: "px",
+      };
     } else if (this.recorderElement) {
-      videoWidth = this.recorderElement.videoWidth || this.recorderElement.width;
+      const videoHeight = this.recorderElement.videoHeight || this.recorderElement.height;
+
+      videoDimension = {
+        value: videoHeight,
+        unit: "px",
+      };
+    } else {
+      videoDimension = calculateHeight(
+        responsive,
+        undefined,
+        this.options,
+        this.getRatio(),
+        this.recorderElement,
+      );
     }
 
-    return calculateHeight(
-      responsive,
-      videoWidth,
-      this.options,
-      this.getRatio(),
-      this.recorderElement,
-    );
+    return videoDimension;
   }
 
   public getRawVisualUserMedia() {