41 lines
3.4 KiB
JavaScript
41 lines
3.4 KiB
JavaScript
/* Bento-only artwork and measured clearance. Navigation and player nodes stay put. */
|
|
(function(root){
|
|
'use strict';
|
|
function chromeClearance(height,boxes){
|
|
const occupied=boxes.filter(b=>b.visible&&b.fixed&&b.height>0&&b.top>=height/2).map(b=>height-b.top);
|
|
return Math.max(0,...occupied)+16;
|
|
}
|
|
function mount(doc){
|
|
let frame=0,active=false;const html=doc.documentElement;
|
|
const resize=new root.ResizeObserver(schedule),observer=new root.MutationObserver(schedule);
|
|
function paint(){
|
|
frame=0;const on=html.dataset.layout==='bento-hub';
|
|
if(!on){if(active){resize.disconnect();observer.disconnect();html.style.removeProperty('--bento-bottom-clearance');doc.querySelectorAll('.bento-collage,.bento-search-icon').forEach(n=>n.remove());doc.querySelectorAll('.bento-search-label').forEach(n=>n.replaceWith(...n.childNodes));}active=false;return;}
|
|
if(!active){active=true;observer.observe(doc.body,{childList:true,subtree:true,attributes:true,attributeFilter:['class','hidden']});for(const id of ['bottomNav','miniBar','sectionRail']){const el=doc.getElementById(id);if(el)resize.observe(el);}}
|
|
const search=doc.querySelector('.search-btn');
|
|
if(search&&!search.querySelector('.bento-search-icon')){
|
|
const label=doc.createElement('span');label.className='bento-search-label';label.append(...search.childNodes);
|
|
const icon=doc.createElementNS('http://www.w3.org/2000/svg','svg');icon.classList.add('bento-search-icon');icon.setAttribute('aria-hidden','true');icon.setAttribute('viewBox','0 0 24 24');icon.innerHTML='<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>';search.append(label,icon);
|
|
}
|
|
const boxes=['bottomNav','miniBar','sectionRail'].map(id=>doc.getElementById(id)).filter(Boolean).map(el=>{const r=el.getBoundingClientRect(),s=root.getComputedStyle(el);return {top:r.top,height:r.height,fixed:s.position==='fixed',visible:s.display!=='none'&&s.visibility!=='hidden'};});
|
|
const clearance=chromeClearance(root.innerHeight,boxes)+'px';if(html.style.getPropertyValue('--bento-bottom-clearance')!==clearance)html.style.setProperty('--bento-bottom-clearance',clearance);
|
|
for(const card of doc.querySelectorAll('.home-pl-card')){
|
|
if(card.querySelector('.bento-collage'))continue;
|
|
// Use actual playlist artwork; never invent an image or a verification badge.
|
|
const name=card.querySelector('.home-pl-name')?.textContent;
|
|
const playlist=root.BentoHub.playlists?.().find(p=>p.name===name);
|
|
const images=(playlist?.videos||[]).filter(v=>v.thumbnail).slice(0,4);
|
|
if(images.length<4)continue;
|
|
const collage=doc.createElement('span');collage.className='bento-collage';collage.setAttribute('aria-hidden','true');
|
|
for(const video of images){const img=doc.createElement('img');img.src=video.thumbnail;img.alt='';img.loading='lazy';collage.append(img);}
|
|
card.querySelector('.home-pl-thumb')?.prepend(collage);
|
|
}
|
|
}
|
|
function schedule(){if(!frame)frame=root.requestAnimationFrame(paint);}
|
|
new root.MutationObserver(schedule).observe(html,{attributes:true,attributeFilter:['data-layout']});root.addEventListener('resize',schedule);paint();
|
|
}
|
|
const api={chromeClearance,playlists:null};
|
|
if(typeof module!=='undefined')module.exports=api;
|
|
else {root.BentoHub=api; if(root.document.readyState==='loading')root.document.addEventListener('DOMContentLoaded',()=>mount(root.document),{once:true});else mount(root.document);}
|
|
})(typeof window==='undefined'?globalThis:window);
|