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

refactor(core): replace document listeners with pointer capture in slider (#762)

Browse Source
This commit is contained in:
rahim
2026-03-06 13:42:31 -08:00
committed by GitHub
parent 814ba017e4
commit f2f9e6ddc3
9 changed files with 156 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/ui/hooks/use-slider.ts
+3
View File
@@ -6,6 +6,7 @@ import {
type SliderApi,
type SliderOptions,
type SliderRootProps,
type SliderRootStyle,
type SliderThumbProps,
} from '@videojs/core/dom';
import { useSnapshot } from '@videojs/store/react';
@@ -42,6 +43,7 @@ export interface UseSliderReturnValue<State extends SliderState = SliderState> {
rootRef: React.RefCallback<HTMLElement>;
thumbRef: React.RefCallback<HTMLElement>;
rootProps: SliderRootProps;
rootStyle: SliderRootStyle;
thumbProps: SliderThumbProps;
}
@@ -117,6 +119,7 @@ export function useSlider<State extends SliderState = SliderState>(
rootRef,
thumbRef,
rootProps: slider.rootProps,
rootStyle: slider.rootStyle,
thumbProps: slider.thumbProps,
};
}
packages/react/src/ui/slider/slider-root.tsx
+2 -1
View File
@@ -50,6 +50,7 @@ export const SliderRoot = forwardRef(function SliderRoot(
rootRef,
thumbRef: sliderThumbRef,
rootProps,
rootStyle,
thumbProps,
} = useSlider({
computeState: (input) => {
@@ -89,7 +90,7 @@ export const SliderRoot = forwardRef(function SliderRoot(
state,
stateAttrMap: SliderDataAttrs,
ref: [forwardedRef, rootRef],
props: [{ style: cssVars }, rootProps, elementProps],
props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],
}
)}
</SliderProvider>
packages/react/src/ui/time-slider/time-slider-root.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ export const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(
const duration = time?.duration ?? 0;
const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<TimeSliderCore.State>({
const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({
computeState: (input) => {
core.setInput(input);
if (!time || !buffer) {
@@ -107,7 +107,7 @@ export const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(
state,
stateAttrMap: TimeSliderDataAttrs,
ref: [forwardedRef, rootRef],
props: [{ style: cssVars }, rootProps, elementProps],
props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],
}
)}
</SliderProvider>
packages/react/src/ui/volume-slider/volume-slider-root.tsx
+2 -2
View File
@@ -49,7 +49,7 @@ export const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps
// Keep a ref to the latest volume state for callbacks.
const volumeRef = useLatestRef(volume);
const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<VolumeSliderCore.State>({
const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({
computeState: (input) => {
core.setInput(input);
core.setMedia(volume ?? noopVolume);
@@ -97,7 +97,7 @@ export const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps
state,
stateAttrMap: SliderDataAttrs,
ref: [forwardedRef, rootRef],
props: [{ style: cssVars }, rootProps, elementProps],
props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],
}
)}
</SliderProvider>