From 5a9f1b97b991d251b26919c012a9076efbc920ac Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 18 Jul 2017 12:28:45 +0200 Subject: [PATCH 01/12] Calling fullscreen activity bridge on android --- index.js | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 6401f3e..04440c5 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,7 @@ import React, { Component, PropTypes } from 'react'; -import { View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native'; +import { View, StyleSheet, Image, TouchableOpacity, Platform, NativeModules } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; -import Video from 'react-native-video'; // eslint-disable-line - +import Video from 'react-native-video'; const styles = StyleSheet.create({ preloadingPlaceholder: { backgroundColor: 'black', @@ -167,8 +166,6 @@ export default class VideoPlayer extends Component { this.setState({ isStarted: false }); } - this.setState({ progress: 1 }); - this.player.seek(0); if (!this.props.loop) { this.setState({ @@ -201,7 +198,15 @@ export default class VideoPlayer extends Component { } onToggleFullScreen() { - this.player.presentFullscreenPlayer(); + if(Platform.OS === "android") + { + var uri = this.props.video.uri; + NativeModules.BridgeActivity.showFullscreen(uri); + } + else + { + this.player.presentFullscreenPlayer(); + } } onSeekBarLayout({ nativeEvent }) { @@ -387,15 +392,13 @@ export default class VideoPlayer extends Component { /> )} - {(Platform.OS === 'android') ? null : ( - - - - )} + + + ); } From d8a1edf6832993b39f937e9486ca63fe3472648c Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 14:15:55 +0200 Subject: [PATCH 02/12] Update index.js --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 04440c5..adcd07c 100644 --- a/index.js +++ b/index.js @@ -201,7 +201,7 @@ export default class VideoPlayer extends Component { if(Platform.OS === "android") { var uri = this.props.video.uri; - NativeModules.BridgeActivity.showFullscreen(uri); + NativeModules.BridgeModule.showFullscreen(uri); } else { From 582dba16380a5262a94a9232ed441ec92113587a Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 15:42:09 +0200 Subject: [PATCH 03/12] Update README.md --- README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2cb542c..766af9b 100644 --- a/README.md +++ b/README.md @@ -61,5 +61,32 @@ 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 + - [X] Add fullscreen button for android - [ ] Add loader + +## 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 getPackages() { + return Arrays.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: + ``` + + ``` + +And then your fullscreen should be working and ready to go! From 8198002769fb47497bfa1a9a1dc1c5e854d38713 Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 15:54:12 +0200 Subject: [PATCH 04/12] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 766af9b..fc685e4 100644 --- a/README.md +++ b/README.md @@ -88,5 +88,6 @@ Make a folder in your ```android\app\src\main\res``` directory and name it ```la 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 And then your fullscreen should be working and ready to go! + From bc255de5e37530ce5dd74ee0373785b79a347d7c Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 15:54:32 +0200 Subject: [PATCH 05/12] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fc685e4..e06a365 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,9 @@ Make a folder in your ```android\app\src\main\res``` directory and name it ```la 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 remove the action bar, change your theme or change the theme for your activity from the manifest + And then your fullscreen should be working and ready to go! From c9216e1ac7dcba10a2cb7c5b231211d9b2ee45d1 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 18 Jul 2017 15:57:25 +0200 Subject: [PATCH 06/12] Files for fullscreen --- android/app/src/main/java/BridgeModule.java | 28 ++++++++ android/app/src/main/java/BridgePackage.java | 36 ++++++++++ android/app/src/main/java/VideoActivity.java | 67 +++++++++++++++++++ .../src/main/res/layout/player_fullscreen.xml | 18 +++++ 4 files changed, 149 insertions(+) create mode 100644 android/app/src/main/java/BridgeModule.java create mode 100644 android/app/src/main/java/BridgePackage.java create mode 100644 android/app/src/main/java/VideoActivity.java create mode 100644 android/app/src/main/res/layout/player_fullscreen.xml diff --git a/android/app/src/main/java/BridgeModule.java b/android/app/src/main/java/BridgeModule.java new file mode 100644 index 0000000..73689a8 --- /dev/null +++ b/android/app/src/main/java/BridgeModule.java @@ -0,0 +1,28 @@ +package se.mralbert.albert2; + +import android.content.Context; +import android.content.Intent; + +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; + +public class BridgeModule extends ReactContextBaseJavaModule{ + public BridgeModule(ReactApplicationContext reactContext) { + super(reactContext); + } + + @Override + public String getName() { + return "BridgeModule"; + } + @ReactMethod + public void showFullscreen(String videoUri) { + Context context = getReactApplicationContext(); + Intent intent = new Intent(context, VideoActivity.class); // mContext got from your overriden constructor + intent.putExtra("VIDEO_URL",videoUri); + getCurrentActivity().startActivity(intent); + } +} diff --git a/android/app/src/main/java/BridgePackage.java b/android/app/src/main/java/BridgePackage.java new file mode 100644 index 0000000..e13f89c --- /dev/null +++ b/android/app/src/main/java/BridgePackage.java @@ -0,0 +1,36 @@ +package se.mralbert.albert2; + + +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 { + + @Override + public List> createJSModules() { + return Collections.emptyList(); + } + + @Override + public List createViewManagers(ReactApplicationContext reactContext) { + return Collections.emptyList(); + } + + @Override + public List createNativeModules( + ReactApplicationContext reactContext) { + List modules = new ArrayList<>(); + + modules.add(new BridgeModule(reactContext)); + + return modules; + } + +} diff --git a/android/app/src/main/java/VideoActivity.java b/android/app/src/main/java/VideoActivity.java new file mode 100644 index 0000000..f5e6040 --- /dev/null +++ b/android/app/src/main/java/VideoActivity.java @@ -0,0 +1,67 @@ +package se.mralbert.albert2; + +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.util.Log; +import android.widget.MediaController; +import android.widget.Toast; +import android.widget.VideoView; + +public class VideoActivity extends AppCompatActivity { + private String videoPath; + + private static ProgressDialog progressDialog; + 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){ + myVideoView = (VideoView) findViewById(R.id.videoView); + videoPath = i.getStringExtra("VIDEO_URL"); + progressDialog = ProgressDialog.show(VideoActivity.this, "", "Buffering video...", true); + progressDialog.setCancelable(true); + PlayVideo(); + } + else{ + Toast.makeText(VideoActivity.this, "VideoURL not found", Toast.LENGTH_SHORT).show(); + } + + + } + + private void PlayVideo() { + try { + getWindow().setFormat(PixelFormat.TRANSLUCENT); + MediaController mediaController = new MediaController(VideoActivity.this); + mediaController.setAnchorView(myVideoView); + + Uri video = Uri.parse(videoPath); + myVideoView.setMediaController(mediaController); + myVideoView.setVideoURI(video); + myVideoView.requestFocus(); + myVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { + public void onPrepared(MediaPlayer mp) { + progressDialog.dismiss(); + myVideoView.start(); + } + }); + + + } catch (Exception e) { + progressDialog.dismiss(); + System.out.println("Video Play Error :" + e.toString()); + finish(); + } + + } +} diff --git a/android/app/src/main/res/layout/player_fullscreen.xml b/android/app/src/main/res/layout/player_fullscreen.xml new file mode 100644 index 0000000..fbff166 --- /dev/null +++ b/android/app/src/main/res/layout/player_fullscreen.xml @@ -0,0 +1,18 @@ + + + + + From 28267f5c16e94edb643e0d2be5da9ff07feb0227 Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 16:01:03 +0200 Subject: [PATCH 07/12] Update BridgeModule.java --- android/app/src/main/java/BridgeModule.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/app/src/main/java/BridgeModule.java b/android/app/src/main/java/BridgeModule.java index 73689a8..e686202 100644 --- a/android/app/src/main/java/BridgeModule.java +++ b/android/app/src/main/java/BridgeModule.java @@ -1,4 +1,4 @@ -package se.mralbert.albert2; +package com.my.package; import android.content.Context; import android.content.Intent; From d8a12a888ec3eab945bec92a49afddf3415fcbfb Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 16:01:21 +0200 Subject: [PATCH 08/12] Update BridgePackage.java --- android/app/src/main/java/BridgePackage.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/app/src/main/java/BridgePackage.java b/android/app/src/main/java/BridgePackage.java index e13f89c..00d0a2d 100644 --- a/android/app/src/main/java/BridgePackage.java +++ b/android/app/src/main/java/BridgePackage.java @@ -1,4 +1,4 @@ -package se.mralbert.albert2; +package com.my.package; import com.facebook.react.ReactPackage; From fac09c24a9b8ac5295c11fe2864df922d3906fa5 Mon Sep 17 00:00:00 2001 From: Shariq Musharaf Date: Tue, 18 Jul 2017 16:01:43 +0200 Subject: [PATCH 09/12] Update VideoActivity.java --- android/app/src/main/java/VideoActivity.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/app/src/main/java/VideoActivity.java b/android/app/src/main/java/VideoActivity.java index f5e6040..d276483 100644 --- a/android/app/src/main/java/VideoActivity.java +++ b/android/app/src/main/java/VideoActivity.java @@ -1,4 +1,4 @@ -package se.mralbert.albert2; +package com.my.package; import android.app.ProgressDialog; import android.content.Intent; From 84ce1a96568aed2d9b38057de6641dde1d026164 Mon Sep 17 00:00:00 2001 From: bebbe Date: Thu, 10 Aug 2017 16:12:47 +0200 Subject: [PATCH 10/12] Fixed error on Android Nougat --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index adcd07c..b3da2b6 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ const styles = StyleSheet.create({ playArrow: { color: 'white', }, - video: { + video: Platform.Version === 25 ? {} : { backgroundColor: 'black', }, controls: { From 39ca8acacf5e566cf250ae094a0bef9c9cfe30bd Mon Sep 17 00:00:00 2001 From: Sundin Date: Thu, 17 Aug 2017 14:45:40 +0200 Subject: [PATCH 11/12] Update index.js --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index b3da2b6..e5ed141 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ const styles = StyleSheet.create({ playArrow: { color: 'white', }, - video: Platform.Version === 25 ? {} : { + video: Platform.Version >= 24 ? {} : { backgroundColor: 'black', }, controls: { From 42412a35fe915e8234cbf312aa1244b7c6ea3ec4 Mon Sep 17 00:00:00 2001 From: Johan Date: Tue, 17 Oct 2017 16:00:07 +0200 Subject: [PATCH 12/12] Callbacks on start/play Made a stop function --- index.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/index.js b/index.js index e5ed141..ff1afe7 100644 --- a/index.js +++ b/index.js @@ -82,6 +82,9 @@ const styles = StyleSheet.create({ }); export default class VideoPlayer extends Component { + + + constructor(props) { super(props); @@ -129,6 +132,14 @@ export default class VideoPlayer extends Component { } } + stop() { + //console.log('this in the video', this); + //this.player.seek(0); + this.setState({ + isPlaying: false, + }); + } + onLayout(event) { const { width } = event.nativeEvent.layout; this.setState({ @@ -143,6 +154,9 @@ export default class VideoPlayer extends Component { }); this.hideControls(); + if(this.props.onStartPress){ + this.props.onStartPress(this); + }; } onProgress(event) { @@ -184,10 +198,14 @@ export default class VideoPlayer extends Component { } onPlayPress() { + console.log('onPlayPress :: videoComponent') this.setState({ isPlaying: !this.state.isPlaying, }); this.showControls(); + if(this.props.onPlayPress){ + this.props.onPlayPress(); + }; } onMutePress() {