79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Image, TouchableHighlight } from 'react-native';
|
|
import { useSelector } from 'react-redux';
|
|
import { useSafeAreaFrame } from 'react-native-safe-area-context';
|
|
import { AndroidScoped } from 'react-native-file-access';
|
|
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,
|
|
}: {
|
|
meme: Meme;
|
|
index: number;
|
|
focusMeme: (index: number) => void;
|
|
}) => {
|
|
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 { 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
|
|
source={{ uri }}
|
|
style={[
|
|
{
|
|
width: itemWidth,
|
|
height: itemWidth,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
default: {
|
|
return <></>;
|
|
}
|
|
}
|
|
}, [itemWidth, meme.memeType, uri]);
|
|
|
|
if (!error && (loading || !dimensions)) return <></>;
|
|
|
|
return (
|
|
<TouchableHighlight onPress={() => focusMeme(index)}>
|
|
{error ? (
|
|
<MemeFail
|
|
style={{
|
|
width: (width * 0.92 - 5) / gridColumns,
|
|
height: (width * 0.92 - 5) / gridColumns,
|
|
}}
|
|
iconSize={getFontAwesome5IconSize(gridColumns)}
|
|
/>
|
|
) : (
|
|
mediaComponent
|
|
)}
|
|
</TouchableHighlight>
|
|
);
|
|
};
|
|
|
|
export default MemesGridItem;
|