From c65f1a42ecfec9a39305193267eb81829afaf340 Mon Sep 17 00:00:00 2001
From: noumantahir <nouman.hawkdev@gmail.com>
Date: Thu, 16 Sep 2021 23:39:46 +0500
Subject: [PATCH] introduced videoThumb to handle img and non img based video
 preview

---
 .../postHtmlRenderer/postHtmlRenderer.tsx     | 40 +++++++++----------
 .../postHtmlRendererStyles.ts                 |  1 +
 .../postHtmlRenderer/videoThumb.tsx           | 35 ++++++++++++++++
 3 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 src/components/postHtmlRenderer/videoThumb.tsx

diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx
index 92d119ad6..9634611f4 100644
--- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx
+++ b/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){
@@ -105,6 +105,7 @@ export const PostHtmlRenderer = memo(({
         onElementIsImage(imgUrl)
       }
     };
+
   
     const _anchorRenderer = ({
       InternalRenderer,
@@ -116,8 +117,19 @@ 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
@@ -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 (
-          <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>
-        )
+        return <VideoThumb contentWidth={contentWidth} uri={imgUrl}/>;
       }
+
       else {
         return (
           <InternalRenderer
diff --git a/src/components/postHtmlRenderer/postHtmlRendererStyles.ts b/src/components/postHtmlRenderer/postHtmlRendererStyles.ts
index 2f3f175e4..4c175faf9 100644
--- a/src/components/postHtmlRenderer/postHtmlRendererStyles.ts
+++ b/src/components/postHtmlRenderer/postHtmlRendererStyles.ts
@@ -88,6 +88,7 @@ export default EStyleSheet.create({
     width:'100%',
     alignItems:'center', 
     justifyContent:'center',
+    backgroundColor:'$darkIconColor'
   },
   playButton:{
     alignItems:'center',
diff --git a/src/components/postHtmlRenderer/videoThumb.tsx b/src/components/postHtmlRenderer/videoThumb.tsx
new file mode 100644
index 000000000..607b09a02
--- /dev/null
+++ b/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