Skip to content

Commit

Permalink
Add video backdrop
Browse files Browse the repository at this point in the history
Adds a looped video backdrop to app using react-native-video. Also in
this update:

- Fork react-native-video until TheWidlarzGroup/react-native-video/pull/35
- Update WebPack config to handle new module ES6/ES7 transpilation
- Add missing ignored module for roman01la/react-native-babel/pull/5
- Add AnyBar plug-in for Webpack
- Put project workspace under source control
- Update roadmap
  • Loading branch information
vhs committed May 13, 2015
1 parent 2cdd5b3 commit 2146917
Show file tree
Hide file tree
Showing 12 changed files with 88 additions and 19 deletions.
1 change: 0 additions & 1 deletion .gitignore
Expand Up @@ -20,7 +20,6 @@ DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# CocoaPods
#
Expand Down
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -13,6 +13,7 @@ Lumpen Radio is here. Almost...
- Show progress for initial connection
- Allow audio disruption for calls, etc.
- Provide on-air off-air user feedback
- Automatically reconnect if disconnected
- Indicate progress for long-running ops
- Icon long-press resets HTTP connection

Expand Down
34 changes: 34 additions & 0 deletions ReactNativeEs6Reflux.xcodeproj/project.pbxproj
Expand Up @@ -23,6 +23,8 @@
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
DDE725231B02BD1700AA769D /* libRCTVideo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = DDE725221B02BD0900AA769D /* libRCTVideo.a */; };
DDE7252F1B02C17100AA769D /* turntable-loop-1920x500-h264-512kbps-h264.mp4 in Resources */ = {isa = PBXBuildFile; fileRef = DDE7252E1B02C17100AA769D /* turntable-loop-1920x500-h264-512kbps-h264.mp4 */; };
DDF8C1BD1B012E4F0000C2B4 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = DDF8C1BA1B012E4F0000C2B4 /* AppDelegate.m */; };
DDF8C1BE1B012E4F0000C2B4 /* AudioManager.m in Sources */ = {isa = PBXBuildFile; fileRef = DDF8C1BC1B012E4F0000C2B4 /* AudioManager.m */; };
/* End PBXBuildFile section */
Expand Down Expand Up @@ -105,6 +107,13 @@
remoteGlobalIDString = 58B5119B1A9E6C1200147676;
remoteInfo = RCTText;
};
DDE725211B02BD0900AA769D /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = DDE7251D1B02BD0900AA769D /* RCTVideo.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 134814201AA4EA6300B7C361;
remoteInfo = RCTVideo;
};
/* End PBXContainerItemProxy section */

