Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#164 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
87/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
backend, frontend, testing

調査の方向性

src/templates/podcast/minimal-player.tsで、進捗フィールド、デフォルト値、解析、バーの幅に関する箇所を読み、parseNumberおよびsrc/templates/blog/series-part.tsでの制限処理と比較してください。tests/templates/minimal-player.test.tsに、ゼロ、値がない場合や無効な値、0～100の範囲外の値について、的を絞ったケースを追加してください。プレビューとエクスポートが0で一致し、無効な入力には35が使われ、値が範囲内に制限され、指定されたチェックに合格すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
8
フォーク
4
平均マージ
6時間 9分
マージ済み PR（30日）
66

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

codercops/ogcops のほかの issue

codercops/ogcops の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。