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(core): add text primitive

Browse Source
This commit is contained in:
Rahim
2026-06-24 12:12:58 -07:00
parent ce4178778e
commit e07db4f7b2
9 changed files with 279 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/core/ui/components.generated.ts
+3
View File
@@ -29,6 +29,7 @@ import SeekIndicatorDef from './seek-indicator/seek-indicator-component';
import SliderDef from './slider/slider-component';
import StatusAnnouncerDef from './status-announcer/status-announcer-component';
import StatusIndicatorDef from './status-indicator/status-indicator-component';
import TextDef from './text/text-component';
import ThumbnailDef from './thumbnail/thumbnail-component';
import TimeDef from './time/time-component';
import TimeSliderDef from './time-slider/time-slider-component';
@@ -64,6 +65,7 @@ export const SeekIndicator = createComponent(SeekIndicatorDef);
export const Slider = createComponent(SliderDef);
export const StatusAnnouncer = createComponent(StatusAnnouncerDef);
export const StatusIndicator = createComponent(StatusIndicatorDef);
export const Text = createComponent(TextDef);
export const Thumbnail = createComponent(ThumbnailDef);
export const Time = createComponent(TimeDef);
export const TimeSlider = createComponent(TimeSliderDef);
@@ -100,6 +102,7 @@ export const COMPONENTS = {
Slider: SliderDef,
StatusAnnouncer: StatusAnnouncerDef,
StatusIndicator: StatusIndicatorDef,
Text: TextDef,
Thumbnail: ThumbnailDef,
Time: TimeDef,
TimeSlider: TimeSliderDef,
packages/core/src/core/ui/text/text-component.ts
+5
View File
@@ -0,0 +1,5 @@
import { defineComponent } from '../manifest';
export default defineComponent()({
name: 'Text',
});
packages/react/skins.compiler.config.ts
+4
View File
@@ -50,6 +50,10 @@ export default defineConfig({
when: code.match.jsx.tag('Container'),
transform: code.edit.jsx.addPropsSpread('rest'),
}),
code.edit.jsx.element({
when: code.match.jsx.tag('Text'),
transform: code.edit.jsx.replaceTag('span'),
}),
code.edit.jsx.element({
when: code.match.jsx.tag('Poster'),
transform: () => {
packages/react/src/presets/tests/skins-compiler-config.test.ts
+10 -1
View File
@@ -28,6 +28,7 @@ describe('skins compiler config', () => {
expect(code).toContain('from "@/ui/pip-button"');
expect(code).toContain('from "@/ui/play-button"');
expect(code).toContain('from "@/ui/poster"');
expect(code).not.toContain('from "@/ui/text"');
expect(code).not.toContain('from "@/ui/slider"');
expect(code).toContain('from "@/utils/use-render"');
expect(code).toContain('from "@videojs/utils/predicate"');
@@ -69,8 +70,16 @@ describe('skins compiler config', () => {
expect(compactCode).toContain(compact('<Tooltip.Trigger render={<PlayButton'));
expect(compactCode).toContain(compact('<PlayButton className={cn(iconButton, playIcon.button)} type="button">'));
expect(compactCode).toContain(
compact('<SeekButton seconds={-SEEK_TIME} className={cn(iconButton)} type="button">')
compact('<SeekButton seconds={-SEEK_TIME} className={cn(iconButton, seek.button)} type="button">')
);
expect(compactCode).toContain(compact('<SeekIcon className={cn(icon, iconFlipped)} />'));
expect(compactCode).toContain(compact('<span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>'));
expect(compactCode).toContain(
compact('<SeekButton seconds={SEEK_TIME} className={cn(iconButton, seek.button)} type="button">')
);
expect(compactCode).toContain(compact('<span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>'));
expect(compactCode).not.toContain('iconContainer');
expect(compactCode).not.toContain('<Text');
expect(compactCode).not.toContain(compact('render={<Button />}'));
expect(compactCode).toContain(compact('<TimeSlider.Root className={slider.root}>'));
expect(compactCode).toContain(compact('<TimeSlider.Track className={slider.track}>'));
packages/react/src/presets/video/default-video.generated.tailwind.tsx
+7 -5
View File
@@ -12,12 +12,12 @@ import {
error,
fullscreenIcon,
icon,
iconContainer,
iconFlipped,
overlay,
pipIcon,
playIcon,
popup,
seek,
slider,
time,
} from '@videojs/skins/default/tailwind/video.tailwind';
@@ -112,8 +112,9 @@ export function DefaultVideoSkin({ className, children, poster, ...rest }: Defau
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<SeekButton seconds={-SEEK_TIME} className={cn(iconButton)} type="button">
<SeekIcon className={cn(icon, iconContainer, iconFlipped)} />
<SeekButton seconds={-SEEK_TIME} className={cn(iconButton, seek.button)} type="button">
<SeekIcon className={cn(icon, iconFlipped)} />
<span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
</SeekButton>
}
/>
@@ -126,8 +127,9 @@ export function DefaultVideoSkin({ className, children, poster, ...rest }: Defau
<Tooltip.Root side="top">
<Tooltip.Trigger
render={
<SeekButton seconds={SEEK_TIME} className={cn(iconButton)} type="button">
<SeekIcon className={cn(icon, iconContainer)} />
<SeekButton seconds={SEEK_TIME} className={cn(iconButton, seek.button)} type="button">
<SeekIcon className={icon} />
<span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
</SeekButton>
}
/>
packages/skins/src/default/tailwind/components/seek.ts
+1
View File
@@ -1,4 +1,5 @@
export const seek = {
button: 'relative grid',
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/default/video.skin.tsx
+8 -5
View File
@@ -14,6 +14,7 @@ import {
Poster,
SeekButton,
StatusAnnouncer,
Text,
Time,
TimeSlider,
Tooltip,
@@ -45,12 +46,12 @@ import {
error,
fullscreenIcon,
icon,
iconContainer,
iconFlipped,
overlay,
pipIcon,
playIcon,
popup,
seek,
slider,
time,
} from './tailwind/video.tailwind';
@@ -101,8 +102,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<SeekButton seconds={-SEEK_TIME} className={[iconButton]}>
<SeekIcon className={[icon, iconContainer, iconFlipped]} />
<SeekButton seconds={-SEEK_TIME} className={[iconButton, seek.button]}>
<SeekIcon className={[icon, iconFlipped]} />
<Text className={[seek.label, seek.labelBackward]}>{SEEK_TIME}</Text>
</SeekButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
@@ -113,8 +115,9 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
<Tooltip.Root side="top">
<Tooltip.Trigger>
<SeekButton seconds={SEEK_TIME} className={[iconButton]}>
<SeekIcon className={[icon, iconContainer]} />
<SeekButton seconds={SEEK_TIME} className={[iconButton, seek.button]}>
<SeekIcon className={icon} />
<Text className={[seek.label, seek.labelForward]}>{SEEK_TIME}</Text>
</SeekButton>
</Tooltip.Trigger>
<Tooltip.Popup className={popup.tooltip}>
packages/skins/src/minimal/tailwind/components/seek.ts
+1
View File
@@ -1,4 +1,5 @@
export const seek = {
button: 'relative grid',
label: 'text-[10px] font-medium tracking-tighter tabular-nums',
labelForward: 'absolute -right-px -bottom-0.75',
labelBackward: 'absolute -left-px -bottom-0.75',