karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve performance

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-08-04 13:39:55 +03:00
parent 5958cf57ee
commit 1b09b058e4
7 changed files with 95 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@@ -23,6 +23,7 @@
"react": "18.2.0",
"react-native": "0.72.2",
"react-native-document-picker": "^9.0.1",
"react-native-fast-image": "^8.6.3",
"react-native-file-access": "^3.0.4",
"react-native-gesture-handler": "^2.12.0",
"react-native-get-random-values": "^1.9.0",
@@ -13434,6 +13435,15 @@
}
}
},
"node_modules/react-native-fast-image": {
"version": "8.6.3",
"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz",
"integrity": "sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==",
"peerDependencies": {
"react": "^17 || ^18",
"react-native": ">=0.60.0"
}
},
"node_modules/react-native-file-access": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-native-file-access/-/react-native-file-access-3.0.4.tgz",
@@ -25861,6 +25871,12 @@
"invariant": "^2.2.4"
}
},
"react-native-fast-image": {
"version": "8.6.3",
"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz",
"integrity": "sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==",
"requires": {}
},
"react-native-file-access": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-native-file-access/-/react-native-file-access-3.0.4.tgz",

1
package.json
View File

@@ -28,6 +28,7 @@
"react": "18.2.0",
"react-native": "0.72.2",
"react-native-document-picker": "^9.0.1",
"react-native-fast-image": "^8.6.3",
"react-native-file-access": "^3.0.4",
"react-native-gesture-handler": "^2.12.0",
"react-native-get-random-values": "^1.9.0",

11
src/screens/editors/meme/memeEditor.tsx
View File

