Refit sidebar height after videos finish loading (ResizeObserver)

ep0/viewer.html

@@ -431,4 +431,11 @@ function fitHand(){
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
 window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
 setTimeout(fitHand,150); setTimeout(fitHand,900);
+if(window.ResizeObserver){                     // 视频异步加载后尺寸会变, 盯住左列随时重算
+  var __ro=new ResizeObserver(function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});
+  var __cam=document.querySelector('.layout > .panel'); if(__cam)__ro.observe(__cam);
+  videos.forEach(function(v){v.addEventListener('loadedmetadata',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});});
+}
+setTimeout(fitHand,2000); setTimeout(fitHand,4000);
+
 </script></body></html>

ep1/viewer.html

@@ -431,4 +431,11 @@ function fitHand(){
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
 window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
 setTimeout(fitHand,150); setTimeout(fitHand,900);
+if(window.ResizeObserver){                     // 视频异步加载后尺寸会变, 盯住左列随时重算
+  var __ro=new ResizeObserver(function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});
+  var __cam=document.querySelector('.layout > .panel'); if(__cam)__ro.observe(__cam);
+  videos.forEach(function(v){v.addEventListener('loadedmetadata',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});});
+}
+setTimeout(fitHand,2000); setTimeout(fitHand,4000);
+
 </script></body></html>

ep2/viewer.html

@@ -431,4 +431,11 @@ function fitHand(){
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
 window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
 setTimeout(fitHand,150); setTimeout(fitHand,900);
+if(window.ResizeObserver){                     // 视频异步加载后尺寸会变, 盯住左列随时重算
+  var __ro=new ResizeObserver(function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});
+  var __cam=document.querySelector('.layout > .panel'); if(__cam)__ro.observe(__cam);
+  videos.forEach(function(v){v.addEventListener('loadedmetadata',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});});
+}
+setTimeout(fitHand,2000); setTimeout(fitHand,4000);
+
 </script></body></html>

ep3/viewer.html

@@ -431,4 +431,11 @@ function fitHand(){
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
 window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
 setTimeout(fitHand,150); setTimeout(fitHand,900);
+if(window.ResizeObserver){                     // 视频异步加载后尺寸会变, 盯住左列随时重算
+  var __ro=new ResizeObserver(function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});
+  var __cam=document.querySelector('.layout > .panel'); if(__cam)__ro.observe(__cam);
+  videos.forEach(function(v){v.addEventListener('loadedmetadata',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});});
+}
+setTimeout(fitHand,2000); setTimeout(fitHand,4000);
+
 </script></body></html>

ep4/viewer.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6bf2fe4455605ca1af3102dd615e0d0fd8206bc8b62fe3af920f46df4ad3953d
-size 607139
+oid sha256:7b4b097f8b8eb11f90af9c169aa3c6b35b1b2740e8dbc3fec33cb7587d16d706
+size 607648

ep5/viewer.html

@@ -431,4 +431,11 @@ function fitHand(){
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
 window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
 setTimeout(fitHand,150); setTimeout(fitHand,900);
+if(window.ResizeObserver){                     // 视频异步加载后尺寸会变, 盯住左列随时重算
+  var __ro=new ResizeObserver(function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});
+  var __cam=document.querySelector('.layout > .panel'); if(__cam)__ro.observe(__cam);
+  videos.forEach(function(v){v.addEventListener('loadedmetadata',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,80);});});
+}
+setTimeout(fitHand,2000); setTimeout(fitHand,4000);
+
 </script></body></html>