From 53ef45e0d6a0b52acec6fc1ffbe019ae65690ad7 Mon Sep 17 00:00:00 2001
From: noumantahir <nouman.hawkdev@gmail.com>
Date: Thu, 3 Feb 2022 15:45:18 +0500
Subject: [PATCH] using modal style video playback mechanism for android

---
 package.json                                  |  2 +-
 .../postHtmlRenderer/postHtmlRenderer.tsx     | 41 ++++++++++++++-----
 yarn.lock                                     |  8 ++--
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index feef8ff62..c4d2daa09 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "react-native-vector-icons": "^6.6.0",
     "react-native-version": "^4.0.0",
     "react-native-version-number": "^0.3.5",
-    "react-native-webview": "^11.2.1",
+    "react-native-webview": "^11.17.1",
     "react-native-youtube-iframe": "^2.1.1",
     "react-navigation": "^4.0.10",
     "react-navigation-drawer": "^2.3.3",
diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx
index 24eff092c..ce677a56d 100644
--- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx
+++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx
@@ -7,6 +7,7 @@ import { AutoHeightImage } from '../autoHeightImage/autoHeightImage';
 import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin';
 import WebView from 'react-native-webview';
 import { VideoPlayer } from '..';
+import { Platform } from 'react-native';
 
 interface PostHtmlRendererProps {
   contentWidth: number;
@@ -136,7 +137,10 @@ export const PostHtmlRenderer = memo(
 
       //process video link
       if(tnode.classes?.indexOf('markdown-video-link') >= 0){
-        if(isComment){
+
+        //TODO: remove android check when fix for react-native-weview scroll crash is available
+        //ref: https://github.com/react-native-webview/react-native-webview/issues/2364
+        if(isComment || Platform.OS === 'android'){
           const imgElement = tnode.children.find((child) => {
             return child.classes.indexOf('video-thumbnail') > 0 ? true : false;
           });
@@ -225,17 +229,30 @@ export const PostHtmlRenderer = memo(
       const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi;
       const isVideoFormat = iframeProps.source.uri.match(checkSrcRegex);
 
-      //this hack help avoid autoplaying fullscreened iframe videos;
-      const src = isVideoFormat ? 
-        {
-          html: `
-            <video width="100%" height="auto"  controls>
-              <source src="${iframeProps.source.uri}" type="video/mp4">
-            </video>`,
-        }:{
-          uri: iframeProps.source.uri,
-        };
+       //this hack help avoid autoplaying fullscreened iframe videos;
+       const src = isVideoFormat ? 
+       {
+         html: `
+           <video width="100%" height="auto"  controls>
+             <source src="${iframeProps.source.uri}" type="video/mp4">
+           </video>`,
+       }:{
+         uri: iframeProps.source.uri,
+       };
 
+       //TODO: remove android check logic when fix for react-native-webiew scrollview crash is available
+       //ref: https://github.com/react-native-webview/react-native-webview/issues/2364
+      if(isComment || Platform.OS === 'android'){
+        const _onPress = () => {
+          console.log('iframe thumb Pressed:', iframeProps);
+          if (handleVideoPress) {
+            handleVideoPress(iframeProps.source.uri);
+          }
+        };
+        return (
+          <VideoThumb contentWidth={contentWidth} onPress={_onPress} />
+        )
+      }else{
         return (
           <VideoPlayer 
             mode='source'
@@ -243,6 +260,8 @@ export const PostHtmlRenderer = memo(
             contentWidth={contentWidth}
           />
         );
+      }
+
     };
 
     return (
diff --git a/yarn.lock b/yarn.lock
index 8643b029e..eddbd939e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8856,10 +8856,10 @@ react-native-version@^4.0.0:
     resolve-from "^5.0.0"
     semver "^7.0.0"
 
-react-native-webview@^11.2.1:
-  version "11.2.3"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.2.3.tgz#1b82685ab60645d4161f2e25e98286493cdffa5d"
-  integrity sha512-r/K+Lf/O5aij72gRndMX2qsyQ/WLtDPiO75SS57y6JjqSKxedGASVL9Jwl1TM7fCXqUq8dgiwik/LuBHbJXAEg==
+react-native-webview@^11.17.1:
+  version "11.17.1"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.17.1.tgz#a7c9d995d749539995a4fdad8aa6456bac77fc8f"
+  integrity sha512-gGdBavATj8Mya2VYZtWtB9cgOAgVJJGlgL5mo/EO8quBeI5L3IBy2ZQolsCyRRGFTUPCc3Ah0OwJal0PjijGqw==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"