github-mirror/Verome-API
1
0
Fork 1
mirror of https://github.com/Kirazul/Verome-API.git synced 2026-03-08 08:15:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Replace YouTube IFrame with HTML5 audio player - eliminates console errors"

Browse Source 
This reverts commit 94d3f3404f.
This commit is contained in:
Your Name
2026-01-11 18:52:39 +01:00
parent 94d3f3404f
commit 76659071f8
1 changed files with 74 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
ui.ts
View File

@@ -206,15 +206,59 @@ export const html = `<!DOCTYPE html>
</div> </div>
</div> </div>
<div id="ytplayer"></div>
</body> </body>
<script> <script>
// HTML5 Audio Player - No YouTube iframe = No tracking errors // Block YouTube tracking requests before they happen
var audio=new Audio(); (function(){
var songs=[],playing=false,idx=-1,interval=null; // Override XMLHttpRequest to block tracking
audio.addEventListener('play',function(){playing=true;document.getElementById('playBtn').textContent='⏸';startProgress()}); var OrigXHR=window.XMLHttpRequest;
audio.addEventListener('pause',function(){playing=false;document.getElementById('playBtn').textContent='▶';stopProgress()}); window.XMLHttpRequest=function(){
audio.addEventListener('ended',function(){playing=false;stopProgress();next()}); var xhr=new OrigXHR();
audio.addEventListener('error',function(){console.log('Stream error, trying fallback...');tryFallback()}); var origOpen=xhr.open;
xhr.open=function(method,url){
if(url&&(url.includes('log_event')||url.includes('ptracking')||url.includes('generate_204')||url.includes('pagead')||url.includes('doubleclick'))){
this._blocked=true;
return;
}
return origOpen.apply(this,arguments);
};
var origSend=xhr.send;
xhr.send=function(){
if(this._blocked)return;
return origSend.apply(this,arguments);
};
return xhr;
};
// Override fetch too
var origFetch=window.fetch;
window.fetch=function(url,opts){
if(url&&typeof url==='string'&&(url.includes('log_event')||url.includes('ptracking')||url.includes('generate_204')||url.includes('pagead'))){
return Promise.resolve(new Response('',{status:200}));
}
return origFetch.apply(this,arguments);
};
// Override Image to block tracking pixels
var OrigImage=window.Image;
window.Image=function(w,h){
var img=new OrigImage(w,h);
var origSrc=Object.getOwnPropertyDescriptor(HTMLImageElement.prototype,'src');
Object.defineProperty(img,'src',{
set:function(v){if(v&&(v.includes('generate_204')||v.includes('log_event')||v.includes('pagead')))return;origSrc.set.call(this,v)},
get:function(){return origSrc.get.call(this)}
});
return img;
};
// Suppress console errors
var oe=console.error;
console.error=function(){
var s=Array.prototype.join.call(arguments,' ');
if(s.includes('ERR_BLOCKED')||s.includes('youtube')||s.includes('log_event')||s.includes('net::'))return;
oe.apply(console,arguments);
};
})();
var tag=document.createElement('script');tag.src='https://www.youtube.com/iframe_api';document.head.appendChild(tag);
var songs=[],yt=null,ready=false,playing=false,idx=-1,interval=null;
document.getElementById('query').onkeypress=e=>{if(e.key==='Enter')search()}; document.getElementById('query').onkeypress=e=>{if(e.key==='Enter')search()};
function showTab(t){ function showTab(t){
@@ -224,44 +268,33 @@ function showTab(t){
document.querySelector('.nav-btn[onclick*="'+t+'"]').classList.add('active'); document.querySelector('.nav-btn[onclick*="'+t+'"]').classList.add('active');
} }
async function tryFallback(){ function onYouTubeIframeAPIReady(){
var s=songs[idx];if(!s)return; yt=new YT.Player('ytplayer',{height:'0',width:'0',playerVars:{autoplay:1,controls:0},events:{onReady:()=>ready=true,onStateChange:onState,onError:onErr}});
if(s.fallbackVideoId&&!s.triedFallback){ }
s.triedFallback=true; function onErr(e){
await loadStream(s.fallbackVideoId); if(e.data===150||e.data===101||e.data===100){
}else if(!s.triedSearch){ var s=songs[idx];
if(s&&s.fallbackVideoId&&!s.triedFallback){
s.triedFallback=true;yt.loadVideoById(s.fallbackVideoId);
}else if(s&&!s.triedSearch){
s.triedSearch=true; s.triedSearch=true;
var vid=await searchYouTube(s.title,s.artists?.[0]?.name||''); searchYouTube(s.title,s.artists?.[0]?.name||'').then(vid=>{if(vid)yt.loadVideoById(vid)});
if(vid)await loadStream(vid); }
} }
} }
async function loadStream(videoId){
try{
var res=await fetch('/api/stream?id='+videoId);
var data=await res.json();
if(data.success&&data.streamingUrls){
var audioUrl=data.streamingUrls.find(u=>u.mimeType&&u.mimeType.includes('audio')&&u.quality==='AUDIO_QUALITY_MEDIUM');
if(!audioUrl)audioUrl=data.streamingUrls.find(u=>u.mimeType&&u.mimeType.includes('audio'));
if(audioUrl&&audioUrl.url){
audio.src='/api/proxy?url='+encodeURIComponent(audioUrl.url);
audio.play();
return true;
}
}
}catch(e){console.log('Stream fetch error:',e)}
return false;
}
async function searchYouTube(title,artist){ async function searchYouTube(title,artist){
try{var res=await fetch('/api/yt_search?q='+encodeURIComponent(title+' '+artist+' official')+'&filter=videos');var data=await res.json();var alt=data.results?.find(v=>v.channel?.name&&!v.channel.name.includes('Topic')&&v.id);return alt?.id||null}catch(e){return null} try{var res=await fetch('/api/yt_search?q='+encodeURIComponent(title+' '+artist+' official')+'&filter=videos');var data=await res.json();var alt=data.results?.find(v=>v.channel?.name&&!v.channel.name.includes('Topic')&&v.id);return alt?.id||null}catch(e){return null}
} }
function onState(e){
if(e.data===1){playing=true;document.getElementById('playBtn').textContent='⏸';startProgress()}
else if(e.data===2){playing=false;document.getElementById('playBtn').textContent='▶';stopProgress()}
else if(e.data===0){playing=false;stopProgress();next()}
}
function startProgress(){stopProgress();interval=setInterval(updateProgress,500)} function startProgress(){stopProgress();interval=setInterval(updateProgress,500)}
function stopProgress(){if(interval){clearInterval(interval);interval=null}} function stopProgress(){if(interval){clearInterval(interval);interval=null}}
function updateProgress(){var c=audio.currentTime||0,t=audio.duration||0;document.getElementById('cur').textContent=fmt(c);document.getElementById('total').textContent=fmt(t);document.getElementById('fill').style.width=t>0?(c/t*100)+'%':'0%'} function updateProgress(){if(!yt||!ready)return;var c=yt.getCurrentTime()||0,t=yt.getDuration()||0;document.getElementById('cur').textContent=fmt(c);document.getElementById('total').textContent=fmt(t);document.getElementById('fill').style.width=t>0?(c/t*100)+'%':'0%'}
function fmt(s){var m=Math.floor(s/60),sec=Math.floor(s%60);return m+':'+(sec<10?'0':'')+sec} function fmt(s){var m=Math.floor(s/60),sec=Math.floor(s%60);return m+':'+(sec<10?'0':'')+sec}
function seek(e){var bar=document.getElementById('bar'),rect=bar.getBoundingClientRect(),pct=(e.clientX-rect.left)/rect.width;audio.currentTime=pct*(audio.duration||0)} function seek(e){if(!yt||!ready)return;var bar=document.getElementById('bar'),rect=bar.getBoundingClientRect(),pct=(e.clientX-rect.left)/rect.width;yt.seekTo(pct*(yt.getDuration()||0),true)}
async function search(){ async function search(){
var q=document.getElementById('query').value.trim();if(!q)return; var q=document.getElementById('query').value.trim();if(!q)return;
@@ -282,18 +315,16 @@ function render(f){
}).join(''); }).join('');
} }
async function play(i){ function play(i){
if(!songs[i])return;idx=i;var s=songs[i]; if(!songs[i]||!ready)return;idx=i;var s=songs[i];
document.getElementById('pTitle').textContent=s.title||'Unknown'; document.getElementById('pTitle').textContent=s.title||'Unknown';
document.getElementById('pArtist').textContent=s.artists?.map(a=>a.name).join(', ')||''; document.getElementById('pArtist').textContent=s.artists?.map(a=>a.name).join(', ')||'';
document.getElementById('pThumb').src=s.thumbnails?.[0]?.url||'https://img.youtube.com/vi/'+s.videoId+'/mqdefault.jpg'; document.getElementById('pThumb').src=s.thumbnails?.[0]?.url||'https://img.youtube.com/vi/'+s.videoId+'/mqdefault.jpg';
document.getElementById('playerBar').className='player visible'; document.getElementById('playerBar').className='player visible';
document.querySelectorAll('.result').forEach((el,x)=>el.className=x===i?'result active':'result'); document.querySelectorAll('.result').forEach((el,x)=>el.className=x===i?'result active':'result');
document.getElementById('playBtn').textContent='...'; yt.loadVideoById(s.videoId);playing=true;document.getElementById('playBtn').textContent='⏸';
var loaded=await loadStream(s.videoId);
if(!loaded)await tryFallback();
} }
function toggle(){playing?audio.pause():audio.play()} function toggle(){if(!ready)return;playing?yt.pauseVideo():yt.playVideo()}
function prev(){if(idx>0)play(idx-1)} function prev(){if(idx>0)play(idx-1)}
function next(){if(idx<songs.length-1)play(idx+1)} function next(){if(idx<songs.length-1)play(idx+1)}
function esc(t){var d=document.createElement('div');d.textContent=t;return d.innerHTML} function esc(t){var d=document.createElement('div');d.textContent=t;return d.innerHTML}