From 3b6671c4c728a2bf67757b6937ddd248cc59ced6 Mon Sep 17 00:00:00 2001 From: Baris Sencan Date: Sun, 31 Jan 2016 19:35:18 -0800 Subject: [PATCH] Example fix, test script, and some refactoring - The test script just does an eslint check. (Closes #121) - Refactored JS code to pass the check. - Fixed VideoPlayer example. (Closes #117) - Updated package.json to use local react-native-video in a simple manner. - Added shared scheme for target. - Updated poject settings. - Now using react-native 0.18.1. --- .eslintrc | 4 + .../VideoPlayer.xcodeproj/project.pbxproj | 7 +- .../xcschemes/VideoPlayer.xcscheme | 91 +++++++++++++++++++ Examples/VideoPlayer/iOS/Info.plist | 6 +- Examples/VideoPlayer/package.json | 9 +- RCTVideo.xcodeproj/project.pbxproj | 3 +- Video.js | 58 +++++++----- VideoResizeMode.js | 8 +- package.json | 11 ++- 9 files changed, 156 insertions(+), 41 deletions(-) create mode 100644 .eslintrc create mode 100644 Examples/VideoPlayer/VideoPlayer.xcodeproj/xcshareddata/xcschemes/VideoPlayer.xcscheme diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..949fb3c7 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,4 @@ +{ + "extends": "airbnb", + "parser": "babel-eslint" +} diff --git a/Examples/VideoPlayer/VideoPlayer.xcodeproj/project.pbxproj b/Examples/VideoPlayer/VideoPlayer.xcodeproj/project.pbxproj index 2a8de0fc..f40c2d81 100644 --- a/Examples/VideoPlayer/VideoPlayer.xcodeproj/project.pbxproj +++ b/Examples/VideoPlayer/VideoPlayer.xcodeproj/project.pbxproj @@ -302,7 +302,7 @@ 83CBB9F71A601CBA00E9B192 /* Project object */ = { isa = PBXProject; attributes = { - LastUpgradeCheck = 0610; + LastUpgradeCheck = 0720; ORGANIZATIONNAME = Facebook; }; buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "VideoPlayer" */; @@ -487,8 +487,10 @@ "$(SRCROOT)/node_modules/react-native/React/**", ); INFOPLIST_FILE = "$(SRCROOT)/iOS/Info.plist"; + IPHONEOS_DEPLOYMENT_TARGET = 8.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; OTHER_LDFLAGS = "-ObjC"; + PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = VideoPlayer; }; name = Debug; @@ -503,8 +505,10 @@ "$(SRCROOT)/node_modules/react-native/React/**", ); INFOPLIST_FILE = "$(SRCROOT)/iOS/Info.plist"; + IPHONEOS_DEPLOYMENT_TARGET = 8.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; OTHER_LDFLAGS = "-ObjC"; + PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; PRODUCT_NAME = VideoPlayer; }; name = Release; @@ -529,6 +533,7 @@ "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; + ENABLE_TESTABILITY = YES; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_OPTIMIZATION_LEVEL = 0; diff --git a/Examples/VideoPlayer/VideoPlayer.xcodeproj/xcshareddata/xcschemes/VideoPlayer.xcscheme b/Examples/VideoPlayer/VideoPlayer.xcodeproj/xcshareddata/xcschemes/VideoPlayer.xcscheme new file mode 100644 index 00000000..a328632b --- /dev/null +++ b/Examples/VideoPlayer/VideoPlayer.xcodeproj/xcshareddata/xcschemes/VideoPlayer.xcscheme @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Examples/VideoPlayer/iOS/Info.plist b/Examples/VideoPlayer/iOS/Info.plist index e4b8e7c8..45532a3a 100644 --- a/Examples/VideoPlayer/iOS/Info.plist +++ b/Examples/VideoPlayer/iOS/Info.plist @@ -7,7 +7,7 @@ CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier - org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) + $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName @@ -15,11 +15,11 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.0 + 1.0.0 CFBundleSignature ???? CFBundleVersion - 1 + 2 LSApplicationCategoryType LSRequiresIPhoneOS diff --git a/Examples/VideoPlayer/package.json b/Examples/VideoPlayer/package.json index 6be7c953..dbdedb9f 100644 --- a/Examples/VideoPlayer/package.json +++ b/Examples/VideoPlayer/package.json @@ -1,15 +1,12 @@ { "name": "VideoPlayer", - "version": "0.0.1", + "version": "1.0.0", "private": true, "scripts": { "start": "node_modules/react-native/packager/packager.sh" }, - "scripts": { - "postinstall" : "cp ../../*.js ../../*.m ../../*.h ../../README.md ../../package.json ./node_modules/react-native-video && cp ../../RCTVideo.xcodeproj/project.pbxproj ./node_modules/react-native-video/RCTVideo.xcodeproj/project.pbxproj" - }, "dependencies": { - "react-native": "^0.16.0", - "react-native-video": "brentvatne/react-native-video" + "react-native": "0.18.1", + "react-native-video": "../../" } } diff --git a/RCTVideo.xcodeproj/project.pbxproj b/RCTVideo.xcodeproj/project.pbxproj index 8eda4458..9a65aa45 100644 --- a/RCTVideo.xcodeproj/project.pbxproj +++ b/RCTVideo.xcodeproj/project.pbxproj @@ -87,7 +87,7 @@ 58B511D31A9E6C8500147676 /* Project object */ = { isa = PBXProject; attributes = { - LastUpgradeCheck = 0610; + LastUpgradeCheck = 0720; ORGANIZATIONNAME = Facebook; TargetAttributes = { 58B511DA1A9E6C8500147676 = { @@ -144,6 +144,7 @@ CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; COPY_PHASE_STRIP = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; + ENABLE_TESTABILITY = YES; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_OPTIMIZATION_LEVEL = 0; diff --git a/Video.js b/Video.js index 67978988..7e6f2840 100644 --- a/Video.js +++ b/Video.js @@ -1,4 +1,6 @@ -const React = require('react-native'); +import React from 'react-native'; +import VideoResizeMode from './VideoResizeMode.js'; + const { Component, StyleSheet, @@ -8,19 +10,18 @@ const { View, } = React; -const VideoResizeMode = require('./VideoResizeMode'); - const styles = StyleSheet.create({ base: { overflow: 'hidden', }, }); -class Video extends Component { +export default class Video extends Component { constructor(props, context) { super(props, context); this.seek = this.seek.bind(this); + this._assignRoot = this._assignRoot.bind(this); this._onLoadStart = this._onLoadStart.bind(this); this._onLoad = this._onLoad.bind(this); this._onError = this._onError.bind(this); @@ -34,44 +35,58 @@ class Video extends Component { } seek(time) { - this.setNativeProps({ seek: parseFloat(time) }); + this.setNativeProps({ seek: time }); + } + + _assignRoot(component) { + this._root = component; } _onLoadStart(event) { - this.props.onLoadStart && this.props.onLoadStart(event.nativeEvent); + if (this.props.onLoadStart) { + this.props.onLoadStart(event.nativeEvent); + } } _onLoad(event) { - this.props.onLoad && this.props.onLoad(event.nativeEvent); + if (this.props.onLoad) { + this.props.onLoad(event.nativeEvent); + } } _onError(event) { - this.props.onError && this.props.onError(event.nativeEvent); + if (this.props.onError) { + this.props.onError(event.nativeEvent); + } } _onProgress(event) { - this.props.onProgress && this.props.onProgress(event.nativeEvent); + if (this.props.onProgress) { + this.props.onProgress(event.nativeEvent); + } } _onSeek(event) { - this.props.onSeek && this.props.onSeek(event.nativeEvent); + if (this.props.onSeek) { + this.props.onSeek(event.nativeEvent); + } } _onEnd(event) { - this.props.onEnd && this.props.onEnd(event.nativeEvent); + if (this.props.onEnd) { + this.props.onEnd(event.nativeEvent); + } } render() { const { - style, source, - ref, resizeMode, } = this.props; let uri = source.uri; if (uri && uri.match(/^\//)) { - uri = 'file://' + uri; + uri = `file://${uri}`; } const isNetwork = !!(uri && uri.match(/^https?:/)); @@ -90,10 +105,10 @@ class Video extends Component { const nativeProps = Object.assign({}, this.props); Object.assign(nativeProps, { - style: [styles.base, style], + style: [styles.base, nativeProps.style], resizeMode: nativeResizeMode, src: { - uri: uri, + uri, isNetwork, isAsset, type: source.type || 'mp4', @@ -108,8 +123,9 @@ class Video extends Component { return ( this._root = component } - {...nativeProps} /> + ref={this._assignRoot} + {...nativeProps} + /> ); } } @@ -135,7 +151,7 @@ Video.propTypes = { onProgress: PropTypes.func, onSeek: PropTypes.func, onEnd: PropTypes.func, - + /* Required by react-native */ scaleX: React.PropTypes.number, scaleY: React.PropTypes.number, @@ -148,8 +164,6 @@ Video.propTypes = { const RCTVideo = requireNativeComponent('RCTVideo', Video, { nativeOnly: { src: true, - seek: true + seek: true, }, }); - -module.exports = Video; diff --git a/VideoResizeMode.js b/VideoResizeMode.js index 9d563fc5..15a89773 100644 --- a/VideoResizeMode.js +++ b/VideoResizeMode.js @@ -1,11 +1,7 @@ -'use strict'; +import keyMirror from 'keymirror'; -var keyMirror = require('keymirror'); - -var VideoResizeMode = keyMirror({ +export default keyMirror({ contain: null, cover: null, stretch: null, }); - -module.exports = VideoResizeMode; diff --git a/package.json b/package.json index c9592151..cb13474f 100644 --- a/package.json +++ b/package.json @@ -36,9 +36,16 @@ "url": "git@github.com:brentvatne/react-native-video.git" }, "devDependencies": { - "jest-cli": "0.2.1" + "jest-cli": "0.2.1", + "eslint": "1.10.3", + "babel-eslint": "5.0.0-beta8", + "eslint-plugin-react": "3.16.1", + "eslint-config-airbnb": "4.0.0" }, "dependencies": { - "keymirror": "^0.1.1" + "keymirror": "0.1.1" + }, + "scripts": { + "test": "node_modules/.bin/eslint *.js" } }