@capgo/camera-preview 8.2.1 → 8.3.0

package/dist/plugin.cjs.js

@@ -307,103 +307,130 @@ class CameraPreviewWeb extends core.WebPlugin {
             height: container.offsetHeight,
             id: container.id,
         });
+        const containerWidth = container.offsetWidth || window.innerWidth;
+        const containerHeight = container.offsetHeight || window.innerHeight;
         // Now adjust video element size based on camera's native aspect ratio
-        if (!options.width && !options.height && !options.aspectRatio) {
-            // No size specified, fit camera view within container bounds
-            const containerWidth = container.offsetWidth || window.innerWidth;
-            const containerHeight = container.offsetHeight || window.innerHeight;
-            // Calculate dimensions that fit within container while maintaining camera aspect ratio
-            let targetWidth, targetHeight;
-            // Try fitting to container width first
-            targetWidth = containerWidth;
-            targetHeight = targetWidth / cameraAspectRatio;
-            // If height exceeds container, fit to height instead
-            if (targetHeight > containerHeight) {
-                targetHeight = containerHeight;
-                targetWidth = targetHeight * cameraAspectRatio;
-            }
-            console.log('Video element dimensions:', {
-                width: targetWidth,
-                height: targetHeight,
-                container: { width: containerWidth, height: containerHeight },
-            });
-            this.videoElement.width = targetWidth;
-            this.videoElement.height = targetHeight;
-            this.videoElement.style.width = `${targetWidth}px`;
-            this.videoElement.style.height = `${targetHeight}px`;
-            // Center the video element within its parent container
-            if (needsCenterX || options.x === undefined) {
-                const x = Math.round((containerWidth - targetWidth) / 2);
-                this.videoElement.style.left = `${x}px`;
+        if (!options.width && !options.height) {
+            if (aspectMode === 'cover') {
+                // Fill the container and rely on object-fit: cover to crop
+                const targetWidth = containerWidth;
+                const targetHeight = containerHeight;
+                this.videoElement.width = targetWidth;
+                this.videoElement.height = targetHeight;
+                this.videoElement.style.width = `${targetWidth}px`;
+                this.videoElement.style.height = `${targetHeight}px`;
+                if (needsCenterX || options.x === undefined) {
+                    const x = Math.round((containerWidth - targetWidth) / 2);
+                    this.videoElement.style.left = `${x}px`;
+                }
+                if (needsCenterY || options.y === undefined) {
+                    let y;
+                    switch (positioning) {
+                        case 'top':
+                            y = 0;
+                            break;
+                        case 'bottom':
+                            y = containerHeight - targetHeight;
+                            break;
+                        case 'center':
+                        default:
+                            y = Math.round((containerHeight - targetHeight) / 2);
+                            break;
+                    }
+                    this.videoElement.style.setProperty('top', `${y}px`, 'important');
+                }
             }
-            if (needsCenterY || options.y === undefined) {
-                let y;
-                switch (positioning) {
-                    case 'top':
-                        y = 0;
-                        break;
-                    case 'bottom':
-                        y = window.innerHeight - targetHeight;
-                        break;
-                    case 'center':
-                    default:
-                        y = Math.round((window.innerHeight - targetHeight) / 2);
-                        break;
+            else if (!options.aspectRatio) {
+                // No size specified, fit camera view within container bounds
+                // Calculate dimensions that fit within container while maintaining camera aspect ratio
+                let targetWidth = containerWidth;
+                let targetHeight = targetWidth / cameraAspectRatio;
+                // If height exceeds container, fit to height instead
+                if (targetHeight > containerHeight) {
+                    targetHeight = containerHeight;
+                    targetWidth = targetHeight * cameraAspectRatio;
                 }
-                this.videoElement.style.setProperty('top', `${y}px`, 'important');
-                // Force a style recalculation
-                this.videoElement.offsetHeight;
-                console.log('Positioning video:', {
-                    positioning,
-                    viewportHeight: window.innerHeight,
-                    targetHeight,
-                    calculatedY: y,
-                    actualTop: this.videoElement.style.top,
-                    position: this.videoElement.style.position,
+                console.log('Video element dimensions:', {
+                    width: targetWidth,
+                    height: targetHeight,
+                    container: { width: containerWidth, height: containerHeight },
                 });
+                this.videoElement.width = targetWidth;
+                this.videoElement.height = targetHeight;
+                this.videoElement.style.width = `${targetWidth}px`;
+                this.videoElement.style.height = `${targetHeight}px`;
+                // Center the video element within its parent container
+                if (needsCenterX || options.x === undefined) {
+                    const x = Math.round((containerWidth - targetWidth) / 2);
+                    this.videoElement.style.left = `${x}px`;
+                }
+                if (needsCenterY || options.y === undefined) {
+                    let y;
+                    switch (positioning) {
+                        case 'top':
+                            y = 0;
+                            break;
+                        case 'bottom':
+                            y = window.innerHeight - targetHeight;
+                            break;
+                        case 'center':
+                        default:
+                            y = Math.round((window.innerHeight - targetHeight) / 2);
+                            break;
+                    }
+                    this.videoElement.style.setProperty('top', `${y}px`, 'important');
+                    // Force a style recalculation
+                    this.videoElement.offsetHeight;
+                    console.log('Positioning video:', {
+                        positioning,
+                        viewportHeight: window.innerHeight,
+                        targetHeight,
+                        calculatedY: y,
+                        actualTop: this.videoElement.style.top,
+                        position: this.videoElement.style.position,
+                    });
+                }
             }
-        }
-        else if (effectiveAspectRatio && !options.width && !options.height) {
-            // Aspect ratio specified but no size
-            const [widthRatio, heightRatio] = effectiveAspectRatio.split(':').map(Number);
-            const targetRatio = widthRatio / heightRatio;
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            let targetWidth, targetHeight;
-            // Try fitting to viewport width first
-            targetWidth = viewportWidth;
-            targetHeight = targetWidth / targetRatio;
-            // If height exceeds viewport, fit to height instead
-            if (targetHeight > viewportHeight) {
-                targetHeight = viewportHeight;
-                targetWidth = targetHeight * targetRatio;
-            }
-            this.videoElement.width = targetWidth;
-            this.videoElement.height = targetHeight;
-            this.videoElement.style.width = `${targetWidth}px`;
-            this.videoElement.style.height = `${targetHeight}px`;
-            // Center the video element within its parent container
-            if (needsCenterX || options.x === undefined) {
-                const parentWidth = container.offsetWidth || viewportWidth;
-                const x = Math.round((parentWidth - targetWidth) / 2);
-                this.videoElement.style.left = `${x}px`;
-            }
-            if (needsCenterY || options.y === undefined) {
-                const parentHeight = container.offsetHeight || viewportHeight;
-                let y;
-                switch (positioning) {
-                    case 'top':
-                        y = 0;
-                        break;
-                    case 'bottom':
-                        y = parentHeight - targetHeight;
-                        break;
-                    case 'center':
-                    default:
-                        y = Math.round((parentHeight - targetHeight) / 2);
-                        break;
+            else if (effectiveAspectRatio) {
+                // Aspect ratio specified but no size
+                const [widthRatio, heightRatio] = effectiveAspectRatio.split(':').map(Number);
+                const targetRatio = widthRatio / heightRatio;
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                let targetWidth = viewportWidth;
+                let targetHeight = targetWidth / targetRatio;
+                // If height exceeds viewport, fit to height instead
+                if (targetHeight > viewportHeight) {
+                    targetHeight = viewportHeight;
+                    targetWidth = targetHeight * targetRatio;
+                }
+                this.videoElement.width = targetWidth;
+                this.videoElement.height = targetHeight;
+                this.videoElement.style.width = `${targetWidth}px`;
+                this.videoElement.style.height = `${targetHeight}px`;
+                // Center the video element within its parent container
+                if (needsCenterX || options.x === undefined) {
+                    const parentWidth = container.offsetWidth || viewportWidth;
+                    const x = Math.round((parentWidth - targetWidth) / 2);
+                    this.videoElement.style.left = `${x}px`;
+                }
+                if (needsCenterY || options.y === undefined) {
+                    const parentHeight = container.offsetHeight || viewportHeight;
+                    let y;
+                    switch (positioning) {
+                        case 'top':
+                            y = 0;
+                            break;
+                        case 'bottom':
+                            y = parentHeight - targetHeight;
+                            break;
+                        case 'center':
+                        default:
+                            y = Math.round((parentHeight - targetHeight) / 2);
+                            break;
+                    }
+                    this.videoElement.style.top = `${y}px`;
                 }
-                this.videoElement.style.top = `${y}px`;
             }
         }
         this.videoElement.srcObject = stream;
@@ -633,7 +660,7 @@ class CameraPreviewWeb extends core.WebPlugin {
             recorder.stop();
         });
     }
-    async startRecordVideo(_options) {
+    async startRecordVideo(options) {
         const video = document.getElementById(DEFAULT_VIDEO_ID);
         if (!(video === null || video === void 0 ? void 0 : video.srcObject)) {
             throw new Error('camera is not running');