diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index ac9b3e0..db6941c 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -18,7 +18,7 @@ const TEST_POSTS = [ content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ - {preview_url: TEST_IMAGE} + {url: TEST_IMAGE} ] }, { @@ -31,7 +31,9 @@ const TEST_POSTS = [ content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ - {preview_url: TEST_IMAGE} + { url: "https://college.mayo.edu/media/mccms/content-assets/campus-amp-community/arizona/mayo-clinic-phoenix-arizona-is453080663-hero-mobile.jpg" }, + { url: TEST_IMAGE }, + { url: TEST_IMAGE } ] } ]; diff --git a/src/components/posts/post.js b/src/components/posts/post.js index 2a9905f..5767612 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -1,5 +1,12 @@ import React, { useEffect, useState } from "react"; -import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native"; +import { + Image, + View, + Text, + Dimensions, + TouchableWithoutFeedback, + ScrollView +} from "react-native"; import { Menu, @@ -9,6 +16,7 @@ import { renderers } from "react-native-popup-menu"; + import { pluralize, timeToAge } from "src/interface/rendering" import PostActionBarJsx from "src/components/posts/post-action-bar"; @@ -39,6 +47,29 @@ function getAutoHeight(w1, h1, w2) { return w2 * (h1 / w1) } +function getDimensionsPromises(uris) { + return uris.map(attachment => new Promise(resolve => { + Image.getSize(attachment.url, (width, height) => { + const autoHeight = getAutoHeight(width, height, SCREEN_WIDTH) + + resolve([SCREEN_WIDTH, autoHeight]); + }); + })); +} + +const PostImageJsx = (props) => { + return +}; + export const RawPostJsx = (props) => { const repliesCount = props.data.replies_count; @@ -74,17 +105,33 @@ export const RawPostJsx = (props) => { - { /* TODO: support for more than one image per post */ } - + { + props.data.media_attachments.length > 1 ? + + { + props.data.media_attachments + .map((attachment, i) => { + return (); + }) + } + + : + } + reblogged = { props.data.reblogged } /> { props.data.username } { props.data.content } @@ -116,18 +163,15 @@ export const PostByDataJsx = (props) => { */ let [state, setState] = useState({ - width: 0, - height: 0, - loaded: false + loaded: false, + dimensions: [] }); useEffect(() => { - Image.getSize(TEST_IMAGE, (width, height) => { - const newHeight = getAutoHeight(width, height, SCREEN_WIDTH) - + Promise.all(getDimensionsPromises(props.data.media_attachments)) + .then(dimensions => { setState({ - width: SCREEN_WIDTH, - height: newHeight, + dimensions: dimensions, loaded: true }); }); @@ -138,8 +182,7 @@ export const PostByDataJsx = (props) => { { state.loaded ? : } @@ -159,37 +202,36 @@ export const PostByIdJsx = (props) => { reblogged: false, content: "", timestamp: 0, + loaded: false, + dimensions: [] }); useEffect(() => { // TODO: Make API request using props.id, set it as the state - ((/* This would be the data retrieved */) => { - Image.getSize(TEST_IMAGE, (width, height) => { - const newHeight = getAutoHeight(width, height, SCREEN_WIDTH) - + (() => { + Promise.all(getDimensionsPromises([{ url: TEST_IMAGE }])) + .then(dimensions => { setState({ avatar: TEST_IMAGE, username: "njms", - media_attachments: [TEST_IMAGE], + media_attachments: [{ url: TEST_IMAGE }], favourited: false, reblogged: false, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, - width: SCREEN_WIDTH, - height: newHeight, - loaded: true + loaded: true, + dimensions: dimensions }); }); })(); - }, []); + }); return ( { state.loaded ? : } @@ -229,7 +271,14 @@ const styles = { photo: { flex: 1, }, - + carousel: { + width: SCREEN_WIDTH, + height: SCREEN_WIDTH, + }, + carouselContainer: { + display: "flex", + alignItems: "center" + }, caption: { padding: SCREEN_WIDTH / 24, },