dataset update

app.py

@@ -350,36 +350,62 @@ with gr.Blocks(fill_height=True, css=GLOBAL_CSS) as demo:
     gr.HTML("""
     <script>
     (function(){
-    function muteAll(root){
-        const vids = (root || document).querySelectorAll('video');
-        vids.forEach(v => {
-        try {
-            v.muted = true;
-            v.volume = 0.0;
-            v.setAttribute('muted','');
-            // 사용자가 실수로 키더라도 다시 0으로
+    // 모든 일반 DOM + Shadow DOM 안의 <video>까지 찾아 음소거
+    function eachNodeWithShadow(root, fn){
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+        fn(root);
+        while (walker.nextNode()){
+        const el = walker.currentNode;
+        fn(el);
+        if (el.shadowRoot){
+            eachNodeWithShadow(el.shadowRoot, fn);
+        }
+        }
+    }
+
+    function muteVideoEl(v){
+        try{
+        // 재생 전에 반드시 muted 속성이 있어야 브라우저가 소리 차단
+        v.muted = true;
+        v.volume = 0.0;
+        v.setAttribute('muted','');
+        v.setAttribute('playsinline','');
+        v.setAttribute('preload','metadata');
+
+        // 사용자가 볼륨/음소거를 바꿔도 다시 0으로
+        if (!v._muteHooked){
             v.addEventListener('volumechange', () => {
             if (!v.muted || v.volume > 0) { v.muted = true; v.volume = 0.0; }
             });
-        } catch(e){}
+            v.addEventListener('play', () => {
+            v.muted = true; v.volume = 0.0;
+            });
+            v._muteHooked = true;
+        }
+        }catch(e){}
+    }
+
+    function muteAll(root){
+        eachNodeWithShadow(root || document, (el)=>{
+        if (el.tagName && el.tagName.toLowerCase() === 'video'){
+            muteVideoEl(el);
+        }else if (el.querySelectorAll){
+            el.querySelectorAll('video').forEach(muteVideoEl);
+        }
         });
     }
-    // 초기 렌더에서 음소거
+
+    // 초기 렌더에서
     muteAll(document);
-    // 이후 동적 생성되는 비디오도 감시해서 음소거
-    const obs = new MutationObserver(muts => {
-        for (const m of muts) {
-        if (m.type === 'childList') {
-            muteAll(m.target);
-            m.addedNodes && m.addedNodes.forEach(n => muteAll(n));
-        }
-        }
-    });
-    obs.observe(document.body, {subtree:true, childList:true});
+
+    // 이후 DOM 변화 감시(Shadow DOM 내부 변화도 포착)
+    const obs = new MutationObserver(() => muteAll(document));
+    obs.observe(document, {subtree:true, childList:true, attributes:false});
     })();
     </script>
     """)
 
+
     order_state = gr.State(value=[])   # v4에서는 value= 권장
     ptr_state   = gr.State(value=0)
     cur_video_id = gr.State(value="")