| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
List of artifacts
...
Whiteboard: https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w
ADR #1: Introduce React based video player into video block https://github.com/openedx/edx-platform/pull/33671
ADR#2: Gain Feature parity using Video.js functionality TBD
NFR: [DRAFT] New video player architecture
Frontend for video player (React component to wrap Video.js)
...
Solution / Problem |
|
|
|
|---|---|---|---|
| JS Refactoring is required to move out it from the edx-platform | Completely new frontend development, it’s not required to work with the legacy Video Player implementation | No need for existing JS refactoring, only new functionality will be added |
| For python only new code will be introduced in Video xBlock required for the Video.js implementation. Slight deprecation activities are possible. | The further development on existing backend in edx-platform is required. | It’s required to refactor existing backend to adjust the required functionality for the Video.js based player. New code may be added on top or replace existing functions and utilities. |
| NPM installation into MFEs may be a little bit complicated Usual PIP installation of the xBlock into OeX system | NPM installation is simple, following the current approach with frontend-component-* repositories. | NPM installation into MFEs may be also complicated In addition a mechanism for switching between new xBlock and old video block should be implemented. |
| Frontend and Backend packages will use the same tag using SemVer scheme. | Only Frontend component will have a frontend versioning. | Only new Frontend and New Backend will have SemVer versioning. |
ARD Draft and sources:
Single xblock for Old and New Player with Frontend and backend stored in monorepo
Use React.js in xblock environment
https://github.com/openedx/XBlock/issues/635
Discussion: https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532/2?u=glib_glugovskiy
Build mechanisms for the xBlock:
Standalone FE: Webpack → NPM (registry) → SPA installation
xBlock FE (LMS, CMS): Static collection → React Renderer
xBlock BE: Setup.py(or pyproject.toml) → PIP install → xBlock runtime
Course Waffle flags:
https://drive.google.com/file/d/1jv6LD5xriMYKOTpcsW6Wpt9cYr_oLFyu/view?usp=sharing