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/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]',
{