Pause notes for the technical discovery react-based video player integration into Open edX

Owned by Mariia Moskalenko
Last updated: Dec 14, 2023 by Adolfo Brandes
4 min read

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. User-Centric Improvements: The project seeks to elevate the user experience (platform admins, course authors, and students) by introducing a more intuitive, feature-rich video player.

  2. Technical Evolution: Embracing a React-based architecture represents a strategic technical shift. This move aims to capitalize on the advantages of React, such as flexibility, scalability, and modern development practices.

  3. Functional Upgrades: The project intends to overcome limitations in the current video player, ensuring support for various formats, interactivity, and seamless integration capabilities.

More about the context in Approach Memo & Technical Discovery: React-based Video Player

The reasons for the pause

  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 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 - https://openedx.atlassian.net/wiki/spaces/COMM/pages/3862528042

    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.

To resume the project

We need to do the following steps:

  1. Refine requirements — resolve comments, and agree on prioritization.

    1. Some of them might be outdated, especially if two other projects will be finished when we start this one.

  2. Agree on the implementation approach, and specifically frontend module integration into LMS and CMS. As for December 2023, there are several options to implement the React based video player:

    1. Using the existing video xblock as a core and changing only the player itself brings us wins in terms of easier data migration. But there’s a much bigger cycle in terms of timeline to gain a feature parity. This approach is described in the ADR.

    2. Implement a separate xblock with compatible backend, so it’s possible to reduce time to production and gain feature parity with existing video block much faster.

We suggest analyzing these solutions, their impact, and required effort before taking the decision.

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

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

  3. Make changes to the Decomposition of the implementation.

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

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

  6. Proceed with the projects implementation

 

The decisions that we aggreed on

  1. ReactJS and Video.js Integration

  • ReactJS will be used to build a responsive, accessible frontend for a new xBlock.

  • Typescript should be used to implement a new frontend, during implementation the following `ADR in frontend-build repository <github.com/openedx/frontend-build/pull/412>`_ should be used as the main guidance.

  • Video.js will be integrated for video playback, following the official guidelines from (`Video.js Docs <https://docs.videojs.com/>`_).

  • An NPM package will be created for the Video player component and published to npm registry.

  • Video player component should accept video metadata and configuration options via the component props, so it can be used in an MFE directly.

  1. Feature Toggle in edx-platform

  • 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