adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Image load first then video when click

Browse Source
This commit is contained in:
aeroreyna
2022-03-30 22:40:49 -07:00
parent 564343b1ac
commit 01596a368d
4 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Media.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
import { Text, View, TouchableHighlight, Image, StyleSheet } from 'react-native';
import API from './../API.js';
import VideoPlayer from './VideoPlayer.js';
import VimeoPlayer from './VimeoPlayer.js';
@@ -41,17 +41,25 @@ let Media = (props) => {
const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
const videosId = videoIdF(props.content);
const iframeSrc = iframeTagF(props.content) || [];
let [videosFiles, setVideosFiles] = useState([]);
let [poster, setPoster] = useState('');
const [videosFiles, setVideosFiles] = useState([]);
const [poster, setPoster] = useState('');
const [loaded, setLoaded] = useState(false);
useEffect(async () => {
if (!videosId[1]) return 0;
let videoObj = await API.getVideo(videosId[1]);
if(videoObj && videoObj.files){
setVideosFiles(videoObj.files);
setPoster(videoObj.pictures.sizes[videoObj.pictures.sizes.length - 1].link);
setPoster(videoObj.pictures.sizes[4].link);
}
}, [props.content])
const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
const video = videosFiles.length ? (
loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
(
<TouchableHighlight onPress={() => setLoaded(true)}>
<Image source={poster ? {uri: poster} : {}} key={poster} style={styles.poster} />
</TouchableHighlight>
)
) :
(videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
const iframe = iframeSrc.length ?
<WebView
@@ -83,6 +91,10 @@ const styles = StyleSheet.create({
width: "100%",
aspectRatio: 1,
},
poster: {
width: "100%",
aspectRatio: 9/6,
},
multipleImage: {
width: "49%",
aspectRatio: 1,