feat: hide top frame in landscape orientation (v0.8.0)

README.md

@@ -42,6 +42,11 @@ top_max_height_vh: 35              # optional, only for layout: split — caps t
                                    # full-frame top section at this many vh units
                                    # (default 35). Lower this if the top half feels
                                    # too dominant on tall portrait screens.
+landscape_hide_top: true           # optional, only for layout: split — when true
+                                   # (default), hides the top full-frame view on
+                                   # landscape orientation since the cropped bottom
+                                   # already fills the screen well. Set false to
+                                   # keep the split in landscape too.
 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.7.1';
+const VERSION = '0.8.0';
 
 class WebrtcDoorbellCard extends HTMLElement {
   setConfig(config) {
@@ -96,6 +96,14 @@ class WebrtcDoorbellCard extends HTMLElement {
     this._waitForVideo().then((v) => {
       if (!v) return;
       v.muted = true;
+      v.controls = false;
+      v.playsInline = true;
+      v.disablePictureInPicture = true;
+      v.setAttribute('playsinline', '');
+      v.setAttribute('webkit-playsinline', '');
+      v.setAttribute('x5-playsinline', '');
+      v.setAttribute('disablepictureinpicture', '');
+      v.setAttribute('disableremoteplayback', '');
       this._sourceVideo = v;
       const layout = this._config.layout || 'split';
       if (layout === 'split') {
@@ -151,8 +159,18 @@ class WebrtcDoorbellCard extends HTMLElement {
       const v = document.createElement('video');
       v.autoplay = true;
       v.muted = true;
+      v.controls = false;
       v.playsInline = true;
+      v.disablePictureInPicture = true;
+      // Prevent iOS Safari / Android Chrome from auto-entering native
+      // fullscreen on landscape rotation. `playsinline` (W3C) covers modern
+      // browsers; `webkit-playsinline` covers older iOS; the others stop
+      // the chrome from offering external playback or native PiP.
       v.setAttribute('playsinline', '');
+      v.setAttribute('webkit-playsinline', '');
+      v.setAttribute('x5-playsinline', '');
+      v.setAttribute('disablepictureinpicture', '');
+      v.setAttribute('disableremoteplayback', '');
       v.style.cssText = [
         'width:100%', 'height:100%',
         `object-fit:${objectFit}`,
@@ -191,6 +209,22 @@ class WebrtcDoorbellCard extends HTMLElement {
 
     stack.appendChild(this._topFrame);
     stack.appendChild(this._bottomVideo);
+
+    // In landscape, the camera fits naturally on the screen — drop the
+    // top contain-view and let the bottom cover-view fill everything.
+    // Set `landscape_hide_top: false` to keep the split in landscape.
+    if (this._config.landscape_hide_top !== false) {
+      const mql = window.matchMedia('(orientation: landscape)');
+      const apply = (matches) => {
+        this._topFrame.style.display = matches ? 'none' : '';
+      };
+      apply(mql.matches);
+      const handler = (e) => apply(e.matches);
+      if (mql.addEventListener) mql.addEventListener('change', handler);
+      else mql.addListener(handler);
+      this._orientationMql = mql;
+      this._orientationHandler = handler;
+    }
   }
 
   _mirrorStream() {
@@ -224,6 +258,13 @@ class WebrtcDoorbellCard extends HTMLElement {
   disconnectedCallback() {
     clearInterval(this._mirrorInterval);
     this._mirrorInterval = null;
+    if (this._orientationMql && this._orientationHandler) {
+      if (this._orientationMql.removeEventListener) {
+        this._orientationMql.removeEventListener('change', this._orientationHandler);
+      } else {
+        this._orientationMql.removeListener(this._orientationHandler);
+      }
+    }
   }
 
   _makeBtn(icon, bg, onClick) {