v4.0.1

This update only bring visual and parsing bug issue that happen on 4.0.0. Nothing else.

🐛 Fixes & Improvements

Rendering & Layout

• Gradient Bleeding Fix: Rewrote the preWipe system using a velocity physics-based approach to resolve lyrics gradient bleeding issues.
• Growable Lyrics: Fixed an issue where text was mispositioned in growable mode.
• Text Calculation:
  • Fixed character width calculation by excluding kerning and preventing leading/trailing spaces from affecting width.
  • Fixed em sizing logic to correctly utilize font-size.
• Visuals:
  • Canvas: Adjusted WebGL canvas aspect ratio to 1:1 (Square) for correct display.
  • Wipe Animation: Refined animation keyframes to handle long words better.
  • Styling: Fixed an issue where style removal was too aggressive.

Core System & Parsing

• LRC Parsing: Major overhaul to parsing logic, supporting KPoe format, word-level timestamps, speaker tags, and negative offsets.
• Synchronization: Added audio output latency compensation for precise lyric timing.
• Performance: Fixed a RAM leak issue during prolonged usage.
• Compatibility: Fixed pBrowser fallback logic for broader browser support.

♻️ Refactor

• Code Maintainability: Tidied up the renderWordByWord function to improve code structure.

This release introduces significant visual enhancements, improved performance, and extensive refactoring, particularly in the lyrics rendering and Gemini AI integration, to more closely replicate the Apple Music lyrics experience.

✨ New Features

• New Lyrics Rendering & Animation

  • Advanced Word-by-Word Animation: Implemented dynamic power decay and a glow penalty system for the word grow effect, resulting in a smoother, more natural animation that closely mimics Apple Music.
  • Width-Based Character Wipe: Character wipe animation timings are now proportional to the rendered width of each character within a syllable, ensuring visually accurate progression.
  • Transliteration Display: Added the ability to display transliteration directly alongside the original syllable in a vertical stack, significantly improving readability for non-native speakers (same as Apple Music).
  • Refined Agent Detection: Refactored the logic for detecting and assigning singers/agents to lyrics lines using structured metadata.agents, similar to Apple Music's approach.

• Better Dynamic Background

  • Artwork Texture Background: The dynamic lyrics background is completely refactored to use spinning, blurred album artwork textures (replicating Apple Music Android/Web).
  • Dynamic Layer Movement: Implemented dynamic movement for background layers along a circular perimeter, adding subtle, continuous motion.
  • Enhanced Blur Effect: Refined the blur rendering with optimized sampling and radius adjustments for a smoother visual effect and improved performance.

• AI Integration & Settings

  • New Gemini Models: Updated the default AI model to gemini-flash-lite-latest and introduced new Gemini Flash models to the settings UI.
  • Granular Romanization Settings: Introduced dedicated settings for romanization, including romanizationProvider, geminiRomanizationModel, and custom prompt options.
  • Centralized AI Logic: Extracted and centralized Gemini translation and romanization prompt generation logic into dedicated functions for improved modularity.
  • Retry Mechanism: Implemented a retry mechanism with exponential backoff for Google romanization requests, enhancing the feature's reliability.

• Lyrics Caching

  • Translation Cache: Introduced a new IndexedDB (TranslationsDB) to store and manage cached translated lyrics, laying the groundwork for future features.
  • Duration in Cache Key: The lyrics cache key now includes the song duration to prevent incorrect cache hits for different versions of the same song (e.g., radio edit vs. extended mix).

• UI/UX & Configuration

  • Material 3 Expressive Redesign: Redesigned both the popup and settings UI to align with Material 3 Expressive design principles, modernizing the interface and enhancing visual consistency.
  • Config Import/Export: Added functionality to import and export user configuration.
  • Updated Loading Indicator: Replaced the previous text animation with a Material 3 Expressive loading-indicator style.
  • Updated Assets: Refreshed extension icons and added a dedicated loading spinner asset.

🛠️ Improvements & Fixes

• Performance:
  • Refactored the forceTab module for YouTube Music by replacing aggressive polling with MutationObservers and introducing state management, significantly reducing CPU usage.
  • Changed the calculation of the 'em' unit width for highlighting by using '—' (em dash) instead of 'M' for more accurate syllable width calculations.
• Code Quality:
  • Extensive refactoring of the background script and UI logic to improve modularity, readability, and maintainability (e.g., extracting settings, centralizing Gemini prompts, modularizing the background).
