|
1 | 1 | import React, { useEffect } from 'react'; |
2 | 2 |
|
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 | + ); |
4 | 50 |
|
5 | | -export const Video = VideoComponent |
6 | | - ? ({ onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef }) => { |
7 | 51 | // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS. |
8 | 52 | useEffect(() => { |
9 | 53 | const initializeSound = async () => { |
10 | | - await AudioComponent.setAudioModeAsync({ |
11 | | - playsInSilentModeIOS: true, |
12 | | - }); |
| 54 | + if (AudioComponent) { |
| 55 | + await AudioComponent.setAudioModeAsync({ |
| 56 | + playsInSilentModeIOS: true, |
| 57 | + }); |
| 58 | + } |
13 | 59 | }; |
14 | 60 | initializeSound(); |
15 | 61 | }, []); |
16 | 62 |
|
17 | 63 | return ( |
18 | 64 | <VideoComponent |
19 | | - onPlaybackStatusUpdate={onPlaybackStatusUpdate} |
20 | | - ref={videoRef} |
21 | | - resizeMode={resizeMode} |
22 | | - shouldPlay={!paused} |
23 | | - source={{ |
24 | | - uri, |
25 | | - }} |
| 65 | + allowsFullscreen |
| 66 | + contentFit={resizeMode} |
| 67 | + nativeControls={false} |
| 68 | + player={player} |
26 | 69 | style={[style]} |
27 | 70 | /> |
28 | 71 | ); |
|
0 commit comments