YTMD/youtube-music
1
0
Fork 0
Code Issues 445 Pull requests 34 Projects Releases 87 Packages Wiki Activity Actions

feat(plugin): add font-customizer plugin #3785

Open
kev2block wants to merge 11 commits from kev2block/master into master
pull from: kev2block/master
merge into: YTMD:master
Conversation 2 Commits 11 Files changed 5 +461
kev2block commented 2025-08-28 19:57:07 +00:00 (Migrated from github.com)
Copy link

This PR adds a new plugin: Font Customizer.

Features

  • Two modes:
    • Simple: set one global font for the entire app.
    • Advanced: set per-scope fonts: Title, Artist, Lyrics.
  • Uses Google Fonts on demand (no manual CSS needed).
  • Applies instantly via CSS variables; no reload required.
  • Clean defaults (all “System Default”).

Screenshots

Playlist view

playlist

Lyrics view

lyrics

Implementation

  • src/plugins/font-customizer/index.ts — plugin registration, defaults.
  • src/plugins/font-customizer/menu.ts — menu UI (mode + popular font radio lists).
  • src/plugins/font-customizer/renderer.ts — loads Google Fonts, sets CSS vars, applies to player/lyrics surfaces.
  • src/plugins/font-customizer/types.ts — FontCustomizerConfig, FontMode, popularFonts.

Tested

  • Windows 11, Node v22.18.0, pnpm v10.15.0
  • Dev (pnpm dev) and packaged builds.

Note: You could add custom fonts via plain CSS (@font-face) in a user stylesheet,
but this plugin is simpler: it fetches Google Fonts automatically and scopes them
reliably without manual CSS maintenance.

No changes to existing plugins or core behavior.

This PR adds a new plugin: **Font Customizer**. ## Features - Two modes: - **Simple**: set one global font for the entire app. - **Advanced**: set per-scope fonts: **Title**, **Artist**, **Lyrics**. - Uses **Google Fonts** on demand (no manual CSS needed). - Applies instantly via CSS variables; no reload required. - Clean defaults (all “System Default”). ## Screenshots ### Playlist view ![playlist](https://github.com/user-attachments/assets/aea3340b-e4e6-45a8-9522-5356ee597dd7) ### Lyrics view ![lyrics](https://github.com/user-attachments/assets/4a0e2ca2-5a9d-4881-bcad-ea9d8eb66ec3) ## Implementation - `src/plugins/font-customizer/index.ts` — plugin registration, defaults. - `src/plugins/font-customizer/menu.ts` — menu UI (mode + popular font radio lists). - `src/plugins/font-customizer/renderer.ts` — loads Google Fonts, sets CSS vars, applies to player/lyrics surfaces. - `src/plugins/font-customizer/types.ts` — `FontCustomizerConfig`, `FontMode`, `popularFonts`. ## Tested - Windows 11, Node v22.18.0, pnpm v10.15.0 - Dev (`pnpm dev`) and packaged builds. > Note: You *could* add custom fonts via plain CSS (`@font-face`) in a user stylesheet, > but this plugin is simpler: it fetches Google Fonts automatically and scopes them > reliably without manual CSS maintenance. No changes to existing plugins or core behavior.
👍 1
arjix requested changes 2025-09-02 19:57:33 +00:00
src/plugins/font-customizer/menu.ts
@ -0,0 +1,167 @@
import prompt from 'custom-electron-prompt';
arjix commented 2025-09-02 19:56:25 +00:00
Owner
Copy link

a simple ...[].map(...) might make this easier to reason about, e.g in another PR I did
image

a simple `...[].map(...)` might make this easier to reason about, e.g in another PR I did <img width="1432" height="799" alt="image" src="https://github.com/user-attachments/assets/1feea8ce-6545-44b8-a01e-983572d828b8" />
src/plugins/font-customizer/renderer.ts
@ -0,0 +1,76 @@
import { createRenderer } from '@/utils';
arjix commented 2025-09-02 19:53:30 +00:00
Owner
Copy link

since you are not generating CSS on the fly, and it is 100% static, you should save it to a .css file and add it as a stylesheet of your plugin

since you are not generating CSS on the fly, and it is 100% static, you should save it to a `.css` file and add it as a stylesheet of your plugin
arjix commented 2025-09-04 11:50:49 +00:00
Owner
Copy link

Not quite, look at other plugins for how they apply stylesheets.

Not quite, look at other plugins for how they apply stylesheets.
This pull request can be merged automatically.
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin kev2block/master:kev2block/master
git switch kev2block/master

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch master
git merge --no-ff kev2block/master
git switch kev2block/master
git rebase master
git switch master
git merge --ff-only kev2block/master
git switch kev2block/master
git rebase master
git switch master
git merge --no-ff kev2block/master
git switch master
git merge --squash kev2block/master
git switch master
git merge --ff-only kev2block/master
git switch master
git merge kev2block/master
git push origin master
Sign in to join this conversation.
Reviewers
No reviewers
arjix
Labels
Clear labels   
awaiting-reply

Awaiting reply

  
breaking changes

   
bug

Something isn't working

  
cannot-reproduce

Bug cannot be reproduced

  
dependencies

Pull requests that update a dependency file

  
documentation

   
duplicate

This issue or pull request already exists

  
electron-issue

It's an Electron or Electron related dependencies issue (not YTM-Desktop issue)

  
enhancement

New feature or request

  
fix-available

A fix to the issue is available in a new version

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
javascript

Pull requests that update javascript code

  
need more information

Need more information about the issue

  
need rebase

This plugin need rebase

  
official-youtube-music-issue

It's an YouTube's issue (not YTM-Desktop issue)

  
plugin request

An issue/discussion requesting for a new plugin or new functionality to an existing plugin.

  
question

Further information is requested

  
release

Release

  
security

   
stale

   
Status: blocked

There are something to do before this

  
typo

   
wontfix

This will not be worked on

  
ytmd-issue

An issue/discussion about ytm desktop, unrelated to th-ch/youtube-music

No labels
awaiting-reply
breaking changes
bug
cannot-reproduce
dependencies
documentation
duplicate
electron-issue
enhancement
fix-available
good first issue
help wanted
invalid
javascript
need more information
need rebase
official-youtube-music-issue
plugin request
question
release
security
stale
Status: blocked
typo
wontfix
ytmd-issue
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: YTMD/youtube-music#3785
No description provided.
Delete branch "kev2block/master"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?