From 6dc2cb968f0e2c10bd2bd31dadad6443ce6acf78 Mon Sep 17 00:00:00 2001 From: Kyle Corbitt Date: Wed, 10 Feb 2016 11:39:54 +0000 Subject: [PATCH] examples working on android/ios again --- Examples/VideoPlayer/.flowconfig | 30 ++++--- Examples/VideoPlayer/.gitignore | 38 +++++++- Examples/VideoPlayer/android/app/build.gradle | 45 +++++++++- .../android/app/proguard-rules.pro | 7 ++ Examples/VideoPlayer/android/app/react.gradle | 23 ++++- .../java/com/videoplayer/MainActivity.java | 89 ++++++------------- Examples/VideoPlayer/android/settings.gradle | 2 + Examples/VideoPlayer/index.android.js | 62 +++++++------ Examples/VideoPlayer/index.ios.js | 87 +++++++++--------- Examples/VideoPlayer/package.json | 2 +- 10 files changed, 227 insertions(+), 158 deletions(-) diff --git a/Examples/VideoPlayer/.flowconfig b/Examples/VideoPlayer/.flowconfig index 8eadd339..245c23a0 100644 --- a/Examples/VideoPlayer/.flowconfig +++ b/Examples/VideoPlayer/.flowconfig @@ -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 diff --git a/Examples/VideoPlayer/.gitignore b/Examples/VideoPlayer/.gitignore index 52594ec7..54a65557 100644 --- a/Examples/VideoPlayer/.gitignore +++ b/Examples/VideoPlayer/.gitignore @@ -1,3 +1,37 @@ -node_modules/**/* VideoPlayer.xcodeproj/project.xcworkspace/**/* -VideoPlayer.xcodeproj/xcuserdata/**/* \ No newline at end of file +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 diff --git a/Examples/VideoPlayer/android/app/build.gradle b/Examples/VideoPlayer/android/app/build.gradle index 1c09ff66..2afbba5c 100644 --- a/Examples/VideoPlayer/android/app/build.gradle +++ b/Examples/VideoPlayer/android/app/build.gradle @@ -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.+" } diff --git a/Examples/VideoPlayer/android/app/proguard-rules.pro b/Examples/VideoPlayer/android/app/proguard-rules.pro index ffa8c9f6..35840261 100644 --- a/Examples/VideoPlayer/android/app/proguard-rules.pro +++ b/Examples/VideoPlayer/android/app/proguard-rules.pro @@ -40,10 +40,13 @@ -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } -keep class * extends com.facebook.react.bridge.NativeModule { *; } +-keepclassmembers,includedescriptorclasses class * { native ; } -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } -keepclassmembers class * { @com.facebook.react.uimanager.ReactProp ; } -keepclassmembers class * { @com.facebook.react.uimanager.ReactPropGroup ; } +-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.** diff --git a/Examples/VideoPlayer/android/app/react.gradle b/Examples/VideoPlayer/android/app/react.gradle index 1e08b00f..f2152d1f 100644 --- a/Examples/VideoPlayer/android/app/react.gradle +++ b/Examples/VideoPlayer/android/app/react.gradle @@ -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) + } diff --git a/Examples/VideoPlayer/android/app/src/main/java/com/videoplayer/MainActivity.java b/Examples/VideoPlayer/android/app/src/main/java/com/videoplayer/MainActivity.java index bb84c0e5..ba386ade 100644 --- a/Examples/VideoPlayer/android/app/src/main/java/com/videoplayer/MainActivity.java +++ b/Examples/VideoPlayer/android/app/src/main/java/com/videoplayer/MainActivity.java @@ -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 getPackages() { + return Arrays.asList( + new MainReactPackage(), + new ReactVideoPackage()); } } diff --git a/Examples/VideoPlayer/android/settings.gradle b/Examples/VideoPlayer/android/settings.gradle index 4c6aa278..941ffdb9 100644 --- a/Examples/VideoPlayer/android/settings.gradle +++ b/Examples/VideoPlayer/android/settings.gradle @@ -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') diff --git a/Examples/VideoPlayer/index.android.js b/Examples/VideoPlayer/index.android.js index c2533f28..21ee336a 100644 --- a/Examples/VideoPlayer/index.android.js +++ b/Examples/VideoPlayer/index.android.js @@ -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 ( { this.setState({rate: rate}) }}> @@ -49,10 +53,10 @@ var VideoPlayer = React.createClass({ ) - }, + } renderResizeModeControl(resizeMode) { - var isSelected = (this.state.resizeMode == resizeMode); + const isSelected = (this.state.resizeMode == resizeMode); return ( { this.setState({resizeMode: resizeMode}) }}> @@ -61,10 +65,10 @@ var VideoPlayer = React.createClass({ ) - }, + } renderVolumeControl(volume) { - var isSelected = (this.state.volume == volume); + const isSelected = (this.state.volume == volume); return ( { this.setState({volume: volume}) }}> @@ -73,11 +77,11 @@ var VideoPlayer = React.createClass({ ) - }, + } render() { - var flexCompleted = this.getCurrentTimePercentage() * 100; - var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; + const flexCompleted = this.getCurrentTimePercentage() * 100; + const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; return ( @@ -128,10 +132,10 @@ var VideoPlayer = React.createClass({ ); } -}); +} -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', diff --git a/Examples/VideoPlayer/index.ios.js b/Examples/VideoPlayer/index.ios.js index 3e97d984..66038f27 100644 --- a/Examples/VideoPlayer/index.ios.js +++ b/Examples/VideoPlayer/index.ios.js @@ -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 ( { this.setState({ controls: selectControls, @@ -56,10 +59,10 @@ var VideoPlayer = React.createClass({ ); - }, + } renderRateControl(rate) { - var isSelected = (this.state.rate == rate); + const isSelected = (this.state.rate == rate); return ( { this.setState({rate: rate}) }}> @@ -68,10 +71,10 @@ var VideoPlayer = React.createClass({ ) - }, + } renderResizeModeControl(resizeMode) { - var isSelected = (this.state.resizeMode == resizeMode); + const isSelected = (this.state.resizeMode == resizeMode); return ( { this.setState({resizeMode: resizeMode}) }}> @@ -80,10 +83,10 @@ var VideoPlayer = React.createClass({ ) - }, + } renderVolumeControl(volume) { - var isSelected = (this.state.volume == volume); + const isSelected = (this.state.volume == volume); return ( { this.setState({volume: volume}) }}> @@ -92,11 +95,11 @@ var VideoPlayer = React.createClass({ ) - }, + } renderCustomSkin() { - var flexCompleted = this.getCurrentTimePercentage() * 100; - var flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; + const flexCompleted = this.getCurrentTimePercentage() * 100; + const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; return ( @@ -151,10 +154,10 @@ var VideoPlayer = React.createClass({ ); - }, + } renderNativeSkin() { - var videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen; + const videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen; return ( @@ -202,16 +205,14 @@ var VideoPlayer = React.createClass({ ); - }, - + } + render() { return this.state.controls ? this.renderNativeSkin() : this.renderCustomSkin(); } - -}); +} - -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', diff --git a/Examples/VideoPlayer/package.json b/Examples/VideoPlayer/package.json index dbdedb9f..165c4d07 100644 --- a/Examples/VideoPlayer/package.json +++ b/Examples/VideoPlayer/package.json @@ -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": "../../" } }