Add visible status display in VTV player for debugging (vtv-status element)

static/yt_live.js

@@ -821,12 +821,31 @@
       hls.on(Hls.Events.MEDIA_ATTACHED,()=>console.log('[VTV] MEDIA_ATTACHED'));
       hls.on(Hls.Events.MANIFEST_LOADING,()=>console.log('[VTV] MANIFEST_LOADING',src));
       hls.on(Hls.Events.MANIFEST_LOADED,()=>console.log('[VTV] MANIFEST_LOADED'));
-      hls.on(Hls.Events.MANIFEST_PARSED,(ev,data)=>{console.log('[VTV] MANIFEST_PARSED levels:',data.levels.length,'video:',!!data.video,'audio:',!!data.audio,'first level:',data.levels[0]&&data.levels[0].width+'x'+data.levels[0].height);loadEl.style.display='none';video.style.display='block';setTimeout(()=>{video.play().then(()=>console.log('[VTV] play OK')).catch(e=>console.log('[VTV] play rejected:',e));},100);});
+      hls.on(Hls.Events.MANIFEST_PARSED,(ev,data)=>{
+        const st=document.getElementById('vtv-status');
+        if(st) st.textContent='✅ Manifest OK | '+data.levels.length+' levels | '+(data.levels[0]?data.levels[0].width+'x'+data.levels[0].height:'?');
+        console.log('[VTV] MANIFEST_PARSED levels:',data.levels.length);
+        loadEl.style.display='none';video.style.display='block';setTimeout(()=>{
+          video.play().then(()=>{
+            if(st) st.textContent+=' | ▶ Playing';
+            console.log('[VTV] play OK');
+          }).catch(e=>{
+            if(st) st.textContent+=' | ⚠️ Play blocked: '+e;
+            console.log('[VTV] play:',e);
+          });
+        },100);
+      });
       hls.on(Hls.Events.LEVEL_LOADING,(ev,l)=>console.log('[VTV] LEVEL_LOADING',l));
       hls.on(Hls.Events.LEVEL_LOADED,(ev,l)=>console.log('[VTV] LEVEL_LOADED',l));
       hls.on(Hls.Events.FRAG_LOADING,(ev,f)=>console.log('[VTV] FRAG_LOADING',f&&f.url&&f.url.substring(0,80)));
       hls.on(Hls.Events.FRAG_LOADED,(ev,f)=>console.log('[VTV] FRAG_LOADED size:',f&&f.frag&&f.frag.data&&f.frag.data.length));
-      hls.on(Hls.Events.FRAG_BUFFERED,(ev,f)=>{try{console.log('[VTV] FRAG_BUFFERED',f&&f.frag&&f.frag.url&&f.frag.url.substring(0,60));}catch(e){}});
+      hls.on(Hls.Events.FRAG_BUFFERED,(ev,f)=>{
+        try{
+          const _n=f&&f.frag&&f.frag.sn;
+          const _st2=document.getElementById('vtv-status');
+          if(_st2&&_n) _st2.textContent='📦 Buffered frag #'+_n;
+          console.log('[VTV] FRAG_BUFFERED',f&&f.frag&&f.frag.url&&f.frag.url.substring(0,60));
+        }catch(e){}});
       hls.on(Hls.Events.FRAG_PARSING_INIT_SEGMENT,()=>console.log('[VTV] FRAG_PARSING_INIT_SEGMENT'));
       hls.on(Hls.Events.FRAG_PARSING_DATA,()=>console.log('[VTV] FRAG_PARSING_DATA'));
       hls.on(Hls.Events.FRAG_PARSED,()=>console.log('[VTV] FRAG_PARSED'));
@@ -838,7 +857,9 @@
       hls.on(Hls.Events.LEVEL_SWITCHING,(ev,d)=>console.log('[VTV] LEVEL_SWITCHING',d));
       hls.on(Hls.Events.LEVEL_SWITCHED,(ev,d)=>console.log('[VTV] LEVEL_SWITCHED',d));
       let rec=0; hls.on(Hls.Events.ERROR,(ev,data)=>{
-        console.log('[VTV] ERROR type:',data.type,'details:',data.details,'fatal:',data.fatal,'reason:',data.reason,'url:',data.url&&data.url.substring(0,80),'response:',data.response,'context:',data.context);
+        const _st=document.getElementById('vtv-status');
+        if(_st) _st.textContent='❌ '+data.type+' | '+data.details+(data.fatal?' [FATAL]':'');
+        console.log('[VTV] ERROR type:',data.type,'details:',data.details,'fatal:',data.fatal,'reason:',data.reason,'url:',data.url&&data.url.substring(0,80));
         if(data.fatal){
           if(data.type===Hls.ErrorTypes.NETWORK_ERROR){
             rec++;if(rec<=3){console.log('[VTV] retry',rec);setTimeout(()=>hls.startLoad(),2000);}