removed scrolling glitch by maintain image height cahce

This commit is contained in:
Nouman Tahir 2021-03-22 19:37:35 +05:00
parent 349f7f2e5b
commit ffac4f2b46
5 changed files with 61 additions and 4 deletions
src

View File

@ -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}
/> />
); );
}; };

View File

@ -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);
}
}} }}
/> />
)} )}

View File

@ -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
View 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);
});
};

View File

@ -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;
} }