[DRAFT] Architecture Doc for Technical Discovery React Video Player

Owned by Glib Glugovskiy
Last updated: Nov 15, 2023
3 min read

 

 

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:

 

Frontend for video player (React component to wrap Video.js)

Video.js FAQ

https://videojs.com/guides/faqs/#q-does-videojs-work-with-react

Video.js Options

https://videojs.com/guides/options/

 

Existing Implementation for Video.js in OeX codebase

Video.js Documentation: https://docs.videojs.com/
Existing video.js implementation:

HLS support vs YouTube support https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/video/VideoPlayer.jsx#L18C15-L18C15
YouTube: "videojs-youtube": "3.0.1"

HLS m3u8 - application/x-mpegURL

Adding video.js to studio PR:

Frontend concept: https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/docs/concepts/frontend/javascript.rst#L43

Rendering of the player: https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/xmodule/video_block/video_block.py#L246

 

Webpack config

(legacy pr)

 

Work with translations for video player

 

Skins / theming:



Use design tokens?

Extensions for video.js:

 

Buffering issues analytics

Is not possible out of the box, the custom approach for monitoring can be done

https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/xmodule/js/src/sequence/display.js#L247

Courses for beta testing.

Under feature flag

Video Bumper ->
FEATURES.get('ENABLE_VIDEO_BUMPER')

CDN

https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_utils.py#L39C5-L39C2

 

Video Player Backend

Transcripts

Current installation process for video block:
Included in setup.py https://github.com/openedx/edx-platform/blob/master/setup.py#L36

Public sharing?

 

 

Video block hooks:

save_user_state

 

 

Default video controls

 

 

 

Optional Features (waffles and Flags) in Old Video block

Flag

Description

Flag

Description

SHOW_BUMPER_PERIODICITY

- Current time minus periodicity must be greater that last time viewed

ENABLE_VIDEO_BUMPER

Check if bumper enabled.

- Feature flag ENABLE_VIDEO_BUMPER should be set to True - Do not show again button should not be clicked by user. - Current time minus periodicity must be greater that last time viewed - edxval_api should be presented

AUTOPLAY_VIDEOS

 

ENABLE_AUTOADVANCE_VIDEOS

# This is the setting that controls whether the autoadvance button will be visible, not whether the # video will autoadvance or not. # For autoadvance controls to be shown, both the feature flag and the course setting must be true. # This allows to enable the feature for certain courses only.

FALLBACK_TO_ENGLISH_TRANSCRIPTS

 

DEPRECATE_YOUTUBE (Waffle)

Features that might be considered for deprecation in old Video Block

Feature

Description

Decision

Feature

Description

Decision

 

 

 

 

 

 

 

 

Architecture Decisions

Comparison of introducing a new xBlock vs Refactoring existing Video Block to include several UI options.

Whiteboard: https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w

High-level architecture:

Option 1:

Option 2:

 

Option 3:

 

Solution / Problem

  1. Move Current VideoBlock out of the platform and extend it with Video.js based video player

  1. Create a separate FE for the existing backend in edx-platform

  1. Create a completely new video xBlock, but leave VideoBlock inside edx-platform

Solution / Problem

  1. Move Current VideoBlock out of the platform and extend it with Video.js based video player

  1. Create a separate FE for the existing backend in edx-platform

  1. Create a completely new video xBlock, but leave VideoBlock inside edx-platform

  1. JS Refactoring

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

  1. Python refactoring

For python only new code will be introduced in Video xBlock required for the Video.js implementation.
Most of the backend code will work as is.

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.

  1. Installation

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.

  1. Release Management

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

Discussion:

Proof of concept:

 

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: