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

fix(skin): bake in safari layout fix into skins (#954)

Browse Source
This commit is contained in:
Sam Potts
2026-03-16 08:38:25 +11:00
committed by GitHub
parent ba5a72fb12
commit 177bd26c1f
11 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.css
-1
View File
@@ -1,2 +1 @@
@import "@videojs/skins/minimal/css/audio.css";
@import "../shared.css";
packages/html/src/define/audio/minimal-skin.tailwind.ts
+1 -1
View File
@@ -40,7 +40,7 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="${controls}">
<media-tooltip-group class="contents">
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
packages/html/src/define/audio/skin.css
-1
View File
@@ -1,2 +1 @@
@import "@videojs/skins/default/css/audio.css";
@import "../shared.css";
packages/html/src/define/audio/skin.tailwind.ts
+1 -1
View File
@@ -39,7 +39,7 @@ function getTemplateHTML() {
<slot name="media"></slot>
<div class="${controls}">
<media-tooltip-group class="contents">
<media-tooltip-group>
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
packages/html/src/define/shared.css
+1
View File
@@ -2,6 +2,7 @@ media-tooltip-group {
display: contents;
}
/* Fixes a weird issue with Safari when setting aspect-ratio */
:host {
display: grid;
}
packages/html/src/define/skin-mixin.ts
+11 -5
View File
@@ -1,17 +1,21 @@
import type { ReactiveElement } from '@videojs/element';
import type { Constructor } from '@videojs/utils/types';
import styles from './base.css?inline';
import rootStyles from './base.css?inline';
import sharedStyles from './shared.css?inline';
const STYLES_ID = '__media-styles';
function ensureStyles(): void {
function ensureRootStyles(): void {
if (document.getElementById(STYLES_ID)) return;
const style = document.createElement('style');
style.id = STYLES_ID;
style.textContent = styles;
style.textContent = rootStyles;
document.head.appendChild(style);
}
const sharedSheet = new CSSStyleSheet();
sharedSheet.replaceSync(sharedStyles);
/**
* Mixin for skin elements that renders the template from a static
* `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -30,15 +34,17 @@ export function SkinMixin<Base extends Constructor<ReactiveElement>>(
constructor(...args: any[]) {
super(...args);
ensureStyles();
ensureRootStyles();
if (!this.shadowRoot) {
const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };
this.attachShadow(ctor.shadowRootOptions);
const sheets: CSSStyleSheet[] = [sharedSheet];
if (ctor.styles) {
this.shadowRoot!.adoptedStyleSheets = [ctor.styles];
sheets.push(ctor.styles);
}
this.shadowRoot!.adoptedStyleSheets = sheets;
if (ctor.getTemplateHTML) {
this.shadowRoot!.innerHTML = ctor.getTemplateHTML();
packages/html/src/define/video/minimal-skin.css
-1
View File
@@ -1,2 +1 @@
@import "@videojs/skins/minimal/css/video.css";
@import "../shared.css";
packages/html/src/define/video/minimal-skin.tailwind.ts
+1 -1
View File
@@ -52,7 +52,7 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls data-controls="" class="${controls}">
<media-tooltip-group class="contents">
<media-tooltip-group>
<div class="${buttonGroup}">
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
packages/html/src/define/video/skin.css
-1
View File
@@ -1,2 +1 @@
@import "@videojs/skins/default/css/video.css";
@import "../shared.css";
packages/html/src/define/video/skin.tailwind.ts
+1 -1
View File
@@ -53,7 +53,7 @@ function getTemplateHTML() {
</media-buffering-indicator>
<media-controls data-controls="" class="${controls}">
<media-tooltip-group class="contents">
<media-tooltip-group>
<span class="${tooltipState.play.wrapper}">
<media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
packages/skins/src/minimal/tailwind/components/time.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { cn } from '@videojs/utils/style';
export const time = {
group: 'flex items-center gap-1',
current: cn('hidden tabular-nums', '@md/media-controls:inline'),
separator: cn('hidden', '@md/media-controls:inline @md/media-controls:text-white/50'),
separator: cn('hidden', '@md/media-controls:inline @md/media-controls:text-current/60'),
duration: cn('tabular-nums', '@md/media-controls:text-current/60'),
controls: cn('flex flex-row-reverse items-center flex-1 gap-3', '@md/media-controls:flex-row'),
};