fix: household leader selection and mobile monitoring experience v0.1.36

web/monitor.js

@@ -16,6 +16,7 @@ function wallSync(){
   const capacity=Number(layout)||6,pages=Math.max(1,Math.ceil(ordered.length/capacity));
   wallPage=Math.min(wallPage,pages-1);const visible=new Set(ordered.slice(wallPage*capacity,(wallPage+1)*capacity));
   $('#live-grid').dataset.layout=layout;
+  $('#live-grid').dataset.visibleCount=String(visible.size);
   for(const card of $$('#live-grid .camera-card')){
     const id=card.querySelector('video').dataset.camera;
     card.style.order=ordered.indexOf(id);card.hidden=!visible.has(id);
@@ -34,16 +35,29 @@ function wallMove(id,target){
 $('#wall-layout').onchange=()=>{wallPage=0;wallSave();wallSync();};
 $('#wall-arrange').onchange=wallSync;
 $('#wall-prev').onclick=()=>{wallPage--;wallSync();};$('#wall-next').onclick=()=>{wallPage++;wallSync();};
+let wallBodyOverflow='';
+function syncWallFullscreen(){
+  const active=document.fullscreenElement===$('#page-live')||$('#page-live').classList.contains('wall-expanded');
+  $('#wall-fullscreen').textContent=active?'退出全屏':'全屏监控';
+  $('#wall-fullscreen').setAttribute('aria-pressed',String(active));
+  document.body.classList.toggle('wall-fullscreen',active);
+}
+function closeWallFullscreen(){
+  const stage=$('#page-live');
+  if(stage.classList.contains('wall-expanded')){stage.classList.remove('wall-expanded');document.body.style.overflow=wallBodyOverflow;}
+  if(document.fullscreenElement===stage)document.exitFullscreen().catch(()=>{});
+  syncWallFullscreen();
+}
 $('#wall-fullscreen').onclick=async()=>{
-  try{if(document.fullscreenElement)await document.exitFullscreen();else await $('#page-live').requestFullscreen();}
-  catch{toast('浏览器未允许全屏，可按 F11 进入浏览器全屏');}
+  const stage=$('#page-live');
+  if(document.fullscreenElement===stage||stage.classList.contains('wall-expanded')){closeWallFullscreen();return;}
+  try{await stage.requestFullscreen();}
+  catch{wallBodyOverflow=document.body.style.overflow;stage.classList.add('wall-expanded');document.body.style.overflow='hidden';}
+  syncWallFullscreen();
 };
-document.addEventListener('fullscreenchange',()=>{
-  $('#wall-fullscreen').textContent=document.fullscreenElement?'退出全屏 · Esc':'全屏监控';
-  document.body.classList.toggle('wall-fullscreen',document.fullscreenElement===$('#page-live'));
-});
+document.addEventListener('fullscreenchange',syncWallFullscreen);
 document.addEventListener('keydown',e=>{
-  if(e.key==='Escape'&&document.fullscreenElement===$('#page-live'))document.exitFullscreen().catch(()=>{});
+  if(e.key==='Escape')closeWallFullscreen();
 });
 setInterval(()=>{$('#wall-clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
 let wallPointer=null;