@@ -1,8 +1,12 @@
import React, { useEffect, useMemo, useState } from 'react';
import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
import { Image, LayoutAnimation, View } from 'react-native';
import { LayoutAnimation, View } from 'react-native';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import Video from 'react-native-video';
import TextRecognition, {
TextRecognitionResult,
} from '@react-native-ml-kit/text-recognition';
import FastImage from 'react-native-fast-image';
import { LoadingView, MemeFail, TextOverlay } from '../../../components';
import {
getFilenameFromUri,
@@ -13,9 +17,6 @@ import { StagingMeme } from '../../../types';
import { useMemeDimensions } from '../../../hooks';
import { MEME_TYPE } from '../../../database';
import MemeTagSelector from './memeTagSelector/memeTagSelector';
import TextRecognition, {
TextRecognitionResult,
} from '@react-native-ml-kit/text-recognition';
const memeEditorStyles = {
media: {
@@ -95,7 +96,7 @@ const MemeEditor = ({
case MEME_TYPE.GIF: {
return (
<View>
<Image
<FastImage
source={{ uri }}
style={[memeEditorStyles.media, dimensionStyles]}
resizeMode="contain"

46
src/screens/memes/memesList/memesGridItem.tsx
View File

@@ -1,52 +1,41 @@
import React, { useMemo } from 'react';
import { Image, TouchableHighlight } from 'react-native';
import { useSelector } from 'react-redux';
import { TouchableHighlight } from 'react-native';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { AndroidScoped } from 'react-native-file-access';
import FastImage from 'react-native-fast-image';
import { MEME_TYPE, Meme } from '../../../database';
import { RootState } from '../../../state';
import { MemeFail } from '../../../components';
import { getFontAwesome5IconSize } from '../../../utilities';
import { useMemeDimensions } from '../../../hooks';
const MemesGridItem = ({
meme,
index,
focusMeme,
uri,
columns,
}: {
meme: Meme;
index: number;
focusMeme: (index: number) => void;
focusMeme: () => void;
uri: string;
columns: number;
}) => {
const { width } = useSafeAreaFrame();
const gridColumns = useSelector(
(state: RootState) => state.settings.gridColumns,
);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const storageUri = useSelector(
(state: RootState) => state.settings.storageUri,
)!;
const uri = AndroidScoped.appendPath(storageUri, meme.filename);
const itemWidth = useMemo(
() => (width * 0.92 - 5) / columns,
[columns, width],
);
const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
const itemWidth = (width * 0.92 - 5) / gridColumns;
const mediaComponent = useMemo(() => {
switch (meme.memeType) {
case MEME_TYPE.IMAGE:
case MEME_TYPE.GIF:
case MEME_TYPE.VIDEO: {
return (
<Image
<FastImage
source={{ uri }}
style={[
{
width: itemWidth,
height: itemWidth,
},
]}
style={[{ width: itemWidth, height: itemWidth }]}
/>
);
}
@@ -59,14 +48,11 @@ const MemesGridItem = ({
if (!error && (loading || !dimensions)) return <></>;
return (
<TouchableHighlight onPress={() => focusMeme(index)}>
<TouchableHighlight onPress={focusMeme}>
{error ? (
<MemeFail
style={{
width: (width * 0.92 - 5) / gridColumns,
height: (width * 0.92 - 5) / gridColumns,
}}
iconSize={getFontAwesome5IconSize(gridColumns)}
style={{ width: itemWidth, height: itemWidth }}
iconSize={getFontAwesome5IconSize(columns)}
/>
) : (
mediaComponent

30
src/screens/memes/memesList/memesList.tsx
View File

@@ -15,6 +15,7 @@ import { getFlashListItemHeight } from '../../../utilities';
import MemesMasonryItem from './memesMasonryItem';
import MemesGridItem from './memesGridItem';
import MemesListItem from './memesListItem';
import { AndroidScoped } from 'react-native-file-access';
const sharedMemesListStyles = StyleSheet.create({
flashList: {
@@ -66,6 +67,10 @@ const MemesList = ({
const gridColumns = useSelector(
(state: RootState) => state.settings.gridColumns,
);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const storageUri = useSelector(
(state: RootState) => state.settings.storageUri,
)!;
return (
<>
@@ -82,7 +87,12 @@ const MemesList = ({
numColumns={masonryColumns}
showsVerticalScrollIndicator={false}
renderItem={({ item: meme, index }) => (
<MemesMasonryItem meme={meme} index={index} focusMeme={focusMeme} />
<MemesMasonryItem
meme={meme}
focusMeme={() => focusMeme(index)}
uri={AndroidScoped.appendPath(storageUri, meme.filename)}
columns={masonryColumns}
/>
)}
contentContainerStyle={{
paddingTop: flashListPadding,
@@ -96,6 +106,7 @@ const MemesList = ({
)}
onScroll={handleScroll}
fadingEdgeLength={100}
overScrollMode="never"
/>
)}
{view === VIEW.GRID && (
@@ -111,7 +122,12 @@ const MemesList = ({
numColumns={gridColumns}
showsVerticalScrollIndicator={false}
renderItem={({ item: meme, index }) => (
<MemesGridItem meme={meme} index={index} focusMeme={focusMeme} />
<MemesGridItem
meme={meme}
focusMeme={() => focusMeme(index)}
uri={AndroidScoped.appendPath(storageUri, meme.filename)}
columns={gridColumns}
/>
)}
contentContainerStyle={{
paddingTop: flashListPadding,
@@ -125,20 +141,25 @@ const MemesList = ({
)}
onScroll={handleScroll}
fadingEdgeLength={100}
overScrollMode="never"
/>
)}
{view === VIEW.LIST && (
<FlashList
ref={flashListRef}
data={memes}
estimatedItemSize={50}
estimatedItemSize={90}
estimatedListSize={{
height: height,
width: width * 0.92,
}}
showsVerticalScrollIndicator={false}
renderItem={({ item: meme, index }) => (
<MemesListItem meme={meme} index={index} focusMeme={focusMeme} />
<MemesListItem
meme={meme}
focusMeme={() => focusMeme(index)}
uri={AndroidScoped.appendPath(storageUri, meme.filename)}
/>
)}
ItemSeparatorComponent={() => <Divider />}
contentContainerStyle={{
@@ -153,6 +174,7 @@ const MemesList = ({
)}
onScroll={handleScroll}
fadingEdgeLength={100}
overScrollMode="never"
/>
)}
</>

35
src/screens/memes/memesList/memesListItem.tsx
View File

@@ -1,12 +1,10 @@
import React, { useMemo } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { StyleSheet, View } from 'react-native';
import { Text, TouchableRipple } from 'react-native-paper';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { AndroidScoped } from 'react-native-file-access';
import { useSelector } from 'react-redux';
import FastImage from 'react-native-fast-image';
import { MEME_TYPE, Meme } from '../../../database';
import { MemeFail } from '../../../components';
import { RootState } from '../../../state';
import { useMemeDimensions } from '../../../hooks';
const memesListItemStyles = StyleSheet.create({
@@ -35,20 +33,19 @@ const memesListItemStyles = StyleSheet.create({
const MemesListItem = ({
meme,
index,
focusMeme,
uri,
}: {
meme: Meme;
index: number;
focusMeme: (index: number) => void;
focusMeme: () => void;
uri: string;
}) => {
const { width } = useSafeAreaFrame();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const storageUri = useSelector(
(state: RootState) => state.settings.storageUri,
)!;
const uri = AndroidScoped.appendPath(storageUri, meme.filename);
const listItemWidth = useMemo(
() => ({ width: width * 0.92 - 75 - 10 }),
[width],
);
const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
@@ -57,7 +54,7 @@ const MemesListItem = ({
case MEME_TYPE.IMAGE:
case MEME_TYPE.GIF:
case MEME_TYPE.VIDEO: {
return <Image source={{ uri }} style={[memesListItemStyles.image]} />;
return <FastImage source={{ uri }} style={[memesListItemStyles.image]} />;
}
default: {
return <></>;
@@ -68,22 +65,14 @@ const MemesListItem = ({
if (!error && (loading || !dimensions)) return <></>;
return (
<TouchableRipple
onPress={() => focusMeme(index)}
style={memesListItemStyles.view}>
<TouchableRipple onPress={focusMeme} style={memesListItemStyles.view}>
<>
{error ? (
<MemeFail style={memesListItemStyles.image} />
) : (
mediaComponent
)}
<View
style={[
memesListItemStyles.detailsView,
{
width: width * 0.92 - 75 - 10,
},
]}>
<View style={[memesListItemStyles.detailsView, listItemWidth]}>
<Text variant="titleMedium" style={memesListItemStyles.text}>
{meme.title}
</Text>

41
src/screens/memes/memesList/memesMasonryItem.tsx
View File

@@ -1,10 +1,8 @@
import React, { useMemo } from 'react';
import { Image, StyleSheet, TouchableHighlight } from 'react-native';
import { useSelector } from 'react-redux';
import { StyleSheet, TouchableHighlight } from 'react-native';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { AndroidScoped } from 'react-native-file-access';
import FastImage from 'react-native-fast-image';
import { MEME_TYPE, Meme } from '../../../database';
import { RootState } from '../../../state';
import { MemeFail } from '../../../components';
import { getFontAwesome5IconSize } from '../../../utilities';
import { useMemeDimensions } from '../../../hooks';
@@ -21,29 +19,28 @@ const memeMasonryItemStyles = StyleSheet.create({
const MemesMasonryItem = ({
meme,
index,
focusMeme,
uri,
columns,
}: {
meme: Meme;
index: number;
focusMeme: (index: number) => void;
focusMeme: () => void;
uri: string;
columns: number;
}) => {
const { width } = useSafeAreaFrame();
const masonryColumns = useSelector(
(state: RootState) => state.settings.masonryColumns,
);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const storageUri = useSelector(
(state: RootState) => state.settings.storageUri,
)!;
const uri = AndroidScoped.appendPath(storageUri, meme.filename);
const itemWidth = useMemo(
() => (width * 0.92 - 5) / columns - 5,
[columns, width],
);
const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
const itemWidth = (width * 0.92 - 5) / masonryColumns - 5;
const itemHeight =
((width * 0.92) / masonryColumns - 5) / (dimensions?.aspectRatio ?? 1);
const itemHeight = useMemo(
() => ((width * 0.92) / columns - 5) / (dimensions?.aspectRatio ?? 1),
[columns, dimensions?.aspectRatio, width],
);
const mediaComponent = useMemo(() => {
switch (meme.memeType) {
@@ -51,7 +48,7 @@ const MemesMasonryItem = ({
case MEME_TYPE.GIF:
case MEME_TYPE.VIDEO: {
return (
<Image
<FastImage
source={{ uri }}
style={[
memeMasonryItemStyles.image,
@@ -72,16 +69,14 @@ const MemesMasonryItem = ({
if (!error && (loading || !dimensions)) return <></>;
return (
<TouchableHighlight
onPress={() => focusMeme(index)}
style={memeMasonryItemStyles.view}>
<TouchableHighlight onPress={focusMeme} style={memeMasonryItemStyles.view}>
{error || !dimensions ? (
<MemeFail
style={[
memeMasonryItemStyles.image,
{ width: itemWidth, height: itemHeight },
]}
iconSize={getFontAwesome5IconSize(masonryColumns)}
iconSize={getFontAwesome5IconSize(columns)}
/>
) : (
mediaComponent