diff --git a/lib/types/media-types.js b/lib/types/media-types.js
--- a/lib/types/media-types.js
+++ b/lib/types/media-types.js
@@ -50,12 +50,10 @@
export type MediaInfo =
| {
...Image,
- +corners: Corners,
+index: number,
}
| {
...Video,
- +corners: Corners,
+index: number,
};
diff --git a/native/chat/inner-multimedia-message.react.js b/native/chat/inner-multimedia-message.react.js
--- a/native/chat/inner-multimedia-message.react.js
+++ b/native/chat/inner-multimedia-message.react.js
@@ -119,7 +119,6 @@
const { pendingUploads } = this.props.item;
const mediaInfo = {
...media,
- corners: filteredCorners,
index,
};
const pendingUpload = pendingUploads && pendingUploads[media.id];
diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js
--- a/native/chat/settings/thread-settings-media-gallery.react.js
+++ b/native/chat/settings/thread-settings-media-gallery.react.js
@@ -1,20 +1,28 @@
// @flow
import * as React from 'react';
-import {
- View,
- TouchableOpacity,
- Image,
- useWindowDimensions,
-} from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
+import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import type { MediaInfo } from 'lib/types/media-types';
+import { useServerCall } from 'lib/utils/action-utils.js';
+
+import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
+import Multimedia from '../../media/multimedia.react.js';
import { useStyles } from '../../themes/colors.js';
const galleryItemGap = 8;
const numColumns = 3;
-function ThreadSettingsMediaGallery(): React.Node {
+type ThreadSettingsMediaGalleryProps = {
+ +threadID: string,
+ +limit: number,
+};
+
+function ThreadSettingsMediaGallery(
+ props: ThreadSettingsMediaGalleryProps,
+): React.Node {
const styles = useStyles(unboundStyles);
const { width } = useWindowDimensions();
@@ -27,7 +35,22 @@
// E.g. 16px, media, galleryItemGap, media, galleryItemGap, media, 16px
const galleryItemWidth =
(width - 32 - (numColumns - 1) * galleryItemGap) / numColumns;
- const mediaInfos = React.useMemo(() => [], []);
+
+ const { threadID, limit } = props;
+ const [mediaInfos, setMediaInfos] = React.useState([]);
+ const callFetchThreadMedia = useServerCall(fetchThreadMedia);
+
+ React.useEffect(() => {
+ const fetchData = async () => {
+ const result = await callFetchThreadMedia({
+ threadID,
+ limit,
+ offset: 0,
+ });
+ setMediaInfos(result.media);
+ };
+ fetchData();
+ }, [callFetchThreadMedia, threadID, limit]);
const memoizedStyles = React.useMemo(() => {
return {
@@ -56,11 +79,16 @@
? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin;
+ const mediaInfoItem: MediaInfo = {
+ ...item,
+ index,
+ };
+
return (
-
-
-
+
+
+
);
},
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -198,6 +198,7 @@
+itemType: 'mediaGallery',
+key: string,
+threadInfo: ThreadInfo,
+ +limit: number,
}
| {
+itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread',
@@ -627,6 +628,7 @@
(propsAndState: PropsAndState) => propsAndState.threadInfo,
(threadInfo: ThreadInfo) => {
const listData: ChatSettingsItem[] = [];
+ const limit = 6;
listData.push({
itemType: 'header',
@@ -639,6 +641,7 @@
itemType: 'mediaGallery',
key: 'mediaGallery',
threadInfo,
+ limit,
});
listData.push({
@@ -928,7 +931,12 @@
} else if (item.itemType === 'addMember') {
return ;
} else if (item.itemType === 'mediaGallery') {
- return ;
+ return (
+
+ );
} else if (item.itemType === 'leaveThread') {
return (