imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-06-22 21:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(marketplace): move now-playing pill to top-left, reduce font size

Browse Source
This commit is contained in:
Andreas Krühlmann
2026-05-01 12:25:40 +02:00
parent 2ed63906ad
commit 1ec76e129c
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/marketplace-scripts/playlist-now-playing/source.js
+6 -5
View File
@@ -1,9 +1,10 @@
/** /**
* Now Playing — minimal playlist pill overlay. * Now Playing — minimal playlist pill overlay.
* *
* Displays a pill in the bottom-right corner of the broadcast canvas * Displays a pill in the top-left corner of the broadcast canvas
* showing the current track name when a playlist is active and playing. * showing the current track name when a playlist is active and playing.
* Fades in when playback starts and fades out when paused or stopped. * Fades in when playback starts and fades out when paused, stopped, or
* when the playlist ends.
* *
* Context used: context.playlist, context.width, context.height * Context used: context.playlist, context.width, context.height
*/ */
@@ -37,7 +38,7 @@ exports.tick = function (context, state) {
ctx.save(); ctx.save();
ctx.globalAlpha = state.opacity; ctx.globalAlpha = state.opacity;
const fontSize = Math.round(height * 0.022); const fontSize = Math.round(height * 0.016);
ctx.font = `600 ${fontSize}px system-ui, sans-serif`; ctx.font = `600 ${fontSize}px system-ui, sans-serif`;
const iconGlyph = "\u266A"; // ♪ const iconGlyph = "\u266A"; // ♪
@@ -47,8 +48,8 @@ exports.tick = function (context, state) {
const pillWidth = Math.min(ctx.measureText(text).width + paddingH * 2, width * 0.38); const pillWidth = Math.min(ctx.measureText(text).width + paddingH * 2, width * 0.38);
const pillHeight = fontSize + paddingV * 2; const pillHeight = fontSize + paddingV * 2;
const margin = Math.round(height * 0.025); const margin = Math.round(height * 0.025);
const x = width - pillWidth - margin; const x = margin;
const y = height - pillHeight - margin; const y = margin;
const radius = pillHeight / 2; const radius = pillHeight / 2;
// Pill background // Pill background