Fullscreen Optimization for Android

CHANGELOG.md

@@ -1,4 +1,7 @@
 ## 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)
  - Fixed prop types issue on TouchableOpacity causing this package not to work on React Native v0.62.
 
 ## 0.9.1

README.md

@@ -122,6 +122,45 @@ All other props are passed to the react-native-video component.
 - [x] Make player customizable.
 - [ ] Add volume control
 - [X] Add fullscreen button
-  - [ ] Add fullscreen button for Android (See PR #38 if you need fullscreen in Android)
 - [ ] Add loader
-- [ ] Add video duration/play time
+- [X] Add video duration/play time for IOS
+- [ ] Add video duration/play time for Android
+
+## Setting up fullscreen on Android
+
+Step 1:
+
+Go to your ```android\app\src\main\java\your\package\directory``` folder where you can find ```MainActivity.java```. Copy the java files from the repo's  ```android\app\src\main\java``` folder and paste them there. Open those files in any editor(Android Studio recommended) and change the package names according to your project. After that, go to your ```MainApplication.java``` file 
+and under the ```new MainReactPackage()```, copy and paste this: ```new BridgePackage()``` and it should look similar to the code below if you do not have other packages.
+```
+@Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+          new MainReactPackage(),
+          new BridgePackage()
+          );
+     }
+```
+Step 2: 
+
+Make a folder in your ```android\app\src\main\res``` directory and name it ```layout```, then copy the player_fullscreen.xml from the repo's ```android\app\src\main\res\layout``` directory and paste it into your directory and then go to your ```AndroidManifest.xml``` and add this before the ending application tag: 
+            ```
+            <activity android:name=".VideoActivity"
+               android:screenOrientation="sensorLandscape"
+               android:configChanges="orientation|screenSize"
+            />
+            ```
+
+
+If you want to remove the action bar, change your theme or change the theme for your activity from the manifest     
+
+If you want to load from an obb file, add the following to your AndroidManifext.xml file.  Update the mainVersion and patchVersion to suit and remember to change for any updates:
+
+<provider android:name="com.my.package.ZipFileContentProvider" android:authorities="com.my.package.provider">
+    <meta-data android:name="mainVersion" android:value="73"></meta-data> 
+    <meta-data android:name="patchVersion" android:value="0"></meta-data>
+</provider>
+
+Then pass the mainVer and expVer in as usual for react-native-video.
+
+And then your fullscreen should be working and ready to go!

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

@@ -0,0 +1,74 @@
+package com.my.package;
+
+import android.os.Bundle;
+import android.content.Context;
+import android.content.Intent;
+import android.app.Activity;
+
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.Promise;
+
+public class BridgeModule extends ReactContextBaseJavaModule {
+    static final int VIDEO_PROGRESS_REQUEST = 13214;  // The request code
+    private static final String E_FAILED_TO_SHOW_VIDEO = "E_FAILED_TO_SHOW_VIDEO";
+
+    private Promise mBridgePromise;
+
+    private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {
+        @Override public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
+            if (requestCode == VIDEO_PROGRESS_REQUEST) {
+                if (mBridgePromise != null) {
+                    if (resultCode == Activity.RESULT_OK) {
+                        int position = intent.getIntExtra("VIDEO_POSITION", -1);
+                        Context context = getReactApplicationContext();
+                        if (position <= 0) {
+                            mBridgePromise.resolve(0);
+                        } else {
+                            mBridgePromise.resolve(position);
+                        }
+                    }
+                    mBridgePromise = null;
+                }
+            }
+        }
+    };
+
+    public BridgeModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+
+        // Add the listener for `onActivityResult`
+        reactContext.addActivityEventListener(mActivityEventListener);
+    }
+
+    @Override
+    public String getName() {
+        return "BridgeModule";
+    }
+
+    @ReactMethod
+    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;
+
+        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);
+            intent.putExtras(extras);
+            currentActivity.startActivityForResult(intent, VIDEO_PROGRESS_REQUEST);
+        } catch (Exception e) {
+            mBridgePromise.reject(E_FAILED_TO_SHOW_VIDEO, e);
+            mBridgePromise = null;
+        }
+    }
+}

android/app/src/main/java/BridgePackage.java

@@ -0,0 +1,35 @@
+package com.my.package;
+
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class BridgePackage implements ReactPackage {
+
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new BridgeModule(reactContext));
+
+        return modules;
+    }
+
+}

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

