diff --git a/src/MyVideo.tsx b/src/MyVideo.tsx index 7cf7cecfef..d7d9935af6 100644 --- a/src/MyVideo.tsx +++ b/src/MyVideo.tsx @@ -12,7 +12,7 @@ import { Image, Platform, } from "react-native"; -import RNCVideoComponent, { Commands, OnAudioFocusChangedData, OnPlaybackStateChangedData, OnVideoErrorData } from "./fabric/VideoNativeComponent"; +import RNCVideoComponent, { Commands, OnAudioFocusChangedData, OnAudioTracksData, OnPlaybackStateChangedData, OnTextTracksData, OnTimedMetadataData, OnVideoErrorData, OnVideoTracksData } from "./fabric/VideoNativeComponent"; import type { StyleProp, ImageStyle, NativeSyntheticEvent } from "react-native"; import type { @@ -60,7 +60,6 @@ const Video = forwardRef( onEnd, onBuffer, onBandwidthUpdate, - onTimedMetadata, onExternalPlaybackChange, onFullscreenPlayerWillPresent, onFullscreenPlayerDidPresent, @@ -75,6 +74,11 @@ const Video = forwardRef( onPlaybackStateChanged, onAudioFocusChanged, onIdle, + // @todo: fix type + onTimedMetadata, + onAudioTracks, + onTextTracks, + onVideoTracks, ...rest }, ref @@ -239,12 +243,27 @@ const Video = forwardRef( /** @todo: fix type */ const _onTimedMetadata = useCallback( - () => { - onTimedMetadata?.(); + (e: NativeSyntheticEvent) => { + onTimedMetadata?.(e.nativeEvent); }, [onTimedMetadata] ); + /** @todo: fix type */ + const _onAudioTracks = useCallback((e: NativeSyntheticEvent) => { + onAudioTracks?.(e.nativeEvent) + }, [onAudioTracks]) + + /** @todo: fix type */ + const _onTextTracks = useCallback((e: NativeSyntheticEvent) => { + onTextTracks?.(e.nativeEvent) + }, [onAudioTracks]) + + /** @todo: fix type */ + const _onVideoTracks = useCallback((e: NativeSyntheticEvent) => { + onVideoTracks?.(e.nativeEvent) + }, [onAudioTracks]) + const _onPlaybackRateChange = useCallback( (e: NativeSyntheticEvent>) => { onPlaybackRateChange?.(e.nativeEvent); @@ -352,7 +371,18 @@ const Video = forwardRef( onVideoBuffer={onVideoBuffer} onVideoPlaybackStateChanged={onVideoPlaybackStateChanged} onBandwidthUpdate={_onBandwidthUpdate} - onTimedMetadata={_onTimedMetadata} + onTimedMetadata={(e) => { + _onTimedMetadata(e as NativeSyntheticEvent) + }} + onAudioTracks={(e) => { + _onAudioTracks(e as NativeSyntheticEvent) + }} + onTextTracks={(e) => { + _onTextTracks(e as NativeSyntheticEvent) + }} + onVideoTracks={(e) => { + _onVideoTracks(e as NativeSyntheticEvent) + }} onVideoFullscreenPlayerDidDismiss={onFullscreenPlayerDidDismiss} onVideoFullscreenPlayerDidPresent={onFullscreenPlayerDidPresent} onVideoFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss} diff --git a/src/fabric/VideoNativeComponent.tsx b/src/fabric/VideoNativeComponent.tsx index 9fed0fb787..bc24d4fbb8 100644 --- a/src/fabric/VideoNativeComponent.tsx +++ b/src/fabric/VideoNativeComponent.tsx @@ -140,7 +140,55 @@ export type OnPlaybackStateChangedData = Readonly<{ isPlaying: boolean; }> -export type OnTimedMetadataData = Readonly<{}> +// @todo: fix type. for now react native doesn't support array codegen type for native event +type _OnTimedMetadataData = Readonly<{}> +export type OnTimedMetadataData = Readonly<{ + metadata: ReadonlyArray> +}> + +// @todo: fix type. for now react native doesn't support array codegen type for native event +type _OnAudioTracksData = Readonly<{}> +export type OnAudioTracksData = Readonly<{ + audioTracks: ReadonlyArray> +}> + +// @todo: fix type. for now react native doesn't support array codegen type for native event +type _OnTextTracksData = Readonly<{}> +export type OnTextTracksData = Readonly<{ + textTracks: ReadonlyArray> +}> + +// @todo: fix type. for now react native doesn't support array codegen type for native event +type _OnVideoTracksData = Readonly<{}> +export type OnVideoTracksData = Readonly<{ + videoTracks: ReadonlyArray> +}> export type OnPlaybackData = Readonly<{ playbackRate: Float; @@ -228,7 +276,6 @@ export interface VideoNativeProps extends ViewProps { onBandwidthUpdate?: DirectEventHandler onVideoSeek?: DirectEventHandler; onVideoEnd?: DirectEventHandler>; // all - onTimedMetadata?: DirectEventHandler; // ios, android onVideoAudioBecomingNoisy?: DirectEventHandler>; onVideoFullscreenPlayerWillPresent?: DirectEventHandler>; // ios, android onVideoFullscreenPlayerDidPresent?: DirectEventHandler>; // ios, android @@ -245,10 +292,10 @@ export interface VideoNativeProps extends ViewProps { onVideoIdle?: DirectEventHandler<{}>; // android only (nowhere in document, so do not use as props. just type declaration) onAudioFocusChanged?: DirectEventHandler; // android only (nowhere in document, so do not use as props. just type declaration) // @todo: fix type - // onAudioTracks: DirectEventHandler; // android - // onTextTracks: DirectEventHandler; // android - // onVideoTracks: DirectEventHandler; // android - // onTimedMetadata: DirectEventHandler; // android + onTimedMetadata?: DirectEventHandler<_OnTimedMetadataData>; // ios, android + onAudioTracks: DirectEventHandler<_OnAudioTracksData>; // android + onTextTracks: DirectEventHandler<_OnTextTracksData>; // android + onVideoTracks: DirectEventHandler<_OnVideoTracksData>; // android } export type VideoComponentType = HostComponent diff --git a/src/types/events.ts b/src/types/events.ts index 90217fb7fe..bf10f829e0 100644 --- a/src/types/events.ts +++ b/src/types/events.ts @@ -1,8 +1,7 @@ -import type { OnBandwidthUpdateData, OnBufferData, OnLoadData, OnLoadStartData, OnProgressData, OnSeekData, OnPlaybackData, OnExternalPlaybackChangeData, OnPictureInPictureStatusChangedData, OnReceiveAdEventData, OnVideoErrorData, OnPlaybackStateChangedData, OnAudioFocusChangedData } from "src/fabric/VideoNativeComponent"; +import type { OnBandwidthUpdateData, OnBufferData, OnLoadData, OnLoadStartData, OnProgressData, OnSeekData, OnPlaybackData, OnExternalPlaybackChangeData, OnPictureInPictureStatusChangedData, OnReceiveAdEventData, OnVideoErrorData, OnPlaybackStateChangedData, OnAudioFocusChangedData, OnTimedMetadataData, OnAudioTracksData, OnTextTracksData, OnVideoTracksData } from 'src/fabric/VideoNativeComponent'; export interface ReactVideoEvents { onAudioBecomingNoisy?: () => void //Android, iOS - onAudioTracks?: () => void // Android onAudioFocusChanged?: (e: OnAudioFocusChangedData) => void // Android onIdle?: () => void // Android onBandwidthUpdate?: (e: OnBandwidthUpdateData) => void //Android @@ -25,7 +24,8 @@ export interface ReactVideoEvents { onSeek?: (e: OnSeekData) => void //Android, iOS, Windows UWP onPlaybackStateChanged?: (e: OnPlaybackStateChangedData) => void // Android // @todo: fix type - onTimedMetadata?: () => void //Android, iOS - onTextTracks?: () => void //Android - onVideoTracks?: () => void //Android + onTimedMetadata?: (e: OnTimedMetadataData) => void //Android, iOS + onAudioTracks?: (e: OnAudioTracksData) => void // Android + onTextTracks?: (e: OnTextTracksData) => void //Android + onVideoTracks?: (e: OnVideoTracksData) => void //Android }