introduced videoThumb to handle img and non img based video preview

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 imgUrl = tnode.attributes.src;
       const _onPress = () => {
-        const imgUrl = tnode.attributes.src;
         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