zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packages): add poster placeholder blur-up pattern (#1632)

Browse Source
This commit is contained in:
Ronald Urbina
2026-06-18 12:05:41 -03:00
committed by GitHub
parent b32b80e55b
commit 07428519a5
24 changed files with 417 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/poster.css
+26 -1
View File
@@ -12,7 +12,8 @@
transition: opacity 0.25s;
}
.media-default-skin media-poster:not([data-visible]),
.media-default-skin > img:not([data-visible]) {
.media-default-skin > img:not([data-visible]),
.media-default-skin > img[data-visible]:not([data-loaded]) {
opacity: 0;
}
.media-default-skin media-poster ::slotted(img),
@@ -31,6 +32,30 @@
border-radius: inherit;
}
/* Blurred placeholder: HTML path targets media-poster::before, React path targets the skin container::before */
.media-default-skin media-poster::before,
.media-default-skin::before {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background-image: var(--media-poster-placeholder, none);
background-repeat: no-repeat;
background-position: var(--media-object-position, center);
background-size: var(--media-object-fit, contain);
filter: blur(var(--media-poster-placeholder-blur, 20px));
}
/* React path: hidden by default, transitions in while poster loads */
.media-default-skin::before {
opacity: 0;
transition: opacity 0.25s;
}
/* Show placeholder while the poster is visible but not yet loaded */
.media-default-skin:has(img[data-visible]:not([data-loaded]))::before {
opacity: 1;
}
.media-default-skin:fullscreen media-poster ::slotted(img),
.media-default-skin:fullscreen media-poster img,
.media-default-skin:fullscreen > img {
packages/skins/src/default/tailwind/components/poster.ts
+12 -1
View File
@@ -9,6 +9,13 @@ export const poster = (isShadowDOM: boolean) =>
// In the shadow DOM, the class applies to the parent so we have to set styles on the slotted img.
isShadowDOM
? [
// Placeholder (blur-up) — rides on media-poster opacity/transition
'before:absolute before:inset-0 before:pointer-events-none',
'before:[background-image:var(--media-poster-placeholder,none)]',
'before:bg-no-repeat',
'before:[background-position:var(--media-object-position,center)]',
'before:[background-size:var(--media-object-fit,contain)]',
'before:[filter:blur(var(--media-poster-placeholder-blur,20px))]',
'[&_::slotted(img)]:absolute',
'[&_::slotted(img)]:inset-0',
'[&_::slotted(img)]:w-full',
@@ -17,5 +24,9 @@ export const poster = (isShadowDOM: boolean) =>
'[&_::slotted(img)]:[object-position:var(--media-object-position,center)]',
'[&_::slotted(img)]:rounded-(--media-video-border-radius)',
]
: 'rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]'
: [
'rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]',
// Hide until the image has loaded so the placeholder shows first
'[&[data-visible]:not([data-loaded])]:opacity-0',
]
);
packages/skins/src/default/tailwind/video.tailwind.ts
+13
View File
@@ -80,6 +80,19 @@ export const root = (isShadowDOM: boolean) =>
'[&_video::-webkit-media-text-track-container]:font-[inherit]',
]
: [],
// Poster placeholder (blur-up) — React path only; HTML path uses media-poster::before
!isShadowDOM
? [
'before:absolute before:inset-0 before:pointer-events-none',
'before:[background-image:var(--media-poster-placeholder,none)]',
'before:bg-no-repeat',
'before:[background-position:var(--media-object-position,center)]',
'before:[background-size:var(--media-object-fit,contain)]',
'before:opacity-0 before:[filter:blur(var(--media-poster-placeholder-blur,20px))]',
'before:transition-opacity before:duration-250',
'has-[img[data-visible]:not([data-loaded])]:before:opacity-100',
]
: [],
// Fullscreen
'[&:fullscreen]:[--media-border-radius:0]',
{