diff --git a/components/Media.js b/components/Media.js index 70f811f..cfc5b63 100644 --- a/components/Media.js +++ b/components/Media.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Text, View, TouchableHighlight, Image, StyleSheet } from 'react-native'; +import { Text, View, TouchableHighlight, Image, StyleSheet, FlatList } from 'react-native'; import API from './../API.js'; import VideoPlayer from './VideoPlayer.js'; import VimeoPlayer from './VimeoPlayer.js'; @@ -49,42 +49,55 @@ let Media = (props) => { let getData = async () => { if (!videosId[1]) return 0; let videoObj = await API.getVideo(videosId[1]); - if(videoObj && videoObj.files && subscribed){ + if (videoObj && videoObj.files && subscribed) { setVideosFiles(videoObj.files); setPoster(videoObj.pictures.sizes[4].link); } }; getData(); - return ()=>{ + return () => { subscribed = false; }; }, [props.content]) const video = videosFiles.length ? ( - loaded ? : + loaded ? : ( setLoaded(true)}> - + ) - ) : + ) : (videosId.length ? : <>); const iframe = iframeSrc.length ? : <>; + const renderImages = (({ item }) => { + return (); + }); return ( - - { - imagesTag.map((image, i) => { - return ( - //{post.content} - - ) - }) - } - + { + (imagesTag.length > 2) ? + item[1]} + initialNumToRender={2} + /> : + + { + imagesTag.map((image, i) => { + return ( + //{post.content} + + ) + }) + } + + } {video} {iframe} @@ -100,14 +113,19 @@ const styles = StyleSheet.create({ }, poster: { width: "100%", - aspectRatio: 9/6, + aspectRatio: 9 / 6, }, multipleImage: { width: "49%", aspectRatio: 1, margin: 2, }, - iframe:{ + flatlistImages: { + width: 300, + aspectRatio: 1, + margin: 2, + }, + iframe: { width: "100%", minHeight: 300, }