• Stability:
  • Fixed issues where loading/not-found messages could incorrectly appear in fullscreen video mode.
  • Fix lyrics jump when scrolling playlist by resetting the tab scroll position when the lyrics tab is activated.
  • Corrected the access to romanization data in combineLyricsData to align with the updated data structure.

YouLyPlus Release v3.2.0

🚀 New Features

• ✨ Tidal Integration (Experimental) (v3 extension only)
  Lyrics+ now runs natively on Tidal Web Player, complete with synced lyrics, custom panel, and tab switching.

  • Injects a dedicated Lyrics+ tab inside Tidal’s UI.

  • Hides Tidal’s built-in lyrics to avoid duplication.

  • Smooth tab-switch animation and consistent styling.

  • Accurate song detection and tracking, even during quick skips.

• 💾 Local Lyrics Management
  Users can now upload, store, and manage their own lyrics directly inside the extension.

  • Upload .lrc / .elrc / .json (Kpoe Format) lyrics.

  • View, delete, and reuse stored lyrics anytime.

  • Local lyrics automatically take priority over online APIs.

• 🪶 Lightweight Mode
  A new performance-friendly renderer mode that disables heavy visual effects like syllable animations and transformations.
  Perfect for low-end devices or users who prefer a cleaner, simpler look.

• 📖 Larger Text Mode
  Choose whether lyrics or romanization appear larger when both are displayed together for improved readability.

⚙️ Enhancements

• Improved Lyrics Fetching Logic

  • Lyrics, translation, and romanization now fetched concurrently.

  • New helper functions:

    • combineLyricsData() — merges multi-layer lyrics correctly.

    • determineFinalDisplayMode() — picks the right mode based on available data.

  • More robust error handling; one failed fetch no longer blocks others.

• Better Settings Feedback

  • Added status messages for save, upload, and delete actions in all settings tabs.

  • Clearer inline UI feedback = no more silent actions.

• Romanization Improvements

  • Enhanced Gemini prompt for better chunking and proportional syllable output.

  • Support for backend-provided romanization to skip redundant API calls.

• Refined Lyric Animation & Spacing

  • Pre-highlight duration increased by 10% for smoother wipe transitions.

  • Trimmed syllable text before width calculation to improve timing precision.

  • white-space handling adjusted to maintain proper word spacing.

  • transform animation duration increased to 1s with softer translateY motion (−3.5%).

• Text Rendering Improvements

  • Switched lyric text layout to white-space: pre-wrap; and overflow-wrap: break-word;.

  • New font: Roboto replaces YouTube Sans (rip 🪦).

🧹 Refactors

• Modular Codebase Structure

  • Core modules (lyrics, settings, YT Music) moved under src/modules/.

  • Dedicated folders for each platform (ytmusic/, tidal/) to ease future integrations.

• Background API Handling

  • SponsorBlock API calls moved to background scripts for stability and Gecko compatibility.

• Unified Lyrics Parsing

  • Consolidated LRC and ELRC parsers into a single, smarter parseSyncedLyrics engine.

• Simplified CSS and Theme Overrides

  • All lyrics-related CSS variables editable from one place.

  • Added compatibility layer for users with ThemeSong Extension.

🛠 Fixes

• YT Music Fullscreen Gap Lines

  • Prevented gap lines from fading out or disappearing during fullscreen mode.

• Debounce & State Tracking Bugs

  • Fixed re-render issues when switching between translation/romanization modes.

  • Proper tracking between currentDisplayMode (user intent) and lastProcessedDisplayMode (rendered mode).

• RTL Language Display

  • Improved text alignment and directionality for Arabic, Hebrew, and other RTL scripts.

• Song Detection Stability (Tidal)

  • Added debouncing and pending state logic for accurate song change detection.

• Custom CSS Loading

  • Reimplemented missing _injectCustomCSS() method so user styles apply correctly.

• IgnoreSponsorBlock Fix

  • Fixed config flag being ignored when defined.

🧠 Developer Notes

• Optimized Lyrics Highlighting Loop
  Rewrote update cycles to minimize DOM thrashing and improve scroll smoothness.

• Better Cleanup
  cleanupLyrics() now cancels all timers, observers, and animations properly to avoid memory leaks.

• Dynamic Wipe Animation for RTL
  Fixed offset bugs and visual glitches for right-to-left text transitions.

📦 Build Packages

Full Changelog:
🔗 release-3.1.5...release-3.2.0

YouLyPlus Release v3.1.5

Important Note for Users: Visual & Performance Refinements!

This v3.1.5 release delivers major lyric rendering and animation improvements, along with multiple bug fixes for better timing accuracy and smoother visual flow.
While some changes are subtle, they collectively result in a more polished, stable, and precise lyric display — especially noticeable during complex animations and translations.

