How anshm42/translatify works
Translatify follows Spotify playback through lyric retrieval and translation to a time-synced karaoke display. The main-process Controller owns that workflow, including cache lookups, language-change refreshes, and renderer updates; Spotify, LRCLIB, and DeepL are separate integrations. The renderer handles setup and presentation through a typed preload/IPC boundary. The README documents local persistence, but the sampled source does not show how config, store, and cache are wired internally, so those relationships are left out.
Main entry points: controller.ts Workflow controller · App.tsx App shell · index.ts Preload bridge · spotify.ts Spotify client
Components 20
Renderer interface
- App shell
src/renderer/src/App.tsx - Settings
src/renderer/src/components/Settings.tsx - Language selector
src/renderer/src/components/LanguageSelector.tsx - Karaoke view
src/renderer/src/components/KaraokeView.tsx
Electron boundary
- Preload bridge
src/preload/index.ts - IPC contract
src/shared/ipc.ts
Main workflow
- Electron main
src/main/index.ts - Workflow controller
src/main/controller.ts - LRC parser
src/shared/lrc.ts - Result cache
src/main/cache.ts - Settings config
src/main/config.ts - Local store
src/main/store.ts
External services
- Spotify client
src/main/spotify.ts - Lyrics lookup
src/main/lyrics.ts - Translation client
src/main/translate.ts
Other components
- Listener
- Spotify API
- LRCLIB
- DeepL API
- System browser
Connections 24
- Listener → App shell: uses
- App shell → Settings: renders
- App shell → Language selector: renders
- App shell → Karaoke view: renders
- App shell → Preload bridge: invokes, subscribes
- Preload bridge → Electron main: IPC requests
- Electron main → Workflow controller: dispatches
- Electron main → Settings config: reads, writes
- Workflow controller → Spotify client: connects, resumes
- Spotify client → Spotify API: authenticates, polls
- Spotify client → System browser: opens auth
- Spotify client → Workflow controller: emits track, playback
- Workflow controller → Result cache: reads, writes
- Workflow controller → Lyrics lookup: fetches lyrics
- Lyrics lookup → LRCLIB: searches
- Workflow controller → LRC parser: parses LRC
- Workflow controller → Translation client: translates lines
- Translation client → DeepL API: sends batches
- Workflow controller → Settings config: reads settings
- Workflow controller → Preload bridge: pushes updates
- Preload bridge → App shell: delivers events
- Karaoke view → LRC parser: finds active line
- Settings → Preload bridge: requests settings, connection
- Language selector → App shell: changes target