Page MenuHomePhabricator
Files F3359034

D6659.id22421.diff
No OneTemporary
Actions

D6659.id22421.diff
View Options

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,27 @@
// @flow
import * as React from 'react';
-import {
- View,
- TouchableOpacity,
- Image,
- useWindowDimensions,
-} from 'react-native';
+import { View, TouchableOpacity, useWindowDimensions } from 'react-native';
+import FastImage from 'react-native-fast-image';
import { FlatList } from 'react-native-gesture-handler';
+import Video from 'react-native-video';
+
+import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useServerCall } from 'lib/utils/action-utils.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 +34,18 @@
// 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,10 +74,29 @@
? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin;
+ if (item.type === 'photo') {
+ return (
+ <View key={item.id} style={containerStyle}>
+ <TouchableOpacity>
+ <FastImage
+ source={{ uri: item.uri }}
+ style={memoizedStyles.media}
+ />
+ </TouchableOpacity>
+ </View>
+ );
+ }
return (
<View key={item.id} style={containerStyle}>
<TouchableOpacity>
- <Image source={item.source} style={memoizedStyles.media} />
+ <Video
+ source={{ uri: item.uri }}
+ style={memoizedStyles.media}
+ resizeMode="cover"
+ repeat={true}
+ muted={true}
+ paused={false}
+ />
</TouchableOpacity>
</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({
@@ -929,7 +932,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
Mon, Nov 25, 6:48 AM (11 h, 10 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2578844
Default Alt Text
D6659.id22421.diff (4 KB)

Event Timeline