🚀 New Features

• WebGL Context Recovery
  Added handling for webglcontextlost and webglcontextrestored events, ensuring the dynamic blur effect recovers gracefully without requiring a page refresh.

⚙️ Enhancements

• Smoother Lyric Highlighting
  Transition durations for inactive lyric lines and syllables set to 0.7s for more fluid animations. Active line scale-ups now transition smoothly.

• Refined Wipe Animation Timing
  Switched from character-count–based to actual syllable width calculation in em units for pre-highlight timing, giving more precise wipe positioning.

🧹 Refactors

• Centralized CSS Injection
  Moved CSS injection into content.js to ensure styles are injected only once at initialization.

• Optimized Highlight Update Loops
  Iterated directly over Set objects instead of converting to arrays in _updateLyricsHighlight and _updateSyllables, reducing memory usage.

• Removed Word-to-Line Conversion
  convertWordLyricsToLine no longer aggregates word-level data — expects lyrics.data to be pre-formatted as lines.

• Enhanced Gemini Romanization Validation
  Replaced custom checks with JSON schema–based validation for more reliable parsing.

🛠 Fixes

• Fullscreen Lyric Cut-Off
  Adjusted CSS offsets and overflow rules to ensure lyrics render fully in fullscreen video mode.

• Lyric Timing Accuracy
  Fixed charBasedDelay calculation by removing incorrect offsets, preventing early wipe animations.

• Overlapping Line Duration Handling
  Improved logic to only extend lyric line end time if overlap with the next line is significant (≥5 ms).

• LRCLib & KPoe Parsing
  Filtered out empty/♪-only lines, preserved element arrays, and parsed isBackground correctly.

• SponsorBlock Privacy & Control
  Always hash video IDs, simplified URL builder, and added AbortController + timeout for better request management.

• Google Translate API Translate Fix
  Adjusted extraction of translated text from Google Translate API responses to correctly read from the first element of the returned array.

📦 Build Packages

What's Changed

• Multiple lyric rendering, timing, and animation refinements by @mfadamo
• Translation API parsing fix by @mfadamo
• WebGL context restoration support by @mfadamo
• SponsorBlock privacy and control improvements by @mfadamo

Full Changelog: release-3.1.0...release-3.1.5

YouLyPlus Release v3.1.0

🚀 New Features

• Romanization via Gemini AI
  Introducing the ability to use Google's Gemini AI for romanizing lyrics. Users can now select their preferred romanization provider (Google Translate or Gemini) and even customize the Gemini prompt in the settings for tailored results.

• Word-by-Word Romanization Sync
  Romanized lyrics can now sync word-by-word, similar to the original lyrics. This provides a much more dynamic and precise pronunciation guide, available for songs that support word-level timestamps.

⚙️ Enhancements

• Greatly Improved Romanization Accuracy
  The romanization process is now significantly more accurate. Instead of detecting the language for small, individual lyric segments, the system first detects the language from the entire song's text. This full-text context provides a more reliable hint to the API, reducing errors and improving the quality of the romanization.

• Physics-Based Touch Scrolling
  The manual scrolling experience on touch devices has been enhanced with natural, physics-based momentum. Scrolling now feels smoother and more responsive, with a gentle deceleration effect after lifting your finger.

• Optimized Lyrics Rendering Performance (yee again)
  Lyrics scrolling and highlighting are now more efficient. By caching line visibility, optimizing loops for active line detection, and streamlining highlighting logic, the rendering process is faster and smoother, especially for long or complex lyrics.

🧹 Refactors

• Modular Display Logic
  The core displayLyrics function has been simplified by extracting visual settings, container clearing, and text direction detection into separate, more maintainable helper methods.

• Robust API Error Handling
  Error handling for translation and romanization API calls has been strengthened to gracefully manage potential network issues or API failures.

• Simplified Display Option Logic
  The code for rendering dropdown menu options (e.g., "Show Translation," "Show Romanization") has been clarified, making it more direct and easier to maintain.

🛠 Fixes

• Consistent Romanization Data Handling
  Corrected an issue where romanized text was not being properly assigned and stored, ensuring that romanization displays correctly and is compatible with the lyrics renderer, especially when it's the only active option.

YouLyPlus Release v3.0.0

Important Note for Users: Behind-the-Scenes Enhancements!

This v3.0.0 release of YouLyPlus introduces a significant number of under-the-hood code changes and performance optimizations. While many of these improvements might not be immediately obvious on the surface, they form a robust foundation for a more stable and better user experience.

