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) => { onLoad={(info) => {
setDuration(info.duration); setDuration(info.duration);
}} }}
onPlayPause={setPlay} onPlaybackStateChanged={(state) => setPlay(state.isPlaying)}
fonts={fonts} fonts={fonts}
subtitles={subtitles} subtitles={subtitles}
onMediaUnsupported={() => { onMediaUnsupported={() => {

View File

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

View File

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