Spaces:
Running on Zero
Running on Zero
| const host=document.getElementById('script-input'); | |
| const draft=element.querySelector('textarea'), viewport=element.querySelector('.reading-window'); | |
| const track=element.querySelector('.reading-track'), edit=element.querySelector('[data-edit]'); | |
| const hint=element.querySelector('#script-hint'), pages=element.querySelector('[data-pages]'); | |
| let take=null, reading=false, clock=0, page=0, pageCount=1, spans=[], lineHeight=35; | |
| const listeners=new AbortController(); | |
| const on=(node,event,fn)=>node.addEventListener(event,fn,{signal:listeners.signal}); | |
| draft.value=props.value || ''; | |
| function publish() { props.value=draft.value; host.dataset.draft=draft.value; } | |
| function showMode() { | |
| draft.hidden=reading; viewport.hidden=!reading; | |
| edit.hidden=!take; edit.textContent=reading?'Edit text':'View take'; | |
| pages.hidden=!reading || take?.alignment==='ready' || pageCount<2; | |
| hint.textContent=reading?(take.alignment==='ready'?'': 'Word timing unavailable'):'Write your text · '+draft.value.length+'/600'; | |
| if(reading && take.text!==draft.value) hint.textContent='Previous take'; | |
| } | |
| function layout() { | |
| if(!reading || !spans.length) return; | |
| track.style.transform='none'; | |
| lineHeight=parseFloat(getComputedStyle(viewport).lineHeight); | |
| spans.forEach(s=>s.line=Math.max(0,Math.round(s.node.offsetTop/lineHeight))); | |
| pageCount=Math.max(1,Math.ceil((Math.max(...spans.map(s=>s.line))+1)/2)); | |
| renderClock(); showMode(); | |
| } | |
| function renderClock() { | |
| if(!reading || !take) return; | |
| if(take.alignment==='ready') { | |
| let index=-1; | |
| for(let i=0;i<spans.length;i++) { | |
| const spoken=clock>=spans[i].start; | |
| spans[i].node.classList.toggle('spoken',spoken); | |
| if(spoken) index=i; | |
| } | |
| page=index<0?0:Math.floor(spans[index].line/2); | |
| } else spans.forEach(s=>s.node.classList.add('spoken')); | |
| page=Math.max(0,Math.min(pageCount-1,page)); | |
| track.style.transform=`translateY(${-page*2*lineHeight}px)`; | |
| element.querySelector('[data-previous]').disabled=page===0; | |
| element.querySelector('[data-next]').disabled=page===pageCount-1; | |
| } | |
| function receive(data) { | |
| if(!data?.text) return; | |
| take=data; clock=0; page=0; track.replaceChildren(); | |
| const words=data.alignment==='ready' && data.words?.length?data.words: | |
| (data.text.match(/\S+\s*|\s+/gu)||[data.text]).map(text=>({text,start:0,end:0})); | |
| spans=words.map(word=>{ | |
| const node=document.createElement('span'); node.className='word'; node.textContent=word.text; | |
| track.append(node); return {...word,node,line:0}; | |
| }); | |
| reading=true; showMode(); requestAnimationFrame(layout); | |
| } | |
| on(draft,'input',()=>{publish();showMode();}); | |
| on(edit,'click',()=>{ | |
| reading=!reading; | |
| if(!reading) document.getElementById('speech-player')?.dispatchEvent(new CustomEvent('zonos:pause')); | |
| showMode(); if(reading) layout(); else draft.focus(); | |
| }); | |
| on(element.querySelector('[data-previous]'),'click',()=>{page--;renderClock();}); | |
| on(element.querySelector('[data-next]'),'click',()=>{page++;renderClock();}); | |
| on(host,'zonos:take',e=>receive(e.detail)); | |
| on(host,'zonos:clock',e=>{ | |
| clock=e.detail.time; | |
| if(e.detail.playing && !reading){reading=true;showMode();layout();} | |
| renderClock(); | |
| }); | |
| watch('value',()=>{if(props.value!==draft.value){draft.value=props.value||'';reading=false;showMode();}host.dataset.draft=draft.value;}); | |
| // Layout writes can resize Gradio's outer wrapper. Defer them outside the | |
| // observer delivery cycle to avoid a ResizeObserver feedback warning in WebKit. | |
| let resizeFrame=0; | |
| const resize=new ResizeObserver(()=>{ | |
| if(resizeFrame)return; | |
| resizeFrame=requestAnimationFrame(()=>{resizeFrame=0;if(element.isConnected)layout();}); | |
| });resize.observe(viewport); | |
| const observer=new MutationObserver(()=>{if(!element.isConnected){listeners.abort();cancelAnimationFrame(resizeFrame);resize.disconnect();observer.disconnect();}}); | |
| observer.observe(document.documentElement,{childList:true,subtree:true}); | |
| publish();showMode(); | |
| host.dataset.ready='true'; | |