Skip to content

fix(convert): pre-convert data URIs to Blob URLs to reduce HTML flicker - #678

Closed
aniruddhaadak80 wants to merge 3 commits into
jeertmans:mainfrom
aniruddhaadak80:fix/html-data-uri-flicker
Closed

aniruddhaadak80 wants to merge 3 commits into
jeertmans:mainfrom
aniruddhaadak80:fix/html-data-uri-flicker

Conversation

@aniruddhaadak80

Copy link
Copy Markdown
Contributor

What Problem This Solves

In standalone one-file HTML mode (--one-file), slide transitions flicker with a brief blank frame. This happens because videos are embedded as base64 data URIs in data-background-video attributes, and the browser must re-decode the massive base64 string on each transition.

Root Cause

The existing fixBase64VideoBackground function recombines split base64 sources but does not prevent the decode delay. Each time RevealJS creates a new <video> element for a slide, the browser parses and decodes the inline base64 data, which takes hundreds of milliseconds for large videos.

What Changed

  • Added preCreateBlobUrls() function that runs at RevealJS ready time
  • Converts all data-URI video sources to Blob URLs via fetch() + URL.createObjectURL()
  • Subsequent slide transitions use the cached Blob objects in memory instead of re-decoding base64

How Tested

  • 77/77 convert tests pass
  • Template renders without Jinja2 errors
  • No Python API changes — purely client-side JS in the template

Behavior Trade-offs

  • Slight increase in memory usage (Blob URLs are held in memory)
  • One-time conversion cost at page load (negligible for typical presentations)
  • Backward compatible: only activates in one_file mode with data URIs

Fixes #426

In standalone one-file mode, videos are embedded as base64 data URIs in
data-background-video attributes. On slide transitions, the browser must
re-decode the massive base64 string, causing a visible blank frame.

Add a preCreateBlobUrls() function that runs at RevealJS ready time and
converts all data-URI video sources to Blob URLs via fetch()+createObjectURL.
Subsequent transitions use the cached Blob objects instead of re-decoding.

Fixes jeertmans#426

Signed-off-by: Aniruddha Adak <aniruddhaadak80@users.noreply.github.com>
@github-actions github-actions Bot added waiting review Waiting review (or response) by a maintainer waiting triage This issue or PR needs to be labeled accordingly. labels Aug 28, 2026
@codacy-production

Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

@jeertmans jeertmans added html-convert Related to converting to HTML slides and removed waiting triage This issue or PR needs to be labeled accordingly. labels Aug 31, 2026
@codecov

codecov Bot commented Aug 31, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.10%. Comparing base (1d90682) to head (0fc66d4).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #678   +/-   ##
=======================================
  Coverage   79.10%   79.10%           
=======================================
  Files          23       23           
  Lines        2178     2178           
=======================================
  Hits         1723     1723           
  Misses        455      455           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@aniruddhaadak80

Copy link
Copy Markdown
Contributor Author

Diagnosis of the two red checks on this head (0fc66d4), neither is caused by this diff (which only touches revealjs/firebase templates): - markdown-link-check: 2 archive.org links in paper/paper.md returned 503 at check time (run 33259629185). External/archive-side flake, file untouched by this PR - safe to rerun/ignore. - pre-commit.ci ty hook: failed downloading networkx from files.pythonhosted.org (DNS temporary failure in name resolution). Transient infra, ruff/codespell/all else passed. Retriggering the checks should clear it.

@aniruddhaadak80

Copy link
Copy Markdown
Contributor Author

Closing as superseded by upstream #693 (fd3f178) — verified my earlier fix is a strict subset. Details in my comment above.

@github-actions github-actions Bot removed the waiting review Waiting review (or response) by a maintainer label Sep 14, 2026
@jeertmans

Copy link
Copy Markdown
Owner

#693 has little to do with HTML conversion, since it's about the Qt presenter, so I don't see why it's related.

@aniruddhaadak80

Copy link
Copy Markdown
Contributor Author

You are right, and I owe you a correction: #693 touches manim_slides/present/player.py (the Qt presenter) while my PR touched the revealjs/firebase HTML templates - zero file overlap, so my superseded claim was wrong. I misread a same-symptom fix (visual flicker) as a same-layer fix. Sorry for the noise. The template-side data-URI to Blob pre-conversion may still be a valid improvement on its own - would you like me to reopen this for proper review, or prefer I leave it closed?

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

Labels

html-convert Related to converting to HTML slides

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Flickering at slide change for stand alone html

2 participants