Add attendance tracking

[sampaccoud]

Feature Request

Is your feature request related to a problem or unsupported use case? Please describe. We want to keep track of users attendance to a webinar/class. Instructors should have access to an attendance oard on which they can see a list of all attendees with a small time graph of their attendance.

Describe the solution you'd like The frontend should emit attendance timestamps at regular intervals only if the user is actually viewing the live (every 60 seconds?). Some information about the state of the viewer could be sent alongside the timestamp : is sound on? Is the browser tab active? The backend should record these timestamps for each attendee and offer an API endpoint for the instructor to retrieve the aggregate attendance of all attendees.

The 3 first PR should prepare the backend:

• add a field to the LiveRegistration model to record attendance stamps. Maybe a JsonField in which we record key/values, where the key is a timestamp?
• adapt the LiveRegistration API endpoint to allow pushing attendance records. The front-end may have to create the LiveRegistration record first if the attendee did not register before attending.
• add an API endpoint to retrieve, for a given video, the attendance profile of all attendees (paginated to allow scaling several housands of attendees) in a format making it easy to display small time graph for each attendee. In particular, the graphs should always have the same number of points (should it be 30?) and the scale should adapt to the length of the live in real time. For example, if the live lasted 10 minutes ie 600 seconds, we should receve timestamps every minute ie 60 seconds, so each timestamp spans on 3 points of the graph. The information for each timestamp should be repeated on the 3 points. If the live lasted 1 hour so 3600 seconds, each point on the graph spans on 3 potential timestamps and should be on if at least one of the 3 timestamps was received. The points of the graph should get a different color if the timestamp was received but sound is off or tab is inactive.

Once the backend is in place, continue with 3 front-end pull requests:

• emit attendance events to the backend, tracking an actual attendance. The state of the sound and tab seem important to confirm an actual attendance.
• add a component to display the small attendance graphs as returned by the backend.
• add a tab to the instructor dashboard and display the list of attendees with a small graph of their attendance.

[lunika]

The event we can listen with videojs is timeupdate. We already use it to sync transcript with the video: https://github.com/openfun/marsha/blob/89bfe3dacf4a7d68365596f8b62daffdebd8c858/src/frontend/Player/createVideojsPlayer.ts#L173-L178