railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #149 from corbt/master

Browse Source 
Examples working on android/ios again
This commit is contained in:
Baris Sencan 2016-02-10 12:58:02 -08:00
commit 6f08e68b8e
10 changed files with 227 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Examples/VideoPlayer/.flowconfig
View File

@ -14,17 +14,19 @@
# Ignore react and fbjs where there are overlaps, but don't ignore
# anything that react-native relies on
.*/node_modules/fbjs-haste/.*/__tests__/.*
.*/node_modules/fbjs-haste/__forks__/Map.js
.*/node_modules/fbjs-haste/__forks__/Promise.js
.*/node_modules/fbjs-haste/__forks__/fetch.js
.*/node_modules/fbjs-haste/core/ExecutionEnvironment.js
.*/node_modules/fbjs-haste/core/isEmpty.js
.*/node_modules/fbjs-haste/crypto/crc32.js
.*/node_modules/fbjs-haste/stubs/ErrorUtils.js
.*/node_modules/react-haste/React.js
.*/node_modules/react-haste/renderers/dom/ReactDOM.js
.*/node_modules/react-haste/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
.*/node_modules/fbjs/lib/Map.js
.*/node_modules/fbjs/lib/Promise.js
.*/node_modules/fbjs/lib/fetch.js
.*/node_modules/fbjs/lib/ExecutionEnvironment.js
.*/node_modules/fbjs/lib/isEmpty.js
.*/node_modules/fbjs/lib/crc32.js
.*/node_modules/fbjs/lib/ErrorUtils.js
# Flow has a built-in definition for the 'react' module which we prefer to use
# over the currently-untyped source
.*/node_modules/react/react.js
.*/node_modules/react/lib/React.js
.*/node_modules/react/lib/ReactDOM.js
# Ignore commoner tests
.*/node_modules/commoner/test/.*
@ -55,9 +57,9 @@ suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
[version]
0.18.1
0.20.1

38
Examples/VideoPlayer/.gitignore vendored
View File

@ -1,3 +1,37 @@
node_modules/**/*
VideoPlayer.xcodeproj/project.xcworkspace/**/*
VideoPlayer.xcodeproj/xcuserdata/**/*
VideoPlayer.xcodeproj/xcuserdata/**/*
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# Android/IJ
#
.idea
.gradle
local.properties
# node.js
#
node_modules/
npm-debug.log

45
Examples/VideoPlayer/android/app/build.gradle
View File

@ -1,5 +1,7 @@
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets.
* These basically call `react-native bundle` with the correct arguments during the Android build
@ -49,6 +51,22 @@ apply plugin: "com.android.application"
apply from: "react.gradle"
/**
* Set this to true to create three separate APKs instead of one:
* - A universal APK that works on all devices
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
@ -63,17 +81,38 @@ android {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
enable enableSeparateBuildPerCPUArchitecture
universalApk true
reset()
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled false // Set this to true to enable Proguard
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
compile project(':react-native-video')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:0.16.+"
compile project(':RCTVideo')
compile "com.facebook.react:react-native:0.19.+"
}

7
Examples/VideoPlayer/android/app/proguard-rules.pro vendored
View File

@ -40,10 +40,13 @@
-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native <methods>; }
-keepclassmembers class * { @com.facebook.react.uimanager.UIProp <fields>; }
-keepclassmembers class * { @com.facebook.react.uimanager.ReactProp <methods>; }
-keepclassmembers class * { @com.facebook.react.uimanager.ReactPropGroup <methods>; }
-dontwarn com.facebook.react.**
# okhttp
-keepattributes Signature
@ -58,3 +61,7 @@
-dontwarn java.nio.file.*
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
-dontwarn okio.**
# stetho
-dontwarn com.facebook.stetho.**

23
Examples/VideoPlayer/android/app/react.gradle
View File

@ -74,14 +74,33 @@ task bundleReleaseJsAndAssets(type: Exec) {
enabled config.bundleInRelease ?: true
}
void runBefore(String dependentTaskName, Task task) {
Task dependentTask = tasks.findByPath(dependentTaskName);
if (dependentTask != null) {
dependentTask.dependsOn task
}
}
gradle.projectsEvaluated {
// hook bundleDebugJsAndAssets into the android build process
bundleDebugJsAndAssets.dependsOn mergeDebugResources
bundleDebugJsAndAssets.dependsOn mergeDebugAssets
processDebugResources.dependsOn bundleDebugJsAndAssets
runBefore('processArmeabi-v7aDebugResources', bundleDebugJsAndAssets)
runBefore('processX86DebugResources', bundleDebugJsAndAssets)
runBefore('processUniversalDebugResources', bundleDebugJsAndAssets)
runBefore('processDebugResources', bundleDebugJsAndAssets)
// hook bundleReleaseJsAndAssets into the android build process
bundleReleaseJsAndAssets.dependsOn mergeReleaseResources
bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets
processReleaseResources.dependsOn bundleReleaseJsAndAssets
runBefore('processArmeabi-v7aReleaseResources', bundleReleaseJsAndAssets)
runBefore('processX86ReleaseResources', bundleReleaseJsAndAssets)
runBefore('processUniversalReleaseResources', bundleReleaseJsAndAssets)
runBefore('processReleaseResources', bundleReleaseJsAndAssets)
}

89
Examples/VideoPlayer/android/app/src/main/java/com/videoplayer/MainActivity.java
View File

@ -1,80 +1,41 @@
package com.videoplayer;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.ReactActivity;
import com.brentvatne.react.ReactVideoPackage;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
import java.util.Arrays;
import java.util.List;
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactVideoPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "VideoPlayer", null);
setContentView(mReactRootView);
protected String getMainComponentName() {
return "VideoPlayer";
}
/**
* Returns whether dev mode should be enabled.
* This enables e.g. the dev menu.
*/
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onResume(this, this);
}
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactVideoPackage());
}
}

