Add isSeeking on web

This commit is contained in:
Zoe Roux 2024-07-16 11:44:05 +07:00
parent fc5b2d4563
commit 8542c8f7d1
No known key found for this signature in database
3 changed files with 22 additions and 6 deletions

View File

@ -38,6 +38,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
) => { ) => {
const nativeRef = useRef<HTMLVideoElement>(null); const nativeRef = useRef<HTMLVideoElement>(null);
const isSeeking = useRef(false);
const seek = useCallback( const seek = useCallback(
async (time: number, _tolerance?: number) => { async (time: number, _tolerance?: number) => {
if (isNaN(time)) { if (isNaN(time)) {
@ -210,7 +211,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
// Set play state to the player's value (if autoplay is denied) // Set play state to the player's value (if autoplay is denied)
// This is useful if our UI is in a play state but autoplay got denied so // This is useful if our UI is in a play state but autoplay got denied so
// the video is actaully in a paused state. // the video is actaully in a paused state.
playbackStateRef.current?.({isPlaying: !nativeRef.current.paused}); playbackStateRef.current?.({
isPlaying: !nativeRef.current.paused,
isSeeking: isSeeking.current,
});
}, 500); }, 500);
}, []); }, []);
@ -291,8 +295,20 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
seek(source.startPosition / 1000); seek(source.startPosition / 1000);
} }
}} }}
onPlay={() => onPlaybackStateChanged?.({isPlaying: true})} onPlay={() =>
onPause={() => onPlaybackStateChanged?.({isPlaying: false})} onPlaybackStateChanged?.({
isPlaying: true,
isSeeking: isSeeking.current,
})
}
onPause={() =>
onPlaybackStateChanged?.({
isPlaying: false,
isSeeking: isSeeking.current,
})
}
onSeeking={() => (isSeeking.current = true)}
onSeeked={() => (isSeeking.current = false)}
onVolumeChange={() => { onVolumeChange={() => {
if (!nativeRef.current) { if (!nativeRef.current) {
return; return;

View File

@ -1,5 +1,5 @@
/// <reference lib="dom" /> /// <reference lib="dom" />
import type {VideoDecoderPropertiesType} from './specs/VideoNativeComponent'; import type {VideoDecoderInfoModuleType} from './specs/NativeVideoDecoderInfoModule';
const canPlay = (codec: string): boolean => { const canPlay = (codec: string): boolean => {
// most chrome based browser (and safari I think) supports matroska but reports they do not. // most chrome based browser (and safari I think) supports matroska but reports they do not.
@ -31,4 +31,4 @@ export const VideoDecoderProperties = {
? 'software' ? 'software'
: 'unsupported'; : 'unsupported';
}, },
} satisfies VideoDecoderPropertiesType; } satisfies VideoDecoderInfoModuleType;

View File

@ -2,7 +2,7 @@ import {NativeModules} from 'react-native';
import type {Int32} from 'react-native/Libraries/Types/CodegenTypes'; import type {Int32} from 'react-native/Libraries/Types/CodegenTypes';
// @TODO rename to "Spec" when applying new arch // @TODO rename to "Spec" when applying new arch
interface VideoDecoderInfoModuleType { export interface VideoDecoderInfoModuleType {
getWidevineLevel: () => Promise<Int32>; getWidevineLevel: () => Promise<Int32>;
isCodecSupported: ( isCodecSupported: (
mimeType: string, mimeType: string,