Improve asset sizing

micahlt · Mar 19, 2024 · 7609f30 · 7609f30
1 parent 91b65f5
commit 7609f30
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/src/components/AutoImage.jsx b/src/components/AutoImage.jsx
@@ -1,8 +1,17 @@
 import * as React from 'react';
 import { Image } from 'react-native';
-const AutoImage = ({ src, fitWidth = 0, token, style = {} }) => {
- const [aspect, setAspect] = React.useState(0);
- return (
+const AutoImage = ({
+ src,
+ fitWidth = 0,
+ srcWidth,
+ srcHeight,
+ token,
+ style = {},
+}) => {
+ const aspect = React.useMemo(() => {
+ return srcHeight / srcWidth;
+ }, []);
+ return React.useCallback(
  <Image
  source={{
  uri: src,
@@ -14,18 +23,11 @@ const AutoImage = ({ src, fitWidth = 0, token, style = {} }) => {
  width: fitWidth,
  height: fitWidth * aspect,
  borderRadius: 7,
- marginBottom: 5,
  ...style,
  }}
  resizeMode="cover"
- onLoad={({
- nativeEvent: {
- source: { width, height },
- },
- }) => {
- setAspect(height / width);
- }}
- />
+ />,
+ [],
  );
 };
 

diff --git a/src/components/AutoVideo.jsx b/src/components/AutoVideo.jsx
@@ -9,19 +9,20 @@ const AutoVideo = ({
  token,
  style = {},
  poster,
+ format,
 }) => {
  const aspect = React.useMemo(() => {
  return srcHeight / srcWidth;
  }, []);
  return React.useCallback(
  <View
  style={{
- borderRadius: 15,
+ borderRadius: 7,
  overflow: 'hidden',
  borderRadius: 10,
- marginBottom: 8,
  width: fitWidth,
  height: fitWidth * aspect,
+ ...style,
  }}>
  <Video
  paused={true}
@@ -30,6 +31,7 @@ const AutoVideo = ({
  headers: {
  Authorization: `Bearer ${token}`,
  },
+ type: 'm3u8',
  }}
  style={{ width: '100%', height: '100%' }}
  poster={poster || ''}

diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
@@ -123,16 +123,41 @@ function Comment({ comment, nav }) {
  </Text>
  )}
 
- {comment.assets.length > 0 &&
- comment.assets[0].type == 'image' &&
- width && (
- <AutoImage
- src={comment.assets[0].url}
- fitWidth={width - 35}
- token={API.userToken}
- style={comment.text.trim().length < 1 ? { marginTop: 10 } : {}}
- />
- )}
+ {width &&
+ comment.assets.map(asset => (
+ <React.Fragment key={asset.id}>
+ {asset.type == 'image' && (
+ <AutoImage
+ src={asset.url}
+ fitWidth={width - 35}
+ srcWidth={asset.width}
+ srcHeight={asset.height}
+ token={API.userToken}
+ style={
+ comment.text.trim().length < 1
+ ? { marginTop: 10, marginBottom: 10 }
+ : { marginBottom: 10 }
+ }
+ />
+ )}
+ {asset.type == 'video' && (
+ <AutoVideo
+ fitWidth={width - 35}
+ srcWidth={asset.width}
+ srcHeight={asset.height}
+ token={API.userToken}
+ src={asset.url}
+ format={asset.content_type}
+ poster={asset.thumbnail_asset.url}
+ style={
+ comment.text.trim().length < 1
+ ? { marginTop: 10, marginBottom: 10 }
+ : { marginBottom: 10 }
+ }
+ />
+ )}
+ </React.Fragment>
+ ))}
 
  <View
  style={{

diff --git a/src/components/Post.jsx b/src/components/Post.jsx
@@ -129,6 +129,8 @@ function Post({ post, nav, commentView = false }) {
  <AutoImage
  src={asset.url}
  fitWidth={width - 35}
+ srcWidth={asset.width}
+ srcHeight={asset.height}
  token={API.userToken}
  style={
  post.text.trim().length < 1
@@ -144,7 +146,13 @@ function Post({ post, nav, commentView = false }) {
  srcHeight={asset.height}
  token={API.userToken}
  src={asset.url}
+ format={asset.content_type}
  poster={asset.thumbnail_asset.url}
+ style={
+ post.text.trim().length < 1
+ ? { marginTop: 10, marginBottom: 10 }
+ : { marginBottom: 10 }
+ }
  />
  )}
  </React.Fragment>