naps62/ha-webrtc-doorbell-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent OS-level auto-fullscreen on landscape rotation (v0.7.2)

Browse Source
This commit is contained in:
naps62-yolo
2026-05-05 18:36:40 +00:00
parent 2627501b44
commit f21e02a16d
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webrtc-doorbell-card.js
+19 -1
View File
@@ -24,7 +24,7 @@
}; };
})(); })();
const VERSION = '0.7.1'; const VERSION = '0.7.2';
class WebrtcDoorbellCard extends HTMLElement { class WebrtcDoorbellCard extends HTMLElement {
setConfig(config) { setConfig(config) {
@@ -96,6 +96,14 @@ class WebrtcDoorbellCard extends HTMLElement {
this._waitForVideo().then((v) => { this._waitForVideo().then((v) => {
if (!v) return; if (!v) return;
v.muted = true; 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; this._sourceVideo = v;
const layout = this._config.layout || 'split'; const layout = this._config.layout || 'split';
if (layout === 'split') { if (layout === 'split') {
@@ -151,8 +159,18 @@ class WebrtcDoorbellCard extends HTMLElement {
const v = document.createElement('video'); const v = document.createElement('video');
v.autoplay = true; v.autoplay = true;
v.muted = true; v.muted = true;
v.controls = false;
v.playsInline = true; 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('playsinline', '');
v.setAttribute('webkit-playsinline', '');
v.setAttribute('x5-playsinline', '');
v.setAttribute('disablepictureinpicture', '');
v.setAttribute('disableremoteplayback', '');
v.style.cssText = [ v.style.cssText = [
'width:100%', 'height:100%', 'width:100%', 'height:100%',
`object-fit:${objectFit}`, `object-fit:${objectFit}`,