2
Examples/VideoPlayer/android/settings.gradle
View File

@ -1,5 +1,7 @@
rootProject.name = 'VideoPlayer'
include ':app'
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
include ':RCTVideo', ':app'
project(':RCTVideo').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

62
Examples/VideoPlayer/index.android.js
View File

@ -1,35 +1,39 @@
'use strict';
var React = require('react-native');
var {
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
} = React;
View,
} from 'react-native';
var Video = require('react-native-video');
import Video from 'react-native-video';
var VideoPlayer = React.createClass({
getInitialState() {
return {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
}
},
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
}
state = {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
};
onLoad(data) {
this.setState({duration: data.duration});
},
}
onProgress(data) {
this.setState({currentTime: data.currentTime});
},
}
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
@ -37,10 +41,10 @@ var VideoPlayer = React.createClass({
} else {
return 0;
}
},
}
renderRateControl(rate) {
var isSelected = (this.state.rate == rate);
const isSelected = (this.state.rate == rate);
return (
<TouchableOpacity onPress={() => { this.setState({rate: rate}) }}>
@ -49,10 +53,10 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
renderResizeModeControl(resizeMode) {
var isSelected = (this.state.resizeMode == resizeMode);
const isSelected = (this.state.resizeMode == resizeMode);
return (
<TouchableOpacity onPress={() => { this.setState({resizeMode: resizeMode}) }}>
@ -61,10 +65,10 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
renderVolumeControl(volume) {
var isSelected = (this.state.volume == volume);
const isSelected = (this.state.volume == volume);
return (
<TouchableOpacity onPress={() => { this.setState({volume: volume}) }}>
@ -73,11 +77,11 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
render() {
var flexCompleted = this.getCurrentTimePercentage() * 100;
var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
const flexCompleted = this.getCurrentTimePercentage() * 100;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
return (
<View style={styles.container}>
@ -128,10 +132,10 @@ var VideoPlayer = React.createClass({
</View>
);
}
});
}
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',

87
Examples/VideoPlayer/index.ios.js
View File

@ -1,39 +1,42 @@
'use strict';
var React = require('react-native');
var {
import React, {
AlertIOS,
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
AlertIOS,
} = React;
View,
} from 'react-native';
var Video = require('react-native-video');
var VideoPlayer = React.createClass({
getInitialState() {
return {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
controls: false,
paused: true,
skin: 'custom'
}
},
import Video from 'react-native-video';
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
}
state = {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
controls: false,
paused: true,
skin: 'custom'
};
onLoad(data) {
this.setState({duration: data.duration});
},
}
onProgress(data) {
this.setState({currentTime: data.currentTime});
},
}
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
@ -41,11 +44,11 @@ var VideoPlayer = React.createClass({
} else {
return 0;
}
},
}
renderSkinControl(skin) {
var isSelected = this.state.skin == skin;
var selectControls = skin == 'native' || skin == 'embed';
const isSelected = this.state.skin == skin;
const selectControls = skin == 'native' || skin == 'embed';
return (
<TouchableOpacity onPress={() => { this.setState({
controls: selectControls,
@ -56,10 +59,10 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
);
},
}
renderRateControl(rate) {
var isSelected = (this.state.rate == rate);
const isSelected = (this.state.rate == rate);
return (
<TouchableOpacity onPress={() => { this.setState({rate: rate}) }}>
@ -68,10 +71,10 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
renderResizeModeControl(resizeMode) {
var isSelected = (this.state.resizeMode == resizeMode);
const isSelected = (this.state.resizeMode == resizeMode);
return (
<TouchableOpacity onPress={() => { this.setState({resizeMode: resizeMode}) }}>
@ -80,10 +83,10 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
renderVolumeControl(volume) {
var isSelected = (this.state.volume == volume);
const isSelected = (this.state.volume == volume);
return (
<TouchableOpacity onPress={() => { this.setState({volume: volume}) }}>
@ -92,11 +95,11 @@ var VideoPlayer = React.createClass({
</Text>
</TouchableOpacity>
)
},
}
renderCustomSkin() {
var flexCompleted = this.getCurrentTimePercentage() * 100;
var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
const flexCompleted = this.getCurrentTimePercentage() * 100;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
return (
<View style={styles.container}>
@ -151,10 +154,10 @@ var VideoPlayer = React.createClass({
</View>
</View>
);
},
}
renderNativeSkin() {
var videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen;
const videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen;
return (
<View style={styles.container}>
<View style={styles.fullScreen}>
@ -202,16 +205,14 @@ var VideoPlayer = React.createClass({
</View>
);
},
}
render() {
return this.state.controls ? this.renderNativeSkin() : this.renderCustomSkin();
}
});
}
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',

2
Examples/VideoPlayer/package.json
View File

@ -6,7 +6,7 @@
"start": "node_modules/react-native/packager/packager.sh"
},
"dependencies": {
"react-native": "0.18.1",
"react-native": "^0.19.0",
"react-native-video": "../../"
}
}