Add close-button to fullscreen & re-show MediaControllers in Full-screen

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.10.1
+ - Updated dependency of react-native-video to 4.4.0
+ - Added 'close'-Button on Fullscreen for Android
+ - Added duration/play time for IOS (with upgrading react-native-video)
+
+## 0.9.1
+ - Fixed video repeating when loop turned off (thanks @mattvot)
+
+## 0.9.0
+ - Added `stop` method.
+ - Added `pause` method.
+ - Added `resume` method.
+ - Fixed seekbar not resetting after replaying video.
+
+## 0.8.6
+ - Added `seek` method.
+
 ## 0.8.2
  - Fixed error in more Android versions
 

README.md

@@ -63,15 +63,24 @@ All other props are passed to the react-native-video component.
  - playArrow
  - videoWrapper
 
+## Methods
+
+| Method                  | Props           | Description                                                               |
+|-------------------------|-----------------|---------------------------------------------------------------------------|
+| seek                    | time: float     | Seek the player to the given time.                                        |
+| stop                    |                 | Stop the playback and reset back to 0:00.                                 |
+| pause                   |                 | Pause the playback.                                                       |
+| resume                  |                 | Resume the playback.                                                      |
+
 ## Future features
 
 - [X] Make seek bar seekable.
 - [x] Make player customizable.
 - [ ] Add volume control
 - [X] Add fullscreen button
 - [ ] Add loader
-- [ ] Add video duration/play time
-- [ ] Add loader
+- [X] Add video duration/play time for IOS
+- [ ] Add video duration/play time for Android
 
 ## Setting up fullscreen on Android
 

android/app/src/main/java/BridgeModule.java

@@ -13,8 +13,6 @@
 import com.facebook.react.bridge.ActivityEventListener;
 import com.facebook.react.bridge.BaseActivityEventListener;
 import com.facebook.react.bridge.Promise;
