Update static/js/editor.js

static/js/editor.js

@@ -1,12 +1,25 @@
+// منطق اصلی ادیتور (نمایش ویدیو، سینک متن، ابزارها)
+
+// --- Color Picker State & Utils ---
+let pickerState = { h: 0, s: 0, v: 100, a: 100 };
+let currentTarget = null;
+let savedColors = [];
+let isDraggingSpectrum = false;
+let currentDeleteIndex = -1;
+let toastTimeout;
+
 // --- تابع آپدیت گرافیکی نوار اسلایدر ظاهر ---
 function updateRange(input, labelId) {
     const label = document.getElementById(labelId);
     if (label) label.innerText = input.value + '%';
-    const min = parseFloat(input.min), max = parseFloat(input.max), val = parseFloat(input.value);
+    const min = parseFloat(input.min);
+    const max = parseFloat(input.max);
+    const val = parseFloat(input.value);
     const percentage = ((val - min) / (max - min)) * 100;
     input.style.backgroundSize = percentage + '% 100%';
 }
 
+// --- هماهنگ‌سازی اسلایدرهای ظاهر با وضعیت ---
 function syncUIWithState() {
     let fzPercent = ((state.st.fz - 10) / 140) * 100;
     const fzInput = document.getElementById('fz');
@@ -31,45 +44,64 @@ function openProject(projectId) {
     req.onsuccess = (e) => {
         const p = e.target.result;
         if (!p) { alert('پروژه یافت نشد'); loadHome(); return; }
+        
         state = p.state;
         document.getElementById('currentProjectTitle').innerText = p.name;
         const videoURL = URL.createObjectURL(p.videoBlob);
         v.src = videoURL;
         
-        syncUIWithState(); // اسلایدرها
+        // همگام سازی دکمه‌های رنگ با مقادیر ذخیره شده
+        updateColorPreviewButtons();
+
+        // تنظیم اولیه اسلایدرها
+        syncUIWithState();
         
         document.querySelectorAll('.font-btn').forEach(btn => btn.classList.remove('ticked'));
         if(state.st.f === 'vazir') document.querySelectorAll('.font-btn')[1].classList.add('ticked');
         else if(state.st.f === 'lalezar') document.querySelectorAll('.font-btn')[0].classList.add('ticked');
         
-        // استایل کارت
         document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected'));
         if(state.st.name === 'karaoke_static') {
-            const staticCard = Array.from(document.querySelectorAll('.style-card')).find(c => c.innerHTML.includes("ثابت"));
+            const staticCard = Array.from(document.querySelectorAll('.style-card')).find(c => c.dataset.styleName === 'karaoke_static');
             if(staticCard) staticCard.classList.add('selected');
-        } else if (state.st.name === 'classic' || state.st.name === 'progressive_write') {
-             // پیدا کردن کارت مناسب در پنل کاستوم (اینجا پیش‌فرض را کلاسیک در نظر می‌گیریم اگر تطبیقی نبود)
-             const cards = document.querySelectorAll('.custom-style-container .style-card');
-             if(state.st.name === 'classic' && cards[0]) cards[0].classList.add('selected');
-             if(state.st.name === 'progressive_write' && cards[1]) cards[1].classList.add('selected');
         }
 
         document.getElementById('homeScreen').style.display = 'none';
         document.getElementById('editorScreen').style.display = 'flex';
+        
+        // Load Color Picker Assets
+        initSavedColors();
+        const palette = generateGridPalette();
+        renderGridWithData(palette);
+
         renderSegList();
         fit();
         upd();
-        v.onloadeddata = () => { fit(); if(!p.thumbnail) saveProjectToDB(); };
+        
+        v.onloadeddata = () => {
+            fit();
+            if(!p.thumbnail && v.duration > 1) {
+                 v.currentTime = 1.0; 
+                 let captured = false;
+                 v.addEventListener('seeked', function cap() {
+                     if(captured) return; captured = true; saveProjectToDB(); v.currentTime = 0;
+                 }, {once:true});
+            } else if (!p.thumbnail) { saveProjectToDB(); }
+        };
     };
 }
 
 function goHome() { v.pause(); saveProjectToDB(); loadHome(); }
+
 function fit() { 
     if(!state.w) return; 
     const ws = document.getElementById('workspace'); 
-    const scale = Math.min((ws.clientWidth - 40) / state.w, (window.innerHeight * 0.6) / state.h); 
-    const c = document.getElementById('videoContainer'); c.style.width = state.w + 'px'; c.style.height = state.h + 'px'; 
-    document.getElementById('scaler').style.transform = `scale(${scale})`; ws.style.height = (state.h * scale + 40) + 'px';
+    const availableHeight = window.innerHeight * 0.6; 
+    const scale = Math.min((ws.clientWidth - 40) / state.w, availableHeight / state.h); 
+    const c = document.getElementById('videoContainer'); 
+    c.style.width = state.w + 'px'; c.style.height = state.h + 'px'; 
+    document.getElementById('scaler').style.transform = `scale(${scale})`; 
+    ws.style.height = (state.h * scale + 40) + 'px';
 }
 
 function activateCustomStyle() {
@@ -81,194 +113,195 @@ function activateCustomStyle() {
     }
 }
 
-/* =========================================
-   COLOR PICKER LOGIC (IMPORTED & ADAPTED)
-   ========================================= */
-let pickerState = { h: 0, s: 0, v: 100, a: 100 };
-let currentTarget = null;
-let savedColors = [];
-let isDragging = false;
-const spectrumArea = document.getElementById('spectrumArea');
-const spectrumHandle = document.getElementById('spectrumHandle');
-
-// تبدیل‌ها
-function rgbToHex(r,g,b) {
-    return "#" + ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1).toUpperCase();
-}
-function hexToRgb(hex) {
-    hex = (hex||'').replace('#','').trim();
-    if(hex.length === 3) hex = hex.split('').map(ch=>ch+ch).join('');
-    if(hex.length!==6) return {r:255,g:255,b:255};
-    return { r: parseInt(hex.substring(0,2),16), g: parseInt(hex.substring(2,4),16), b: parseInt(hex.substring(4,6),16) };
-}
-function hsvToRgb(h, s, v) {
-    s/=100; v/=100; let c=v*s, x=c*(1-Math.abs(((h/60)%2)-1)), m=v-c, r=0,g=0,b=0;
-    if(0<=h&&h<60){r=c;g=x;b=0}else if(60<=h&&h<120){r=x;g=c;b=0}else if(120<=h&&h<180){r=0;g=c;b=x}
-    else if(180<=h&&h<240){r=0;g=x;b=c}else if(240<=h&&h<300){r=x;g=0;b=c}else if(300<=h&&h<360){r=c;g=0;b=x}
-    return { r:Math.round((r+m)*255), g:Math.round((g+m)*255), b:Math.round((b+m)*255) };
-}
-function rgbToHsv(r, g, b) {
-    r/=255; g/=255; b/=255; let max=Math.max(r,g,b), min=Math.min(r,g,b), d=max-min, h=0, s=(max===0?0:d/max), v=max;
-    if(d!==0){ switch(max){ case r:h=(g-b)/d+(g<b?6:0);break; case g:h=(b-r)/d+2;break; case b:h=(r-g)/d+4;break; } h*=60; }
-    return {h, s:s*100, v:v*100};
-}
+function renderSegList() {
+    saveProjectToDB();
+    const timeline = document.getElementById('timelineScroll');
+    const spacers = timeline.querySelectorAll('.spacer');
+    timeline.innerHTML = '';
+    timeline.appendChild(spacers[0]); 
 
-// Picker Actions
-function openColorPicker(target, ev) {
-    if(ev) ev.stopPropagation();
-    currentTarget = target;
-    document.getElementById('pickerBackdrop').classList.add('active');
-    document.getElementById('colorPickerModal').classList.add('active');
+    state.segs.forEach((seg, sIdx) => {
+        if (!seg.words || seg.words.length === 0) {
+            const wordsArr = seg.text.trim().split(/\s+/).filter(w => w.length > 0);
+            const duration = seg.end - seg.start;
+            const timePerWord = duration / Math.max(1, wordsArr.length);
+            let wStart = seg.start;
+            seg.words = wordsArr.map((wStr, i) => {
+                let wEnd = wStart + timePerWord;
+                if (i === wordsArr.length - 1) wEnd = seg.end;
+                let obj = { word: wStr, start: parseFloat(wStart.toFixed(2)), end: parseFloat(wEnd.toFixed(2)) };
+                wStart = wEnd;
+                return obj;
+            });
+        }
 
-    // Read initial color from state
-    let hex = '#FFFFFF';
-    if(target === 'main') hex = state.st.col || '#FFFFFF';
-    if(target === 'bg') hex = state.st.bg || '#000000';
-    if(target === 'static') hex = state.st.col || '#A020F0';
+        seg.words.forEach((w, wIdx) => {
+            const el = document.createElement('div');
+            el.className = 'word-chip';
+            el.innerText = w.word;
+            const uid = `${sIdx}-${wIdx}`;
+            el.id = `w-${uid}`;
+            
+            if (activeWordId === uid) el.classList.add('active');
 
-    const rgb = hexToRgb(hex);
-    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-    pickerState = { h: hsv.h, s: hsv.s, v: hsv.v, a: 100 }; // فعلاً آلفا روی ۱۰۰ (یا اگه بخواید از استیت بخونید)
+            el.onclick = (e) => {
+                e.stopPropagation();
+                highlightWord(sIdx, wIdx, true);
+            };
+            timeline.appendChild(el);
+        });
 
-    initSavedColors();
-    generateGrid();
-    switchTab('spectrum');
-}
+        if (sIdx < state.segs.length - 1) {
+            const nl = document.createElement('div');
+            nl.className = 'newline-indicator';
+            nl.innerHTML = '<i class="fa-solid fa-arrow-turn-down" style="transform: rotate(90deg) scaleX(-1);"></i>';
+            timeline.appendChild(nl);
+        }
+    });
 
-function closePicker() {
-    document.getElementById('colorPickerModal').classList.remove('active');
-    document.getElementById('pickerBackdrop').classList.remove('active');
+    timeline.appendChild(spacers[1]); 
+    updateSplitButton();
 }
 
-function saveAndClosePicker() {
-    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
-    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
-    // برای سادگی فعلاً آلفا را در کد hex اعمال نمی‌کنیم اما اگه بخواید RGBA باشه باید لاجیک `upd` عوض شه
-    // سیستم شما بر اساس hex رنگ کار می‌کند:
-    
-    if (currentTarget === 'main') state.st.col = hex;
-    else if (currentTarget === 'bg') state.st.bg = hex;
-    else if (currentTarget === 'static') { 
-        state.st.col = hex; 
-        document.documentElement.style.setProperty('--static-color', hex); 
+function highlightWord(sIdx, wIdx, showToolbar) {
+    activeWordId = `${sIdx}-${wIdx}`;
+    v.pause();
+    togglePlayIcon(false);
+    const seg = state.segs[sIdx];
+    const word = seg.words[wIdx];
+    v.currentTime = word.start;
+    manualOverride = true; 
+    updateOverlayContent(v.currentTime);
+    document.querySelectorAll('.word-chip').forEach(c => c.classList.remove('active'));
+    const el = document.getElementById(`w-${activeWordId}`);
+    if(el) {
+        el.classList.add('active');
+        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
     }
-    
-    upd(); // Apply to preview
-    closePicker();
+    if(showToolbar) document.getElementById('toolbar').classList.add('show');
+    updateSplitButton();
 }
 
-function switchTab(name) {
-    document.querySelectorAll('.picker-tab').forEach(t=>t.classList.remove('active'));
-    document.getElementById('tab-'+name).classList.add('active');
-    document.querySelectorAll('.view-section').forEach(v=>v.classList.remove('active-view'));
-    document.getElementById('view-'+name).classList.add('active-view');
-    syncAllUI();
+function playPreviewWord() {
+    if (!activeWordId) return;
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    const word = state.segs[sIdx].words[wIdx];
+    if(previewInterval) clearInterval(previewInterval);
+    v.pause(); v.currentTime = word.start;
+    const icon = document.getElementById('btnPreviewPlay').querySelector('i');
+    icon.className = "fa-solid fa-pause";
+    v.play();
+    previewInterval = setInterval(() => {
+        if(v.currentTime >= word.end) {
+            v.pause(); clearInterval(previewInterval); icon.className = "fa-solid fa-play";
+            if (v.currentTime >= word.end) v.currentTime = word.end - 0.01;
+        }
+    }, 20);
 }
 
-function handleSpectrum(e) {
-    const rect = spectrumArea.getBoundingClientRect();
-    let x = Math.max(0, Math.min((e.clientX||e.touches[0].clientX) - rect.left, rect.width));
-    let y = Math.max(0, Math.min((e.clientY||e.touches[0].clientY) - rect.top, rect.height));
-    spectrumHandle.style.left = x+'px'; spectrumHandle.style.top = y+'px';
-    pickerState.h = (x/rect.width)*360; pickerState.s = 100 - ((y/rect.height)*100);
-    syncAllUI();
+function saveText() {
+    if (!activeWordId) return;
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    const val = document.getElementById('textInput').value.trim();
+    if (val) {
+        state.segs[sIdx].words[wIdx].word = val;
+        state.segs[sIdx].text = state.segs[sIdx].words.map(w => w.word).join(' ');
+        renderSegList();
+        highlightWord(sIdx, wIdx, true);
+    }
+    closeAllSheets();
 }
-spectrumArea.addEventListener('mousedown', e => { isDragging=true; handleSpectrum(e); });
-window.addEventListener('mousemove', e => { if(isDragging) handleSpectrum(e); });
-window.addEventListener('mouseup', () => isDragging=false);
-spectrumArea.addEventListener('touchstart', e => { isDragging=true; handleSpectrum(e.touches[0]); },{passive:false});
-window.addEventListener('touchmove', e => { if(isDragging){e.preventDefault(); handleSpectrum(e.touches[0]);} },{passive:false});
-window.addEventListener('touchend', () => isDragging=false);
 
-function updateBrightness() { pickerState.v = parseInt(document.getElementById('brightness-slider').value); syncAllUI(); }
-function updateAlpha() { pickerState.a = parseInt(document.getElementById('alpha-slider').value); syncAllUI(); }
-function updateFromHexInput() {
-    let val = document.getElementById('input-hex').value.replace('#','');
-    if(/^[0-9A-Fa-f]{6}$/.test(val)) {
-        let rgb = hexToRgb(val); let hsv = rgbToHsv(rgb.r,rgb.g,rgb.b);
-        pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v;
-        syncAllUI();
+function adjustTime(type, am) {
+    if(type === 'start') {
+        let v = parseFloat((tempStartTime + am).toFixed(2));
+        if(v < 0) v = 0; if(v >= tempEndTime) v = parseFloat((tempEndTime - 0.1).toFixed(2));
+        tempStartTime = v; document.getElementById('valStart').innerText = fmt(tempStartTime);
+    } else {
+        let v = parseFloat((tempEndTime + am).toFixed(2));
+        if(v <= tempStartTime) v = parseFloat((tempStartTime + 0.1).toFixed(2));
+        tempEndTime = v; document.getElementById('valEnd').innerText = fmt(tempEndTime);
     }
 }
-function updateRGBFromInputs() {
-    let r=parseInt(document.getElementById('input-r').value)||0, g=parseInt(document.getElementById('input-g').value)||0, b=parseInt(document.getElementById('input-b').value)||0;
-    let hsv=rgbToHsv(r,g,b); pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
-}
-function updateRGBFromSliders() {
-    let r=parseInt(document.getElementById('slider-r').value), g=parseInt(document.getElementById('slider-g').value), b=parseInt(document.getElementById('slider-b').value);
-    let hsv=rgbToHsv(r,g,b); pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
+
+function confirmTimeChanges() {
+    if (!activeWordId) return;
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    const seg = state.segs[sIdx];
+    seg.words[wIdx].start = tempStartTime;
+    seg.words[wIdx].end = tempEndTime;
+    if (wIdx === 0 && tempStartTime < seg.start) seg.start = tempStartTime;
+    if (wIdx === seg.words.length - 1 && tempEndTime > seg.end) seg.end = tempEndTime;
+    closeAllSheets(); renderSegList(); highlightWord(sIdx, wIdx, true);
 }
+function cancelTimeChanges() { closeAllSheets(); }
 
-function syncAllUI() {
-    let rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
-    let hex = rgbToHex(rgb.r, rgb.g, rgb.b);
-    let bg = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
-    
-    // Sliders
-    document.getElementById('slider-r').value = document.getElementById('input-r').value = rgb.r;
-    document.getElementById('slider-g').value = document.getElementById('input-g').value = rgb.g;
-    document.getElementById('slider-b').value = document.getElementById('input-b').value = rgb.b;
-    document.getElementById('input-hex').value = hex.replace('#','');
-    document.getElementById('largeColorPreview').style.backgroundColor = bg;
-    document.getElementById('brightness-slider').value = Math.round(pickerState.v);
-    document.getElementById('alpha-slider').value = Math.round(pickerState.a);
-    document.getElementById('disp-brightness').innerText = Math.round(pickerState.v);
-    document.getElementById('disp-alpha').innerText = Math.round(pickerState.a);
+function confirmDeleteWord() { /* Renamed to differ from Color Picker Delete */
+    if (!activeWordId) return;
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    const seg = state.segs[sIdx];
+    seg.words.splice(wIdx, 1);
+    if (seg.words.length === 0) { state.segs.splice(sIdx, 1); activeWordId = null; document.getElementById('toolbar').classList.remove('show'); } 
+    else { seg.text = seg.words.map(w => w.word).join(' '); activeWordId = null; document.getElementById('toolbar').classList.remove('show'); }
+    closeAllSheets(); renderSegList();
+}
 
-    // Spectrum Handle
-    if(!isDragging) {
-        spectrumHandle.style.left = (pickerState.h/360*100)+'%';
-        spectrumHandle.style.top = (100-pickerState.s)+'%';
+function toggleSplit() {
+    if (!activeWordId) return;
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    if (wIdx === 0 && sIdx > 0) {
+        const prevSeg = state.segs[sIdx - 1]; const currSeg = state.segs[sIdx];
+        prevSeg.words = prevSeg.words.concat(currSeg.words); prevSeg.end = currSeg.end; 
+        prevSeg.text = prevSeg.words.map(w => w.word).join(' '); state.segs.splice(sIdx, 1); 
+        const newWIdx = prevSeg.words.length - currSeg.words.length;
+        renderSegList(); highlightWord(sIdx - 1, newWIdx, true);
+    } else {
+        const seg = state.segs[sIdx]; const wordsFirstHalf = seg.words.slice(0, wIdx); const wordsSecondHalf = seg.words.slice(wIdx);
+        seg.words = wordsFirstHalf; seg.text = seg.words.map(w => w.word).join(' '); seg.end = wordsFirstHalf[wordsFirstHalf.length-1].end;
+        const newSeg = { text: wordsSecondHalf.map(w => w.word).join(' '), start: wordsSecondHalf[0].start, end: wordsSecondHalf[wordsSecondHalf.length-1].end, words: wordsSecondHalf, isHidden: false };
+        state.segs.splice(sIdx + 1, 0, newSeg);
+        renderSegList(); highlightWord(sIdx + 1, 0, true);
     }
 }
 
-// Saved Colors & Grid
-function initSavedColors() {
-    try { savedColors = JSON.parse(localStorage.getItem('mySavedColors')) || []; } catch{ savedColors=[]; }
-    renderSavedColors();
-}
-function saveCurrentColor() {
-    let rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
-    savedColors.push(rgbToHex(rgb.r, rgb.g, rgb.b));
-    localStorage.setItem('mySavedColors', JSON.stringify(savedColors));
-    renderSavedColors();
-    document.getElementById('toastNotification').classList.add('show');
-    setTimeout(()=>document.getElementById('toastNotification').classList.remove('show'), 2000);
+function updateSplitButton() {
+    const btn = document.getElementById('btnSplit'); if(!activeWordId) { btn.classList.remove('active-state'); return; }
+    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+    if (wIdx === 0 && sIdx > 0) { btn.classList.add('active-state'); btn.style.transform = "rotate(180deg)"; } else { btn.classList.remove('active-state'); btn.style.transform = ""; }
 }
-function renderSavedColors() {
-    const c = document.getElementById('savedColorsContainer');
-    // keep only save button
-    while(c.children.length > 1) c.removeChild(c.lastChild);
-    savedColors.forEach((hex, i) => {
-        let d = document.createElement('div'); d.className='saved-color-wrapper';
-        d.innerHTML = `<div class="saved-circle" style="background:${hex}" onclick="loadColor('${hex}')"></div><div class="mini-delete-btn" onclick="deleteColor(${i})"><i class="fa-solid fa-xmark"></i></div>`;
-        c.appendChild(d);
-    });
-}
-function deleteColor(i) {
-    savedColors.splice(i, 1); localStorage.setItem('mySavedColors', JSON.stringify(savedColors)); renderSavedColors();
-}
-function loadColor(hex) {
-    let rgb = hexToRgb(hex); let hsv = rgbToHsv(rgb.r,rgb.g,rgb.b);
-    pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
-}
-function generateGrid() {
-    const cont = document.getElementById('gridContainer'); cont.innerHTML='';
-    const colors = ['#FFFFFF','#000000','#FF3B30','#FF9500','#FFCC00','#34C759','#00C7BE','#32ADE6','#007AFF','#5856D6','#AF52DE','#FF2D55'];
-    // Generate palette
-    for(let h=0; h<360; h+=15) {
-        let rgb = hsvToRgb(h, 80, 90);
-        colors.push(rgbToHex(rgb.r, rgb.g, rgb.b));
-    }
-    colors.forEach(hex => {
-        let d = document.createElement('div'); d.className='grid-item'; d.style.background=hex;
-        d.onclick=()=>{loadColor(hex)}; cont.appendChild(d);
-    });
+
+function togglePlay() { if(v.paused) { v.play(); togglePlayIcon(true); } else { v.pause(); togglePlayIcon(false); } }
+function togglePlayIcon(isPlaying) { const overlay = document.getElementById('playOverlay'); overlay.className = isPlaying ? 'playing' : ''; }
+
+function updateOverlayContent(currentTime) {
+    const idx = state.segs.findIndex(s => currentTime >= s.start && currentTime <= s.end); 
+    if(idx !== -1) { 
+        const seg = state.segs[idx]; 
+        if(seg.isHidden) { tEl.style.opacity = 0; } 
+        else { 
+            tEl.style.opacity = 1; 
+            if(state.st.name === 'auto_director' && seg.words) {
+                let html = ""; seg.words.forEach((w, i) => {
+                    let isActive = (currentTime >= w.start && currentTime <= w.end); let boxColor = (i % 2 === 0) ? '#00D7FF' : '#FF0080'; 
+                    if(isActive) html += `<span style="background-color: ${boxColor}; color: #ffffff !important; box-shadow: 0 0 15px ${boxColor}; transform: scale(1.1); display:inline-block; border-radius: 6px; padding: 0 6px; text-shadow:none; font-family: inherit;">${w.word}</span> `;
+                    else html += `<span style="color: #ffffff !important; text-shadow:none; font-family: inherit;">${w.word}</span> `;
+                }); tEl.innerHTML = html;
+            } 
+            else if(state.st.name === 'karaoke_static' && seg.words) { 
+                let html = ""; seg.words.forEach(w => { 
+                    let isActive = (currentTime >= w.start && currentTime <= w.end); let cls = isActive ? "word-active" : ""; 
+                    let styleAttr = ""; if(isActive) { let boxColor = state.st.col; styleAttr = `style="background-color: ${boxColor} !important; color: #fff !important; box-shadow: 0 2px 8px ${boxColor};"`; } 
+                    html += `<span class="${cls}" ${styleAttr}>${w.word}</span> `; 
+                }); tEl.innerHTML = html; 
+            } 
+            else if (state.st.name === 'progressive_write' && seg.words) { 
+                let html = ""; seg.words.forEach(w => { if(currentTime >= w.start) html += `<span style="opacity:1">${w.word}</span> `; else html += `<span style="opacity:0">${w.word}</span> `; }); tEl.innerHTML = html.trim(); 
+            } 
+            else { tEl.innerText = seg.text; } 
+        } 
+    } else { tEl.style.opacity = 0; } 
 }
 
-// ------------------------------------
-// Original UPD Logic (Synced)
-// ------------------------------------
 function upd() {
     saveProjectToDB();
     const uiFz = parseFloat(document.getElementById('fz').value);
@@ -276,61 +309,330 @@ function upd() {
     const uiX = parseFloat(document.getElementById('posX').value);
     state.st.fz = Math.round(10 + (uiFz / 100) * 140); 
     state.st.y = Math.round((uiY / 100) * 1200);       
-    state.st.x = Math.round((uiX / 100) * 500);
+    state.st.x = Math.round((uiX / 100) * 500);        
 
-    // Apply color button previews
-    document.getElementById('preview-main-btn').style.backgroundColor = state.st.col || '#fff';
-    document.getElementById('preview-bg-btn').style.backgroundColor = state.st.bg || '#000';
+    updateColorPreviewButtons();
 
     let font = 'Vazirmatn';
     if(state.st.f === 'lalezar') font = 'Lalezar'; if(state.st.f === 'bangers') font = 'Impact'; if(state.st.f === 'roboto') font = 'Arial';
     
-    tEl.style.fontFamily = font; 
-    tEl.style.fontSize = state.st.fz + 'px'; 
-    tEl.style.bottom = state.st.y + 'px'; 
-    tEl.style.textAlign = 'center'; 
-    tEl.style.left = '50%'; 
-    tEl.style.transform = `translateX(calc(-50% + ${state.st.x}px))`; 
-    tEl.style.borderRadius = '0px';
+    tEl.style.fontFamily = font; tEl.style.fontSize = state.st.fz + 'px'; tEl.style.bottom = state.st.y + 'px'; 
+    tEl.style.textAlign = 'center'; tEl.style.left = '50%'; tEl.style.transform = `translateX(calc(-50% + ${state.st.x}px))`; 
+    tEl.style.paintOrder = 'normal'; tEl.style.webkitPaintOrder = 'normal'; tEl.style.borderRadius = '0px';
 
     if(state.st.name === 'karaoke_static' || state.st.name === 'auto_director') {
         tEl.style.backgroundColor = 'transparent'; tEl.style.color = '#FFFFFF'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
     } else if (state.st.name === 'plain_white') {
         tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
     } else if (state.st.name === 'white_outline') {
-        tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.textShadow = 'none';
+        tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
     } else {
+        // Handling Colors from state
+        // If BG color is transparent from picker logic, we apply rgba
+        // To support old hex logic, we convert if needed
         tEl.style.color = state.st.col;
         if(state.st.type === 'solid') { tEl.style.backgroundColor = state.st.bg; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.borderRadius = '12px'; } 
         else if (state.st.type === 'transparent') {
-            let c = state.st.bg.replace('#', ''); 
-            if(c.length===6) {
-                let r = parseInt(c.substring(0, 2), 16); let g = parseInt(c.substring(2, 4), 16); let b = parseInt(c.substring(4, 6), 16);
-                tEl.style.backgroundColor = `rgba(${r},${g},${b},0.6)`; 
-            } else { tEl.style.backgroundColor = state.st.bg; } // fallback
+            // Apply a slight opacity to whatever bg color is chosen, or parse it
+            // Simple heuristic: if it's hex, make it rgba with opacity. If already rgba, leave it.
+            let c = state.st.bg;
+            if(c.startsWith('#')) {
+                let r = parseInt(c.substring(1, 3), 16); let g = parseInt(c.substring(3, 5), 16); let b = parseInt(c.substring(5, 7), 16);
+                tEl.style.backgroundColor = `rgba(${r},${g},${b},0.6)`;
+            } else {
+               tEl.style.backgroundColor = c.replace(/[\d.]+\)$/, '0.6)'); 
+            }
             tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.borderRadius = '12px';
         } else if (state.st.type === 'outline') {
-            tEl.style.backgroundColor = 'transparent'; tEl.style.color = state.st.col; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`; tEl.style.paintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
+            tEl.style.backgroundColor = 'transparent'; tEl.style.color = state.st.col; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
         } else { tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; }
     }
 }
 
+// --- NEW HELPER: Update small colored circles in the accordion ---
+function updateColorPreviewButtons() {
+    const mainBtn = document.getElementById('preview-main-btn');
+    if(mainBtn) mainBtn.style.backgroundColor = state.st.col;
+    
+    const bgBtn = document.getElementById('preview-bg-btn');
+    if(bgBtn) bgBtn.style.backgroundColor = state.st.bg;
+}
+
 function setStylePreset(name, el, skipModeSet = false) { 
     state.st.name = name; 
     document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected')); 
     if(el) el.classList.add('selected'); 
+    
     if(name === 'karaoke_static' && !skipModeSet) { 
-        state.st.col = '#A020F0'; 
-        document.documentElement.style.setProperty('--static-color', '#A020F0'); 
+        const defaultPurple = '#A020F0'; state.st.col = defaultPurple; 
+        document.documentElement.style.setProperty('--static-color', defaultPurple); 
+        // picker not synced here explicitly, next open will handle
     }
+    
     if(name === 'classic' && !skipModeSet) setMode('solid'); 
     else if (name === 'progressive_write') setMode('none'); 
     else if (name === 'plain_white' || name === 'white_outline') { 
-        state.st.col = '#FFFFFF'; state.st.bg = '#000000'; setMode('outline'); 
+        state.st.col = '#FFFFFF'; state.st.bg = '#000000'; 
+        setMode('outline'); 
     }
     upd(); 
 }
 
-function handleClassicDoubleClick(element) { event.stopPropagation(); activateCustomStyle(); setStylePreset('classic', element, true); setMode('none'); }
+function handleClassicDoubleClick(element) {
+    event.stopPropagation();
+    activateCustomStyle();
+    setStylePreset('classic', element, true);
+    setMode('none');
+}
+
 function setFont(f, el) { document.querySelectorAll('.font-btn').forEach(btn => btn.classList.remove('ticked')); el.classList.add('ticked'); state.st.f = f; upd(); }
-function setMode(m) { state.st.type = m; syncModeButtons(); upd(); }
+function setMode(m) { state.st.type = m; syncModeButtons(); upd(); }
+
+// ============================================
+// ============================================
+// ===        PRO COLOR PICKER LOGIC        ===
+// ============================================
+// ============================================
+
+function openColorPicker(target, ev) {
+    if (ev) ev.stopPropagation();
+    currentTarget = target;
+
+    document.getElementById('pickerBackdrop').classList.add('active');
+    document.getElementById('colorPickerModal').classList.add('active');
+
+    // Init color from state
+    let hex = '#FFFFFF'; 
+    // We treat existing state.st.col/bg as the source. 
+    // They might be Hex or RGBA strings. We need a parser.
+    if(target === 'main') hex = state.st.col;
+    else if(target === 'bg') hex = state.st.bg;
+    else if(target === 'static') hex = state.st.col; // Reuse text col for static logic as previously defined
+
+    // Fallback/Convert whatever string is there to valid HSV/A
+    let parsed = parseColorStringToState(hex);
+    pickerState = parsed;
+
+    switchTab('spectrum');
+    syncAllUI();
+    syncGridSelectedFromCurrentColor();
+}
+
+function closePicker() {
+    document.getElementById('colorPickerModal').classList.remove('active');
+    document.getElementById('pickerBackdrop').classList.remove('active');
+}
+
+function saveAndClosePicker() {
+    // Convert current picker state to Output String (Hex or RGBA if alpha < 100)
+    let colorStr;
+    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    
+    if (pickerState.a >= 100) {
+        colorStr = rgbToHex(rgb.r, rgb.g, rgb.b);
+    } else {
+        colorStr = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${pickerState.a/100})`;
+    }
+
+    if (currentTarget === 'main') {
+        state.st.col = colorStr;
+    } else if (currentTarget === 'bg') {
+        state.st.bg = colorStr;
+    } else if (currentTarget === 'static') {
+        state.st.col = colorStr;
+        document.documentElement.style.setProperty('--static-color', colorStr);
+    }
+
+    upd();
+    closePicker();
+}
+
+// ... Rest of the picker logic (Tabs, Drag, Calculation) ...
+
+const spectrumArea = document.getElementById('spectrumArea');
+const spectrumHandle = document.getElementById('spectrumHandle');
+const slBright = document.getElementById('brightness-slider');
+const slAlpha = document.getElementById('alpha-slider');
+const previewBox = document.getElementById('largeColorPreview');
+const gridCont = document.getElementById('gridContainer');
+
+// Tabs
+function switchTab(name) {
+    document.querySelectorAll('.picker-tab').forEach(t => t.classList.remove('active'));
+    document.getElementById('tab-' + name).classList.add('active');
+    document.querySelectorAll('.view-section').forEach(v => v.classList.remove('active-view'));
+    document.getElementById('view-' + name).classList.add('active-view');
+    // Hide brightness slider in manual to save space? Code sample logic:
+    const brRow = document.getElementById('brightness-row');
+    if(brRow) brRow.style.display = (name === 'manual') ? 'none' : 'flex';
+    syncAllUI();
+    if(name === 'grid') syncGridSelectedFromCurrentColor();
+}
+
+// Spectrum Handlers
+function handleSpectrum(e) {
+    const rect = spectrumArea.getBoundingClientRect();
+    let x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    let y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+    spectrumHandle.style.left = x + 'px';
+    spectrumHandle.style.top = y + 'px';
+    pickerState.h = (x / rect.width) * 360;
+    pickerState.s = 100 - ((y / rect.height) * 100);
+    syncAllUI();
+    syncGridSelectedFromCurrentColor();
+}
+spectrumArea.addEventListener('mousedown', e => { isDraggingSpectrum = true; handleSpectrum(e); });
+window.addEventListener('mousemove', e => { if(isDraggingSpectrum) handleSpectrum(e); });
+window.addEventListener('mouseup', () => isDraggingSpectrum = false);
+spectrumArea.addEventListener('touchstart', e => { isDraggingSpectrum = true; handleSpectrum(e.touches[0]); }, { passive:false });
+window.addEventListener('touchmove', e => { if(isDraggingSpectrum) { e.preventDefault(); handleSpectrum(e.touches[0]); } }, { passive:false });
+window.addEventListener('touchend', () => isDraggingSpectrum = false);
+
+// Global Sliders Update
+function updateBrightness() { pickerState.v = parseInt(slBright.value, 10); syncAllUI(); syncGridSelectedFromCurrentColor(); }
+function updateAlpha() { pickerState.a = parseInt(slAlpha.value, 10); syncAllUI(); }
+
+// Manual Inputs Update
+function updateRGBFromSliders() {
+    const r = parseInt(document.getElementById('slider-r').value, 10);
+    const g = parseInt(document.getElementById('slider-g').value, 10);
+    const b = parseInt(document.getElementById('slider-b').value, 10);
+    updateFromRGB(r, g, b);
+}
+function updateRGBFromInputs() {
+    const r = Math.min(255, Math.max(0, parseInt(document.getElementById('input-r').value, 10) || 0));
+    const g = Math.min(255, Math.max(0, parseInt(document.getElementById('input-g').value, 10) || 0));
+    const b = Math.min(255, Math.max(0, parseInt(document.getElementById('input-b').value, 10) || 0));
+    updateFromRGB(r, g, b);
+}
+function updateFromRGB(r, g, b) {
+    const hsv = rgbToHsv(r, g, b);
+    pickerState.h = hsv.h; pickerState.s = hsv.s; pickerState.v = hsv.v;
+    syncAllUI(); syncGridSelectedFromCurrentColor();
+}
+function updateFromHexInput() {
+    let val = document.getElementById('input-hex').value.trim();
+    if(val.startsWith('#')) val = val.substring(1);
+    if(/^[0-9A-Fa-f]{6}$/.test(val) || /^[0-9A-Fa-f]{3}$/.test(val)) {
+        const rgb = hexToRgb('#'+val); const hsv = rgbToHsv(rgb.r,rgb.g,rgb.b);
+        pickerState.h = hsv.h; pickerState.s = hsv.s; pickerState.v = hsv.v; pickerState.a = 100;
+        syncAllUI(); syncGridSelectedFromCurrentColor();
+    }
+}
+
+function syncAllUI() {
+    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    const rgba = `rgba(${rgb.r},${rgb.g},${rgb.b},${pickerState.a/100})`;
+
+    const slR = document.getElementById('slider-r'), inR = document.getElementById('input-r');
+    const slG = document.getElementById('slider-g'), inG = document.getElementById('input-g');
+    const slB = document.getElementById('slider-b'), inB = document.getElementById('input-b');
+    const inHex = document.getElementById('input-hex');
+
+    slR.value = inR.value = rgb.r;
+    slG.value = inG.value = rgb.g;
+    slB.value = inB.value = rgb.b;
+    if(document.activeElement !== inHex) inHex.value = hex.replace('#','').toUpperCase();
+
+    // RGB Gradients
+    slR.style.setProperty('--track-bg', `linear-gradient(90deg, rgb(0,${rgb.g},${rgb.b}), rgb(255,${rgb.g},${rgb.b}))`);
+    slG.style.setProperty('--track-bg', `linear-gradient(90deg, rgb(${rgb.r},0,${rgb.b}), rgb(${rgb.r},255,${rgb.b}))`);
+    slB.style.setProperty('--track-bg', `linear-gradient(90deg, rgb(${rgb.r},${rgb.g},0), rgb(${rgb.r},${rgb.g},255))`);
+
+    // Bright/Alpha UI
+    slBright.value = Math.round(pickerState.v);
+    document.getElementById('disp-brightness').innerText = Math.round(pickerState.v);
+    const brightColor = hsvToRgb(pickerState.h, pickerState.s, 100);
+    slBright.style.setProperty('--track-bg', `linear-gradient(90deg, #000000, rgb(${brightColor.r},${brightColor.g},${brightColor.b}))`);
+
+    slAlpha.value = Math.round(pickerState.a);
+    document.getElementById('disp-alpha').innerText = Math.round(pickerState.a);
+    slAlpha.style.setProperty('--track-bg', `linear-gradient(90deg, rgba(${rgb.r},${rgb.g},${rgb.b},0), rgba(${rgb.r},${rgb.g},${rgb.b},1))`);
+
+    previewBox.style.backgroundColor = rgba;
+
+    if(!isDraggingSpectrum) {
+        spectrumHandle.style.left = (pickerState.h / 360 * 100) + '%';
+        spectrumHandle.style.top = (100 - pickerState.s) + '%';
+    }
+}
+
+// Math Utils
+function rgbToHex(r,g,b) { r=Math.round(r);g=Math.round(g);b=Math.round(b); return "#" + ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1).toUpperCase(); }
+function hexToRgb(hex) {
+    hex = (hex||'#000').replace('#','').trim(); if(hex.length===3) hex=hex.split('').map(c=>c+c).join('');
+    if(hex.length!==6) return {r:0,g:0,b:0};
+    return {r:parseInt(hex.substring(0,2),16),g:parseInt(hex.substring(2,4),16),b:parseInt(hex.substring(4,6),16)};
+}
+function hsvToRgb(h,s,v){ s/=100;v/=100; let c=v*s; let x=c*(1-Math.abs(((h/60)%2)-1)); let m=v-c; let r=0,g=0,b=0; if(h<60){r=c;g=x;}else if(h<120){r=x;g=c;}else if(h<180){g=c;b=x;}else if(h<240){g=x;b=c;}else if(h<300){r=x;b=c;}else{r=c;b=x;} return {r:Math.round((r+m)*255),g:Math.round((g+m)*255),b:Math.round((b+m)*255)}; }
+function rgbToHsv(r,g,b){ r/=255;g/=255;b/=255; let max=Math.max(r,g,b), min=Math.min(r,g,b), d=max-min, h=0, s=max===0?0:d/max, v=max; if(d!==0){ switch(max){ case r: h=(g-b)/d+(g<b?6:0);break; case g: h=(b-r)/d+2;break; case b: h=(r-g)/d+4;break;} h*=60;} return {h,s:s*100,v:v*100}; }
+
+function parseColorStringToState(colorStr) {
+    // Takes #ABC, #ABCDEF, rgb(..), rgba(..) and returns HSV+A
+    let r=255, g=255, b=255, a=100;
+    colorStr = colorStr.trim();
+    if(colorStr.startsWith('#')) {
+        let rgb = hexToRgb(colorStr); r=rgb.r; g=rgb.g; b=rgb.b;
+    } else if(colorStr.startsWith('rgb')) {
+        let parts = colorStr.match(/[\d.]+/g);
+        if(parts) {
+            r = parseFloat(parts[0]); g = parseFloat(parts[1]); b = parseFloat(parts[2]);
+            if(parts.length > 3) a = Math.round(parseFloat(parts[3]) * 100);
+        }
+    }
+    const hsv = rgbToHsv(r,g,b);
+    return { h:hsv.h, s:hsv.s, v:hsv.v, a:a };
+}
+
+// Saved Colors
+function initSavedColors() {
+    const s = localStorage.getItem('mySavedColors');
+    if(s) { try{savedColors=JSON.parse(s)||[];}catch(e){savedColors=[];} }
+    renderSavedColors();
+}
+function saveCurrentColor() {
+    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    savedColors.push(hex); localStorage.setItem('mySavedColors', JSON.stringify(savedColors));
+    renderSavedColors(); showToast();
+}
+function renderSavedColors(){
+    const c = document.getElementById('savedColorsContainer');
+    // Clear old items (except save btn)
+    const svBtn = c.querySelector('.btn-save-text');
+    while(svBtn.nextSibling) svBtn.nextSibling.remove();
+    
+    savedColors.forEach((hex, idx) => {
+        const w = document.createElement('div'); w.className='saved-color-wrapper';
+        w.innerHTML = `<div class="saved-circle" style="background-color:${hex}"></div><div class="mini-delete-btn"><i class="fa-solid fa-xmark"></i></div>`;
+        w.querySelector('.saved-circle').onclick = () => { let parsed = parseColorStringToState(hex); pickerState=parsed; syncAllUI(); syncGridSelectedFromCurrentColor(); };
+        w.querySelector('.mini-delete-btn').onclick = (e) => { e.stopPropagation(); currentDeleteIndex=idx; document.getElementById('delColorPreview').style.backgroundColor=hex; document.getElementById('deleteModal').classList.add('active'); };
+        c.appendChild(w);
+    });
+}
+function showToast() { const t=document.getElementById('toastNotification'); t.classList.add('show'); clearTimeout(toastTimeout); toastTimeout=setTimeout(()=>t.classList.remove('show'),2000); }
+function confirmDelete(){ if(currentDeleteIndex>-1) { savedColors.splice(currentDeleteIndex,1); localStorage.setItem('mySavedColors',JSON.stringify(savedColors)); renderSavedColors(); } closeDeleteModal(); }
+function closeDeleteModal(){ document.getElementById('deleteModal').classList.remove('active'); currentDeleteIndex=-1; }
+
+// Grid Generation
+function generateGridPalette() {
+    const colors = ['#FFFFFF','#F2F2F7','#E5E5EA','#D1D1D6','#C7C7CC','#AEAEB2','#8E8E93','#636366','#48484A','#3A3A3C','#2C2C2E','#1C1C1E','#000000','#FF3B30','#FF453A','#FF9500','#FF9F0A','#FFD60A','#FFCC00','#34C759','#30D158','#00C7BE','#64D2FF','#32ADE6','#0A84FF','#007AFF','#5E5CE6','#5856D6','#AF52DE','#BF5AF2','#FF2D55'];
+    for(let i=0;i<=20;i++){ let v=Math.round(i/20*255); colors.push(rgbToHex(v,v,v)); }
+    for(let h=0;h<360;h+=12){ for(let s of [92,72]) for(let v of [100,85,70]) { colors.push(rgbToHex(hsvToRgb(h,s,v).r,hsvToRgb(h,s,v).g,hsvToRgb(h,s,v).b)); } }
+    return [...new Set(colors)];
+}
+function renderGridWithData(colors){
+    gridCont.innerHTML='';
+    colors.forEach(hex => {
+        const d = document.createElement('div'); d.className='grid-item'; d.style.backgroundColor=hex; d.setAttribute('data-hex', hex.toUpperCase());
+        d.onclick=()=>{ document.querySelectorAll('.grid-item').forEach(x=>x.classList.remove('selected')); d.classList.add('selected'); let parsed=parseColorStringToState(hex); pickerState=parsed; syncAllUI(); };
+        gridCont.appendChild(d);
+    });
+}
+function syncGridSelectedFromCurrentColor() {
+    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    const hex = rgbToHex(rgb.r,rgb.g,rgb.b).toUpperCase();
+    const items = gridCont.querySelectorAll('.grid-item');
+    items.forEach(it => { if(it.getAttribute('data-hex')===hex) it.classList.add('selected'); else it.classList.remove('selected'); });
+}