commit

plans/fixing-black-screen-video.md

@@ -0,0 +1,67 @@
+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.