fix(skin): improve buffering, overlays, and input feedback#1547
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (10)
Players (5)
Skins (30)
UI Components (38)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (9)
Skins (27)
UI Components (32)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (13)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
sampotts
changed the title
sampotts
requested review from
littlespex and
luwes
and removed request for
littlespex
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
ad89dfb to
80cbe01
Compare
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
80cbe01 to
0878b37
Compare
sampotts
changed the title
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
0878b37 to
4af528d
Compare
sampotts
changed the title
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
4af528d to
5507f13
Compare
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
5507f13 to
3484eca
Compare
Collaborator
Author
|
Fixed. It was the source video! 🤦🏼 |
- Video/live-video: simplify full-area buffering markup; center with grid and clearer stacking; add a buffering scrim on the stage overlay (default and minimal, CSS + Tailwind). - Input feedback: refine seek/feedback bubble layout, sizing, and contrast; keep vanilla CSS and Tailwind tokens aligned (grid placement, icon sizing from --media-icon-size). - Audio/live-audio: show buffering in the play control slot without layout shift; CSS skin hooks and Tailwind playButton utilities; register BufferingIndicator in audio UI entrypoints. Co-authored-by: Cursor <cursoragent@cursor.com>
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
f0ddbfd to
b5c8044
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit b5c8044. Configure here.
sampotts
force-pushed
the
feat/contrast-improvements
branch
from
b5c8044 to
4e5e1e7
Compare
mihar-22
approved these changes
Jun 30, 2026
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
3 participants
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
This tightens the default and minimal skin feedback paths across HTML and React.
BufferingIndicatorfor ejected audio skins.data-starting-style; volume feedback opts out so repeated volume keypresses do not disappear and reappear.Validation
pnpm -F @videojs/core test src/dom/ui/tests/transition.test.tspnpm -F @videojs/react test src/ui/input-indicators/tests/use-rendered-indicator-state.test.tsxpnpm -F @videojs/skins buildpnpm exec biome check ...pnpm exec tsgo --build packages/core/tsconfig.json packages/html/tsconfig.json packages/react/tsconfig.jsonCloses #1509
Note
Medium Risk
Touches shared transition lifecycle and broad skin markup/CSS across HTML/React; behavior changes for buffering UI and input-indicator animations, though covered by new/updated unit tests.
Overview
Improves buffering and overlay presentation across default/minimal skins (HTML + React): video/live-video use a simpler full-frame spinner (no extra surface wrapper), overlays react when buffering is visible, and audio/live-audio show buffering as a spinner over the play control via a new
playButtonwrapper pattern. Ejected audio UI entries now registerBufferingIndicator.createTransition().openaccepts an optional element and, when reopening an already-active transition, cancels subtree animations and flushes layout so CSS entry transitions can replay; input indicators pass the live DOM node and gainreplayOnUpdate(default on). Volume feedback setsreplayOnUpdate: falseso rapid volume changes don’t flash off/on.Input feedback styling is aligned in CSS/Tailwind: shared bubble/island layout, shorter central play/pause transitions (replacing pop/slide keyframes), and seek icons animate via translate/opacity instead of dedicated keyframe animations.
Reviewed by Cursor Bugbot for commit 4e5e1e7. Bugbot is set up for automated code reviews on this repo. Configure here.