Learning Experience

<ReactPlayer
  ref={playerRef}
  url={lectureUrl}
  playing={playing}
  volume={volume}
  muted={muted}
  playbackRate={speed}
  controls={false} // Custom controls only
  width="100%"
  height="100%"
  onProgress={handleProgress}
  onDuration={handleDuration}
/>

// User presses → arrow
<div className="skip-hint">
  +10s
</div>
// Fades after 700ms

Course
├── Chapter 1: Introduction
│   ├── Lecture 1: Welcome
│   ├── Lecture 2: Setup
│   └── Lecture 3: Overview
├── Chapter 2: Core Concepts
│   ├── Lecture 1: Basics
│   └── Lecture 2: Advanced

// 1. Check localStorage for last played
const saved = localStorage.getItem(`lastPlayed_${courseId}`)
if (saved) {
  setPlayerData(JSON.parse(saved))
  return
}

// 2. Find first uncompleted lecture
for (let chapter of courseContent) {
  for (let lecture of chapter.lectures) {
    if (!completed.includes(lecture.id)) {
      return lecture
    }
  }
}

// 3. Default to first lecture
return courseContent[0].lectures[0]

const completedCount = progressData.lectureCompleted.length
const totalLectures = courseData.totalLectures
const progressPct = Math.round((completedCount / totalLectures) * 100)

POST /api/user/update-course-progress
{
  courseId: "...",
  lectureId: "..."
}

Response:
{
  success: true,
  message: "Lecture marked as completed",
  isCourseCompleted: true, // If last lecture
  certificateAvailable: true
}

if (chapter.lectures.every(lec => 
  progressData.lectureCompleted.includes(lec.id)
)) {
  // Show quiz button
}

const handleRating = async (rating) => {
  POST /api/user/add-rating
  { courseId, rating }
  
  // Updates course average rating
  // Stores in user's rating array
  // Shows success toast
}

{progressPct === 100 && (
  <div className="certificate-card">
    <p className="font-semibold">Certificate</p>
    <p className="text-xs">View your course completion certificate.</p>
    <button onClick={viewCertificate}>
      {loading ? 'Opening...' : 'View Certificate'}
    </button>
  </div>
)}

// Save on lecture change
localStorage.setItem(`lastPlayed_${courseId}`, JSON.stringify({
  ...lecture,
  chapter: chapterIndex + 1,
  lecture: lectureIndex + 1,
  chapterIndex
}))

// Restore on page load
const saved = localStorage.getItem(`lastPlayed_${courseId}`)
if (saved) {
  setPlayerData(JSON.parse(saved))
  setOpenSections({ [data.chapterIndex]: true })
}