# solstice23/refined-now-playing-netease architecture

> Architecture diagram of the GitHub repository solstice23/refined-now-playing-netease, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/solstice23/refined-now-playing-netease
- Repository: https://github.com/solstice23/refined-now-playing-netease

## Overview

Refined Now Playing is a BetterNCM plugin that customizes NetEase Cloud Music’s player interface. The principal flow is plugin startup and compatibility checking, followed by player enhancement; intercepted song lyrics are parsed, published as an event, and consumed by lyric display and progress-bar preview. The README also establishes broad visual refinement as the product’s purpose. Source excerpts are partial, so unsampled feature wiring is shown only where documented or directly supported.

Main entry points: [`src/main.js`](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/main.js) (Plugin entry), [`src/lyric-provider.js`](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyric-provider.js) (Lyric provider), [`src/utils.js`](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/utils.js) (Settings and utilities), [`src/lyrics.js`](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyrics.js) (Lyrics display)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_startup["Plugin startup"]
  node_main["Plugin entry<br/>[main.js]"]
  node_compat["Compatibility wizard"]
  node_utils["Settings and utilities<br/>[utils.js]"]
  node_storage[("Browser settings")]
end

subgraph group_lyrics["Lyrics experience"]
  node_provider["Lyric provider<br/>[lyric-provider.js]"]
  node_parser["Lyric parser<br/>[index.ts]"]
  node_lyricsview["Lyrics display<br/>[lyrics.js]"]
  node_context["Lyric context menu<br/>[context-menu.js]"]
end

subgraph group_appearance["Player appearance"]
  node_background["Dynamic backgrounds<br/>[background.js]"]
  node_colors["Color utilities<br/>[color-utils.js]"]
  node_font["Font settings<br/>[font-settings.js]"]
  node_cover["Cover shadow<br/>[cover-shadow.js]"]
end

subgraph group_enhancements["Player enhancements"]
  node_preview["Progress preview"]
  node_controlbar["Refined control bar"]
  node_songinfo["Mini song info<br/>[mini-song-info.js]"]
end

subgraph group_support["Plugin support"]
  node_whatsnew["What's new<br/>[whats-new.js]"]
end

node_listener(("Listener"))
node_betterncm{{"BetterNCM"}}
node_player{{"CloudMusic player"}}

node_listener -->|"installs plugin"| node_betterncm
node_betterncm -->|"loads plugin"| node_main
node_main -->|"starts check"| node_compat
node_main -->|"reads and writes"| node_utils
node_utils -->|"persists settings"| node_storage
node_main -->|"enhances player"| node_player
node_player -->|"supplies lyrics"| node_provider
node_provider -->|"parses lyrics"| node_parser
node_provider -->|"dispatches updates"| node_lyricsview
node_provider -->|"dispatches updates"| node_preview
node_lyricsview -->|"opens menu"| node_context
node_main -->|"renders background"| node_background
node_background -->|"gets gradient"| node_colors
node_main -->|"renders settings"| node_font
node_main -->|"adds shadow"| node_cover
node_main -->|"enhances controls"| node_controlbar
node_main -->|"adds song info"| node_songinfo
node_main -->|"shows updates"| node_whatsnew

click node_main "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/main.js"
click node_compat "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/compatibility-check.js"
click node_utils "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/utils.js"
click node_provider "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyric-provider.js"
click node_parser "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/liblyric/index.ts"
click node_lyricsview "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyrics.js"
click node_context "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/context-menu.js"
click node_preview "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/progressbar-preview.js"
click node_background "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/background.js"
click node_colors "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/color-utils.js"
click node_font "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/font-settings.js"
click node_cover "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/cover-shadow.js"
click node_controlbar "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/refined-control-bar.js"
click node_songinfo "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/mini-song-info.js"
click node_whatsnew "https://github.com/solstice23/refined-now-playing-netease/blob/master/src/whats-new.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_compat,node_utils,node_storage toneBlue
class node_provider,node_parser,node_lyricsview,node_context toneAmber
class node_background,node_colors,node_font,node_cover toneMint
class node_preview,node_controlbar,node_songinfo toneRose
class node_whatsnew,node_listener,node_betterncm,node_player toneIndigo
```

## Components

### Plugin startup

- [Plugin entry](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/main.js): `src/main.js`
- [Compatibility wizard](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/compatibility-check.js): `src/compatibility-check.js`
- [Settings and utilities](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/utils.js): `src/utils.js`
- **Browser settings**

### Lyrics experience

- [Lyric provider](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyric-provider.js): `src/lyric-provider.js`
- [Lyric parser](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/liblyric/index.ts): `src/liblyric/index.ts`
- [Lyrics display](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/lyrics.js): `src/lyrics.js`
- [Lyric context menu](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/context-menu.js): `src/context-menu.js`

### Player appearance

- [Dynamic backgrounds](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/background.js): `src/background.js`
- [Color utilities](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/color-utils.js): `src/color-utils.js`
- [Font settings](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/font-settings.js): `src/font-settings.js`
- [Cover shadow](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/cover-shadow.js): `src/cover-shadow.js`

### Player enhancements

- [Progress preview](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/progressbar-preview.js): `src/progressbar-preview.js`
- [Refined control bar](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/refined-control-bar.js): `src/refined-control-bar.js`
- [Mini song info](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/mini-song-info.js): `src/mini-song-info.js`

### Plugin support

- [What's new](https://github.com/solstice23/refined-now-playing-netease/blob/master/src/whats-new.js): `src/whats-new.js`

### Other components

- **Listener**
- **BetterNCM**
- **CloudMusic player**

## Connections

- Listener → BetterNCM: installs plugin
- BetterNCM → Plugin entry: loads plugin
- Plugin entry → Compatibility wizard: starts check
- Plugin entry → Settings and utilities: reads and writes
- Settings and utilities → Browser settings: persists settings
- Plugin entry → CloudMusic player: enhances player
- CloudMusic player → Lyric provider: supplies lyrics
- Lyric provider → Lyric parser: parses lyrics
- Lyric provider → Lyrics display: dispatches updates
- Lyric provider → Progress preview: dispatches updates
- Lyrics display → Lyric context menu: opens menu
- Plugin entry → Dynamic backgrounds: renders background
- Dynamic backgrounds → Color utilities: gets gradient
- Plugin entry → Font settings: renders settings
- Plugin entry → Cover shadow: adds shadow
- Plugin entry → Refined control bar: enhances controls
- Plugin entry → Mini song info: adds song info
- Plugin entry → What's new: shows updates