tmp

android/app/build.gradle

@@ -202,6 +202,7 @@ configurations.all {
 }
 
 dependencies {
+    implementation project(':react-native-video')
     implementation project(':react-native-webview')
     implementation project(':react-native-rsa-native')
     implementation fileTree(dir: "libs", include: ["*.jar"])

android/app/src/main/java/com/shockwallet/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.brentvatne.react.ReactVideoPackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.RNRSA.RNRSAPackage;
 

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'shockwallet'
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':react-native-rsa-native'

app/components/Post/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, StyleSheet, Dimensions } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 // @ts-ignore
 import Carousel from 'react-native-smart-carousel'
 import * as Common from 'shock-common'
@@ -10,16 +10,16 @@ import * as Common from 'shock-common'
 import * as CSS from '../../res/css'
 
 import UserInfo from './UserInfo'
-
-const { width } = Dimensions.get('window')
+import ShockWebView from '../ShockWebView'
 
 /**
  * @typedef {object} Props
  * @prop {Common.Schema.User} author
  * @prop {number} date
  * @prop {{ id: string , text: string}[]} paragraphs
- * @prop {{id: string , data: string }[]} images
- * @prop {ScrollView} parentScrollViewRef
+ * @prop {{id: string , data: string,width:number,height:number }[]} images
+ * @prop {{id: string , data: string,width:number,height:number }[]} videos
+ * @prop {ScrollView=} parentScrollViewRef
  */
 
 /**
@@ -30,13 +30,14 @@ const Post = ({
   date,
   paragraphs = [],
   images = [],
-  parentScrollViewRef,
+  videos = [],
+  //parentScrollViewRef,
 }) => {
-  const carouselWidth = Math.round(width) - 20
+  /*const carouselWidth = Math.round(width) - 20
   const dataCarousel = images.map(image => ({
     id: image.id,
     imagePath: image.data,
-  }))
+  }))*/
 
   return ((
     <View style={styles.postContainer}>
@@ -46,14 +47,20 @@ const Post = ({
           {paragraph.text}
         </Text>
       ))}
-      {dataCarousel.length > 0 && (
-        <Carousel
-          width={carouselWidth}
-          data={dataCarousel}
-          navigationType="dots"
-          navigationColor={CSS.Colors.BUTTON_BLUE}
-          navigation
-          parentScrollViewRef={parentScrollViewRef}
+      {videos.length > 0 && (
+        <ShockWebView
+          type="video"
+          width={videos[0].width}
+          height={videos[0].height}
+          magnet={videos[0].data}
+        />
+      )}
+      {videos.length === 0 && images.length > 0 && (
+        <ShockWebView
+          type="image"
+          width={images[0].width}
+          height={images[0].height}
+          magnet={images[0].data}
         />
       )}
     </View>

app/components/ShockWebView/index.js

@@ -4,7 +4,16 @@ import notificationService from '../../../notificationService'
 
 export default class ShockWebView extends React.Component {
   render() {
-    const { width, height, magnet } = this.props
+    const { width, height, magnet,type } = this.props
+    const playerString = type === 'video' ?
+      `<video id="player" style="width:100%"></video>` :
+      `<img id="player" style="width:100%"></img>`
+    const fileExtension = type === 'video' ?
+      `(file.name.endsWith('.mp4') || file.name.endsWith('.webm'))` :
+      `(file.name.endsWith('.jpg') || file.name.endsWith('.png'))`
+    const domID = type === 'video' ? 
+    `video#player` :
+    `img#player`
     return (
       <WebView
         // eslint-disable-next-line
@@ -32,7 +41,7 @@ export default class ShockWebView extends React.Component {
       </head>
       <body style="margin:0;padding:0">
 
-        <video id="player" style="width:100%"></video>
+        ${playerString}
 
         <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
           <script type="text/javascript">
@@ -50,10 +59,10 @@ export default class ShockWebView extends React.Component {
       client.add(torrentId, function (torrent) {
         // Torrents can contain many files. Let's use the .mp4 file
         var file = torrent.files.find(function (file) {
-          return file.name.endsWith('.mp4')
+          return ${fileExtension}
         })
         //file.appendTo('body') // append the file to the DOM
-        file.renderTo('video#player')
+        file.renderTo('${domID}')
       })
            </script>
       </body>