zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 21:57:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): extract structured CSSVars for media element templates (#1257)

Browse Source 
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-04-07 14:42:51 -05:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 1cc4ec7f81
commit 0c8e19a4e0
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/dom/media/custom-media-element/index.ts
+25 -6
View File
@@ -62,6 +62,25 @@ export const Attributes = [
'src',
] as const;
/** CSS custom property names for video elements. */
export const VideoCSSVars = {
/** Border radius of the video element. */
borderRadius: '--media-video-border-radius',
/** Object fit for the video. */
objectFit: '--media-object-fit',
/** Object position for the video. */
objectPosition: '--media-object-position',
/** Duration of the caption track transition. */
captionTrackDuration: '--media-caption-track-duration',
/** Delay before the caption track transition. */
captionTrackDelay: '--media-caption-track-delay',
/** Vertical offset of the caption track. */
captionTrackY: '--media-caption-track-y',
} as const;
/** CSS custom property names for audio elements. */
export const AudioCSSVars = {} as const;
/**
* Helper function to generate the HTML template for audio elements.
*/
@@ -100,15 +119,15 @@ function getVideoTemplateHTML(attrs: Record<string, string>): string {
display: block;
width: 100%;
height: 100%;
border-radius: var(--media-video-border-radius);
object-fit: var(--media-object-fit, contain);
object-position: var(--media-object-position, center);
border-radius: var(${VideoCSSVars.borderRadius});
object-fit: var(${VideoCSSVars.objectFit}, contain);
object-position: var(${VideoCSSVars.objectPosition}, center);
}
video::-webkit-media-text-track-container {
transition: translate var(--media-caption-track-duration, 0) ease-out;
transition-delay: var(--media-caption-track-delay, 0);
translate: 0 var(--media-caption-track-y, 0);
transition: translate var(${VideoCSSVars.captionTrackDuration}, 0) ease-out;
transition-delay: var(${VideoCSSVars.captionTrackDelay}, 0);
translate: 0 var(${VideoCSSVars.captionTrackY}, 0);
scale: 0.98;
z-index: 1;
font-family: inherit;