68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
You are a Senior Frontend Engineer working on a Next.js 16 + React + TypeScript project.
|
|
|
|
Task:
|
|
Fix the Online Lesson Detail page where YouTube videos show a black screen inside the iframe.
|
|
|
|
Important:
|
|
Before editing code, inspect the existing implementation and follow project rules:
|
|
|
|
1. AGENTS.md
|
|
2. docs/AI_DEVELOPMENT_GUIDE.md
|
|
3. docs/PROJECT_ARCHITECTURE.md
|
|
|
|
Scope:
|
|
Only fix the YouTube embed issue.
|
|
Do not change unrelated UI, layout, API, React Query logic, or business logic.
|
|
|
|
Requirements:
|
|
|
|
1. Locate the OnlineLessonDetailPage component.
|
|
2. Review the existing getEmbeddableVideoUrl() function.
|
|
3. Improve the YouTube URL parser to support:
|
|
- https://www.youtube.com/watch?v=VIDEO_ID
|
|
- https://youtube.com/watch?v=VIDEO_ID
|
|
- https://m.youtube.com/watch?v=VIDEO_ID
|
|
- https://youtu.be/VIDEO_ID
|
|
- https://youtu.be/VIDEO_ID?si=xxxxx
|
|
- https://www.youtube.com/shorts/VIDEO_ID
|
|
- https://www.youtube.com/embed/VIDEO_ID
|
|
- URLs with timestamp parameters such as &t=30s
|
|
4. The parser must return:
|
|
https://www.youtube.com/embed/VIDEO_ID
|
|
5. If the URL is invalid or not supported, return null.
|
|
6. Remove the sandbox attribute from the YouTube iframe.
|
|
7. Update iframe attributes to:
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
8. Keep uploaded video rendering unchanged.
|
|
9. Keep fallback Card behavior unchanged.
|
|
10. Do not use any.
|
|
11. Ensure TypeScript and ESLint pass.
|
|
|
|
After implementation:
|
|
Create /docs/ai/report.md with:
|
|
|
|
- Summary
|
|
- Files changed
|
|
- Root cause
|
|
- Changes made
|
|
- Testing checklist
|
|
- Risks
|
|
- Rollback plan
|
|
|
|
Testing checklist must include:
|
|
|
|
- youtube.com/watch URL
|
|
- youtu.be URL
|
|
- Shorts URL
|
|
- Embed URL
|
|
- Mobile YouTube URL
|
|
- URL with timestamp
|
|
- Invalid URL
|
|
- Local uploaded video
|
|
- Existing fallback button
|
|
- Responsive layout
|
|
|
|
Return a concise summary after completing the changes.
|