fix(skin): align control and caption transitions#985
Open
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 (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react(no changes) Presets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core(no changes) Entries (6)
🏷️ @videojs/element(no changes) Entries (2)
📦 @videojs/store(no changes) Entries (3)
🔧 @videojs/utils(no changes) Entries (10)
📦 @videojs/spf(no changes) Entries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the default and minimal skins’ transition timing to keep controls and native captions in sync, while moving several animations to modern individual transform properties (translate/scale) and improving error dialog text wrapping.
Changes:
- Introduces shared CSS variables for controls transition duration/delay (with pointer-type adjustments) and reuses them for native caption track transitions.
- Migrates multiple animations from
transformto individualtranslate/scaleproperties (controls, popups, buttons, slider thumb, caption container). - Prevents long error descriptions from overflowing by forcing aggressive line-breaking.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/skins/src/minimal/tailwind/video.tailwind.ts | Adds shared transition vars and updates controls/captions timing for minimal Tailwind skin. |
| packages/skins/src/minimal/tailwind/components/error.ts | Allows error description breaking in minimal Tailwind skin. |
| packages/skins/src/minimal/css/video.css | Adds shared transition vars and updates minimal CSS controls transitions to translate. |
| packages/skins/src/minimal/css/components/slider.css | Uses translate property for thumb centering. |
| packages/skins/src/minimal/css/components/preview.css | Uses translate property for spinner centering. |
| packages/skins/src/minimal/css/components/popup.css | Switches popup animation from transform to scale. |
| packages/skins/src/minimal/css/components/error.css | Switches error animation to scale and enables breaking long descriptions. |
| packages/skins/src/minimal/css/components/captions.css | Aligns caption vars/timing to controls vars and switches to translate transitions. |
| packages/skins/src/minimal/css/components/buttons.css | Switches button active animation from transform to scale. |
| packages/skins/src/default/tailwind/video.tailwind.ts | Adds shared transition vars and updates controls/captions timing for default Tailwind skin. |
| packages/skins/src/default/tailwind/components/error.ts | Allows error description breaking in default Tailwind skin. |
| packages/skins/src/default/css/video.css | Adds shared transition vars, updates control transitions to scale, and gates fullscreen cursor hiding to fine pointers. |
| packages/skins/src/default/css/components/slider.css | Uses translate property for thumb centering. |
| packages/skins/src/default/css/components/preview.css | Uses translate property for spinner centering. |
| packages/skins/src/default/css/components/popup.css | Switches popup animation from transform to scale. |
| packages/skins/src/default/css/components/error.css | Switches error animation to scale and enables breaking long descriptions. |
| packages/skins/src/default/css/components/captions.css | Aligns caption vars/timing to controls vars and switches to translate transitions. |
| packages/skins/src/default/css/components/buttons.css | Switches button active animation from transform to scale. |
| packages/html/src/define/base.css | Updates base native captions transition from transform to translate. |
| packages/core/src/dom/media/custom-media-element/index.ts | Updates injected native captions CSS from transform to translate. |
Comments suppressed due to low confidence (2)
packages/skins/src/minimal/tailwind/video.tailwind.ts:51
- In the caption track Tailwind rules, the container is now positioned via
translate-y-(--media-caption-track-y)but is still usingtransition-transform. Since this PR is switching animations to individual transform properties (translate/scale), consider updating the transition utility here to explicitly transitiontranslate(and keep reduced-motion behavior consistent) so caption movement animates as intended across browsers and matches the CSS-skin/base.css changes.
'[--media-caption-track-delay:calc(var(--media-controls-transition-delay)+25ms)]',
'[--media-caption-track-duration:var(--media-controls-transition-duration)]',
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]',
// Native caption track container
!isShadowDOM
? [
'[&_video::-webkit-media-text-track-container]:transition-transform',
'[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
'[&_video::-webkit-media-text-track-container]:ease-out',
'[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
'[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
packages/skins/src/default/tailwind/video.tailwind.ts:53
- The Tailwind styling for the native caption track container still uses
transition-transform, while the caption positioning is done withtranslate-y-(--media-caption-track-y)and the CSS/base styles in this PR switch the caption animation totransition: translate .... To avoid the caption transition silently not animating (depending on howtransition-transformexpands), update this to transitiontranslateexplicitly and keep reduced-motion behavior consistent with the CSS skin.
'[--media-caption-track-y:-0.5rem]',
'[--media-caption-track-delay:calc(var(--media-controls-transition-delay)+25ms)]',
'[--media-caption-track-duration:var(--media-controls-transition-duration)]',
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]',
// Native caption track container
!isShadowDOM
? [
'[&_video::-webkit-media-text-track-container]:transition-transform',
'[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
'[&_video::-webkit-media-text-track-container]:ease-out',
'[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
'[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
5
to
22
| .media-minimal-skin { | ||
| --media-caption-track-duration: 150ms; | ||
| --media-caption-track-delay: 600ms; | ||
| --media-caption-track-duration: var(--media-controls-transition-duration); | ||
| --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms); | ||
| --media-caption-track-y: -0.5rem; | ||
|
|
||
| &:has(.media-controls[data-visible]) { | ||
| --media-caption-track-delay: 25ms; | ||
| --media-caption-track-y: -3rem; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| --media-caption-track-duration: 50ms; | ||
| } | ||
| } | ||
|
|
||
| .media-minimal-skin video::-webkit-media-text-track-container { | ||
| /* NOTE: The delay must account for the controls delay/duration */ | ||
| transition: transform var(--media-caption-track-duration) ease-out; | ||
| transition: translate var(--media-caption-track-duration) ease-out; | ||
| transition-delay: var(--media-caption-track-delay); | ||
| transform: translateY(var(--media-caption-track-y)) scale(0.98); | ||
| translate: 0 var(--media-caption-track-y); | ||
| scale: 0.98; | ||
| z-index: 1; | ||
| font-family: inherit; | ||
| } |
Comment on lines
91
to
104
| &:not([data-visible]) { | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| translate: 0 100%; | ||
|
|
||
| @media (pointer: fine) { | ||
| transform: translateY(100%); | ||
| filter: blur(8px); | ||
| transition-duration: 500ms; | ||
| transition-delay: 500ms; | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| scale: 1; | ||
| transform: translateY(0); | ||
| translate: 0 0; | ||
| filter: blur(0); | ||
| transition-duration: 100ms; | ||
| } | ||
| } | ||
| } |
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
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
Testing
Closes #956