added react-native-video for extension based urls

android/build.gradle

@@ -63,6 +63,7 @@ allprojects {
                 includeGroup("com.facebook.fbjni")
                 includeGroup("com.henninghall.android")
                 includeGroup("org.matomo.sdk")
+                includeModule("com.yqritc", "android-scalablevideoview")
             }
         }
     }

ios/Podfile.lock

@@ -335,7 +335,12 @@ PODS:
     - React
   - react-native-version-number (0.3.6):
     - React
-  - react-native-webview (11.2.3):
+  - react-native-video (5.2.0):
+    - React-Core
+    - react-native-video/Video (= 5.2.0)
+  - react-native-video/Video (5.2.0):
+    - React-Core
+  - react-native-webview (11.17.1):
     - React-Core
   - React-RCTActionSheet (0.63.4):
     - React-Core/RCTActionSheetHeaders (= 0.63.4)
@@ -496,6 +501,7 @@ DEPENDENCIES:
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-udp (from `../node_modules/react-native-udp`)
   - react-native-version-number (from `../node_modules/react-native-version-number`)
+  - react-native-video (from `../node_modules/react-native-video`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -621,6 +627,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-udp"
   react-native-version-number:
     :path: "../node_modules/react-native-version-number"
+  react-native-video:
+    :path: "../node_modules/react-native-video"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-RCTActionSheet:
@@ -736,7 +744,8 @@ SPEC CHECKSUMS:
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-udp: ff9d13e523f2b58e6bc5d4d32321ac60671b5dc9
   react-native-version-number: b415bbec6a13f2df62bf978e85bc0d699462f37f
-  react-native-webview: 6520e3e7b4933de76b95ef542c8d7115cf45b68e
+  react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
+  react-native-webview: 162b6453d074e0b1c7025242bb7a939b6f72b9e7
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
   React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0

package.json

@@ -128,6 +128,7 @@
     "react-native-vector-icons": "^6.6.0",
     "react-native-version": "^4.0.0",
     "react-native-version-number": "^0.3.5",
+    "react-native-video": "^5.2.0",
     "react-native-webview": "^11.17.1",
     "react-native-youtube-iframe": "^2.1.1",
     "react-navigation": "^4.0.10",

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -150,9 +150,9 @@ export const PostHtmlRenderer = memo(
         } else {
           return (
             <VideoPlayer
-              mode={parsedTnode.youtubeId ? 'youtube' : 'url'}
+              mode={parsedTnode.youtubeId ? 'youtube' : 'source'}
               contentWidth={contentWidth}
-              videoUrl={parsedTnode.videoHref}
+              source={parsedTnode.videoHref}
               youtubeVideoId={parsedTnode.youtubeId}
               startTime={parsedTnode.startTime}
               disableAutoplay={true}
@@ -226,19 +226,6 @@ export const PostHtmlRenderer = memo(
     // iframe renderer for rendering iframes in body
     const _iframeRenderer = function IframeRenderer(props) {
       const iframeProps = useHtmlIframeProps(props);
-      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,
-       };
 
        //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
@@ -254,9 +241,10 @@ export const PostHtmlRenderer = memo(
         )
       }else{
         return (
+
           <VideoPlayer 
             mode='source'
-            source={src}
+            source={iframeProps.source.uri}
             contentWidth={contentWidth}
           />
         );

src/components/videoPlayer/videoPlayerView.tsx

@@ -1,37 +1,35 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Dimensions } from 'react-native';
 import { View, StyleSheet, ActivityIndicator } from 'react-native';
 import WebView from 'react-native-webview';
 import YoutubeIframe, { InitialPlayerParams } from 'react-native-youtube-iframe';
-import { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
+import Video from 'react-native-video';
 
 interface VideoPlayerProps {
-  mode: 'source'|'youtube'|'url';
+  mode: 'source' | 'youtube';
   contentWidth?: number;
   youtubeVideoId?: string;
-  videoUrl?: string;
   startTime?: number;
-  source?: WebViewSource;
-
+  source?: string;
   //prop for youtube player
-  disableAutoplay?:boolean;
+  disableAutoplay?: boolean;
 }
 
-const VideoPlayer = ({ 
-    youtubeVideoId, 
-    videoUrl, 
-    startTime, 
-    source, 
-    contentWidth = Dimensions.get('screen').width, 
-    mode,
-    disableAutoplay
-  }: VideoPlayerProps) => {
-  
+const VideoPlayer = ({
+  youtubeVideoId,
+  startTime,
+  source,
+  contentWidth = Dimensions.get('screen').width,
+  mode,
+  disableAutoplay,
+}: VideoPlayerProps) => {
   const PLAYER_HEIGHT = contentWidth * (9 / 16);
+  const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi;
+  const isExtensionType = mode === 'source' ? source.match(checkSrcRegex) : false;
 
   const [shouldPlay, setShouldPlay] = useState(false);
   const [loading, setLoading] = useState(true);
-
+  const videoPlayerRef = useRef(null);
   const _onReady = () => {
     setLoading(false);
     setShouldPlay(disableAutoplay ? false : true);
@@ -67,26 +65,41 @@ const VideoPlayer = ({
           />
         </View>
       )}
-      {((mode === 'source' && source) || (mode === 'url' && videoUrl)) && (
+      {mode === 'source' && source && (
         <View style={{ height: PLAYER_HEIGHT }}>
-          <WebView
-            scalesPageToFit={true}
-            bounces={false}
-            javaScriptEnabled={true}
-            automaticallyAdjustContentInsets={false}
-            onLoadEnd={() => {
-              setLoading(false);
-            }}
-            onLoadStart={() => {
-              setLoading(true);
-            }}
-            source={source || { uri: videoUrl }}
-            style={{ width: contentWidth, height: PLAYER_HEIGHT}}
-            startInLoadingState={true}
-            onShouldStartLoadWithRequest={() => true}
-            mediaPlaybackRequiresUserAction={true}
-            allowsInlineMediaPlayback={true}
-          />
+          {isExtensionType ? (
+            <Video
+              source={{ uri: source }}
+              ref={videoPlayerRef}
+              onBuffer={() => console.log('buffering')}
+              onError={() => console.log('error while playing')}
+              onEnd={() => console.log('end playing!')}
+              onLoadStart={() => setLoading(true)}
+              onLoad={() => setLoading(false)}
+              style={styles.videoPlayer}
+              controls
+              paused
+            />
+          ) : (
+            <WebView
+              scalesPageToFit={true}
+              bounces={false}
+              javaScriptEnabled={true}
+              automaticallyAdjustContentInsets={false}
+              onLoadEnd={() => {
+                setLoading(false);
+              }}
+              onLoadStart={() => {
+                setLoading(true);
+              }}
+              source={{ uri: source }}
+              style={{ width: contentWidth, height: PLAYER_HEIGHT }}
+              startInLoadingState={true}
+              onShouldStartLoadWithRequest={() => true}
+              mediaPlaybackRequiresUserAction={true}
+              allowsInlineMediaPlayback={true}
+            />
+          )}
         </View>
       )}
       {loading && <ActivityIndicator style={styles.activityIndicator} />}
@@ -109,4 +122,11 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
   },
+  videoPlayer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 });

yarn.lock

@@ -3927,6 +3927,11 @@ elliptic@^6.5.2, elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+eme-encryption-scheme-polyfill@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz#2ca6e06480e06cceb5e50efd27943ac46c959878"
+  integrity sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -6543,6 +6548,11 @@ jsx-ast-utils@^2.2.3:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+keymirror@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
+  integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=
+
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
@@ -8856,6 +8866,15 @@ react-native-version@^4.0.0:
     resolve-from "^5.0.0"
     semver "^7.0.0"
 
+react-native-video@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.2.0.tgz#c3f2c541775f4fda7e0d26d75a6fb59819b13d5e"
+  integrity sha512-5SK1lxyzrCkZF+WuxUxLR1Pt65E0rsWB1w1GrGxSLdC9zWYBumcmuHl+wPJ7UQvznjaH2Ze7uU1R3arejI7+WQ==
+  dependencies:
+    keymirror "^0.1.1"
+    prop-types "^15.7.2"
+    shaka-player "^2.5.9"
+
 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"
@@ -9643,6 +9662,13 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shaka-player@^2.5.9:
+  version "2.5.23"
+  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.23.tgz#db92d1c6cf2314f0180a2cec11b0e2f2560336f5"
+  integrity sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg==
+  dependencies:
+    eme-encryption-scheme-polyfill "^2.0.1"
+
 shallow-clone@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"