Skip to content
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

Bloom player #12586

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Bloom player #12586

wants to merge 7 commits into from

Conversation

nikkuAg
Copy link
Contributor

@nikkuAg nikkuAg commented Aug 22, 2024

Summary

Added a new plugin for bloom format files and created a runner in the hashi to render bloom files in the iframe client.

Version 1:
https://github.com/user-attachments/assets/1d1d73f8-b685-4acd-a68a-0a03ae7657cc

Version 2:
https://github.com/user-attachments/assets/2eb5ffc8-b47e-42e5-9b96-22a0b2b58882

Version 3:

Who.am.I.mp4
Joseph.the.Dreamer.mp4

…

References

#12237
#36
#12531
…

Reviewer guidance

…

Testing checklist

  • Contributor has fully tested the PR manually
  • If there are any front-end changes, before/after screenshots are included
  • Critical user journeys are covered by Gherkin stories
  • Critical and brittle code paths are covered by unit tests

PR process

  • PR has the correct target branch and milestone
  • PR has 'needs review' or 'work-in-progress' label
  • If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
  • If this is an important user-facing change, PR or related issue has a 'changelog' label
  • If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

  • Automated test coverage is satisfactory
  • PR is fully functional
  • PR has been tested for accessibility regressions
  • External dependency files were updated if necessary (yarn and pip)
  • Documentation is updated
  • Contributor is in AUTHORS.md

@nikkuAg nikkuAg marked this pull request as draft August 22, 2024 12:03
@github-actions github-actions bot added DEV: renderers HTML5 apps, videos, exercises, etc. DEV: backend Python, databases, networking, filesystem... DEV: frontend labels Aug 22, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Aug 22, 2024 •
edited
Loading

Build Artifacts

Asset type Download link
PEX file kolibri-0.18.0.dev0_git.20240918211922.pex
Windows Installer (EXE) kolibri-0.18.0.dev0+git.20240918211922-windows-setup-unsigned.exe
Debian Package kolibri_0.18.0.dev0+git.20240918211922-0ubuntu1_all.deb
Mac Installer (DMG) kolibri-0.18.0.dev0+git.20240918211922.dmg
Android Package (APK) kolibri-0.18.0.dev0+git.20240918211922-0.1.4-debug.apk
TAR file kolibri-0.18.0.dev0+git.20240918211922.tar.gz
WHL file kolibri-0.18.0.dev0+git.20240918211922-py2.py3-none-any.whl

@rtibbles rtibbles self-assigned this Aug 27, 2024
rtibbles
rtibbles requested changes Aug 29, 2024
View reviewed changes
Copy link
Member

@rtibbles rtibbles left a comment

Choose a reason for hiding this comment

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

Some things from the previous review have been addressed: #12531 (review) but the way the mapper is being referenced and applied is not quite fitting in with how kolibri-zip operates. A couple of other questions/clarifications.

.gitignore Outdated Show resolved Hide resolved
kolibri/core/content/static/bloom/bloomplayer.htm Outdated
<body style="background-color: #2e2e2e;">
<div id="root"><span style="color: #d65649">Loading Bloom Player...</span></div>
<script type="text/javascript" src="bloomPlayer-469de4b6cca7dc5c3e04.min.js"></script></body>
<!-- At build time, we insert a script tag pointing at bloomPlayer.min.js but with a hash created at build time,
Copy link
Member

Choose a reason for hiding this comment

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

This comment seems at odds with the script tag above?

Where is the CSS loaded from?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

CSS are loaded using the DOMWrapper

kolibri/core/content/static/bloom/bloomplayer.htm
to avoid getting a stale version from a cache (while allowing us to cache it for a long time).
It has a style sheet which sets the same color on the body, but it takes a while to fetch and load,
so we reduce flicker by setting a background color explicitly. -->
</html>
Copy link
Member

Choose a reason for hiding this comment

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

I can't comment on the binary files below - but are the mp3 files referenced in the JS?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, mp3 files are being used in js files to play audio for correct and wrong answers

packages/hashi/package.json Outdated Show resolved Hide resolved
packages/hashi/src/Bloom/BloomRunner.js Show resolved Hide resolved
packages/hashi/src/Bloom/BloomRunner.js Outdated
initBloom() {
try {
this.loaded();
this.iframe.src = `../bloom/bloomplayer.htm?url=${this.contentUrl}&distributionUrl=${this.distributionUrl}&metaJsonUrl=${this.metaUrl}`;
Copy link
Member

Choose a reason for hiding this comment

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

Makes sense!

packages/kolibri-zip/src/fileUtils.js Outdated Show resolved Hide resolved
packages/hashi/package.json Outdated Show resolved Hide resolved
@nikkuAg nikkuAg marked this pull request as ready for review August 31, 2024 17:42
@nikkuAg
Copy link
Contributor Author

nikkuAg commented Aug 31, 2024

Now we can save the progress for bloom format files using the pages viewed
https://github.com/user-attachments/assets/6915805d-e668-4712-b171-8b92b9abc978

@rtibbles
Copy link
Member

This currently adds no new JS dependencies, so I would suggest reverting any changes to the yarn.lock file - this will also mean that you don't have conflicts any more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rtibbles rtibbles rtibbles requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@rtibbles rtibbles

Labels
DEV: backend Python, databases, networking, filesystem... DEV: frontend DEV: renderers HTML5 apps, videos, exercises, etc.
Projects
None yet
Milestone
Kolibri 0.18: General maintenance
Development

Successfully merging this pull request may close these issues.
2 participants
@nikkuAg @rtibbles