Enable exoplayer and set it as default

Show loader while the video is buffering
rocknegi · Jan 25, 2021 · 1e0042f · 1e0042f
1 parent 12c15f4
commit 1e0042f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,5 +1,5 @@
 rootProject.name = 'hksj'
 include ':react-native-video'
-project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
diff --git a/src/components/PlayerControls.js b/src/components/PlayerControls.js
@@ -50,6 +50,7 @@ const styles = StyleSheet.create({
         alignContent: 'center',
         justifyContent: 'space-evenly',
         flex: 1.2,
+        opacity: 1,
     },
     touchable: {
         padding: 5,

diff --git a/src/components/VideoLayout.js b/src/components/VideoLayout.js
@@ -14,7 +14,7 @@ import RNFetchBlob from 'rn-fetch-blob';
 import { BannerAdSize } from '@react-native-firebase/admob';
 import Orientation from 'react-native-orientation';
 import Video from 'react-native-video';
-// import Icon from "react-native-vector-icons/FontAwesome";
+import Icon from "react-native-vector-icons/FontAwesome";
 import GoogleADBanner from './GoogleADBanner';
 import { FullscreenClose, FullscreenOpen } from '../assets/icons';
 import Header from './Header';
@@ -38,10 +38,11 @@ export default class VideoLayout extends React.Component {
         themeMode: this.props.themeMode
     };
     _onLoadHandler = data => {
-        this.triggerBufferAnimation();
+
         this.setState(s => ({
             ...s,
             duration: data.duration,
+            buffering: false
         }));
     };
 
@@ -149,7 +150,6 @@ export default class VideoLayout extends React.Component {
         if (this.loopingAnimation && !meta.isBuffering) {
             this.loopingAnimation.stopAnimation();
         }
-
         this.setState({
             buffering: meta.isBuffering,
         });
@@ -199,6 +199,10 @@ export default class VideoLayout extends React.Component {
             console.log(err);
         }
     }
+    _onLoadStart = () => {
+        this.setState({ buffering: true });
+        this.triggerBufferAnimation();
+    }
 
     render() {
         const { buffering } = this.state;
@@ -221,8 +225,9 @@ export default class VideoLayout extends React.Component {
                             ref={ref => {
                                 this.player = ref;
                             }}
-                            // onBuffer={this._handleBuffer}
+                            onBuffer={this._handleBuffer}
                             onLoad={this._onLoadHandler}
+                            onLoadStart={this._onLoadStart}
                             style={
                                 this.state.fullscreen ? styles.fullscreenVideo : styles.video
                             }
@@ -235,13 +240,13 @@ export default class VideoLayout extends React.Component {
                             paused={this.state.play}
                             resizeMode="contain"
                         />}
-                        {/* <View style={styles.videoCover}>
+                        <View style={styles.videoCover}>
                             {buffering && (
                                 <Animated.View style={rotateStyle}>
                                     <Icon name="circle-o-notch" size={50} color="white" />
                                 </Animated.View>
                             )}
-                        </View> */}
+                        </View>
                         {this.state.showControls && (
                             <View style={styles.controlOverlay}>
                                 <TouchableOpacity
@@ -336,12 +341,13 @@ const styles = StyleSheet.create({
     },
     controlOverlay: {
         position: 'absolute',
-        top: 0,
-        bottom: 10,
-        left: 10,
+        top: 5,
+        bottom: 0,
+        left: 5,
         right: 0,
         backfaceVisibility: 'hidden',
         justifyContent: 'space-between',
+
     },
     videoCover: {
         alignItems: "center",