Merge pull request #1505 from esteemapp/custom-script

sponsored uniqueness, hide low rep, image viewer gallery

ios/Podfile.lock

@@ -246,7 +246,7 @@ PODS:
     - React
   - react-native-version-number (0.3.6):
     - React
-  - react-native-webview (7.6.0):
+  - react-native-webview (8.0.4):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -509,7 +509,7 @@ SPEC CHECKSUMS:
   react-native-fast-image: 6d50167ad4d68b59640ceead8c2bc4e58d91d8bd
   react-native-netinfo: 817823a90f13ced48413875c0820df04c3aae28d
   react-native-version-number: b415bbec6a13f2df62bf978e85bc0d699462f37f
-  react-native-webview: db4682f1698ab4b17a5e88f951031d203ff8aea8
+  react-native-webview: 3f5aa91c3cb083ea4762e006b9653291a96a777a
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

package.json

@@ -10,8 +10,7 @@
   "scripts": {
     "version": "./version-ios.sh",
     "postversion": "react-native-version",
-    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "start": "react-native start",
-    "eject": "node node_modules/react-native/local-cli/cli.js eject",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "test": "node node_modules/jest/bin/jest.js --watch",

src/components/comment/view/commentView.js

@@ -65,6 +65,7 @@ const CommentView = ({
         <View style={[{ marginLeft: 34 }, styles.bodyWrapper]}>
           <CommentBody
             commentDepth={comment.depth}
+            reputation={comment.author_reputation}
             handleOnUserPress={handleOnUserPress}
             body={comment.body}
             created={comment.created}
@@ -147,7 +148,11 @@ const CommentView = ({
                   iconStyle={styles.iconStyle}
                   iconSize={16}
                   onPress={() => _showSubCommentsToggle()}
-                  text={!isPressedShowButton ? `${comment.children} more replies` : ''}
+                  text={
+                    !isPressedShowButton
+                      ? `${comment.children} ${intl.formatMessage({ id: 'comments.more_replies' })}`
+                      : ''
+                  }
                 />
               </View>
             )}

src/components/comments/view/commentsView.js

@@ -72,7 +72,7 @@ const CommentsView = ({
         style={styles.moreRepliesButtonWrapper}
         textStyle={styles.moreRepliesText}
         onPress={() => _readMoreComments()}
-        text="Read more comments"
+        text={intl.formatMessage({ id: 'comments.read_more' })}
       />
     );
   }

src/components/postElements/body/view/commentBodyView.js

@@ -16,7 +16,10 @@ import { default as ROUTES } from '../../../../constants/routeNames';
 import { CommentPlaceHolder } from '../../../basicUIElements';
 import { customCommentScript } from './config';
 
+import { TextButton } from '../../..';
+
 // Styles
+import styles from './postBodyStyles';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -27,11 +30,16 @@ const CommentBody = ({
   handleOnPostPress,
   created,
   commentDepth,
+  reputation,
 }) => {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [postImages, setPostImages] = useState([]);
+  const [revealComment, setRevealComment] = useState(reputation > 0);
   const intl = useIntl();
 
+  const _showLowComment = () => {
+    setRevealComment(true);
+  };
   //new renderer functions
   const __handleOnLinkPress = event => {
     if ((!event && !get(event, 'nativeEvent.data'), false)) {
@@ -45,7 +53,7 @@ const CommentBody = ({
         data = {};
       }
 
-      const { type, href, author, category, permlink, tag, proposal, videoHref } = data;
+      const { type, href, images, author, category, permlink, tag, proposal, videoHref } = data;
 
       switch (type) {
         case '_external':
@@ -76,7 +84,7 @@ const CommentBody = ({
         case 'markdown-video-link':
           break;
         case 'image':
-          setPostImages([{ url: href }]);
+          setPostImages(images);
           setIsImageModalOpen(true);
           break;
 
@@ -225,6 +233,12 @@ const CommentBody = ({
     color: ${EStyleSheet.value('$primaryBlack')};
     font-family: Roboto, sans-serif;
     max-width: 100%;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
   body {
     color: ${EStyleSheet.value('$primaryBlack')};
@@ -333,6 +347,7 @@ const CommentBody = ({
           imageUrls={postImages}
           enableSwipeDown
           onCancel={() => setIsImageModalOpen(false)}
+          onClick={() => setIsImageModalOpen(false)}
           onSave={uri => _saveImage(uri)}
           menuContext={{
             saveToLocal: intl.formatMessage({ id: 'post.save_to_local' }),
@@ -340,6 +355,7 @@ const CommentBody = ({
           }}
         />
       </Modal>
+      {revealComment ? (
         <AutoHeightWebView
           key={`akey-${created.toString()}`}
           source={{ html }}
@@ -355,6 +371,14 @@ const CommentBody = ({
           scalesPageToFit={false}
           zoomable={false}
         />
+      ) : (
+        <TextButton
+          style={styles.revealButton}
+          textStyle={styles.revealText}
+          onPress={() => _showLowComment()}
+          text={intl.formatMessage({ id: 'comments.reveal_comment' })}
+        />
+      )}
     </Fragment>
   );
 };

src/components/postElements/body/view/config.js

@@ -1,9 +1,16 @@
 const customBodyScript = `
 var images = document.getElementsByTagName("IMG");
+var imageUrls = [];
+for (var k = 0; k < images.length; k++) {  
+  var src = images[k].getAttribute("src") || '';
+  if (src) {
+    imageUrls.push({url: src});
+  }
+}
 for (var i = 0; i < images.length; i++) {  
   var result = {
     type: 'image',
-    href: images[i].getAttribute("src") || ''
+    images: imageUrls
   };
   var resultStr = JSON.stringify(JSON.stringify(result));
   var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
@@ -111,18 +118,26 @@ true;
 
 const customCommentScript = `
 var images = document.getElementsByTagName("IMG");
+var imageUrls = [];
+for (var k = 0; k < images.length; k++) {  
+  var src = images[k].getAttribute("src") || '';
+  if (src) {
+    imageUrls.push({url: src});
+  }
+}
 for (var i = 0; i < images.length; i++) {  
   var result = {
     type: 'image',
-    href: images[i].getAttribute("src") || ''
+    images: imageUrls
   };
   var resultStr = JSON.stringify(JSON.stringify(result));
   var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
   if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
-    images[i].setAttribute("onClick", message);
+    images[i].setAttribute("onTouchStart", message);
   }
 }
 document.addEventListener('touchstart', function(event) {
+  event.preventDefault();
   var el = event.target;
   while (el.tagName !== 'A') {
     if (!el.parentNode) {

src/components/postElements/body/view/postBodyStyles.js

@@ -1,72 +1,17 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  text: {
+  revealButton: {
-    fontSize: 16,
+    backgroundColor: '$iconColor',
-    color: '$primaryBlack',
+    height: 22,
-    fontFamily: '$primaryFont',
-  },
-  container: {
-    paddingHorizontal: 0,
-    marginTop: 10,
-  },
-  a: {
-    color: '$primaryBlue',
-    fontFamily: '$primaryFont',
-  },
-  h4: {
-    fontSize: 15,
-    marginHorizontal: 10,
-    marginVertical: 5,
-  },
-  h1: {
-    fontSize: 30,
-  },
-  h2: {
-    fontSize: 25,
-  },
-  h3: {
-    fontSize: 20,
-  },
-  commentContainer: {
-    paddingHorizontal: 0,
-    right: 30,
-    marginTop: 10,
-  },
-  th: {
-    flex: 1,
     justifyContent: 'center',
-    fontWeight: 'bold',
-    color: '$primaryBlack',
-    fontSize: 14,
-    padding: 5,
-  },
-  tr: {
-    backgroundColor: '$darkIconColor',
-    flexDirection: 'row',
-  },
-  td: {
-    borderWidth: 0.5,
-    borderColor: '$tableBorderColor',
-    flex: 1,
-    padding: 10,
-    backgroundColor: '$tableTrColor',
-  },
-  blockquote: {
-    borderLeftWidth: 5,
-    borderColor: '$darkIconColor',
-    paddingLeft: 5,
-  },
-  code: {
-    backgroundColor: '$darkIconColor',
-    fontFamily: '$editorFont',
-  },
-  center: {
-    textAlign: 'center',
     alignItems: 'center',
-    justifyContent: 'center',
+    borderRadius: 20,
+    minWidth: 40,
+    maxWidth: 170,
   },
-  img: {
+  revealText: {
-    alignSelf: 'center',
+    color: '$white',
+    fontSize: 14,
   },
 });

src/components/postElements/body/view/postBodyView.js

@@ -42,7 +42,7 @@ const PostBody = ({
         data = {};
       }
 
-      const { type, href, author, category, permlink, tag, proposal, videoHref } = data;
+      const { type, href, images, author, category, permlink, tag, proposal, videoHref } = data;
 
       switch (type) {
         case '_external':
@@ -73,7 +73,7 @@ const PostBody = ({
         case 'markdown-video-link':
           break;
         case 'image':
-          setPostImages([{ url: href }]);
+          setPostImages(images);
           setIsImageModalOpen(true);
           break;
 
@@ -328,6 +328,7 @@ const PostBody = ({
           imageUrls={postImages}
           enableSwipeDown
           onCancel={() => setIsImageModalOpen(false)}
+          onClick={() => setIsImageModalOpen(false)}
           onSave={uri => _saveImage(uri)}
           menuContext={{
             saveToLocal: intl.formatMessage({ id: 'post.save_to_local' }),

src/components/posts/view/postsView.js

@@ -202,7 +202,7 @@ const PostsView = ({
                 }
               }
 
-              if (posts.length < 5 && pageType !== 'profiles') {
+              if (posts.length < 7 && pageType !== 'profiles') {
                 setFeedPosts(_posts);
               }
 
@@ -340,7 +340,10 @@ const PostsView = ({
                 const ix = index / 3 - 1;
                 if (promotedPosts[ix] !== undefined) {
                   const p = promotedPosts[ix];
-                  if (get(p, 'author', null)) {
+                  if (
+                    get(p, 'author', null) &&
+                    posts.filter(x => x.permlink === p.permlink).length <= 0
+                  ) {
                     e.push(
                       <PostCard
                         key={`${p.author}-${p.permlink}-prom`}

src/config/locales/en-US.json

@@ -464,6 +464,9 @@
     }
   },
   "comments": {
-    "title": "Comments"
+    "title": "Comments",
+    "reveal_comment": "Reveal comment",
+    "read_more": "Read more comments",
+    "more_replies": "more replies"
   }
 }