fix(player/react): slider callbacks not firing

Author: mihar-22

packages/react/src/components/ui/sliders/audio-gain-slider.tsx

@@ -4,12 +4,14 @@ import { createReactComponent, type ReactElementProps } from 'maverick.js/react'
 
 import { AudioGainSliderInstance } from '../../primitives/instances';
 import { Primitive } from '../../primitives/nodes';
+import { sliderCallbacks } from './slider-callbacks';
 
 /* -------------------------------------------------------------------------------------------------
  * AudioGainSlider
  * -----------------------------------------------------------------------------------------------*/
 
 const AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
+  events: sliderCallbacks,
   domEventsRegex: /^onMedia/,
 });
 

packages/react/src/components/ui/sliders/quality-slider.tsx

@@ -4,12 +4,14 @@ import { createReactComponent, type ReactElementProps } from 'maverick.js/react'
 
 import { QualitySliderInstance } from '../../primitives/instances';
 import { Primitive } from '../../primitives/nodes';
+import { sliderCallbacks } from './slider-callbacks';
 
 /* -------------------------------------------------------------------------------------------------
  * QualitySlider
  * -----------------------------------------------------------------------------------------------*/
 
 const QualitySliderBridge = createReactComponent(QualitySliderInstance, {
+  events: sliderCallbacks,
   domEventsRegex: /^onMedia/,
 });
 

packages/react/src/components/ui/sliders/slider-callbacks.ts

@@ -0,0 +1,14 @@
+import type { InferComponentEvents } from 'maverick.js';
+import type { ReactEventCallbacks } from 'maverick.js/react';
+
+import type { SliderInstance } from '../../primitives/instances';
+
+type SliderCallbacks = keyof ReactEventCallbacks<InferComponentEvents<SliderInstance>>;
+
+export const sliderCallbacks: SliderCallbacks[] = [
+  'onDragStart',
+  'onDragEnd',
+  'onDragValueChange',
+  'onValueChange',
+  'onPointerValueChange',
+];

packages/react/src/components/ui/sliders/slider.tsx

@@ -9,20 +9,15 @@ import {
 
 import { SliderInstance, SliderPreviewInstance } from '../../primitives/instances';
 import { Primitive, type PrimitivePropsWithRef } from '../../primitives/nodes';
+import { sliderCallbacks } from './slider-callbacks';
 import { SliderValueBridge, type SliderValueProps } from './slider-value';
 
 /* -------------------------------------------------------------------------------------------------
  * Slider
  * -----------------------------------------------------------------------------------------------*/
 
 const SliderBridge = createReactComponent(SliderInstance, {
-  events: [
-    'onDragStart',
-    'onDragEnd',
-    'onDragValueChange',
-    'onValueChange',
-    'onPointerValueChange',
-  ],
+  events: sliderCallbacks,
 });
 
 export interface RootProps extends ReactElementProps<SliderInstance> {

packages/react/src/components/ui/sliders/speed-slider.tsx

@@ -4,12 +4,14 @@ import { createReactComponent, type ReactElementProps } from 'maverick.js/react'
 
 import { SpeedSliderInstance } from '../../primitives/instances';
 import { Primitive } from '../../primitives/nodes';
+import { sliderCallbacks } from './slider-callbacks';
 
 /* -------------------------------------------------------------------------------------------------
  * SpeedSlider
  * -----------------------------------------------------------------------------------------------*/
 
 const SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
+  events: sliderCallbacks,
   domEventsRegex: /^onMedia/,
 });
 

packages/react/src/components/ui/sliders/time-slider.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../primitives/instances';
 import { Primitive, type PrimitivePropsWithRef } from '../../primitives/nodes';
 import * as ThumbnailBase from '../thumbnail';
+import { sliderCallbacks } from './slider-callbacks';
 
 /* -------------------------------------------------------------------------------------------------
  * TimeSliderContext
@@ -40,6 +41,7 @@ TimeSliderContext.displayName = 'TimeSliderContext';
  * -----------------------------------------------------------------------------------------------*/
 
 const TimeSliderBridge = createReactComponent(TimeSliderInstance, {
+  events: sliderCallbacks,
   domEventsRegex: /^onMedia/,
 });
 

packages/react/src/components/ui/sliders/volume-slider.tsx

@@ -4,12 +4,14 @@ import { createReactComponent, type ReactElementProps } from 'maverick.js/react'
 
 import { VolumeSliderInstance } from '../../primitives/instances';
 import { Primitive } from '../../primitives/nodes';
+import { sliderCallbacks } from './slider-callbacks';
 
 /* -------------------------------------------------------------------------------------------------
  * VolumeSlider
  * -----------------------------------------------------------------------------------------------*/
 
 const VolumeSliderBridge = createReactComponent(VolumeSliderInstance, {
+  events: sliderCallbacks,
   domEventsRegex: /^onMedia/,
 });