Skip to main content

Live Classes

A teacher schedules a live session for a subject + topic at a date and time. When the session starts, the teacher and students who tap "Join" land in a shared room with video tiles, mic / camera / camera-flip / chat / end-call controls.

:::caution UI shipped, wiring partial The schedule form, scheduled-list, and active-room screens are present in both the teacher and student apps. The "Schedule Sessions" button and the participant grid currently render mocked sessions / placeholder tiles. Real-time signalling, recording, and the persistent session list are still being wired up. Treat anything in Step-by-step marked (planned) as the target behaviour QA should verify once the pipe is live. :::

At a glance​

Who can do thisTeachers schedule + host · Students see the schedule and join when live
Where it livesTeacher app /dashboard/liveclass (schedule + list) and /dashboard/liveclass/active/:sessionId (in-call) · Student app /dashboard/liveclass and /dashboard/liveclass/active/:sessionId
Triggers notifications?Yes (planned) — push + in-app to assigned students when a session is scheduled and again when it goes live
Related featuresGroup Study (peer-driven rooms; same UX shape) · Notifications

How it flows​

Status lifecycle​

The schedule list pill colours map directly to this lifecycle: Scheduled = primary, Pending = orange, Live / Ended are not yet pilled in the current UI.

Step-by-step​

1. Teacher schedules a session​

  • App / route: Teacher app → /dashboard/liveclass.
  • Form fields:
    • Select Subject — dropdown (currently a static list of Mathematics / Science / English / History; will be filtered to the teacher's assigned subjects (planned)).
    • Topic — free-text title of the session.
    • Date & Time — opens DateTimePickerModal for picking date + 24h time (DD-MM-YYYY HH:MM).
    • Notes (optional) — multi-line context shown to students.
  • Tapping Schedule Sessions persists the session (planned); today the handler is a stub that logs the payload.

2. Scheduled list​

  • The same page renders Scheduled Sessions below the form.
  • Each card shows Topic · Subject · Time and a status pill (Scheduled / Pending).
  • Tapping a card on the teacher side will start the session and route to /dashboard/liveclass/active/:sessionId (planned).

3. Student view of the schedule​

  • App / route: Student app → /dashboard/liveclass.
  • Same shape: list of upcoming sessions for the student's section + subjects.
  • Tapping a Live session routes to /dashboard/liveclass/active/:sessionId.
  • Sessions that haven't started yet are non-interactive (planned: countdown).

4. In-session UI (teacher and student share this screen)​

  • App / route: /dashboard/liveclass/active/:sessionId on both apps.
  • Layout:
    • Top bar: back arrow · "Live Class" title · overflow menu.
    • Main: 2-column video grid of participant tiles (gradient placeholders today; real WebRTC streams (planned)).
    • Bottom control bar — five circular buttons:
      1. Camera flip (front ↔ back).
      2. Camera toggle (on/off).
      3. End call (red, larger; teacher ends the room — student leaves the room).
      4. Mic toggle (on/off).
      5. Chat — opens in-call text chat panel (planned).
  • End call routes both the teacher and the student back to /dashboard/liveclass.

5. After the session​

  • Session card moves out of the upcoming list. (planned) A "past sessions" section will surface duration, attendance, and recording links if recording was enabled.
  • (planned) Recording: opt-in toggle on the schedule form; played back from the past-sessions card.

Edge cases & things to test​

  • Past date in scheduler: teacher picks a date in the past → schedule button should be disabled or show a validation toast.
  • Duplicate slots: teacher schedules two sessions at the exact same time for the same section → behaviour should be defined (allow with warning, or block).
  • Subject not taught: subject dropdown should only contain subjects the teacher is assigned to in at least one section.
  • Late join: student opens a Live session 10 minutes after it started → must land in the active room with everyone else's tiles already populated.
  • Mid-session reload: teacher refreshes the WebView during the call → after reconnect, they should rejoin the same :sessionId and not start a new room.
  • Permissions denied: student denies camera or microphone permission on first join → tile placeholder still renders, mic/camera buttons reflect off-state, and toggling re-prompts.
  • Camera flip on desktop: the front-back flip control should hide or no-op on devices without a back camera (web preview).
  • End call by teacher vs by student: when the teacher taps End Call, every student should be auto-routed out within ~2 seconds. When a student taps End Call, only that student leaves; the room continues.
  • Network drop during call: connection lost for 10 seconds → tile freezes, then either reconnects automatically or shows a clear "rejoin" CTA. No silent stuck-state.
  • Notification fan-out for big sections: schedule a class for a section of 60 students → all 60 receive the "scheduled" push within ~30 seconds, and the "started" push when the teacher goes live.
  • Time-zone: a teacher and a student in different IST/UTC offsets should both see the session at the same wall-clock time on the device — the schedule list should render in the viewer's local zone.
  • Multiple teachers same section: subject teacher A schedules a Maths live class, subject teacher B teaches Science in the same section → student sees both in their schedule, each tagged by subject.
  • Schedule a Pending session that never goes live: 30 minutes after start time and the teacher hasn't joined → the card flips to Pending and ideally auto-cancels after a configurable threshold.