Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng Phù hợp với người mới
  • Có gì không ổn?
#164 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
87/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
backend, frontend, testing

Hướng nghiên cứu

Đọc trong src/templates/podcast/minimal-player.ts các phần về trường tiến độ, giá trị mặc định, phân tích và chiều rộng thanh; so sánh cách xử lý với parseNumber và việc giới hạn giá trị trong src/templates/blog/series-part.ts. Thêm các trường hợp kiểm thử tập trung trong tests/templates/minimal-player.test.ts cho giá trị 0, giá trị bị thiếu hoặc không hợp lệ, và giá trị ngoài khoảng 0–100. Hoàn tất khi bản xem trước và bản xuất khớp nhau ở giá trị 0, đầu vào không hợp lệ dùng giá trị 35, các giá trị được giới hạn trong khoảng và các bước kiểm tra được yêu cầu đều đạt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
8
Fork
4
Merge trung bình
5 giờ 44 phút
Pull request đã merge (30 ngày)
83

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/ogcops

Tất cả issue của codercops/ogcops

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.