[DRAFT] docs: FC-0010 ADR for restructuring video block and integrating React and Video.js #33671
Conversation
openedx-webhooks
added
the
open-source-contribution
|
Thanks for the pull request, @GlugovGrGlib! Please note that it may take us up to several weeks or months to complete a review and merge your PR. Feel free to add as much of the following information to the ticket as you can:
All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here. Please let us know once your PR is ready for our review and all tests are green. |
GlugovGrGlib
force-pushed
the
rg/fc-0010/video-block-adr
branch
3 times, most recently
from
9c79f63 to
378c85c
Compare
GlugovGrGlib
changed the title
GlugovGrGlib
force-pushed
the
rg/fc-0010/video-block-adr
branch
2 times, most recently
from
b28152b to
585fcad
Compare
GlugovGrGlib
force-pushed
the
rg/fc-0010/video-block-adr
branch
from
74d3a06 to
efa254f
Compare
GlugovGrGlib
force-pushed
the
rg/fc-0010/video-block-adr
branch
from
efa254f to
25e1c4a
Compare
| .. image:: ./Architecture.png | ||
|
|
||
| 2. **React.js and Video.js Integration** | ||
| * React.js will be used to build a responsive, accessible frontend for a new Xblock as proposed in https://github.com/openedx/XBlock/issues/635 and prototyped in https://github.com/openedx/XBlock/issues/634. |
There was a problem hiding this comment.
| * React.js will be used to build a responsive, accessible frontend for a new Xblock as proposed in https://github.com/openedx/XBlock/issues/635 and prototyped in https://github.com/openedx/XBlock/issues/634. | |
| * React.js will be used to build a responsive, accessible frontend for a new XBlock as proposed in https://github.com/openedx/XBlock/issues/635 and prototyped in https://github.com/openedx/XBlock/issues/634. |
| * The new XBlock will be embedded in iframes in the legacy interface. | ||
| * In the Course Authoring MFE, the XBlock will be integrated natively using React.js components. |
There was a problem hiding this comment.
Is there any precedent from other XBlocks for what you're doing here? If so, please cite. This seems like an area that could add a lot of complexity.
There was a problem hiding this comment.
I believe ORA2 team is doing something pretty similar, I will investigate and provide more info on this ADR.
Besides this, the approach suggested by @kdmccormick in openedx/XBlock#634 is compatible with this decision. However, it also differs in the area of where to render the required front-end in the LMS, whether inside or outside of the iframe.
Eventually, the ReactJS component will be packaged in an NPM package, awaiting props to render the Video Player. These props can be passed to the component either from the VideoBlock backend or directly from the new Course/Library Authoring editors.
I will note this in ADR
| * The data migration will not be required as long as the current video block backend is used. | ||
| * Data and metadata will be preserved during the migration. |
There was a problem hiding this comment.
Are there any old/obscure/deprecated features of the existing VideoBlock that won't make the transition?
There was a problem hiding this comment.
From https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3674734593/Approach+Memo+Technical+Discovery+React-based+Video+Player#Technical-Requirements we do have an item:
Discovery will need to be done on what fields currently exist in the XBlock, and as much as possible should go through the Deprecation process before beginning the process of migrating any over
Such as the multi-speed YouTube upload option, which we used in 2012 before YT started generating multiple speeds for you. Open questions: Is anyone using video bumpers? What features weren’t ported to the MFE, or are no longer exposed in the UI? etc
| * An NPM package will be created for the frontend, and it will be versioned and published (`Issue 635 <https://github.com/openedx/XBlock/issues/635>`_). | ||
|
|
||
| 3. **Feature Toggle in edx-platform** | ||
| * A feature toggle will be introduced using Django Waffle flags. |
There was a problem hiding this comment.
If the implementation strategy is to move all the code out of the edx-platform repo, what would the feature toggle do? Is it purely the frontend rendering that's being toggled?
There was a problem hiding this comment.
If the migration strategy is purely frontend focused, e.g. the VideoBlock decides which way to render based on feature toggle, then I think that's fine, and extracting the code into a new repo before active development makes perfect sense. Then rollout could be done by course because the VideoBlock would always have the course context when deciding which version of its UI to render. Was that the idea?
If that's the case, and if the VideoBlock is going to keep around both sets of frontend assets, would it be lower effort to keep something closer to the old Studio experience for now, instead of the iframe editor there? Or at least, would it be practical to put off Studio changes until late in the process?
There was a problem hiding this comment.
You're correct, the feature toggle will be used to switch between legacy and new UI.
I will add the decision that user has an option for using either legacy editor or new editor in studio as it's already implemented now
|
For people reviewing this ADR (@ormsbee @arbrandes and others) could you also review the high level implementation plan? https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3864428545/DRAFT+Video+Player+implementation+backlog |
GlugovGrGlib
force-pushed
the
rg/fc-0010/video-block-adr
branch
from
d7692c0 to
dd659b3
Compare
|
This ADR is on pause due to postponing FC-0010, this PR will be closed and can be reopened or used for the references during following work on the React-based video player |
|
@GlugovGrGlib Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future. |
Description
This ADR is introducing the way current video block should be restructured into a separate repository and the include a new Video Player implemented using React.js and Video.js libraries.
Supporting information
Approach Memo
New Video player architecture NFR