mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-25 14:22:14 +03:00
removed scrolling glitch by maintain image height cahce
This commit is contained in:
parent
349f7f2e5b
commit
ffac4f2b46
src
components
utils
@ -27,6 +27,8 @@ const PostCardContainer = ({
|
|||||||
content,
|
content,
|
||||||
isHideImage,
|
isHideImage,
|
||||||
nsfw,
|
nsfw,
|
||||||
|
imageHeight,
|
||||||
|
setImageHeight,
|
||||||
}) => {
|
}) => {
|
||||||
const [_content, setContent] = useState(content);
|
const [_content, setContent] = useState(content);
|
||||||
const [reblogs, setReblogs] = useState([]);
|
const [reblogs, setReblogs] = useState([]);
|
||||||
@ -139,6 +141,8 @@ const PostCardContainer = ({
|
|||||||
isNsfwPost={nsfw || '1'}
|
isNsfwPost={nsfw || '1'}
|
||||||
reblogs={reblogs}
|
reblogs={reblogs}
|
||||||
activeVotes={activeVotes}
|
activeVotes={activeVotes}
|
||||||
|
imageHeight={imageHeight}
|
||||||
|
setImageHeight={setImageHeight}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -37,9 +37,11 @@ const PostCardView = ({
|
|||||||
isNsfwPost,
|
isNsfwPost,
|
||||||
intl,
|
intl,
|
||||||
activeVotes,
|
activeVotes,
|
||||||
|
imageHeight,
|
||||||
|
setImageHeight,
|
||||||
}) => {
|
}) => {
|
||||||
const [activeVotesCount, setActiveVotesCount] = useState(activeVotes.length || 0);
|
const [activeVotesCount, setActiveVotesCount] = useState(activeVotes.length || 0);
|
||||||
const [calcImgHeight, setCalcImgHeight] = useState(300);
|
const [calcImgHeight, setCalcImgHeight] = useState(imageHeight || 300);
|
||||||
|
|
||||||
// Component Functions
|
// Component Functions
|
||||||
|
|
||||||
@ -115,9 +117,12 @@ const PostCardView = ({
|
|||||||
: FastImage.resizeMode.cover
|
: FastImage.resizeMode.cover
|
||||||
}
|
}
|
||||||
onLoad={(evt) => {
|
onLoad={(evt) => {
|
||||||
setCalcImgHeight(
|
if (!imageHeight) {
|
||||||
(evt.nativeEvent.height / evt.nativeEvent.width) * (dim.width - 18),
|
const height =
|
||||||
);
|
(evt.nativeEvent.height / evt.nativeEvent.width) * (dim.width - 18);
|
||||||
|
setCalcImgHeight(height);
|
||||||
|
setImageHeight(content.local_id, height);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -17,6 +17,8 @@ const postsListContainer = ({
|
|||||||
}:postsListContainerProps, ref) => {
|
}:postsListContainerProps, ref) => {
|
||||||
const flatListRef = useRef(null);
|
const flatListRef = useRef(null);
|
||||||
|
|
||||||
|
const [imageHeights, setImageHeights] = useState(new Map<number, number>());
|
||||||
|
|
||||||
const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails);
|
const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails);
|
||||||
const posts = useSelector((state) => {
|
const posts = useSelector((state) => {
|
||||||
return isFeedScreen
|
return isFeedScreen
|
||||||
@ -56,29 +58,50 @@ const postsListContainer = ({
|
|||||||
|
|
||||||
}, [scrollPosition])
|
}, [scrollPosition])
|
||||||
|
|
||||||
|
|
||||||
|
const _setImageHeightInMap = (postId:number, height:number) => {
|
||||||
|
if(postId && height){
|
||||||
|
setImageHeights(imageHeights.set(postId, height));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const _renderItem = ({ item, index }:{item:any, index:number}) => {
|
const _renderItem = ({ item, index }:{item:any, index:number}) => {
|
||||||
const e = [];
|
const e = [];
|
||||||
|
|
||||||
if (index % 3 === 0) {
|
if (index % 3 === 0) {
|
||||||
const ix = index / 3 - 1;
|
const ix = index / 3 - 1;
|
||||||
if (promotedPosts[ix] !== undefined) {
|
if (promotedPosts[ix] !== undefined) {
|
||||||
const p = promotedPosts[ix];
|
const p = promotedPosts[ix];
|
||||||
if (get(p, 'author', null) && posts.filter((x) => x.permlink === p.permlink).length <= 0) {
|
if (get(p, 'author', null) && posts.filter((x) => x.permlink === p.permlink).length <= 0) {
|
||||||
|
|
||||||
|
//get image height from cache if available
|
||||||
|
const localId = p.local_id;
|
||||||
|
const imgHeight = imageHeights.get(localId)
|
||||||
|
|
||||||
e.push(
|
e.push(
|
||||||
<PostCard
|
<PostCard
|
||||||
key={`${p.author}-${p.permlink}-prom`}
|
key={`${p.author}-${p.permlink}-prom`}
|
||||||
content={p}
|
content={p}
|
||||||
isHideImage={isHideImages}
|
isHideImage={isHideImages}
|
||||||
|
imageHeight={imgHeight}
|
||||||
|
setImageHeight = {_setImageHeightInMap}
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (get(item, 'author', null)) {
|
if (get(item, 'author', null)) {
|
||||||
|
//get image height from cache if available
|
||||||
|
const localId = item.local_id
|
||||||
|
const imgHeight = imageHeights.get(localId)
|
||||||
|
|
||||||
e.push(
|
e.push(
|
||||||
<PostCard
|
<PostCard
|
||||||
key={`${item.author}-${item.permlink}`}
|
key={`${item.author}-${item.permlink}`}
|
||||||
content={item}
|
content={item}
|
||||||
isHideImage={isHideImages}
|
isHideImage={isHideImages}
|
||||||
|
imageHeight={imgHeight}
|
||||||
|
setImageHeight = {_setImageHeightInMap}
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -100,6 +123,7 @@ const postsListContainer = ({
|
|||||||
maxToRenderPerBatch={3}
|
maxToRenderPerBatch={3}
|
||||||
initialNumToRender={3}
|
initialNumToRender={3}
|
||||||
windowSize={5}
|
windowSize={5}
|
||||||
|
extraData={imageHeights}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
20
src/utils/generateUuid.ts
Normal file
20
src/utils/generateUuid.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
export default ({short}:{short:boolean} = {short:false}): string => {
|
||||||
|
var d = new Date().getTime(); //Timestamp
|
||||||
|
var d2 = 0;
|
||||||
|
const variant = short
|
||||||
|
? 'xxxx-4xxx-yxxx'
|
||||||
|
: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
|
||||||
|
return variant.replace(/[xy]/g, function (c) {
|
||||||
|
var r = Math.random() * 16; //random number between 0 and 16
|
||||||
|
if (d > 0) {
|
||||||
|
//Use timestamp until depleted
|
||||||
|
r = (d + r) % 16 | 0;
|
||||||
|
d = Math.floor(d / 16);
|
||||||
|
} else {
|
||||||
|
//Use microseconds since page-load if supported
|
||||||
|
r = (d2 + r) % 16 | 0;
|
||||||
|
d2 = Math.floor(d2 / 16);
|
||||||
|
}
|
||||||
|
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
|
||||||
|
});
|
||||||
|
};
|
@ -9,6 +9,7 @@ import FastImage from 'react-native-fast-image';
|
|||||||
import parseAsset from './parseAsset';
|
import parseAsset from './parseAsset';
|
||||||
import { getReputation } from './reputation';
|
import { getReputation } from './reputation';
|
||||||
import { getResizedAvatar, getResizedImage } from './image';
|
import { getResizedAvatar, getResizedImage } from './image';
|
||||||
|
import generateUuid from './generateUuid';
|
||||||
|
|
||||||
const webp = Platform.OS === 'ios' ? false : true;
|
const webp = Platform.OS === 'ios' ? false : true;
|
||||||
|
|
||||||
@ -24,6 +25,9 @@ export const parsePost = (post, currentUserName, isPromoted, isList = false) =>
|
|||||||
if (!post) {
|
if (!post) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
post.local_id = generateUuid({ short: true });
|
||||||
|
|
||||||
if (currentUserName === post.author) {
|
if (currentUserName === post.author) {
|
||||||
post.markdownBody = post.body;
|
post.markdownBody = post.body;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user