feat: add onVolumeChange event (#3322)

* feat: implement `onVolumeChange` event

src/Video.tsx

@@ -82,6 +82,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       onFullscreenPlayerDidDismiss,
       onReadyForDisplay,
       onPlaybackRateChange,
+      onVolumeChange,
       onAudioBecomingNoisy,
       onPictureInPictureStatusChanged,
       onRestoreUserInterfaceForPictureInPictureStop,
@@ -344,6 +345,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       [onPlaybackRateChange],
     );
 
+    const _onVolumeChange = useCallback(
+      (e: NativeSyntheticEvent<Readonly<{volume: number}>>) => {
+        onVolumeChange?.(e.nativeEvent);
+      },
+      [onVolumeChange],
+    );
+
     const _onReadyForDisplay = useCallback(() => {
       setShowPoster(false);
       onReadyForDisplay?.();
@@ -509,6 +517,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onAudioFocusChanged={_onAudioFocusChanged}
           onReadyForDisplay={_onReadyForDisplay}
           onPlaybackRateChange={_onPlaybackRateChange}
+          onVolumeChange={_onVolumeChange}
           onVideoAudioBecomingNoisy={onAudioBecomingNoisy}
           onPictureInPictureStatusChanged={_onPictureInPictureStatusChanged}
           onRestoreUserInterfaceForPictureInPictureStop={

src/VideoNativeComponent.ts

@@ -218,6 +218,10 @@ export type OnPlaybackData = Readonly<{
   playbackRate: number;
 }>;
 
+export type onVolumeChangeData = Readonly<{
+  volume: number;
+}>;
+
 export type OnExternalPlaybackChangeData = Readonly<{
   isExternalPlaybackActive: boolean;
 }>;
@@ -326,6 +330,7 @@ export interface VideoNativeProps extends ViewProps {
   ) => void; // ios, android
   onReadyForDisplay?: (event: NativeSyntheticEvent<Readonly<object>>) => void;
   onPlaybackRateChange?: (event: NativeSyntheticEvent<OnPlaybackData>) => void; // all
+  onVolumeChange?: (event: NativeSyntheticEvent<onVolumeChangeData>) => void; // android, ios
   onVideoExternalPlaybackChange?: (
     event: NativeSyntheticEvent<OnExternalPlaybackChangeData>,
   ) => void;

src/types/events.ts

@@ -95,6 +95,10 @@ export type OnPlaybackData = Readonly<{
   playbackRate: number;
 }>;
 
+export type OnVolumeChangeData = Readonly<{
+  volume: number;
+}>;
+
 export type OnExternalPlaybackChangeData = Readonly<{
   isExternalPlaybackActive: boolean;
 }>;
@@ -153,6 +157,7 @@ export interface ReactVideoEvents {
     e: OnPictureInPictureStatusChangedData,
   ) => void; //iOS
   onPlaybackRateChange?: (e: OnPlaybackData) => void; //All
+  onVolumeChange?: (e: OnVolumeChangeData) => void; //Android, iOS
   onProgress?: (e: OnProgressData) => void; //All
   onReadyForDisplay?: () => void; //Android, iOS
   onReceiveAdEvent?: (e: OnReceiveAdEventData) => void; //Android, iOS