Merge branch 'development' into nt/quick-profile

android/app/build.gradle

@@ -124,6 +124,7 @@ def enableHermes = project.ext.react.get("enableHermes", false);
 configurations.all {
     resolutionStrategy {
         force "com.facebook.soloader:soloader:0.9.0+"
+        force "androidx.browser:browser:1.3.0"
     }
 }
 android {

android/build.gradle

@@ -14,7 +14,7 @@ def getNpmVersionArray() { // major [0], minor [1], patch [2]
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.3"
+        buildToolsVersion = "30.0.2"
         minSdkVersion = 21
         compileSdkVersion = 30
         targetSdkVersion = 30
@@ -23,10 +23,8 @@ buildscript {
         firebaseVersion = "17.3.4"
     }
     repositories {
-        mavenCentral()
         google()
-
+        mavenCentral()
-        
     }
     dependencies {
         classpath('com.android.tools.build:gradle:4.1.0')
@@ -39,6 +37,7 @@ buildscript {
 
 allprojects {
     repositories {
+        google()
         mavenCentral()
         mavenLocal()
         maven {
@@ -50,7 +49,6 @@ allprojects {
             url("$rootDir/../node_modules/jsc-android/dist")
         }
 
-        google()
         maven { url "https://www.jitpack.io" }
 
 

appcenter-pre-build.sh

@@ -66,3 +66,5 @@ npx jetify
 
 cd ios && pod install && cd ..
 
+cd android && ./gradlew clean && cd ..
+

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -1,10 +1,8 @@
 import React, { memo } from "react";
-import { View, ImageBackground } from "react-native";
-import EStyleSheet from "react-native-extended-stylesheet";
 import RenderHTML, { CustomRendererProps, Element, TNode } from "react-native-render-html";
 import styles from "./postHtmlRendererStyles";
 import { LinkData, parseLinkData } from "./linkDataParser";
-import { IconButton } from "..";
+import VideoThumb from "./videoThumb";
 
 
 interface PostHtmlRendererProps {
@@ -36,6 +34,8 @@ export const PostHtmlRenderer = memo(({
      //new renderer functions
   body = body.replace('<center>', '<div class="text-center">').replace('</center>','</div>');
 
+  console.log("Comment body:", body);
+
   const _handleOnLinkPress = (data:LinkData) => {
 
     if(!data){
@@ -106,6 +106,7 @@ export const PostHtmlRenderer = memo(({
       }
     };
 
+  
     const _anchorRenderer = ({
       InternalRenderer,
       tnode,
@@ -116,9 +117,20 @@ export const PostHtmlRenderer = memo(({
         console.log("Link Pressed:", tnode)
         const data = parseLinkData(tnode);
         _handleOnLinkPress(data);
-       
       };
 
+      if(tnode.classes?.indexOf('markdown-video-link') >= 0){
+        const imgElement = tnode.children.find((child)=>{
+          return child.classes.indexOf('video-thumbnail') > 0 ? true:false
+        })
+        if(!imgElement){
+          return (
+            <VideoThumb contentWidth={contentWidth} onPress={_onPress}  />
+          )
+        }
+      }
+      
+  
       return (
         <InternalRenderer
           tnode={tnode}
@@ -135,8 +147,8 @@ export const PostHtmlRenderer = memo(({
       ...props
     }:CustomRendererProps<TNode>) => {
   
-      const _onPress = () => {
       const imgUrl = tnode.attributes.src;
+      const _onPress = () => {
         console.log("Image Pressed:", imgUrl)
         setSelectedImage(imgUrl);
       };
@@ -145,23 +157,9 @@ export const PostHtmlRenderer = memo(({
       const isAnchored = !(tnode.parent?.classes?.indexOf('markdown-external-link') >= 0)
   
       if(isVideoThumb){
-        return (
+        return <VideoThumb contentWidth={contentWidth} uri={imgUrl}/>;
-          <View pointerEvents={'none'}>
-            <ImageBackground
-              source={{uri:tnode.attributes.src}}
-              style={{...styles.videoThumb, height:contentWidth * 9/16 }}
-              resizeMode={'cover'}> 
-              <IconButton
-                style={styles.playButton}
-                size={44}
-                name='play-arrow'
-                color={EStyleSheet.value('$white')}
-                iconType='MaterialIcons'
-              />
-            </ImageBackground>
-        </View>
-        )
       }
+
       else {
         return (
           <InternalRenderer

src/components/postHtmlRenderer/postHtmlRendererStyles.ts

@@ -88,6 +88,7 @@ export default EStyleSheet.create({
     width:'100%',
     alignItems:'center', 
     justifyContent:'center',
+    backgroundColor:'$darkIconColor'
   },
   playButton:{
     alignItems:'center',

src/components/postHtmlRenderer/videoThumb.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { View, Text, ImageBackground } from 'react-native'
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { TouchableHighlight, TouchableOpacity } from 'react-native-gesture-handler';
+import { IconButton } from '..';
+import styles from "./postHtmlRendererStyles";
+
+interface Props {
+    contentWidth:number,
+    uri?:string;
+    onPress?:()=>void;
+}
+
+const VideoThumb = ({contentWidth, uri, onPress}: Props) => {
+    return (
+        <TouchableHighlight onPress={onPress} disabled={!onPress}>
+            <View pointerEvents={'none'}>
+                <ImageBackground
+                    source={{uri}}
+                    style={{...styles.videoThumb, height:contentWidth * 9/16 }}
+                    resizeMode={'cover'}> 
+                    <IconButton
+                        style={styles.playButton}
+                        size={44}
+                        name='play-arrow'
+                        color={EStyleSheet.value('$white')}
+                        iconType='MaterialIcons'
+                    />
+            </ImageBackground>
+        </View>
+      </TouchableHighlight>
+    )
+}
+
+export default VideoThumb