fix(layout): aspect-ratio on wrapper + sync via polling; add top_max_height_vh (v0.7.1)

README.md

@@ -38,6 +38,10 @@ unlock_action:                     # optional — omit to hide the unlock button
     entity_id: camera.doorbell_main
 unlock_icon: mdi:key               # optional, defaults to mdi:key
 mode: webrtc                       # optional, passed through to webrtc-camera
+top_max_height_vh: 35              # optional, only for layout: split — caps the
+                                   # full-frame top section at this many vh units
+                                   # (default 35). Lower this if the top half feels
+                                   # too dominant on tall portrait screens.
 layout: split                      # optional — 'split' (default), 'cover', or 'contain'
                                    #   split:   top half shows the full uncropped frame,
                                    #            bottom half is a center-cropped 'cover' view.

webrtc-doorbell-card.js

@@ -24,7 +24,7 @@
   };
 })();
 
-const VERSION = '0.6.0';
+const VERSION = '0.7.1';
 
 class WebrtcDoorbellCard extends HTMLElement {
   setConfig(config) {
@@ -147,25 +147,49 @@ class WebrtcDoorbellCard extends HTMLElement {
     ].join(';');
     wrap.appendChild(stack);
 
-    const mkVideo = (objectFit, flexBasis) => {
+    const mkPlainVideo = (objectFit) => {
       const v = document.createElement('video');
       v.autoplay = true;
       v.muted = true;
       v.playsInline = true;
       v.setAttribute('playsinline', '');
       v.style.cssText = [
-        `flex:${flexBasis}`,
+        'width:100%', 'height:100%',
-        'width:100%', 'min-height:0',
         `object-fit:${objectFit}`,
-        'background:black',
+        'background:black', 'display:block',
       ].join(';');
       return v;
     };
 
-    // Top: full uncropped frame (see the sides). Bottom: cover crop (fills width).
+    // Top: a wrapper div with aspect-ratio carries the height (more reliable
-    this._topVideo = mkVideo('contain', '0 0 40%');
+    // than aspect-ratio on the flex item itself). Inside, the video uses
-    this._bottomVideo = mkVideo('cover', '1 1 60%');
+    // object-fit: contain. Updated to the actual stream aspect on metadata.
-    stack.appendChild(this._topVideo);
+    const topMaxVh = this._config.top_max_height_vh || 35;
+    this._topFrame = document.createElement('div');
+    this._topFrame.style.cssText = [
+      'flex:0 0 auto',
+      'width:100%',
+      'aspect-ratio:16/9',
+      `max-height:${topMaxVh}vh`,
+      'background:black',
+    ].join(';');
+    this._topVideo = mkPlainVideo('contain');
+    this._topFrame.appendChild(this._topVideo);
+
+    // Bottom: takes whatever vertical space is left.
+    this._bottomVideo = mkPlainVideo('cover');
+    this._bottomVideo.style.flex = '1 1 auto';
+    this._bottomVideo.style.minHeight = '0';
+
+    const updateTopAspect = () => {
+      const vw = this._topVideo.videoWidth;
+      const vh = this._topVideo.videoHeight;
+      if (vw && vh) this._topFrame.style.aspectRatio = `${vw}/${vh}`;
+    };
+    this._topVideo.addEventListener('loadedmetadata', updateTopAspect);
+    this._topVideo.addEventListener('resize', updateTopAspect);
+
+    stack.appendChild(this._topFrame);
     stack.appendChild(this._bottomVideo);
   }
 
@@ -182,6 +206,19 @@ class WebrtcDoorbellCard extends HTMLElement {
       this._bottomVideo.srcObject = stream;
       this._bottomVideo.play?.().catch(() => {});
     }
+    // Belt-and-suspenders: keep the top frame's aspect-ratio in sync with
+    // the actual stream dimensions, even if events didn't fire.
+    if (this._topFrame && this._topVideo) {
+      const vw = this._topVideo.videoWidth || src.videoWidth;
+      const vh = this._topVideo.videoHeight || src.videoHeight;
+      if (vw && vh) {
+        const desired = `${vw}/${vh}`;
+        if (this._topFrame.dataset.ratio !== desired) {
+          this._topFrame.style.aspectRatio = desired;
+          this._topFrame.dataset.ratio = desired;
+        }
+      }
+    }
   }
 
   disconnectedCallback() {