\n`; } else { ttml += ' \n'; } } // For TTML, we can represent syllables as spans if word-synced const begin = AmLyrics.formatTimestampTTML(line.timestamp); const end = AmLyrics.formatTimestampTTML(line.endtime); ttml += ` \n`; for (const word of line.text) { const wBegin = AmLyrics.formatTimestampTTML(word.timestamp); const wEnd = AmLyrics.formatTimestampTTML(word.endtime); // Escape special characters in text const text = word.text .replace(/&/g, '&') .replace(//g, '>'); ttml += ` ${text}\n`; } ttml += ' \n'; } if (this.lyrics.length > 0) { ttml += ' \n'; } ttml += ' \n'; ttml += ''; return ttml; } private static formatTimestampLRC(ms: number): string { const totalSeconds = ms / 1000; const minutes = Math.floor(totalSeconds / 60); const seconds = Math.floor(totalSeconds % 60); const hundredths = Math.floor((ms % 1000) / 10); const pad = (n: number) => n.toString().padStart(2, '0'); return `${pad(minutes)}:${pad(seconds)}.${pad(hundredths)}`; } private static formatTimestampTTML(ms: number): string { // TTML standard format: HH:MM:SS.mmm const totalSeconds = ms / 1000; const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = Math.floor(totalSeconds % 60); const milliseconds = Math.floor(ms % 1000); const pad = (n: number, width = 2) => n.toString().padStart(width, '0'); return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}.${pad(milliseconds, 3)}`; } private downloadLyrics() { if (!this.lyrics || this.lyrics.length === 0) return; // Determine format: TTML if ANY line is word-synced, else LRC const isWordSynced = this.lyrics.some(l => l.isWordSynced !== false); let content = ''; let extension = this.downloadFormat; if (extension === 'auto') { extension = isWordSynced ? 'ttml' : 'lrc'; } let mimeType = ''; if (extension === 'ttml') { content = this.generateTTML(); mimeType = 'application/xml'; } else { content = this.generateLRC(); mimeType = 'text/plain'; } if (!content) return; const blob = new Blob([content], { type: mimeType }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const filename = this.songTitle ? `${this.songTitle}${this.songArtist ? ` - ${this.songArtist}` : ''}.${extension}` : `lyrics.${extension}`; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } render() { if (this.fontFamily) { this.style.fontFamily = this.fontFamily; } // Set both old internal CSS variables (for backward compatibility) // and new public CSS variables (which take precedence) this.style.setProperty( '--hover-background-color', this.hoverBackgroundColor, ); this.style.setProperty('--highlight-color', this.highlightColor); const sourceLabel = this.lyricsSource ?? 'Unavailable'; const isUnsynced = this.cachedIsUnsynced; const renderContent = () => { if (this.isLoading) { // Render stylized skeleton lines return html`

`; } if (!this.lyrics || this.lyrics.length === 0) { return html`

No lyrics found.

`; } // Build a lookup map of ALL gaps so they are always in the DOM const allGaps = this.findAllInstrumentalGaps(); const gapByIndex = new Map( allGaps.map(g => [g.insertBeforeIndex, g] as const), ); return this.lyrics.map((line, lineIndex) => { const lineId = `lyrics-line-${lineIndex}`; // Calculate line timing const lineStartTime = line.text[0]?.timestamp || 0; const lineEndTime = line.text[line.text.length - 1]?.endtime || 0; // Always render background vocals in the DOM so the syllable cache // includes them and the wipe effect applies correctly. const hasBackground = line.backgroundText && line.backgroundText.length > 0; // Create background vocals container (with romanization support) const backgroundVocalElement = hasBackground ? html`

${line.backgroundText!.map((syllable, syllableIndex) => { const startTimeMs = syllable.timestamp; const endTimeMs = syllable.endtime; const durationMs = endTimeMs - startTimeMs; const bgRomanizedText = this.showRomanization && syllable.romanizedText && syllable.romanizedText.trim() !== syllable.text.trim() ? html`${syllable.romanizedText}` : ''; return html` ${syllable.text} ${bgRomanizedText} `; })}

` : ''; // Background vocals share the same line.translation and line.romanizedText // as the main vocal, so we intentionally do NOT render a separate // translation/romanization block for background — it would just duplicate // the main line's text. const bgPlacement = hasBackground ? AmLyrics.getBackgroundTextPlacement(line) : 'after'; const lineData = this.cachedLineData?.[lineIndex]; const wordGroups = lineData?.wordGroups ?? []; const groupGrowable = lineData?.groupGrowable ?? []; const groupGlowing = lineData?.groupGlowing ?? []; const vwFullText = lineData?.vwFullText ?? []; const vwFullDuration = lineData?.vwFullDuration ?? []; const vwCharOffset = lineData?.vwCharOffset ?? []; // Create main vocals using YouLyPlus syllable structure const mainVocalElement = html`

${wordGroups.map((group, groupIdx) => { const isGrowable = groupGrowable[groupIdx]; const isGlowing = groupGlowing[groupIdx]; const groupLineSynced = group.some(s => s.lineSynced); const wordText = isGrowable ? vwFullText[groupIdx] : ''; const wordDuration = isGrowable ? vwFullDuration[groupIdx] : 0; const wordNumChars = wordText.length; const groupCharOffset = isGrowable ? vwCharOffset[groupIdx] : 0; let sylCharAccumulator = 0; return html` ${group.map((syllable, sylIdx) => { const startTimeMs = syllable.timestamp; const endTimeMs = syllable.endtime; const durationMs = endTimeMs - startTimeMs; const text = syllable.text || ''; const romanizedText = this.showRomanization && syllable.romanizedText && syllable.romanizedText.trim() !== syllable.text.trim() ? html`${syllable.romanizedText}` : ''; let syllableContent: any = text; if (isGrowable) { let charIndexInsideSyllable = 0; const numCharsInSyllable = text.replace(/\s/g, '').length || 1; syllableContent = html`${text.split('').map(char => { if (char === ' ') return ' '; const charIndexInsideWord = groupCharOffset + sylCharAccumulator; const charStartPercentVal = charIndexInsideSyllable / numCharsInSyllable; sylCharAccumulator += 1; charIndexInsideSyllable += 1; const minDuration = 400; const maxDuration = 3000; const easingPower = 3; const progress = Math.min( 1, Math.max( 0, (wordDuration - minDuration) / (maxDuration - minDuration), ), ); const easedProgress = progress ** easingPower; const isLongWord = wordNumChars > 5; const isShortDuration = wordDuration < 1200; let maxDecayRate = 0; if (isLongWord || isShortDuration) { let decayStrength = 0; if (isLongWord) decayStrength += Math.min((wordNumChars - 5) / 5, 1.0) * 0.4; if (isShortDuration && wordNumChars > 3) decayStrength += Math.max(0, 1.0 - (wordDuration - 800) / 400) * 0.3; else if (isShortDuration && wordNumChars <= 3) decayStrength += Math.max(0, 1.0 - (wordDuration - 800) / 400) * 0.1; maxDecayRate = Math.min(decayStrength, 0.7); } const positionInWord = wordNumChars > 1 ? charIndexInsideWord / (wordNumChars - 1) : 0; const decayFactor = 1.0 - positionInWord * maxDecayRate; const charProgress = easedProgress * decayFactor; const baseGrowth = wordNumChars <= 3 ? 0.05 : 0.04; const charMaxScale = 1.0 + baseGrowth + charProgress * 0.08; const glowDurFactor = Math.min(1.1, wordDuration / 1500); let glowLenFactor = 1.0; if (wordNumChars <= 3) { glowLenFactor = 0.85; } else if (wordNumChars >= 6) { glowLenFactor = 1.1; } const glowIntensityScale = glowDurFactor * glowLenFactor; const charShadowIntensity = isGlowing ? (0.35 + charProgress * 0.45) * glowIntensityScale : 0; const normalizedGrowth = (charMaxScale - 1.0) / 0.1; const effectiveDuration = (wordDuration + durationMs * 2) / 3; const peakMultiplier = Math.min( 1, Math.max(0.3, effectiveDuration / 2000), ); const charTranslateYPeak = -normalizedGrowth * (2 * peakMultiplier); // Further dampened lift peak const position = (charIndexInsideWord + 0.5) / wordNumChars; const horizontalOffset = (position - 0.5) * 2 * ((charMaxScale - 1.0) * 25); return html`${char}`; })}`; } return html` ${syllableContent} ${romanizedText} `; })} `; })}

`; // Translation container (if enabled) // Hide translation if it matches the original line text const fullLineText = line.text .map(s => s.text) .join('') .trim(); const translationElement = this.showTranslation && line.translation && line.translation.trim() !== fullLineText ? html`

${line.translation}

` : ''; // Line-synced romanization (fallback if no word-level romanization) // Hide if the romanized text matches the original line text const lineRomanizationElement = this.showRomanization && line.romanizedText && !line.text.some(s => s.romanizedText) && line.romanizedText.trim() !== fullLineText ? html`

${line.romanizedText}

` : ''; // Check for instrumental gap before this line let maybeInstrumentalBlock: unknown = null; const gapForLine = gapByIndex.get(lineIndex); if (gapForLine) { const gapDuration = gapForLine.gapEnd - gapForLine.gapStart; // Calculate dot timing for fill-up animation (3 dots) const dotDuration = gapDuration / 3; const gapLoopDelay = AmLyrics.getGapLoopDelay(gapDuration); // Gap starts without 'active' — _onTimeChanged toggles it imperatively maybeInstrumentalBlock = html`

`; } return html` ${maybeInstrumentalBlock}

this.handleLineClick(line)} tabindex="0" @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { this.handleLineClick(line); } }} >

${bgPlacement === 'before' ? backgroundVocalElement : ''} ${mainVocalElement} ${bgPlacement === 'after' ? backgroundVocalElement : ''} ${translationElement} ${lineRomanizationElement}

`; }); }; return html`

${!this.isLoading && this.lyrics && this.lyrics.length > 0 ? html`

` : ''} ${renderContent()} ${!this.isLoading ? html` ` : ''}

`; } }