update Travis build script

.travis.yml

@@ -12,7 +12,8 @@ install:
       - sudo pip install --upgrade cython==0.25.2 pip setuptools
       - git clone https://github.com/akinwale/buildozer.git
       - cd app
-      - npm install --silent
+      - npm install --silent --save react@16.2.0 react-native@0.52.0
+      - npm install
       - cd ..
       - cd buildozer
       - sudo python setup.py install
@@ -34,5 +35,5 @@ install:
       - mkdir -p ~/.buildozer/android/platform/android-sdk-23/licenses
       - echo $'\nd56f5187479451eabf01fb78af6dfcb131a6481e' > ~/.buildozer/android/platform/android-sdk-23/licenses/android-sdk-license
 script:
-      - buildozer android debug | grep -Fv -e 'working:' -e 'copy' --line-buffered
+      - ./build.sh | grep -Fv -e 'working:' -e 'copy' --line-buffered
       - cp bin/*.apk /dev/null

app/package-lock.json

@@ -3670,7 +3670,7 @@
             }
         },
         "lbry-redux": {
-            "version": "github:lbryio/lbry-redux#1501eaab48f0d5d2e2b5c92e195927e2f6e47ea2",
+            "version": "github:lbryio/lbry-redux#b081f465bb8ab0d7b178d194961f07976222fc9f",
             "requires": {
                 "amplitude-js": "4.1.0",
                 "bluebird": "3.5.1",

app/package.json

@@ -16,6 +16,8 @@
         "react-redux": "^5.0.3",
         "redux": "^3.6.0",
         "redux-persist": "^4.8.0",
+        "redux-persist-transform-compress": "^4.2.0",
+        "redux-persist-transform-filter": "0.0.10",
         "redux-thunk": "^2.2.0"
     }
 }

app/src/component/AppNavigator.js

@@ -1,46 +1,43 @@
 import React from 'react';
 import DiscoverPage from '../page/discover';
+import FilePage from '../page/file';
 import SplashScreen from '../page/splash';
 import { addNavigationHelpers, DrawerNavigator, StackNavigator } from 'react-navigation';
 import { connect } from 'react-redux';
 import { addListener } from '../utils/redux';
 import { StyleSheet } from 'react-native';
 import Feather from 'react-native-vector-icons/Feather';
-
-const styles = StyleSheet.create({
-  drawerHamburger: {
-    marginLeft: 8
-  }
-});
+import discoverStyle from '../styles/discover';
 
 const discoverStack = StackNavigator({
   Discover: {
     screen: DiscoverPage,
-  }
+    navigationOptions: ({ navigation }) => ({
+      title: 'Discover',
+      headerLeft: <Feather name="menu" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />
+    })
+  },
+  File: { screen: FilePage }
 }, {
-  headerMode: 'screen'
+  headerMode: 'screen',
 });
 
 const drawer = DrawerNavigator({
-  Discover: { screen: DiscoverPage },
+  Discover: { screen: discoverStack },
 }, {
   drawerWidth: 300,
-  headerMode: 'screen'
+  headerMode: 'none'
 });
 
 export const AppNavigator = new StackNavigator({
   Splash: {
-    screen: SplashScreen,
-    navigationOptions: { header: null }
+    screen: SplashScreen
   },
   Main: {
     screen: drawer
   }
 }, {
-  headerMode: 'screen',
-  navigationOptions: ({ navigation }) => ({
-    headerLeft: () => <Feather name="menu" size={24} style={styles.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />
-  })
+  headerMode: 'none'
 });
 
 class AppWithNavigationState extends React.Component {

app/src/component/featuredCategory/view.js

@@ -6,14 +6,18 @@ import discoverStyle from '../../styles/discover';
 
 class FeaturedCategory extends React.PureComponent {
   render() {
-    const { category, names, categoryLink } = this.props;
+    const { category, names, categoryLink, navigation } = this.props;
 
     return (
       <View>
         <Text style={discoverStyle.categoryName}>{category}</Text>
           {names &&
             names.map(name => (
-              <FileItem style={discoverStyle.fileItem} key={name} uri={normalizeURI(name)} />
+              <FileItem
+                style={discoverStyle.fileItem}
+                key={name}
+                uri={normalizeURI(name)}
+                navigation={navigation} />
             ))}
       </View>
     );

app/src/component/fileItem/view.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { normalizeURI } from 'lbry-redux';
-import { Text, View } from 'react-native';
+import { NavigationActions } from 'react-navigation';
+import { Text, View, TouchableOpacity } from 'react-native';
 import FileItemMedia from '../fileItemMedia';
 import FilePrice from '../filePrice';
 import discoverStyle from '../../styles/discover';
@@ -53,13 +54,16 @@ class FileItem extends React.PureComponent {
     }
     
     return (
-      <View style={style}>
+      <TouchableOpacity style={style} onPress={() => {
+            this.props.navigation.navigate('File', { uri: uri });
+          }
+        }>
         <FileItemMedia title={title} thumbnail={thumbnail} />
         <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
         <Text style={discoverStyle.fileItemName}>{title}</Text>
         {channelName &&
           <Text style={discoverStyle.channelName}>{channelName}</Text>}
-      </View>
+      </TouchableOpacity>
     );
   }
 }

app/src/component/fileItemMedia/view.js

@@ -27,14 +27,20 @@ class FileItemMedia extends React.PureComponent {
   }
 
   render() {
+    let style = this.props.style;
     const { title, thumbnail } = this.props;
     const atStyle = this.state.autoThumbStyle;
 
     if (thumbnail && ((typeof thumbnail) === 'string')) {
+      if (style == null) {
+        style = fileItemMediaStyle.thumbnail;
+      }
+      
       return (
-        <Image source={{uri: thumbnail }} resizeMode="cover" style={fileItemMediaStyle.thumbnail} />
-      )
+        <Image source={{uri: thumbnail}} resizeMode="cover" style={style} />
+      );
     }
+        
     return (
       <View style={[fileItemMediaStyle.autothumb, atStyle]}>
         <Text style={fileItemMediaStyle.autothumbText}>{title &&

app/src/component/filePrice/view.js

@@ -42,7 +42,7 @@ class CreditAmount extends React.PureComponent {
 
     let amountText;
     if (this.props.showFree && parseFloat(this.props.amount) === 0) {
-      amountText = 'free';
+      amountText = 'FREE';
     } else {
       if (this.props.label) {
         const label =

app/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider, connect } from 'react-redux';
 import DiscoverPage from './page/discover';
-import { AppRegistry, StyleSheet, Text, View } from 'react-native';
+import { AppRegistry, StyleSheet, Text, View, AsyncStorage } from 'react-native';
 import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import {
   StackNavigator, addNavigationHelpers
@@ -9,6 +9,8 @@ import {
 import { AppNavigator } from './component/AppNavigator';
 import AppWithNavigationState from './component/AppNavigator';
 import { persistStore, autoRehydrate } from 'redux-persist';
+import createCompressor from 'redux-persist-transform-compress';
+import createFilter from 'redux-persist-transform-filter';
 import thunk from 'redux-thunk';
 import {
   Lbry,
@@ -75,13 +77,29 @@ const store = createStore(
   enableBatching(reducers),
   {}, // initial state,
   composeEnhancers(
-    /*autoRehydrate({
-      log: app.env === 'development',
-    }),*/
+    autoRehydrate(),
     applyMiddleware(...middleware)
   )
 );
 
