Page Comparison

Document owners: Glib Glugovskiy Mariia Moskalenko

Approvers:

•  Adolfo Brandes
•  Sarina Canelake

Context

This project initiative aims to improve the video playback experience within the Open edX platform. It's driven by a need for substantial enhancements to the existing video player, addressing multiple issues:

...

1. Complex Integration Challenges: Difficulties arose in integrating the video player across various legacy sections (CMS, LMS views), posing substantial technical hurdles.

   1. The analysis of places where the new player needs to be displayed is here.

2. Consideration for User Experience: Concerns about potential adverse impacts on user experience for learners and course creators if the new React XBlock's assets were are bundled inadequately. If the size of a single bundle is excessively large, or if it's not feasible to divide the bundle into smaller chunks, this could lead to the page's initial load time for users being longer than what is considered acceptable.

3. Prioritization of Other Projects: Prioritizing the completion of the Studio MFE project and investigating alternative methods for rendering XBlocks in the LMS took precedence over the React Player initiative. We need to finish these projects to reduce efforts for the React video player integration in the Platform.

   1. Course Unit page transition into course authoring frontend app - WBS for Course Unit Page

   2. General Solution for ReactJS frontend in xBlocks - Brainstorm, Concept diagram

4. Need for a Refined Implementation Strategy: Recognizing the necessity for a more effective implementation approach.

   1. Options are presented here.

...

3. Update and extend the ADR according to our decision for the solution.

4. Create ADRs for other needed scopes (such as feature parity with Video.js and deprecation, and migration).

5. Make changes to the Decomposition of the implementation.

6. Change the Roadmap and agree on valuable and independent deliverables.

7. Change the backlog according to the implementation strategy, and estimate work.

8. Proceed with the projects implementation

The decisions that

...

we aggreed on

1. ReactJS and Video.js Integration

...

• To address the requirement for the gradual rollout of the new Video Player, a new feature toggle will be introduced using Django Waffle flags. This allows for a manual rollout and the ability to quickly revert to the old player if issues arise.

• There will be a possibility to manage a feature toggle on a course level or organization level by applying `WaffleFlagCourseOverrideModel` and `WaffleFlagOrgOverrideModel`.

• The Feature toggle will be used to determine which frontend for the Video Block should be used, whether it is legacy or the new one.

List of

...

artifacts collected before and during the technical discovery

• The necessity for updating video component in Open edX — Approach Memo & Technical Discovery: React-based Video Player

• Decision to use the Video.js library — Initial edX Technical Discovery (React video player)

• Non-functional requirements decomposition — New video player architecture (React-based Video Player)

• Useful draft architectural notes to use in ADRs — [DRAFT] Architecture Doc for Technical Discovery React Video Player

• Backlog documents and files, includes decomposition in MIRO and table with descriptions in google sheets — [DRAFT] Video Player implementation backlog

  • Mindmap in MIRO — https://miro.com/app/board/uXjVM-F5A9g=/?moveToWidget=3458764563861020069&cot=14

  • Backlog table with descriptions — https://docs.google.com/spreadsheets/d/1WKqM-BaXc9g9HXnLas4fOQ3tSG4CJZQWskphNAIJ2iU/edit?usp=sharing

• ADR for Integrating ReactJS and Video.js based video player into Video xBlock — https://github.com/openedx/edx-platform/pull/33671

• White board - https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w