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 (4)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (3)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core(no changes) Entries (5)
🏷️ @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
Adds slider preview thumbnails to default and minimal video skins (CSS + Tailwind, HTML + React), wires Mux storyboard/poster assets into sandbox demos, and fixes thumbnail state detection when React connects after an image has already loaded or errored.
Changes:
- New preview component styles (CSS and Tailwind) for both default and minimal skins, plus popup/surface animation tweaks
- Preview thumbnail markup added to all HTML and React skin templates with spinner and timestamp
- Thumbnail
connect()logic updated to handle errored images, with corresponding tests
Reviewed changes
Copilot reviewed 44 out of 44 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/dom/ui/thumbnail.ts | Handle errored images on connect |
| packages/core/src/dom/ui/tests/thumbnail.test.ts | Tests for React lifecycle edge cases |
| packages/html/src/define/video/skin.ts | Add preview markup to default HTML skin |
| packages/html/src/define/video/skin.tailwind.ts | Add preview markup to default Tailwind HTML skin |
| packages/html/src/define/video/minimal-skin.ts | Add preview markup to minimal HTML skin |
| packages/html/src/define/video/minimal-skin.tailwind.ts | Add preview markup to minimal Tailwind HTML skin |
| packages/react/src/presets/video/skin.tsx | Add preview to default React skin |
| packages/react/src/presets/video/skin.tailwind.tsx | Add preview to default Tailwind React skin |
| packages/react/src/presets/video/minimal-skin.tsx | Add preview to minimal React skin |
| packages/react/src/presets/video/minimal-skin.tailwind.tsx | Add preview to minimal Tailwind React skin |
| packages/react/src/ui/thumbnail/index.ts | Re-export thumbnail component |
| packages/skins/src/default/css/* | Default skin CSS: preview, surface, popup, reset changes |
| packages/skins/src/default/tailwind/* | Default skin Tailwind: preview, surface, popup changes |
| packages/skins/src/minimal/css/* | Minimal skin CSS: preview, popup, reset changes |
| packages/skins/src/minimal/tailwind/* | Minimal skin Tailwind: preview, popup changes |
| packages/sandbox/** | Wire Mux storyboard/poster into all sandbox templates |
💡 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.
sampotts
force-pushed
the
feat/slider-previews
branch
from
cbff2a2 to
f81dc5b
Compare
sampotts
force-pushed
the
feat/slider-previews
branch
from
f81dc5b to
b54ace1
Compare
sampotts
force-pushed
the
feat/slider-previews
branch
from
b54ace1 to
6bc5a60
Compare
sampotts
force-pushed
the
feat/slider-previews
branch
from
6bc5a60 to
46744aa
Compare
sampotts
force-pushed
the
feat/slider-previews
branch
from
46744aa to
d8bc0b9
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds slider preview thumbnails to the video player skins, wires sandbox demos to Mux storyboard/poster assets, and fixes thumbnail state detection when React connects after an image has already loaded or errored.
Changes:
- New preview component CSS/Tailwind styles for both default and minimal skins, with thumbnail, timestamp, and loading spinner
- Preview markup added to all HTML and React skin templates (CSS and Tailwind variants)
- Fix in
createThumbnailto handle errored images on connect (complete but zero dimensions), with corresponding tests
Reviewed changes
Copilot reviewed 51 out of 51 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/dom/ui/thumbnail.ts | Fix connect() to detect errored images |
| packages/core/src/dom/ui/tests/thumbnail.test.ts | Tests for React lifecycle connect scenarios |
| packages/core/src/dom/ui/slider.ts | Add preventScroll/focusVisible to thumb focus |
| packages/skins/src/default/css/components/preview.css | New preview component CSS (default) |
| packages/skins/src/minimal/css/components/preview.css | New preview component CSS (minimal) |
| packages/skins/src/default/tailwind/components/preview.ts | New preview Tailwind classes (default) |
| packages/skins/src/minimal/tailwind/components/preview.ts | New preview Tailwind classes (minimal) |
| packages/skins/src/*/css/video.css | Slider preview positioning styles |
| packages/skins/src/*/tailwind/video.tailwind.ts | Slider preview positioning Tailwind |
| packages/html/src/define/video/*.ts | Add preview markup to HTML skin templates |
| packages/react/src/presets/video/*.tsx | Add preview markup to React skin components |
| packages/sandbox/app/shared/mux.ts | Mux asset ID extraction utility |
| packages/sandbox/app/shared//mux-.ts(x) | Storyboard/poster helpers for sandbox |
| packages/sandbox/templates/*/main.ts(x) | Wire storyboard/poster into sandbox demos |
| Various reset/button/popup/surface/slider files | Minor style tweaks (margin reset removal, touch-manipulation, animation tuning, surface ring fix) |
💡 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
+6
to
+10
|
|
||
| export function getMuxPosterSrc(source: SourceId): string | undefined { | ||
| const id = getMuxAssetId(source); | ||
| return id ? `https://image.mux.com/${id}/thumbnail.jpg` : undefined; | ||
| } |
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 #814