+const compressor = createCompressor();
+const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']);
+const subscriptionsFilter = createFilter('subscriptions', ['subscriptions']);
+
+const persistOptions = {
+  whitelist: ['claims', 'subscriptions'],
+  // Order is important. Needs to be compressed last or other transforms can't
+  // read the data
+  transforms: [saveClaimsFilter, subscriptionsFilter, compressor],
+  debounce: 10000,
+  storage: AsyncStorage
+};
+
+persistStore(store, persistOptions, err => {
+  if (err) {
+    console.log('Unable to load saved SETTINGS');
+  }
+});
 
 class LBRYApp extends React.Component {
   render() {

app/src/page/discover/view.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import FeaturedCategory from '../../component/featuredCategory';
+import NavigationActions from 'react-navigation';
 import { Text, View, ScrollView } from 'react-native';
 import discoverStyle from '../../styles/discover';
+import Feather from 'react-native-vector-icons/Feather';
 
 class DiscoverPage extends React.PureComponent {
-  static navigationOptions = {
-    title: 'Discover'
-  };
-  
   componentWillMount() {
     this.props.fetchFeaturedUris();
   }
@@ -30,6 +28,7 @@ class DiscoverPage extends React.PureComponent {
                       key={category}
                       category={category}
                       names={featuredUris[category]}
+                      navigation={this.props.navigation}
                     />
                 ) : (
                   ''

app/src/page/file/index.js

@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import {
+  doFetchFileInfo,
+  makeSelectFileInfoForUri,
+  doFetchCostInfoForUri,
+  makeSelectClaimForUri,
+  makeSelectContentTypeForUri,
+  makeSelectMetadataForUri,
+  selectRewardContentClaimIds,
+  makeSelectCostInfoForUri
+} from 'lbry-redux';
+//import { selectShowNsfw } from 'redux/selectors/settings';
+import FilePage from './view';
+
+const select = (state, props) => {
+  const selectProps = { uri: props.navigation.state.params.uri };
+  return {
+    claim: makeSelectClaimForUri(selectProps.uri)(state),
+    contentType: makeSelectContentTypeForUri(selectProps.uri)(state),
+    costInfo: makeSelectCostInfoForUri(selectProps.uri)(state),
+    metadata: makeSelectMetadataForUri(selectProps.uri)(state),
+    //obscureNsfw: !selectShowNsfw(state),
+    //tab: makeSelectCurrentParam('tab')(state),
+    fileInfo: makeSelectFileInfoForUri(selectProps.uri)(state),
+    rewardedContentClaimIds: selectRewardContentClaimIds(state, selectProps),
+  };
+};
+
+const perform = dispatch => ({
+  fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
+  fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
+});
+
+export default connect(select, perform)(FilePage);

app/src/page/file/view.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Text, View, ScrollView } from 'react-native';
+import filePageStyle from '../../styles/filePage';
+import FileItemMedia from '../../component/fileItemMedia';
+
+class FilePage extends React.PureComponent {
+  static navigationOptions = {
+    title: ''
+  };
+    
+  componentDidMount() {
+    this.fetchFileInfo(this.props);
+    this.fetchCostInfo(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.fetchFileInfo(nextProps);
+  }
+
+  fetchFileInfo(props) {
+    if (props.fileInfo === undefined) {
+      props.fetchFileInfo(props.navigation.state.params.uri);
+    }
+  }
+
+  fetchCostInfo(props) {
+    if (props.costInfo === undefined) {
+      props.fetchCostInfo(props.navigation.state.params.uri);
+    }
+  }
+
+  render() {
+    const {
+      claim,
+      fileInfo,
+      metadata,
+      contentType,
+      tab,
+      uri,
+      rewardedContentClaimIds,
+    } = this.props;
+    
+    if (!claim || !metadata) {
+      return (
+        <View style={filePageStyle.container}>
+          <Text style={filePageStyle.emptyClaimText}>Empty claim or metadata info.</Text>
+        </View>
+      );
+    }
+    
+    const title = metadata.title;
+    const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
+    const description = metadata.description ? metadata.description : null;
+    //const mediaType = lbry.getMediaType(contentType);
+    //const player = require('render-media');
+    //const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
+    /*const isPlayable =
+      Object.values(player.mime).indexOf(contentType) !== -1 || mediaType === 'audio';*/
+    const { height, channel_name: channelName, value } = claim;
+    const channelClaimId =
+      value && value.publisherSignature && value.publisherSignature.certificateId;
+    
+    
+    return (
+      <View style={filePageStyle.pageContainer}>
+        <View>
+          <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />
+        </View>
+        <ScrollView style={filePageStyle.scrollContainer}>
+          <Text style={filePageStyle.title}>{title}</Text>
+          {channelName && <Text style={filePageStyle.channelName}>{channelName}</Text>}
+          {description && <Text style={filePageStyle.description}>{description}</Text>}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default FilePage;

app/src/styles/discover.js

@@ -33,20 +33,27 @@ const discoverStyle = StyleSheet.create({
   channelName: {
     fontSize: 14,
     marginTop: 4,
-    color: '#888888'
+    color: '#c0c0c0',
+    fontWeight: 'bold'
   },
   filePriceContainer: {
-    backgroundColor: '#60f9d6',
+    backgroundColor: '#61fcd8',
     justifyContent: 'center',
     position: 'absolute',
     right: 16,
     top: 16,
-    width: 64,
-    height: 24
+    width: 56,
+    height: 24,
+    borderRadius: 4 
   },
   filePriceText: {
-    fontSize: 11,
-    textAlign: 'center'
+    fontSize: 12,
+    textAlign: 'center',
+    color: '#0c604b',
+    fontWeight: 'bold'
+  },
+  drawerHamburger: {
+    marginLeft: 8
   }
 });
 

app/src/styles/fileItemMedia.js

@@ -1,7 +1,7 @@
 import { StyleSheet, Dimensions } from 'react-native';
 
-const windowDimension = Dimensions.get('window'); 
-const width = windowDimension.width - 48; // screen width minus combined left and right margins
+const screenDimension = Dimensions.get('window'); 
+const width = screenDimension.width - 48; // screen width minus combined left and right margins
 
 const fileItemMediaStyle = StyleSheet.create({
   autothumb: {

app/src/styles/filePage.js

@@ -0,0 +1,52 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const screenDimension = Dimensions.get('window'); 
+const screenWidth = screenDimension.width;
+
+const filePageStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  pageContainer: {
+    flex: 1
+  },
+  emptyClaimText: {
+    textAlign: 'center',
+    fontSize: 20,
+    marginLeft: 16,
+    marginRight: 16
+  },
+  scrollContainer: {
+    flex: 1
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 12
+  },
+  channelName: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 20,
+    color: '#9b9b9b'
+  },
+  description: {
+    fontSize: 16,
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 20,
+    color: '#999999'
+  },
+  thumbnail: {
+    width: screenWidth,
+    height: 200
+  }
+});
+
+export default filePageStyle;