@@ -0,0 +1,146 @@
+package com.my.package;
+
+import android.app.Activity;
+import android.app.ProgressDialog;
+import android.content.Intent;
+import android.content.pm.ActivityInfo;
+import android.graphics.PixelFormat;
+import android.media.MediaPlayer;
+import android.net.Uri;
+import android.support.v7.app.AppCompatActivity;
+import android.os.Bundle;
+import android.os.Handler;
+import android.util.Log;
+import android.widget.MediaController;
+import android.widget.Toast;
+import android.widget.VideoView;
+import android.view.View;
+import android.view.MotionEvent;
+
+public class VideoActivity extends AppCompatActivity {
+    private String videoPath;
+    private int videoPosition, clickCount = 0;
+    private long startTime, duration;
+    private Bundle extras;
+    private static final int MAX_DURATION = 500;
+    private static ProgressDialog progressDialog;
+    private static MediaController mediaController;
+
+    VideoView myVideoView;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
+        setContentView(R.layout.player_fullscreen);
+        Intent i = getIntent();
+        if(i != null){
+            extras = i.getExtras();
+            videoPath = extras.getString("VIDEO_URL");
+            videoPosition = extras.getInt("VIDEO_POSITION");
+            myVideoView = (VideoView) findViewById(R.id.videoView);
+            progressDialog = ProgressDialog.show(VideoActivity.this, "", "Buffering video...", true);
+            progressDialog.setCancelable(true);
+            PlayVideo();
+        }
+        else{
+            Toast.makeText(VideoActivity.this, "VideoURL not found", Toast.LENGTH_SHORT).show();
+        }
+
+
+        // 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) {
+                switch(event.getAction() & MotionEvent.ACTION_MASK)
+                {
+                case MotionEvent.ACTION_UP:
+                    clickCount++;
+                    if(clickCount >= 2) {
+                        duration = System.currentTimeMillis() - startTime;
+                        if(duration<= MAX_DURATION) {
+                            finishProgress();   // Close the fullscreen video view on doubleclick.
+                            return true;
+                        }
+                    }
+                    startTime = System.currentTimeMillis();
+                    return false;
+                }
+                return true;
+            }
+        });
+    }
+
+    private void PlayVideo() {
+        try {
+            getWindow().setFormat(PixelFormat.TRANSLUCENT);
+            mediaController = new MediaController(VideoActivity.this);
+            mediaController.setAnchorView(myVideoView);
+
+            Uri video = Uri.parse(videoPath);
+            myVideoView.setMediaController(mediaController);
+            myVideoView.setVideoURI(video);
+            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();
+                    myVideoView.start();
+                }
+            });
+            myVideoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener () {
+                public void onCompletion(MediaPlayer mp) {
+                    finishProgress(true);
+                }
+            });
+
+
+        } catch (Exception e) {
+            progressDialog.dismiss();
+            System.out.println("Video Play Error :" + e.toString());
+            finishProgress();
+        }
+
+    }
+
+    protected void finishProgress() {
+        this.finishProgress(false);
+    }
+
+    // Called instead of finish() to always send back the progress.
+    protected void finishProgress(Boolean isEnd) {
+        Intent resultIntent = new Intent(Intent.ACTION_PICK);
+        int position = myVideoView.getCurrentPosition();
+        if (isEnd) {
+            position = 0;
+        }
+        resultIntent.putExtra("VIDEO_POSITION", position);
+        setResult(Activity.RESULT_OK, resultIntent);
+        finish();
+    }
+
+    // Pass the progress back on the user pressing the back button.
+    public void onBackPressed(){
+        finishProgress();
+    }
+    public void onClick(View v) {
+        switch(v.getId()) {
+            case R.id.closeBtn:
+                finishProgress();
+                break;
+        }
+    }
+}

android/app/src/main/java/ZipFileContentProvider.java

@@ -0,0 +1,22 @@
+package com.my.package;
+
+import com.android.vending.expansion.zipfile_sound.APEZProvider;
+import android.net.Uri;
+import java.io.File;
+
+public class ZipFileContentProvider extends APEZProvider {
+    private static final String AUTHORITY = "com.my.package.provider";
+
+    @Override
+    public String getAuthority() {
+        return AUTHORITY;
+    }
+
+    public static Uri buildUri(String path) {
+        StringBuilder contentPath = new StringBuilder("content://");
+        contentPath.append(AUTHORITY);
+        contentPath.append(File.separator);
+        contentPath.append(path);
+        return Uri.parse(contentPath.toString());
+    }
+}

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

@@ -0,0 +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">
+
+    <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="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>