Page MenuHomePhorge
Files F32210875

D6718.1765133261.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D6718.1765133261.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,16 +1,26 @@
// @flow
+import { useNavigation, useRoute } from '@react-navigation/native';
import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler';
import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
-import type { MediaInfo } from 'lib/types/media-types';
+import type { MediaInfo, Media } 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 {
+ ImageModalRouteName,
+ VideoPlaybackModalRouteName,
+} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';
+import type {
+ LayoutCoordinates,
+ VerticalBounds,
+} from '../../types/layout-types.js';
const galleryItemGap = 8;
const numColumns = 3;
@@ -18,6 +28,7 @@
type ThreadSettingsMediaGalleryProps = {
+threadID: string,
+limit: number,
+ +verticalBounds: ?VerticalBounds,
};
function ThreadSettingsMediaGallery(
@@ -36,7 +47,7 @@
const galleryItemWidth =
(width - 32 - (numColumns - 1) * galleryItemGap) / numColumns;
- const { threadID, limit } = props;
+ const { threadID, limit, verticalBounds } = props;
const [mediaInfos, setMediaInfos] = React.useState([]);
const callFetchThreadMedia = useServerCall(fetchThreadMedia);
@@ -75,29 +86,17 @@
const renderItem = React.useCallback(
({ item, index }) => {
- const containerStyle =
- index % numColumns === 0
- ? memoizedStyles.mediaContainer
- : memoizedStyles.mediaContainerWithMargin;
-
- const mediaInfoItem: MediaInfo = {
- ...item,
- index,
- };
-
return (
- <View key={item.id} style={containerStyle}>
- <GestureTouchableOpacity style={memoizedStyles.media}>
- <Multimedia mediaInfo={mediaInfoItem} spinnerColor="black" />
- </GestureTouchableOpacity>
- </View>
+ <MediaGalleryItem
+ mediaItem={item}
+ mediaIndex={index}
+ memoizedStyles={memoizedStyles}
+ threadID={threadID}
+ verticalBounds={verticalBounds}
+ />
);
},
- [
- memoizedStyles.media,
- memoizedStyles.mediaContainer,
- memoizedStyles.mediaContainerWithMargin,
- ],
+ [threadID, verticalBounds, memoizedStyles],
);
return (
@@ -111,6 +110,96 @@
);
}
+type MediaGalleryItemProps = {
+ +mediaItem: Media,
+ +mediaIndex: number,
+ +memoizedStyles: {
+ +mediaContainer: ViewStyleProp,
+ +mediaContainerWithMargin: ViewStyleProp,
+ +media: ViewStyleProp,
+ },
+ +threadID: string,
+ +verticalBounds: ?VerticalBounds,
+};
+
+function MediaGalleryItem(props: MediaGalleryItemProps): React.Node {
+ const navigation = useNavigation();
+ const route = useRoute();
+ const ref = React.useRef(null);
+ const onLayout = React.useCallback(() => {}, []);
+ const {
+ threadID,
+ verticalBounds,
+ memoizedStyles,
+ mediaItem,
+ mediaIndex,
+ } = props;
+
+ const navigateToMedia = React.useCallback(
+ (item: Media, index: number) => {
+ ref.current?.measure((x, y, width, height, pageX, pageY) => {
+ const initialCoordinates: LayoutCoordinates = {
+ x: pageX,
+ y: pageY,
+ width,
+ height,
+ };
+
+ const mediaInfo: MediaInfo = {
+ ...item,
+ index,
+ };
+
+ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
+ name:
+ mediaInfo.type === 'video'
+ ? VideoPlaybackModalRouteName
+ : ImageModalRouteName,
+ key: `multimedia|${threadID}|${mediaInfo.index}`,
+ params: {
+ presentedFrom: route.key,
+ mediaInfo,
+ item,
+ initialCoordinates,
+ verticalBounds,
+ },
+ });
+ });
+ },
+ [navigation, route, threadID, verticalBounds],
+ );
+
+ const containerStyle =
+ mediaIndex % numColumns === 0
+ ? memoizedStyles.mediaContainer
+ : memoizedStyles.mediaContainerWithMargin;
+
+ // Cannot assign object literal to `mediaInfoItem` because possibly
+ // missing property `thumbnailID` in `Image` [1] is incompatible with
+ // string [2] in property `thumbnailID`.
+ // $FlowFixMe
+ const mediaInfoItem: MediaInfo = {
+ ...mediaItem,
+ index: mediaIndex,
+ };
+
+ return (
+ <View
+ key={mediaItem.id}
+ style={containerStyle}
+ onLayout={onLayout}
+ ref={ref}
+ >
+ <GestureTouchableOpacity
+ onPress={() => navigateToMedia(mediaItem, mediaIndex)}
+ style={memoizedStyles.media}
+ >
+ <Multimedia mediaInfo={mediaInfoItem} spinnerColor="black" />
+ </GestureTouchableOpacity>
+ </View>
+ );
+}
+
const unboundStyles = {
flatListContainer: {
paddingHorizontal: 16,
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
@@ -208,6 +208,7 @@
+key: string,
+threadInfo: ThreadInfo,
+limit: number,
+ +verticalBounds: ?VerticalBounds,
}
| {
+itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread',
@@ -635,7 +636,8 @@
mediaGalleryListDataSelector = createSelector(
(propsAndState: PropsAndState) => propsAndState.threadInfo,
- (threadInfo: ThreadInfo) => {
+ (propsAndState: PropsAndState) => propsAndState.verticalBounds,
+ (threadInfo: ThreadInfo, verticalBounds: ?VerticalBounds) => {
const listData: ChatSettingsItem[] = [];
const limit = 6;
@@ -652,6 +654,7 @@
key: 'mediaGallery',
threadInfo,
limit,
+ verticalBounds,
});
listData.push({
@@ -954,6 +957,7 @@
<ThreadSettingsMediaGallery
threadID={item.threadInfo.id}
limit={item.limit}
+ verticalBounds={item.verticalBounds}
/>
);
} else if (item.itemType === 'leaveThread') {

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 6:47 PM (20 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845519
Default Alt Text
D6718.1765133261.diff (6 KB)

Event Timeline