Requires click to start hsl videos

components/Media.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, TouchableHighlight, Image, StyleSheet, FlatList } from 'react-native';
+import { View, TouchableHighlight, Image, StyleSheet, FlatList } from 'react-native';
+import { Button } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
 import VimeoPlayer from './VimeoPlayer.js';
@@ -77,7 +78,20 @@ let Media = (props) => {
             )
     ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
-    const video2 = hlsUrl ? <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> : <></>;
+    const video2 = hlsUrl ? ( 
+        loaded ? 
+            <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
+            <TouchableHighlight onPress={() => setLoaded(true)}>
+                {poster ? 
+                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
+                    <Button
+                        icon={"subscriptions"}
+                        labelStyle={{ fontSize: 58 }}
+                        style={{ flow: 1 }}
+                    ></Button>
+                }
+            </TouchableHighlight>
+    ): <></>;
     const iframe = iframeSrc.length ?
         <WebView
             style={styles.iframe}