From 7e549f9c96809eb7e87693dda500a8a4f3e44ee5 Mon Sep 17 00:00:00 2001
From: naps62-yolo <yolo-git-naps-pt@naps62.com>
Date: Tue, 5 May 2026 17:51:50 +0000
Subject: [PATCH] feat: object-fit cover for fullscreen video + safe-area-aware
 controls (v0.5.0)

---
 README.md               |  3 +++
 webrtc-doorbell-card.js | 19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ca4a718..326c0e8 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,9 @@ 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
+object_fit: cover                  # optional, 'cover' (default) or 'contain' — controls
+                                   # whether the video crops to fill the viewport ('cover')
+                                   # or letterboxes to preserve the full frame ('contain')
 ```
 
 A `panel: true` view works best:
diff --git a/webrtc-doorbell-card.js b/webrtc-doorbell-card.js
index 9eca6ec..f024a99 100644
--- a/webrtc-doorbell-card.js
+++ b/webrtc-doorbell-card.js
@@ -24,7 +24,7 @@
   };
 })();
 
-const VERSION = '0.4.0';
+const VERSION = '0.5.0';
 
 class WebrtcDoorbellCard extends HTMLElement {
   setConfig(config) {
@@ -66,7 +66,11 @@ class WebrtcDoorbellCard extends HTMLElement {
     const overlay = document.createElement('div');
     overlay.style.cssText = [
       'position:absolute',
-      'left:0', 'right:0', 'bottom:24px',
+      'left:0', 'right:0',
+      // Pin to bottom of viewport, respecting iOS home-indicator / Android nav-bar safe areas
+      'bottom:max(24px, env(safe-area-inset-bottom, 24px))',
+      'padding-left:env(safe-area-inset-left, 0)',
+      'padding-right:env(safe-area-inset-right, 0)',
       'display:flex', 'justify-content:center', 'gap:24px',
       'z-index:10', 'pointer-events:none',
     ].join(';');
@@ -88,7 +92,16 @@ class WebrtcDoorbellCard extends HTMLElement {
     overlay.appendChild(this._answerBtn);
     overlay.appendChild(this._endBtn);
 
-    this._waitForVideo().then((v) => { if (v) v.muted = true; });
+    this._waitForVideo().then((v) => {
+      if (!v) return;
+      v.muted = true;
+      // Fill the viewport in both portrait and landscape — landscape camera
+      // would otherwise letterbox heavily on a portrait phone.
+      const fit = this._config.object_fit || 'cover';
+      v.style.objectFit = fit;
+      v.style.width = '100%';
+      v.style.height = '100%';
+    });
   }
 
   _makeBtn(icon, bg, onClick) {