Use new onPlayPause: onPlaybackStatusChanged to support native events

This commit is contained in:
Zoe Roux 2024-03-25 00:13:58 +01:00
parent c5b0a76982
commit a18d5d0532
No known key found for this signature in database
3 changed files with 4 additions and 5 deletions

View File

@ -220,7 +220,7 @@ export const Video = memo(function Video({
onLoad={(info) => {
setDuration(info.duration);
}}
onPlayPause={setPlay}
onPlaybackStateChanged={(state) => setPlay(state.isPlaying)}
fonts={fonts}
subtitles={subtitles}
onMediaUnsupported={() => {

View File

@ -24,7 +24,6 @@ declare module "react-native-video" {
interface ReactVideoProps {
fonts?: string[];
subtitles?: Subtitle[];
onPlayPause: (isPlaying: boolean) => void;
onMediaUnsupported?: () => void;
}
export type VideoProps = Omit<ReactVideoProps, "source"> & {

View File

@ -115,7 +115,7 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
onProgress,
onError,
onEnd,
onPlayPause,
onPlaybackStateChanged,
onMediaUnsupported,
fonts,
},
@ -234,8 +234,8 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
onLoadedMetadata={() => {
if (source.startPosition) setProgress(source.startPosition / 1000);
}}
onPlay={() => onPlayPause?.call(null, true)}
onPause={() => onPlayPause?.call(null, false)}
onPlay={() => onPlaybackStateChanged?.({ isPlaying: true })}
onPause={() => onPlaybackStateChanged?.({ isPlaying: false })}
onEnded={onEnd}
{...css({ width: "100%", height: "100%", objectFit: "contain" })}
/>