zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-06 14:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(packages): fix ejected skin slider setup (#1660)

Browse Source
This commit is contained in:
Sam Potts
2026-06-08 15:07:57 -07:00
committed by GitHub
parent d9f9efde88
commit 3d2225e77e
13 changed files with 85 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/ui.ts
+2 -3
View File
@@ -16,7 +16,7 @@ import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { safeDefine } from '../safe-define';
import { defineErrorDialog, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
import { defineErrorDialog, defineMenu, defineSliders, defineTime } from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
import { AudioPlayerElement } from './player';
@@ -28,8 +28,7 @@ safeDefine(MediaContainerElement);
// Compound groups.
defineErrorDialog();
defineTimeSlider();
defineVolumeSlider();
defineSliders();
defineTime();
defineMenu();
packages/html/src/define/live-video/ui.ts
+2 -10
View File
@@ -18,14 +18,7 @@ import { PosterElement } from '../../ui/poster/poster-element';
import { TooltipElement } from '../../ui/tooltip/tooltip-element';
import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
import { safeDefine } from '../safe-define';
import {
defineControls,
defineErrorDialog,
defineInputIndicators,
defineTime,
defineTimeSlider,
defineVolumeSlider,
} from '../ui/compounds';
import { defineControls, defineErrorDialog, defineInputIndicators, defineSliders, defineTime } from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
import { LiveVideoPlayerElement } from './player';
@@ -39,8 +32,7 @@ safeDefine(MediaContainerElement);
defineControls();
defineErrorDialog();
defineInputIndicators();
defineTimeSlider();
defineVolumeSlider();
defineSliders();
defineTime();
// Standalone elements.
packages/html/src/define/tests/video-ui-ejected.test.ts
+53
View File
@@ -0,0 +1,53 @@
import { describe, expect, it } from 'vitest';
async function waitForUpdates(elements: Element[]): Promise<void> {
for (const element of elements) {
const maybeReactive = element as Element & { updateComplete?: Promise<boolean> };
await maybeReactive.updateComplete;
}
}
describe('video/ui ejected registration', () => {
it('updates volume slider child parts when light DOM exists before registration', async () => {
document.body.innerHTML = /*html*/ `
<video-player>
<media-container>
<video></video>
<media-time-slider>
<media-slider-track>
<media-slider-fill></media-slider-fill>
<media-slider-buffer></media-slider-buffer>
</media-slider-track>
<media-slider-thumb></media-slider-thumb>
</media-time-slider>
<media-volume-slider orientation="vertical" thumb-alignment="edge">
<media-slider-track>
<media-slider-fill></media-slider-fill>
</media-slider-track>
<media-slider-thumb></media-slider-thumb>
</media-volume-slider>
</media-container>
</video-player>
`;
await import('../video/ui');
const volumeSlider = document.querySelector('media-volume-slider')! as HTMLElement & { orientation: string };
const volumeTrack = volumeSlider.querySelector('media-slider-track')!;
const volumeFill = volumeSlider.querySelector('media-slider-fill')!;
const volumeThumb = volumeSlider.querySelector('media-slider-thumb')!;
volumeSlider.orientation = 'vertical';
await Promise.resolve();
await waitForUpdates([volumeSlider, volumeTrack, volumeFill, volumeThumb]);
expect(volumeSlider.getAttribute('data-orientation')).toBe('vertical');
expect(volumeTrack.getAttribute('data-orientation')).toBe('vertical');
expect(volumeFill.getAttribute('data-orientation')).toBe('vertical');
expect(volumeThumb.getAttribute('data-orientation')).toBe('vertical');
expect(volumeThumb.getAttribute('aria-orientation')).toBe('vertical');
});
});
packages/html/src/define/ui/compounds.ts
+8
View File
@@ -110,3 +110,11 @@ export function defineVolumeSlider(): void {
safeDefine(VolumeSliderElement);
defineSliderParts();
}
export function defineSliders(): void {
safeDefine(TimeSliderElement);
safeDefine(VolumeSliderElement);
defineSliderParts();
safeDefine(SliderBufferElement);
safeDefine(SliderThumbnailElement);
}
packages/html/src/define/video/ui.ts
+2 -4
View File
@@ -28,9 +28,8 @@ import {
defineErrorDialog,
defineInputIndicators,
defineMenu,
defineSliders,
defineTime,
defineTimeSlider,
defineVolumeSlider,
} from '../ui/compounds';
// Value import — player.ts body runs before this module's body.
@@ -45,8 +44,7 @@ safeDefine(MediaContainerElement);
defineControls();
defineErrorDialog();
defineInputIndicators();
defineTimeSlider();
defineVolumeSlider();
defineSliders();
defineTime();
defineMenu();
packages/skins/src/default/css/components/button.css
+6 -1
View File
@@ -78,6 +78,10 @@
scale: 0.9;
}
& .media-icon__container {
display: grid;
}
& .media-icon {
grid-area: 1 / 1;
transition-behavior: allow-discrete;
@@ -95,8 +99,9 @@
right: -1px;
bottom: -3px;
font-size: 10px;
font-weight: 480;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.05em;
}
&:has(.media-icon--flipped) .media-icon__label {
packages/skins/src/default/css/components/icons.css
+1
View File
@@ -5,6 +5,7 @@
.media-default-skin .media-icon__container {
position: relative;
}
.media-default-skin .media-icon {
flex-shrink: 0;
width: var(--media-icon-size);
packages/skins/src/default/tailwind/components/icon.ts
+1 -1
View File
@@ -8,4 +8,4 @@ export const icon = cn(
export const iconHidden = 'hidden opacity-0';
export const iconFlipped = '[scale:-1_1]';
export const iconContainer = 'relative';
export const iconContainer = 'relative grid';
packages/skins/src/default/tailwind/components/seek.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export const seek = {
label: 'text-[10px] font-[480] tabular-nums',
label: 'text-[10px] font-medium tracking-tighter tabular-nums',
labelForward: 'absolute -right-px -bottom-0.75',
labelBackward: 'absolute -left-px -bottom-0.75',
};
packages/skins/src/minimal/css/components/button.css
+6 -1
View File
@@ -84,6 +84,10 @@
scale: 0.9;
}
& .media-icon__container {
display: grid;
}
& .media-icon {
grid-area: 1 / 1;
transition-behavior: allow-discrete;
@@ -101,8 +105,9 @@
right: -1px;
bottom: -3px;
font-size: 10px; /* Hard coded due to size limitations. */
font-weight: 480;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.05em;
}
&:has(.media-icon--flipped) .media-icon__label {
packages/skins/src/minimal/css/components/icons.css
+1
View File
@@ -5,6 +5,7 @@
.media-minimal-skin .media-icon__container {
position: relative;
}
.media-minimal-skin .media-icon {
flex-shrink: 0;
width: var(--media-icon-size);
packages/skins/src/minimal/tailwind/components/icon.ts
+1 -1
View File
@@ -8,4 +8,4 @@ export const icon = cn(
export const iconHidden = 'hidden opacity-0';
export const iconFlipped = '[scale:-1_1]';
export const iconContainer = 'relative';
export const iconContainer = 'relative grid';
packages/skins/src/minimal/tailwind/components/seek.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export const seek = {
label: 'text-[10px] font-[480] tabular-nums',
label: 'text-[10px] font-medium tracking-tighter tabular-nums',
labelForward: 'absolute -right-px -bottom-0.75',
labelBackward: 'absolute -left-px -bottom-0.75',
};