11import React , { useEffect } from 'react' ;
22
3- import { AudioComponent , VideoComponent } from './AudioVideo' ;
3+ import { useEventListener } from 'expo' ;
4+
5+ import { AudioComponent } from './AudioVideo' ;
6+
7+ let videoPackage ;
8+
9+ try {
10+ videoPackage = require ( 'expo-video' ) ;
11+ } catch ( e ) {
12+ // do nothing
13+ }
14+
15+ if ( ! videoPackage ) {
16+ console . log (
17+ 'The video library is currently not installed. To allow in-app video playback, install the "expo-video" package.' ,
18+ ) ;
19+ }
20+
21+ const VideoComponent = videoPackage ? videoPackage . VideoView : null ;
22+ const useVideoPlayer = videoPackage ? videoPackage . useVideoPlayer : null ;
23+
24+ export const Video = videoPackage
25+ ? ( { onLoadStart, onLoad, onEnd, onProgress, onBuffer, resizeMode, style, uri, videoRef } ) => {
26+ const player = useVideoPlayer ( uri , ( player ) => {
27+ player . timeUpdateEventInterval = 0.5 ;
28+ videoRef . current = player ;
29+ } ) ;
30+
31+ useEventListener ( player , 'statusChange' , ( { status, oldStatus } ) => {
32+ if ( ( ! oldStatus || oldStatus === 'idle' ) && status === 'loading' ) {
33+ onLoadStart ( ) ;
34+ } else if ( ( oldStatus === 'loading' || oldStatus === 'idle' ) && status === 'readyToPlay' ) {
35+ onLoad ( { duration : player . duration } ) ;
36+ onBuffer ( { buffering : false } ) ;
37+ } else if ( oldStatus === 'readyToPlay' && status === 'loading' ) {
38+ onBuffer ( { buffering : true } ) ;
39+ }
40+ } ) ;
41+
42+ useEventListener ( player , 'playToEnd' , ( ) => {
43+ player . replay ( ) ;
44+ onEnd ( ) ;
45+ } ) ;
46+
47+ useEventListener ( player , 'timeUpdate' , ( { currentTime } ) =>
48+ onProgress ( { currentTime, seekableDuration : player . duration } ) ,
49+ ) ;
450
5- export const Video = VideoComponent
6- ? ( { onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef } ) => {
751 // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS.
852 useEffect ( ( ) => {
953 const initializeSound = async ( ) => {
@@ -16,13 +60,10 @@ export const Video = VideoComponent
1660
1761 return (
1862 < VideoComponent
19- onPlaybackStatusUpdate = { onPlaybackStatusUpdate }
20- ref = { videoRef }
21- resizeMode = { resizeMode }
22- shouldPlay = { ! paused }
23- source = { {
24- uri,
25- } }
63+ allowsFullscreen
64+ contentFit = { resizeMode }
65+ nativeControls = { false }
66+ player = { player }
2667 style = { [ style ] }
2768 />
2869 ) ;
0 commit comments