Page MenuHomePhabricator

D6659.id23116.diff
No OneTemporary

D6659.id23116.diff

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 (
<View key={item.id} style={containerStyle}>
- <TouchableOpacity>
- <Image source={item.source} style={memoizedStyles.media} />
- </TouchableOpacity>
+ <GestureTouchableOpacity style={memoizedStyles.media}>
+ <Multimedia mediaInfo={mediaInfoItem} spinnerColor="black" />
+ </GestureTouchableOpacity>
</View>
);
},
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 <ThreadSettingsAddMember onPress={this.onPressAddMember} />;
} else if (item.itemType === 'mediaGallery') {
- return <ThreadSettingsMediaGallery />;
+ return (
+ <ThreadSettingsMediaGallery
+ threadID={item.threadInfo.id}
+ limit={item.limit}
+ />
+ );
} else if (item.itemType === 'leaveThread') {
return (
<ThreadSettingsLeaveThread

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 21, 4:18 PM (3 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2556526
Default Alt Text
D6659.id23116.diff (4 KB)

Event Timeline