Add HTML5 article rendering with embedded content viewers#14548
Draft
rtibbles wants to merge 6 commits intolearningequality:developfrom
Draft
Add HTML5 article rendering with embedded content viewers#14548rtibbles wants to merge 6 commits intolearningequality:developfrom
rtibbles wants to merge 6 commits intolearningequality:developfrom
Conversation
github-actions
bot
added
DEV: renderers
Contributor
Build Artifacts
Smoke test screenshot |
rtibbles
force-pushed
the
html_viewer_injection
branch
7 times, most recently
from
26cacd8 to
4735d6d
Compare
…nents to use the viewer props, and instead direct all data via the composable api.
…ction Replace the Vuex store module with composables for instance-specific state management. Extract VideoPlayer and implement AudioPlayer with custom transport controls, sticky player, and inline transcript. Add useMediaProgress composable for shared progress tracking logic.
ContentViewer now generates unique viewer IDs and appends them to all interaction events, allowing parent components to track which embedded viewer emitted each event. SafeHtml5RendererIndex uses this to aggregate progress from multiple embedded viewers (e.g., videos in HTML5 content), combining scroll-based progress with embedded viewer progress using dynamic weighting.
Replace v-bind="$attrs" with explicit class="safe-html" and remove inheritAttrs: false, reducing the component API surface area. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rtibbles
force-pushed
the
html_viewer_injection
branch
from
4735d6d to
f00e02e
Compare
Contributor
npm Package VersionsWarning The following packages have changed files but no version bump:
If these changes affect published code, consider bumping the version. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refactors the content viewer architecture to support rendering HTML content directly in the DOM (rather than exclusively in sandboxed iframes), and migrates the MediaPlayer from Vuex to composables.
Key changes:
useMediaPlayercomposableViewerToolbarcomponent replaces per-viewer toolbar implementations (HTML5, PDF, EPUB)References
Reviewer guidance
To test: load any HTML5 content, PDF, EPUB, video, or audio content and verify it renders and plays correctly. For HTML5 content with embedded media, use the Kolibri QA Channel under HTML5 > HTML5 Article.
HTML5 Articles with embedded content use a blended progress model: 50% from scroll progress, 50% from embedded content completion. The 50/50 split is arbitrary and may need tuning — worth scrutinizing whether this feels right in practice.
Implementation involved judgment calls that may deviate from the design specs — worth comparing against the original designs during review.
Risky areas:
packages/kolibri/internal/pluginMediator.js— viewer registration now supports DOM element viewers alongside preset-based viewers; this is the core extension pointpackages/kolibri/components/internal/ContentViewer/index.js— major rewrite from a simple wrapper to a render-function component withprovide/injectcontext, viewer ID tracking, and DOM element file extractionkolibri/core/content/hooks.py— newcss_selectorsandallow_object_tagonContentRendererHook; theall_css_selectorsclassmethod uses module-level cachingScreenshots (desktop, 1280px)
Embedded video player
Screencast.From.2026-04-07.19-26-04.mp4
Sticky audio player
Screencast.From.2026-04-07.19-24-22.mp4
Screenshots (mobile, 412px)
AI usage
Implementation was done collaboratively with Claude Code (Opus). I directed the architecture and made design decisions; Claude helped with implementation, test writing, and iterating on the embedded content rendering approach. All code was reviewed and verified against a running dev server.