Skip to content

feat: implement advanced video player#104

Merged
RUKAYAT-CODER merged 1 commit intorinafcode:mainfrom
od-hunter:feat/video-player
Mar 27, 2026
Merged

feat: implement advanced video player#104
RUKAYAT-CODER merged 1 commit intorinafcode:mainfrom
od-hunter:feat/video-player

Conversation

@od-hunter
Copy link
Copy Markdown
Contributor

@od-hunter od-hunter commented Mar 26, 2026

Summary

Adds a learning-focused advanced video player with timestamped notes and bookmarks, plus engagement/progress analytics, to improve the educational video experience.

  • New AdvancedVideoPlayer with custom controls (play/pause, seek, volume/mute, fullscreen, PiP, keyboard + touch gestures)
  • Timestamped VideoNotes and VideoBookmarks panels tied to (userId, lessonId) with optimistic UI + API-backed mock persistence (and local cache fallback)
  • PlaybackAnalytics tracking watch time, max progress, seeks, speed/quality changes, and completion; posts events to /api/video-analytics and marks lesson completion via PATCH /api/lessons/[id]/progress
  • Playback speed + MP4 “quality” switching via multiple MP4 sources
  • Demo route at /video-player-demo for manual verification and screenshots

Related Issue

Closes #87

Type of change

  • Feature
  • Bug fix
  • Chore / Refactor
  • Docs

Screenshots / Recording (if UI)

Screenshots captured from /video-player-demo and saved in:

  • screenshots/video-player-demo/video-player-default.png
  • screenshots/video-player-demo/video-player-bookmarks-panel.png
  • screenshots/video-player-demo/video-player-notes-panel.png
  • screenshots/video-player-demo/video-player-transcript-panel.png

(Additional screenshots from the capture run are also present in screenshots/video-player-demo/.)

Testing

  • Manual: started dev server and verified /video-player-demo renders and basic interactions work (play/pause, seek, speed, panel toggles, add note/bookmark).

Targeted lint that was run (and passed):

npx next lint --file \
  src/app/components/video/AdvancedVideoPlayer.tsx \
  src/app/components/video/VideoNotes.tsx \
  src/app/components/video/VideoBookmarks.tsx \
  src/app/components/video/PlaybackAnalytics.tsx \
  src/app/components/video/PlaybackControls.tsx \
  src/app/api/notes/route.ts \
  src/app/api/bookmarks/route.ts \
  src/app/api/video-analytics/route.ts \
  src/app/video-player-demo/page.tsx \
  src/utils/videoUtils.ts \
  --max-warnings=0

Quality gate checklist

  • CI checks pass (Frontend CI)
  • [c] At least 1–2 approvals (per branch protection rules)
  • Branch is up-to-date with the base branch
  • All conversations resolved
  • PR description includes Closes #<issue-number>

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 26, 2026

@od-hunter Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@od-hunter
Copy link
Copy Markdown
Contributor Author

Hi @RUKAYAT-CODER , please review my pr

@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Support our project by giving us a star

@RUKAYAT-CODER RUKAYAT-CODER merged commit 0119f39 into rinafcode:main Mar 27, 2026
4 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Advanced Video Player with Learning Features

2 participants