/* Begin PBXFileReference section */
Expand All @@ -131,6 +140,8 @@
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
DD3B4C341AFDC76C00BCD40D /* libPods-StreamingKit.a */ = {isa = PBXFileReference; lastKnownFileType = archive.ar; name = "libPods-StreamingKit.a"; path = "Pods/../build/Debug-iphoneos/libPods-StreamingKit.a"; sourceTree = "<group>"; };
DDE7251D1B02BD0900AA769D /* RCTVideo.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVideo.xcodeproj; path = "node_modules/react-native-video/RCTVideo.xcodeproj"; sourceTree = "<group>"; };
DDE7252E1B02C17100AA769D /* turntable-loop-1920x500-h264-512kbps-h264.mp4 */ = {isa = PBXFileReference; lastKnownFileType = file; name = "turntable-loop-1920x500-h264-512kbps-h264.mp4"; path = "src/assets/videos/turntable-loop-1920x500-h264-512kbps-h264.mp4"; sourceTree = "<group>"; };
DDF8C1B91B012E4F0000C2B4 /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
DDF8C1BA1B012E4F0000C2B4 /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
DDF8C1BB1B012E4F0000C2B4 /* AudioManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AudioManager.h; sourceTree = "<group>"; };
Expand All @@ -150,6 +161,7 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
DDE725231B02BD1700AA769D /* libRCTVideo.a in Frameworks */,
146834051AC3E58100842450 /* libReact.a in Frameworks */,
00481BE81AC0C86700671115 /* libRCTWebSocketDebugger.a in Frameworks */,
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
Expand Down Expand Up @@ -243,6 +255,7 @@
13B07FAE1A68108700A75B9A /* ReactNativeEs6Reflux */ = {
isa = PBXGroup;
children = (
DDE7252E1B02C17100AA769D /* turntable-loop-1920x500-h264-512kbps-h264.mp4 */,
DDF8C1AE1B012C320000C2B4 /* Helpers */,
008F07F21AC5B25A0029DE68 /* main.jsbundle */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
Expand Down Expand Up @@ -290,6 +303,7 @@
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
DDE7251D1B02BD0900AA769D /* RCTVideo.xcodeproj */,
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
146833FF1AC3E56700842450 /* React.xcodeproj */,
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
Expand Down Expand Up @@ -335,6 +349,14 @@
name = Products;
sourceTree = "<group>";
};
DDE7251E1B02BD0900AA769D /* Products */ = {
isa = PBXGroup;
children = (
DDE725221B02BD0900AA769D /* libRCTVideo.a */,
);
name = Products;
sourceTree = "<group>";
};
DDF8C1AE1B012C320000C2B4 /* Helpers */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -447,6 +469,10 @@
ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */;
ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
},
{
ProductGroup = DDE7251E1B02BD0900AA769D /* Products */;
ProjectRef = DDE7251D1B02BD0900AA769D /* RCTVideo.xcodeproj */;
},
{
ProductGroup = 00481BDC1AC0C7FA00671115 /* Products */;
ProjectRef = 00481BDB1AC0C7FA00671115 /* RCTWebSocketDebugger.xcodeproj */;
Expand Down Expand Up @@ -535,6 +561,13 @@
remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
DDE725221B02BD0900AA769D /* libRCTVideo.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libRCTVideo.a;
remoteRef = DDE725211B02BD0900AA769D /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */

/* Begin PBXResourcesBuildPhase section */
Expand All @@ -550,6 +583,7 @@
buildActionMask = 2147483647;
files = (
008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */,
DDE7252F1B02C17100AA769D /* turntable-loop-1920x500-h264-512kbps-h264.mp4 in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
Expand Down
2 changes: 1 addition & 1 deletion ignored-modules.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions package.json
Expand Up @@ -7,13 +7,17 @@
"webpack": "webpack --config webpack.config.js"
},
"dependencies": {
"react-native": "^0.4.2",
"react-native-video": "git://github.com/vhs/react-native-video.git#53b71d8533d45ace842100d6e88e5b6d24fc71d3",
"reflux": "^0.2.7"
},
"devDependencies": {
"anybar-webpack": "^1.0.7",
"babel-core": "^5.1.8",
"babel-loader": "^5.0.0",
"babel-runtime": "^5.1.8",
"eslint": "^0.19.0",
"eslint-plugin-react": "^2.2.0",
"react-native": "^0.4.0",
"reflux": "^0.2.7",
"webpack": "^1.8.4"
}
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added src/assets/videos/turntable-loop-poster.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion src/components/app.jsx
Expand Up @@ -5,7 +5,8 @@ import Actions from '../actions';
import Messages from '../stores/messages';
import styles from '../styles';

import { AudioPlayer } from '../lib/audio'
import { AudioPlayer } from '../lib/audio';
import Video from 'react-native-video';

let {
View,
Expand Down Expand Up @@ -48,6 +49,16 @@ let App = React.createClass({

return (
<View style={styles.appContainer}>
<TouchableOpacity>
<Video source={{uri: 'turntable-loop-1920x500-h264-512kbps-h264'}}
style={styles.backgroundVideo}
rate={1} // use this.state.rate etc for the rest
muted={true}
resizeMode='cover'
repeat={true}
/>
</TouchableOpacity>

<Text style={[styles.appMessage, styles.appSubMessage]}>
Tap the icon below to start playing Lumpen Radio.
</Text>
Expand Down
15 changes: 13 additions & 2 deletions src/styles.es6
Expand Up @@ -15,19 +15,30 @@ let Styles = StyleSheet.create({
height: 300,
marginTop: 20,
marginBottom: 20,
borderRadius: 14
borderRadius: 14,
opacity: 0.7
},

appMessage: {
fontSize: 20,
color: "black",
fontFamily: "Avenir-Medium",
alignSelf: "center"
alignSelf: "center",
opacity: 0.7,
padding: 5
},

appSubMessage: {
fontSize: 14,
opacity: 0.7
},

backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});

Expand Down
33 changes: 21 additions & 12 deletions webpack.config.js
@@ -1,28 +1,37 @@
// Based almost entirely on the configuration included with
// Based on the configuration included with
// https://github.com/roman01la/react-native-babel
// by Roman Liutikov

var webpack = require("webpack");
var path = require("path");
var webpack = require('webpack');
var path = require('path');
var AnyBarWebpackPlugin = require('anybar-webpack');

module.exports = {
watch: true,
entry: path.join(__dirname, "/src/main.es6"),
externals: [require("./ignored-modules")],
entry: path.join(__dirname, '/src/main.es6'),
module: {
loaders: [
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
loaders: ["babel-loader?optional=runtime"]
loaders: ['babel-loader?optional=runtime']
},
{
test: /\.js$/,
include: /node_modules\/react-native-video/,
loaders: ['babel-loader?optional=es7.objectRestSpread']
}
]
},
plugins: [new webpack.NoErrorsPlugin()],
resolve: { extensions: ["", ".js", ".jsx", ".es6"] },
output: {
path: path.join(__dirname, "/"),
filename: "index.ios.js",
libraryTarget: "commonjs"
}
path: path.join(__dirname, '/'),
filename: 'index.ios.js',
libraryTarget: 'commonjs'
},
externals: [require('./ignored-modules')],
resolve: { extensions: ['', '.js', '.jsx', '.es6'] },
plugins: [
new webpack.NoErrorsPlugin(),
new AnyBarWebpackPlugin()
],
};

0 comments on commit 2146917

Please sign in to comment.