Skip to content

Content viewer composable #13533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jul 17, 2025
Merged

Content viewer composable #13533

merged 2 commits into from
Jul 17, 2025

Conversation

rtibbles
Copy link
Member

@rtibbles rtibbles commented Jul 2, 2025 •
edited
Loading

Summary

  • Migrates most content renderer verbiage to content viewer (to align with previous renaming of plugins similarly)
  • Migrates ContentRenderer component to ContentViewer, but keeps registration of component for now with deprecation warning
  • Create useContentViewer composable, which exposes the main composable for content viewers, and also exports the default props
  • useContentViewer composables takes the props and context arguments to the setup function as arguments, and an options object for additional configuration - currently this is only used for the defaultDuration for duration based progress calculations, which was previously provided by a public computed prop.
  • Adds deprecation warnings for viewer components that have not migrated to the composable
  • Because of the deliberate limitations of the composition API, you can no longer listen to events that the component itself emits, so all handling of emitted events is updated to either use exported methods within the component, or add listening at the ContentViewer component level instead
  • Migrates all existing content viewer components to use the composable, but with minimal changes to allow
  • Consolidates the 'extra' props from HTML5 and Bloompub components into the content viewer component
  • Deletes unused file prop
  • Deletes all references to "available" and "kind" props that have not been used for 5+ years.

References

Fixes #12744 (mostly) the deprecation warnings and handling can be cleaned up in develop.

Reviewer guidance

Does every content viewer still work (use the QA Channel to test this)?

Have I got every important instance of renderer as nomenclature? (noting I deliberately did not update the CustomChannelRenderer at this point, because it is a) possibly broken, and b) not easily tested).

Have I updated every instance of an error being emitted by a component and instead used the reportError method?

A lot of this work was done by Claude code, but the 'renderer' renaming I did just using VSCode find replace tooling to be more surgical.

I have manually tested every content viewer.

@rtibbles rtibbles added this to the Kolibri 0.18: Planned Patch 2 milestone Jul 2, 2025
@github-actions github-actions bot added DEV: renderers HTML5 apps, videos, exercises, etc. APP: Learn Re: Learn App (content, quizzes, lessons, etc.) APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend DEV: tools Internal tooling for development SIZE: large labels Jul 2, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 3, 2025 •
edited
Loading

Build Artifacts

Asset type Download link
PEX file kolibri-0.18.1a0.dev0_git.16.g7df9e698.pex
Windows Installer (EXE) kolibri-0.18.1a0.dev0+git.16.g7df9e698-windows-setup-unsigned.exe
Debian Package kolibri_0.18.1a0.dev0+git.16.g7df9e698-0ubuntu1_all.deb
Mac Installer (DMG) kolibri-0.18.1a0.dev0+git.16.g7df9e698.dmg
Android Package (APK) kolibri-0.18.1a0.dev0+git.16.g7df9e698-0.1.4-debug.apk
Raspberry Pi Image kolibri-pi-image-0.18.1a0.dev0+git.16.g7df9e698.zip
TAR file kolibri-0.18.1a0.dev0+git.16.g7df9e698.tar.gz
WHL file kolibri-0.18.1a0.dev0+git.16.g7df9e698-py2.py3-none-any.whl

@rtibbles rtibbles force-pushed the content_viewer_composable branch 2 times, most recently from 20ba899 to 9b4be6f Compare July 9, 2025 14:01
@rtibbles rtibbles mentioned this pull request Jul 9, 2025
Merged
marcellamaki
marcellamaki reviewed Jul 11, 2025
View reviewed changes
Copy link
Member

@marcellamaki marcellamaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code review looks good to me -- the approach is straightforward and the renaming within the diff lines up. I will do a confirmation on Monday that we aren't missing any of the replacements for the renaming (I haven't grepped everything yet). But, I think this is ready for manual QA. @pcenov and @radinamatic, can this go on the to-do list?

packages/kolibri/internal/pluginMediator.js
return component;
}

logger.warn(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@rtibbles rtibbles force-pushed the content_viewer_composable branch from 9b4be6f to 69430d0 Compare July 14, 2025 20:10
@radinamatic
Copy link
Member

radinamatic commented Jul 15, 2025 •
edited
Loading

Found two issues after reviewing all types of resources from the QA channel:

  1. PDF files do not open properly:

    PDF.mp4

  2. Exercises display only the first question and do not seem to load the rest after checking the answer:

    exercises.mp4

Tested in Chrome and Firefox on Ubuntu.
kolibri.txt

@radinamatic
Copy link
Member

There were also a bunch of 404 errors about fonts in the console for PhET sims, but nothing apparent in the UI:

2025-07-15_06-16-50

@rtibbles
Copy link
Member Author

I am very confident the PhET 404s are pre-existing. Will fix the other two issues.

@rtibbles rtibbles force-pushed the content_viewer_composable branch 2 times, most recently from 48bda60 to 8c08662 Compare July 15, 2025 22:22
@radinamatic
Copy link
Member

PDFs and exercises now displaying a-Ok! 👏🏽

PDF Exercise
PDF exercise

radinamatic
radinamatic reviewed Jul 16, 2025
View reviewed changes
Copy link
Member

@radinamatic radinamatic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All resource types now check out! 💯 🎉 :shipit:

rtibbles added 2 commits July 17, 2025 10:50
@rtibbles
Add useContentViewer composable.
88a8dc8 
Deprecate ContentRenderer mixin and ContentRenderer API.
Migrate usage of ContentRenderer to ContentViewer.
Rename code and docs to prefer 'viewer' to 'renderer'.
@rtibbles
Migrate content viewers to use useContentViewer composable.
3b08b57 
Consolidate content viewer props.
Remove stale prop passing for unused/nonexistent props.
@rtibbles rtibbles force-pushed the content_viewer_composable branch from 8c08662 to 3b08b57 Compare July 17, 2025 17:51
@radinamatic
Copy link
Member

Re-testing after the latest commits was uneventful, all resources are opening and displaying correctly! Merge away! 🚀 💥

@rtibbles rtibbles merged commit 04fc38f into learningequality:release-v0.18.x Jul 17, 2025
51 checks passed
@rtibbles rtibbles deleted the content_viewer_composable branch July 17, 2025 19:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marcellamaki marcellamaki marcellamaki left review comments

@radinamatic radinamatic radinamatic approved these changes

Assignees
No one assigned
Labels
APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) APP: Learn Re: Learn App (content, quizzes, lessons, etc.) DEV: frontend DEV: renderers HTML5 apps, videos, exercises, etc. DEV: tools Internal tooling for development SIZE: large SIZE: very large
Projects
None yet
Milestone
Kolibri 0.18: Planned Patch 2
Development

Successfully merging this pull request may close these issues.
3 participants
@rtibbles @radinamatic @marcellamaki