Watch

Heart button to donate, powered by JavaScript Injector plugin (private fork of leotrost/Jellyfin-KoFi-Button)

JavaScript 100%

Find a file

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Maikel Frias Mosquea e701a5bc3f fix: keep the button beside the profile button, not merely on screen Placing the button somewhere visible was only half of it: it landed at the far left of the Ratings plugin's button row rather than next to the profile button. That row is a flex container whose children carry explicit order values, so a freshly inserted child defaults to order 0 and jumps to the front. The button now claims the slot immediately before the profile button's own order and is inserted before it in the DOM so a tie goes our way. The style is removed when the fallback anchors are used, since that rule only applies inside that row. Two more details found while measuring: - the profile button is injected asynchronously, so the first placement can land in a fallback spot; every later check moves the button to the preferred spot (moving a node keeps its click handler) - a copy that ends up invisible - a header cluster that has since collapsed, a stale legacy container - is removed and placed again, so the button recovers by itself after a layout change instead of hiding forever Verified on Jellyfin 12.1: search field 196, button 383, profile button 432, chat 463 - the heart sits immediately to the left of the profile button.	2026-09-27 00:34:05 +02:00
jellyfin-ko-fi.js	fix: keep the button beside the profile button, not merely on screen	2026-09-27 00:34:05 +02:00
README.md	Update README.md	2026-04-13 17:52:25 -04:00

Maikel Frias Mosquea e701a5bc3f fix: keep the button beside the profile button, not merely on screen

Placing the button somewhere visible was only half of it: it landed at the far
left of the Ratings plugin's button row rather than next to the profile button.

That row is a flex container whose children carry explicit order values, so a
freshly inserted child defaults to order 0 and jumps to the front. The button
now claims the slot immediately before the profile button's own order and is
inserted before it in the DOM so a tie goes our way. The style is removed when
the fallback anchors are used, since that rule only applies inside that row.

Two more details found while measuring:

- the profile button is injected asynchronously, so the first placement can land
  in a fallback spot; every later check moves the button to the preferred spot
  (moving a node keeps its click handler)
- a copy that ends up invisible - a header cluster that has since collapsed, a
  stale legacy container - is removed and placed again, so the button recovers
  by itself after a layout change instead of hiding forever

Verified on Jellyfin 12.1: search field 196, button 383, profile button 432,
chat 463 - the heart sits immediately to the left of the profile button.

2026-09-27 00:34:05 +02:00

jellyfin-ko-fi.js

fix: keep the button beside the profile button, not merely on screen

2026-09-27 00:34:05 +02:00

README.md

Update README.md

2026-04-13 17:52:25 -04:00

README.md

Jellyfin-KoFi-Button

Heart button to donate, powered by JavaScript Injector plugin. Works in mobile apps, too!

Screenshots

Heart icon

Screenshot 2026-04-13 135140

In-browser widget popup

Install Instructions

Install the JS Injector plugin - https://github.com/n00bcodr/Jellyfin-JavaScript-Injector
Within Plugins > JS Injector, add a script, name it "KoFi Button" or similar for reference, then paste the raw code of the jellyfin-ko-fi.js file in this project, editing the username to reflect your Ko-Fi username, then save. Make sure to tick the "Authentication" setting to make sure the button doesn't render on the login screen (shouldn't as the code looks for certain ui elements, but tick this setting just in case)
Hard refresh your browser (ctrl + f5, shift + refresh, or clear site data) and test!

Customization

If you would like to change the heart icon, simply paste a url in between the '' at "const customIconUrl = '' "