However, some visual refinements are indeed present. For instance, the pre-highlight effect is specifically implemented to smooth out gradient breaks in wipe and staggered effects, and to ensure seamless transitions when simultaneous translation with pronouns is enabled. These subtle visual enhancements are a direct result of the deeper code restructuring.

🚀 New Features

• Simultaneous Translation + Romanization
  Now supports showing both translated and romanized lyrics at the same time with distinct containers for each, giving users a complete understanding of the lyrics.

• Dual-Side Singer Assignment
  Singer lines are dynamically placed on left/right based on their ID (v1, v2, etc.). Odd-numbered singers go left, even-numbered go right. No more hardcoded logic!

• User Scroll Auto-Revert
  When the user manually scrolls lyrics, auto-scroll pauses — but will automatically resume after 4 seconds of inactivity.

• Custom KPoe Server Support
  Users can now provide their own KPoe API endpoints via settings, enabling greater control and fallback reliability.

• Fallback KPoe Servers
  Multiple KPoe server URLs are tried sequentially if the primary one fails, increasing lyric-fetch reliability.

⚙️ Enhancements

• Lyrics Rendering Performance Boost
  Lyrics line elements now cache timing and animation data, reducing repeated DOM access and parsing during animations.

• Smart Scroll & Highlight Logic
  Implemented a smarter scroll anchor system to better handle overlapping lyrics and ensure accurate line tracking.

• Retiming Engine Overhaul
  Introduced a new two-pass retiming algorithm to improve the handling of overlapping and gapped lyrics lines.

• Improved Resize & Scroll Responsiveness
  Added ResizeObserver to dynamically adjust scroll positions, maintaining focus on the active lyric even when container size changes.

• Smooth Staggered Transitions
  Lyrics now animate from the current active line using smarter stagger delay logic and dynamic delay calculations.

• Enhanced Scroll Control
  Native scrolling is now replaced with custom translateY transforms, giving smoother and fully controlled lyric scrolling across devices.

• More Robust Language Fallbacks
  Language detection now smartly matches dialects (e.g., es-ES when es-MX is not available), improving localization.

• Self-Managed Lyrics Renderer
  The lyrics renderer can now control its own display mode and refresh buttons independently, improving modularity.

🧹 Refactors

• Renamed compabilityVisibility to hideOffscreen
  Reflects updated behavior after removing old scroll tracking logic.

• Consolidated Song Metadata Styling
  Unified metadata sections under .lyrics-plus-metadata and refined layout for better readability.

• Optimized DOM Updates
  Skipped unnecessary .active class updates and syllable processing when no changes are detected.

• Reworked Scroll State Tracking
  Now accurately distinguishes between user and programmatic scrolls, improving re-sync behavior.

🛠 Fixes

• Lyrics Sync for Overlapping Lines
  Enhanced scroll anchor logic to better handle overlapping and concurrent lyric timings.

• Pre-Highlight Transition Glitches
  Refined how syllables animate just before becoming active, including dynamic calculation of pre-highlight timing.

• Settings & Visual Polish
  Improved handling of various visual effects such as blur, transform-origin for RTL lines, and more stable lyric container resizing.

📦 Build Packages

What's Changed

• Merge new scrolling system to the main codebase branch by @ibratabian17 in #5

New Contributors

• @ibratabian17 made their first contribution in #5

Full Changelog: release-2.1.0...release-3.0.0

YouLyPlus Release v2.1.0

🚀 New Features

• GPU-Accelerated Dynamic Background
  Enjoy a beautiful, blurred, and animated background generated from the current song's artwork. This feature is GPU-accelerated for smooth performance and includes a "Lightweight Mode" for lower-spec systems.

• Redesigned Settings Page
  The settings page has been completely redesigned for a cleaner layout, better organization, and improved user experience.

• Inactive Lyric Line Blur
  A new visual effect that blurs lyric lines that are not currently active, helping you focus on the current line being sung.

• Dynamic Background for Mobile Web Player Support
  The dynamic background and other visual enhancements are now available on the YouTube Music mobile web interface.

🛠 Fixes

• High-DPI Display Rendering
  Enhanced the WebGL canvas to render crisply on high-DPI (Retina) displays, eliminating pixelation and blurriness.

• Background Blur Toggling
  Fixed a persistent bug where the background blur effect would remain active even after being disabled in the settings.

• Settings Switches
  Corrected an issue where the "Lightweight Mode" toggle on the settings page was not working correctly.

• Canvas Resizing
  Removed unnecessary dynamic canvas resizing to prevent visual glitches and improve the stability of the blur effect.

