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

fix(html): fix html container sizing (#881)

Browse Source
This commit is contained in:
Sam Potts
2026-03-11 14:27:40 +11:00
committed by GitHub
parent 6d044e3c0f
commit abf8753fe6
15 changed files with 65 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/base.css
+25
View File
@@ -0,0 +1,25 @@
video-player {
display: contents;
}
video-player video,
video-player hls-video,
video-player simple-hls-video {
display: block;
width: 100%;
height: 100%;
}
video-player video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 150ms) ease-out;
transition-delay: var(--media-caption-track-delay, 600ms);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
z-index: var(--media-caption-track-z, 1);
font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
video-player video::-webkit-media-text-track-container {
transition-duration: 50ms;
}
}
packages/html/src/define/skin-mixin.ts
+9 -33
View File
@@ -1,37 +1,14 @@
import type { ReactiveElement } from '@videojs/element';
import type { Constructor } from '@videojs/utils/types';
import styles from './base.css?inline';
/**
* Light DOM stylesheet that bridges CSS custom properties set by skins
* to native WebKit text track pseudo-elements on the slotted `<video>`.
*
* `::slotted(video)::-webkit-media-text-track-container` is invalid per
* CSS spec, so this bridge lives in light DOM where it can directly
* target the video element's pseudo-elements.
*/
const NATIVE_CAPTION_BRIDGE_CSS = /* css */ `
.media-skin > video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 150ms) ease-out;
transition-delay: var(--media-caption-track-delay, 600ms);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
z-index: var(--media-caption-track-z, 1);
font-family: inherit;
}
const STYLES_ID = '__media-styles';
@media (prefers-reduced-motion: reduce) {
.media-skin > video::-webkit-media-text-track-container {
transition-duration: 50ms;
}
}
`;
const BRIDGE_ID = 'media-caption-bridge';
function ensureCaptionBridge(): void {
if (document.getElementById(BRIDGE_ID)) return;
function ensureStyles(): void {
if (document.getElementById(STYLES_ID)) return;
const style = document.createElement('style');
style.id = BRIDGE_ID;
style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
style.id = STYLES_ID;
style.textContent = styles;
document.head.appendChild(style);
}
@@ -40,8 +17,8 @@ function ensureCaptionBridge(): void {
* `getTemplateHTML` method into a shadow root. Native `<slot>` elements
* handle light DOM projection automatically.
*
* When `static styles` is set, the stylesheet is adopted into the shadow
* root via `adoptedStyleSheets`.
* When `static styles` is set, the stylesheet is adopted into the
* shadow root via `adoptedStyleSheets`.
*/
export function SkinMixin<Base extends Constructor<ReactiveElement>>(
BaseClass: Base
@@ -53,8 +30,7 @@ export function SkinMixin<Base extends Constructor<ReactiveElement>>(
constructor(...args: any[]) {
super(...args);
this.classList.add('media-skin');
ensureCaptionBridge();
ensureStyles();
if (!this.shadowRoot) {
const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };
packages/html/src/define/video/skin.ts
+1 -1
View File
@@ -106,7 +106,7 @@ function getTemplateHTML() {
<span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
</media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
${renderIcon('pip', { class: 'media-icon' })}
</media-pip-button>
<media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">