Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Minimal Player: Progress % at 0 still shows 35% in the editor, and a value that isn't a number returns 500

Aperta Adatta ai principianti
  • Qualcosa non va?
#164 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
87/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
backend, frontend, testing

Direzione di ricerca

Leggi in src/templates/podcast/minimal-player.ts le parti relative al campo di avanzamento, al valore predefinito, all’analisi e alla larghezza della barra; confrontane la gestione con parseNumber e il limite in src/templates/blog/series-part.ts. Aggiungi casi mirati in tests/templates/minimal-player.test.ts per zero, valori mancanti o non validi e valori fuori dall’intervallo 0–100. Il lavoro è completato quando anteprima ed esportazione concordano a 0, gli input non validi usano 35, i valori vengono limitati all’intervallo e i controlli richiesti hanno esito positivo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug good first issue hacktoberfest

Open the Minimal Player in the editor (https://og.codercops.com/create/podcast?template=podcast-minimal-player) and drag "Progress %" to 0. The field says 0, but the bar in the preview stays at 35%. The exported image disagrees with the preview: "Copy Image URL" gives a URL with progressPercent=0, and that URL renders an empty bar, which is what you'd expect.

The API also fails on a value that isn't a number: https://og.codercops.com/api/og?template=podcast-minimal-player&progressPercent=abc returns 500 {"error":"Failed to generate image"}, and the server logs Invalid value NaN% for setWidth.

Both come from line 38 of src/templates/podcast/minimal-player.ts:

const progressPercent = Number(params.progressPercent || 35);

The editor passes the number 0, and 0 || 35 is 35. The API passes the string "0", which isn't falsy, so it gets 0 and the bar is empty. "abc" becomes NaN, and Satori throws on the bar's width: 'NaN%' (line 225). Values outside 0 to 100 aren't clamped either: progressPercent=150 only looks right because the track hides the overflow.

What to do

  • Parse the value like parseNumber in src/templates/blog/series-part.ts (lines 65 to 70): fall back to 35 only when it's missing, empty or not a finite number, so 0 stays 0.
  • Clamp the result to 0 to 100, like series-part.ts does for its numbers (lines 72 to 77).

Where to look

  • src/templates/podcast/minimal-player.ts: the field (line 16), the default (line 27), the parsing (line 38) and the bar width (line 225)
  • src/templates/blog/series-part.ts: parseNumber (lines 65 to 70) and the clamping (lines 72 to 77)
  • tests/templates/: files like agenda.test.ts and shortcut-tip.test.ts test a single template's render, so a new minimal-player.test.ts can follow them

Acceptance criteria

  • With Progress % at 0, the editor preview shows an empty bar, the same as the exported image
  • progressPercent=abc renders the default 35% bar instead of returning 500
  • progressPercent=150 gives a full bar and progressPercent=-20 an empty one
  • Tests for 0, the default, a value that isn't a number, and values below 0 and above 100
  • npm run check, npm run test and npm run build pass
  • A screenshot of the editor with Progress % at 0 in the PR

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #164 in the description.

Lingua principale
TypeScript
Stelle
8
Fork
4
Merge medio
6h 9m
PR unite (30g)
66

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/ogcops

Tutte le issue di codercops/ogcops

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.