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(html): add time slider element (#656)

Browse Source
This commit is contained in:
rahim
2026-02-28 20:52:27 -08:00
committed by GitHub
parent d5df0150b3
commit 26c7395cd0
7 changed files with 297 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/core/ui/slider/tests/time-slider-core.test.ts
+10 -4
View File
@@ -31,10 +31,16 @@ function createMediaState(overrides: Partial<TimeSliderMedia> = {}): TimeSliderM
describe('TimeSliderCore', () => {
describe('defaultProps', () => {
it('extends SliderCore defaults with label', () => {
expect(TimeSliderCore.defaultProps.label).toBe('Seek');
expect(TimeSliderCore.defaultProps.min).toBe(0);
expect(TimeSliderCore.defaultProps.max).toBe(100);
it('has expected defaults', () => {
expect(TimeSliderCore.defaultProps).toEqual({
step: 1,
largeStep: 10,
orientation: 'horizontal',
disabled: false,
thumbAlignment: 'center',
label: 'Seek',
commitThrottle: 100,
});
});
});
packages/core/src/core/ui/slider/time-slider-core.ts
+12 -4
View File
@@ -4,11 +4,13 @@ import { formatTimeAsPhrase } from '@videojs/utils/time';
import type { NonNullableObject } from '@videojs/utils/types';
import type { MediaBufferState, MediaTimeState } from '../../media/state';
import { SliderCore, type SliderInteraction, type SliderProps, type SliderState } from './slider-core';
import { type SliderBaseProps, SliderCore, type SliderInteraction, type SliderState } from './slider-core';
export interface TimeSliderProps extends SliderProps {
export interface TimeSliderProps extends SliderBaseProps {
/** Accessible label for the slider. */
label?: string | undefined;
/** Trailing-edge throttle (ms) for seek requests during drag. */
commitThrottle?: number | undefined;
}
export interface TimeSliderState extends SliderState, Pick<MediaTimeState, 'currentTime' | 'duration' | 'seeking'> {
@@ -16,10 +18,16 @@ export interface TimeSliderState extends SliderState, Pick<MediaTimeState, 'curr
bufferPercent: number;
}
// @ts-expect-error — defaultProps shape differs from base (domain sliders omit value/min/max)
export class TimeSliderCore extends SliderCore {
static override readonly defaultProps: NonNullableObject<TimeSliderProps> = {
...SliderCore.defaultProps,
static readonly defaultProps: NonNullableObject<TimeSliderProps> = {
step: SliderCore.defaultProps.step,
largeStep: SliderCore.defaultProps.largeStep,
orientation: SliderCore.defaultProps.orientation,
disabled: SliderCore.defaultProps.disabled,
thumbAlignment: SliderCore.defaultProps.thumbAlignment,
label: 'Seek',
commitThrottle: 100,
};
#props = { ...TimeSliderCore.defaultProps };