-import android.util.Log;
-
 
 public class BridgeModule extends ReactContextBaseJavaModule {
     static final int VIDEO_PROGRESS_REQUEST = 13214;  // The request code
@@ -54,21 +52,18 @@ public String getName() {
     }
 
     @ReactMethod
-    public void showFullscreen(String videoUri, int position, int mainVer, int patchVer, final Promise promise) {
+    public void showFullscreen(String videoUri, int position, final Promise promise) {
         Activity currentActivity = getCurrentActivity();
         Context context = getReactApplicationContext();
 
         // Store the promise to resolve/reject when video returns data
         mBridgePromise = promise;
-        Log.i("VIDEO","GO FULLSCREEN"); 
 
         try {
             Intent intent = new Intent(context, VideoActivity.class); // mContext got from your overriden constructor
             Bundle extras = new Bundle();
             extras.putString("VIDEO_URL",videoUri);
             extras.putInt("VIDEO_POSITION",position);
-            extras.putInt("MAIN_VER",mainVer);
-            extras.putInt("PATCH_VER",patchVer);
             intent.putExtras(extras);
             currentActivity.startActivityForResult(intent, VIDEO_PROGRESS_REQUEST);
         } catch (Exception e) {

android/app/src/main/java/VideoActivity.java

@@ -24,6 +24,8 @@ public class VideoActivity extends AppCompatActivity {
     private Bundle extras;
     private static final int MAX_DURATION = 500;
     private static ProgressDialog progressDialog;
+    private static MediaController mediaController;
+
     VideoView myVideoView;
 
     @Override
@@ -36,12 +38,6 @@ protected void onCreate(Bundle savedInstanceState) {
             extras = i.getExtras();
             videoPath = extras.getString("VIDEO_URL");
             videoPosition = extras.getInt("VIDEO_POSITION");
-            mainVer = extras.getInt("MAIN_VER");
-            patchVer = extras.getInt("PATCH_VER");
-            Log.v("VIDEOACTIVITY",videoPath); 
-            Log.v("VIDEOACTIVITY",videoPosition);
-            Log.v("VIDEOACTIVITY",mainVer);
-            Log.v("VIDEOACTIVITY",patchVer);
             myVideoView = (VideoView) findViewById(R.id.videoView);
             progressDialog = ProgressDialog.show(VideoActivity.this, "", "Buffering video...", true);
             progressDialog.setCancelable(true);
@@ -51,7 +47,8 @@ protected void onCreate(Bundle savedInstanceState) {
             Toast.makeText(VideoActivity.this, "VideoURL not found", Toast.LENGTH_SHORT).show();
         }
 
-        // Touch listener to close fullscreen video on doubleclick
+
+        // Touch listener to: show MediaControllers on singleclick &  close fullscreen video on doubleclick
         myVideoView.setOnTouchListener(new View.OnTouchListener() {
             @Override
             public boolean onTouch(View v, MotionEvent event) {
@@ -77,7 +74,7 @@ public boolean onTouch(View v, MotionEvent event) {
     private void PlayVideo() {
         try {
             getWindow().setFormat(PixelFormat.TRANSLUCENT);
-            MediaController mediaController = new MediaController(VideoActivity.this);
+            mediaController = new MediaController(VideoActivity.this);
             mediaController.setAnchorView(myVideoView);
 
             Uri video = Uri.parse(videoPath);
@@ -86,6 +83,18 @@ private void PlayVideo() {
             myVideoView.requestFocus();
             myVideoView.setKeepScreenOn(true);
             myVideoView.seekTo(videoPosition * 1000);
+            mediaController.setPrevNextListeners(new View.OnClickListener() {
+                @Override
+                public void onClick(View v) {
+                    // next button clicked
+                    mediaController.show();
+                }
+            }, new View.OnClickListener() {
+                @Override
+                public void onClick(View v) {
+                    finish();
+                }
+            });
             myVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                 public void onPrepared(MediaPlayer mp) {
                     progressDialog.dismiss();
@@ -127,4 +136,11 @@ protected void finishProgress(Boolean isEnd) {
     public void onBackPressed(){
         finishProgress();
     }
+    public void onClick(View v) {
+        switch(v.getId()) {
+            case R.id.closeBtn:
+                finishProgress();
+                break;
+        }
+    }
 }

android/app/src/main/res/layout/player_fullscreen.xml

@@ -1,18 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".VideoActivity">
+                xmlns:app="http://schemas.android.com/apk/res-auto"
+                xmlns:tools="http://schemas.android.com/tools"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                tools:context=".VideoActivity">
+
+    <Button
+            android:id="@+id/closeBtn"
+            style="@style/Widget.AppCompat.Button.Small"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentEnd="true"
+            android:background="@color/colorAccent"
+            android:onClick="onClick"
+            android:text="X"
+            android:textSize="24sp" />
 
     <VideoView
-        android:id="@+id/videoView"
-        android:layout_width="fill_parent"
-        android:layout_height="fill_parent"
-        android:layout_alignParentTop="true"
-        android:layout_alignParentBottom="true"
-        android:layout_alignParentLeft="true"
-        android:layout_alignParentRight="true"
-        />
+            android:id="@+id/videoView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_centerInParent="true"
+            android:layout_marginStart="0dp"
+            android:layout_marginTop="0dp"
+            android:layout_marginEnd="0dp"
+            android:layout_marginBottom="0dp"
+            android:onClick="onClick"
+            android:padding="0dp" />
 </RelativeLayout>

example/app/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Button } from 'react-native';
 import VideoPlayer from 'react-native-video-player';
 
 const VIMEO_ID = '179859217';
@@ -37,6 +37,19 @@ export default class App extends Component {
           videoHeight={this.state.video.height}
           duration={this.state.video.duration/* I'm using a hls stream here, react-native-video
             can't figure out the length, so I pass it here from the vimeo config */}
+          ref={r => this.player = r}
+        />
+        <Button
+          onPress={() => this.player.stop()}
+          title="Stop"
+        />
+        <Button
+          onPress={() => this.player.pause()}
+          title="Pause"
+        />
+        <Button
+          onPress={() => this.player.resume()}
+          title="Resume"
         />
       </View>
     );