How spikerko/spicy-lyrics works
Spicy Lyrics is a Spicetify extension that replaces Spotify’s lyrics view. The principal flow is playback-driven lyric lookup followed by applying and synchronizing lyrics in the view; the product also includes a local TTML library, customizable settings, popup lyrics, and dynamic backgrounds. The app excerpt confirms key orchestration calls, but lyric-provider and rendering internals are not fully sampled, so uncertain connections are omitted.
Main entry points: app.tsx App bootstrap · fetchLyrics.ts Lyric lookup · Applyer.ts Apply lyrics · useLyricsDB.ts Library controls
Components 20
Extension runtime
- App bootstrap
src/app.tsx - Playback state
src/components/Global/SpotifyPlayer.ts - API query
src/utils/API/Query.ts
Lyrics experience
- Lyric lookup
src/utils/Lyrics/fetchLyrics.ts - Apply lyrics
src/utils/Lyrics/Global/Applyer.ts - Process lyrics
src/utils/Lyrics/ProcessLyrics.ts - Lyrics animation
src/utils/Lyrics/Animator/Main.ts
Lyrics library
- Lyrics Manager
src/components/ReactComponents/LyricsManager/index.tsx - Library controls
src/components/ReactComponents/LyricsManager/hooks/useLyricsDB.ts - TTML parser
src/utils/Lyrics/manager/parseTTML.ts - Local lyric library
src/utils/Lyrics/manager/index.ts
Visual experience
- Dynamic backgrounds
src/components/DynamicBG/dynamicBackground.ts - Artist visuals
src/components/DynamicBG/ArtistVisuals/HeaderImage/Main.ts - Artist visual cache
src/components/DynamicBG/ArtistVisuals/Cache.ts - Popup lyrics
src/components/Utils/PopupLyrics.ts
Configuration
- Settings panel
src/components/ReactComponents/SettingsPanel/index.tsx - Settings state
src/utils/settings.ts
Other components
- Spotify desktop
- Lyrics API
- Spotify GraphQL
Connections 19
- Spotify desktop → App bootstrap: hosts extension
- App bootstrap → Playback state: uses playback
- App bootstrap → Lyric lookup: fetches lyrics
- Lyric lookup → Apply lyrics: applies results
- App bootstrap → Apply lyrics: applies results
- Lyric lookup → Lyrics API: looks up lyrics
- API query → Lyrics API: sends queries
- Lyrics Manager → Library controls: manages library
- Library controls → Local lyric library: reads and writes
- Library controls → Lyric lookup: refetches current track
- TTML parser → Local lyric library: parses imports
- Settings panel → Settings state: updates preferences
- App bootstrap → Dynamic backgrounds: initializes backgrounds
- Dynamic backgrounds → Artist visuals: requests visuals
- Artist visuals → Artist visual cache: reads and writes
- Artist visuals → Spotify GraphQL: requests imagery
- App bootstrap → Popup lyrics: opens and closes
- Apply lyrics → Process lyrics: processes lyrics
- Apply lyrics → Lyrics animation: animates lyrics