added NSFW overlay component and a toggle option for NSFW content on the settings page (#42)

.gitignore

@@ -4,4 +4,5 @@ bin
 buildozer.spec
 build.log
 recipes/**/*.pyc
-
+src/main/assets/index.android.bundle
+src/main/assets/index.android.bundle.meta

app/src/component/fileItem/index.js

@@ -7,7 +7,7 @@ import {
   makeSelectIsUriResolving,
   selectRewardContentClaimIds
 } from 'lbry-redux';
-/*import { selectShowNsfw } from 'redux/selectors/settings';*/
+import { selectShowNsfw } from '../../redux/selectors/settings';
 import FileItem from './view';
 
 const select = (state, props) => ({
@@ -16,6 +16,7 @@ const select = (state, props) => ({
   metadata: makeSelectMetadataForUri(props.uri)(state),
   rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+  obscureNsfw: !selectShowNsfw(state)
 });
 
 const perform = dispatch => ({

app/src/component/fileItem/view.js

@@ -4,6 +4,7 @@ import { NavigationActions } from 'react-navigation';
 import { Text, View, TouchableOpacity } from 'react-native';
 import FileItemMedia from '../fileItemMedia';
 import FilePrice from '../filePrice';
+import NsfwOverlay from '../nsfwOverlay';
 import discoverStyle from '../../styles/discover';
 
 class FileItem extends React.PureComponent {
@@ -34,7 +35,8 @@ class FileItem extends React.PureComponent {
       metadata,
       isResolvingUri,
       rewardedContentClaimIds,
-      style
+      style,
+      navigation
     } = this.props;
 
     const uri = normalizeURI(this.props.uri);
@@ -52,18 +54,21 @@ class FileItem extends React.PureComponent {
     } else if (claim === null) {
       description = 'This address contains no content.';
     }
-    
+
     return (
-      <TouchableOpacity style={style} onPress={() => {
-            this.props.navigation.navigate('File', { uri: uri });
-          }
-        }>
-        <FileItemMedia title={title} thumbnail={thumbnail} resizeMode="cover" />
-        <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
-        <Text style={discoverStyle.fileItemName}>{title}</Text>
-        {channelName &&
-          <Text style={discoverStyle.channelName}>{channelName}</Text>}
-      </TouchableOpacity>
+      <View style={style}>
+        <TouchableOpacity style={discoverStyle.container} onPress={() => {
+              navigation.navigate('File', { uri: uri });
+            }
+          }>
+          <FileItemMedia title={title} thumbnail={thumbnail} blurRadius={obscureNsfw ? 15 : 0} resizeMode="cover" />
+          <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
+          <Text style={discoverStyle.fileItemName}>{title}</Text>
+          {channelName &&
+            <Text style={discoverStyle.channelName}>{channelName}</Text>}
+        </TouchableOpacity>
+        {obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate('Settings')} />}
+      </View>
     );
   }
 }

app/src/component/fileItemMedia/view.js

@@ -28,7 +28,7 @@ class FileItemMedia extends React.PureComponent {
 
   render() {
     let style = this.props.style;
-    const { title, thumbnail, resizeMode } = this.props;
+    const { title, thumbnail, blurRadius, resizeMode } = this.props;
     const atStyle = this.state.autoThumbStyle;
 
     if (thumbnail && ((typeof thumbnail) === 'string')) {
@@ -37,7 +37,10 @@ class FileItemMedia extends React.PureComponent {
       }
       
       return (
-        <Image source={{uri: thumbnail}} resizeMode={resizeMode ? resizeMode : "cover"} style={style} />
+        <Image source={{uri: thumbnail}}
+               blurRadius={blurRadius}
+               resizeMode={resizeMode ? resizeMode : "cover"}
+               style={style} />
       );
     }
         

app/src/component/nsfwOverlay/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import NsfwOverlay from './view';
+
+const perform = dispatch => ({});
+
+export default connect(null, perform)(NsfwOverlay);

app/src/component/nsfwOverlay/view.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import discoverStyle from '../../styles/discover';
+
+class NsfwOverlay extends React.PureComponent {
+  render() {
+    return (
+      <TouchableOpacity style={discoverStyle.overlay} activeOpacity={0.95} onPress={this.props.onPress}>
+        <Text style={discoverStyle.overlayText}>This content is Not Safe For Work. To view adult content, please change your Settings.</Text>
+      </TouchableOpacity>
+    )
+  }
+}
+
+export default NsfwOverlay;

app/src/page/settings/view.js

@@ -19,6 +19,15 @@ class SettingsPage extends React.PureComponent {
       <View>
       <Text style={settingsStyle.title}>Settings</Text>
         <ScrollView style={settingsStyle.scrollContainer}>
+          <View style={settingsStyle.row}>
+            <View style={settingsStyle.switchText}>
+              <Text style={settingsStyle.label}>Show NSFW content</Text>
+            </View>
+            <View style={settingsStyle.switchContainer}>
+              <Switch value={showNsfw} onValueChange={(value) => setClientSetting(SETTINGS.SHOW_NSFW, value)} />
+            </View>
+          </View>
+          
           <View style={settingsStyle.row}>
             <View style={settingsStyle.switchText}>
               <Text style={settingsStyle.label}>Keep the daemon background service running when the app is suspended.</Text>

app/src/styles/discover.js

@@ -56,6 +56,25 @@ const discoverStyle = StyleSheet.create({
   },
   drawerHamburger: {
     marginLeft: 8
+  },
+  overlay: {
+    flex: 1,
+    opacity: 1,
+    backgroundColor: '#222222',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%'
+  },
+  overlayText: {
+    color: '#ffffff',
+    fontSize: 14,
+    textAlign: 'center',
+    fontFamily: 'Metropolis-Regular'
   }
 });
 

app/src/styles/settings.js

@@ -12,16 +12,18 @@ const settingsStyle = StyleSheet.create({
     paddingBottom: 16
   },
   row: {
-    marginBottom: 12,
+    marginBottom: 24,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
   switchText: {
-    width: '70%'
+    width: '70%',
+    justifyContent: 'center'
   },
   switchContainer: {
-    width: '25%'
+    width: '25%',
+    justifyContent: 'center'
   },
   label: {
     fontSize: 14,

src/main/assets/index.android.bundle.meta

@@ -1,2 +0,0 @@
-őÚ¤
-’!’óĂŇW€mý6ű“­