⚙️ Enhancements

• Major Performance & Rendering Overhaul

  • Re-engineered the lyrics renderer to use IntersectionObserver, which pauses animations for off-screen lyrics to drastically reduce CPU usage.
  • The entire animated background system was overhauled for GPU acceleration, ensuring smooth visuals without impacting performance.
  • Implemented smarter caching for component dimensions to prevent re-calculations.

• Aesthetic & Animation Polish

  • Improved the artwork palette generation algorithm for more aesthetically pleasing background colors.
  • Refined lyric animations, including the gap line transition and the alignment of singer parts in lyrics.
  • The fullscreen mode UI and blur effects have been polished for a more cohesive look.

• Robust Artwork & Lyrics Handling

  • Replaced the old artwork loading mechanism with the modern fetch API for more reliable and robust loading.
  • Improved lyrics caching and fetching logic for better performance and reliability.
  • The extension now stores the last known song info to seamlessly handle UI transitions.

📦 Build Packages

YouLyPlus Release v2.0.1

🚀 New Features

• Extension Redesign
  All UI on YouLy+ are following material 3 design rules

• Settings Page Overhaul
  Completely revamped settings layout: grouped sections, translation & AI controls, and responsive design.

• Lyrics Translation & Romanization

  • Translate Lyrics via Google Translate or Gemini AI
  • Romanization / Pronunciation support for non‑Latin scripts
  • Reload Lyrics button to re‑fetch and re‑render on demand

• Gemini AI Integration
  Configurable alternative translation provider with settings for geminiApiKey, geminiModel, prompt overrides, and target‑language overrides.

🛠 Fixes

• Fullscreen Lyrics Interaction
  Removed YouTube Music’s unexpected inert attributes in fullscreen mode so popup tabs and controls remain clickable.

• SponsorBlock Handling
  Improved segment validation, merging, and timing offsets to skip sponsor sections more accurately (supports both hashed and direct API responses).

⚙️ Enhancements

• Rendering Engine & Compatibility

  • Enabled content-visibility: auto by default for native lazy‑rendering performance
  • Added JS‑Based Line Optimizer as optional fallback when content-visibility causes scroll or visual glitches
  • Replace flat wipe effect to Apple‑Music‑inspired gradient highlights design
  • Improve Right To Left (Arabic) Text overlapping by adding more line height

• Internal Format Update: KPoe V1 → V2
  Migrated to KPoe v2 lyric format for cleaner parsing, and future feature expansions.

• Add Lyrics+ (User Generated Content) as source
  This will add more syllable-by-syllable sync for missing song on apple music.

• Modular Translation Logic
  Centralized all translation and romanization flows into lyricsManager.js for better maintainability.

📦 Build Packages

YouLyPlus Release 1.4.0

🚀 New Features

• Popup UI Redesign
  Reimagined popup interface for improved user experience and aesthetic.

• Refactor Emphasize Word Logic
  Cleaner, modular code to manage lyric emphasis more effectively.

• Exact Match Song Fetching
  Added duration handling to improve lyric-song matching precision.

🛠 Fixes

• Syllable Highlighting Tweaks
  Refined animation timing for smoother syllable transitions.

• Glowing Effect Correction
  Fixed bugs related to glowing lyric animations.

• Background Vocal Logic
  More consistent and accurate background vocal processing.

• Touch Interaction
  Enhanced tab responsiveness on mobile devices.

• Metadata Update
  Included duration info in song metadata for better syncing.

⚙️ Enhancements

• Performance Boost (matrix3d)
  Switched to matrix3d transforms to fix jank and improve animation fluidity.

• Dynamic Syllable Timing
  More adaptive animation delays and wave-like lyric transitions.

• CSS & Animation Polish
  Improved styling, scroll padding, and overflow handling for lyrics display.

📝 Documentation

• Added Microsoft Edge extension link to the README for easier installation.

📦 Build Packages

YouLyPlus Release 1.3.0

New Features

• Improved UI/UX:
  Redesigned several interface components to provide a more intuitive user experience. Navigation and control elements have been streamlined for better accessibility.

Bug Fixes & Improvements

• Stability and Performance:
  Addressed several bugs reported in version 1.2.0, leading to smoother performance and more robust error handling during video processing.

• Code Refactoring:
  Cleaned up and modularized the codebase, making future enhancements easier to integrate and improving overall maintainability.

• Error Reporting:
  Upgraded error logging mechanisms to offer clearer diagnostic information, helping users and developers quickly identify and resolve issues.