Page MenuHomePhorge
Files F33092653

D9363.1768464121.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D9363.1768464121.diff
View Options

diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -141,6 +141,7 @@
+navigation: AppNavigationProp<'ImageModal'>,
+route: NavigationRoute<'ImageModal'>,
+children: React.Node,
+ +contentDimensions: Dimensions,
+saveContentCallback?: () => Promise<mixed>,
+copyContentCallback?: () => mixed,
};
@@ -891,7 +892,7 @@
this.centerY = new Value(centerY);
}
- const { width, height } = this.imageDimensions;
+ const { width, height } = this.props.contentDimensions;
if (this.imageWidth) {
this.imageWidth.setValue(width);
} else {
@@ -935,37 +936,8 @@
return { width, height: safeAreaHeight };
}
- get imageDimensions(): Dimensions {
- // Make space for the close button
- let { height: maxHeight, width: maxWidth } = this.frame;
- if (maxHeight > maxWidth) {
- maxHeight -= 100;
- } else {
- maxWidth -= 100;
- }
-
- const { dimensions } = this.props.route.params.mediaInfo;
- if (dimensions.height < maxHeight && dimensions.width < maxWidth) {
- return dimensions;
- }
-
- const heightRatio = maxHeight / dimensions.height;
- const widthRatio = maxWidth / dimensions.width;
- if (heightRatio < widthRatio) {
- return {
- height: maxHeight,
- width: dimensions.width * heightRatio,
- };
- } else {
- return {
- width: maxWidth,
- height: dimensions.height * widthRatio,
- };
- }
- }
-
- get imageContainerStyle() {
- const { height, width } = this.imageDimensions;
+ get contentViewContainerStyle() {
+ const { height, width } = this.props.contentDimensions;
const { height: frameHeight, width: frameWidth } = this.frame;
const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
const left = (frameWidth - width) / 2;
@@ -1068,7 +1040,7 @@
{statusBar}
<Animated.View style={[styles.backdrop, backdropStyle]} />
<View style={this.contentContainerStyle}>
- <Animated.View style={this.imageContainerStyle}>
+ <Animated.View style={this.contentViewContainerStyle}>
{children}
</Animated.View>
</View>
diff --git a/native/media/image-modal.react.js b/native/media/image-modal.react.js
--- a/native/media/image-modal.react.js
+++ b/native/media/image-modal.react.js
@@ -4,7 +4,7 @@
import invariant from 'invariant';
import * as React from 'react';
-import { type MediaInfo } from 'lib/types/media-types.js';
+import type { MediaInfo, Dimensions } from 'lib/types/media-types.js';
import Multimedia from './multimedia.react.js';
import { useIntentionalSaveMedia } from './save-media.js';
@@ -12,6 +12,8 @@
import { displayActionResultModal } from '../navigation/action-result-modal.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
+import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js';
import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
import {
type VerticalBounds,
@@ -35,6 +37,8 @@
const { navigation, route } = props;
const { mediaInfo, item } = route.params;
+ const dimensionsInfo = useSelector(derivedDimensionsInfoSelector);
+
const intentionalSaveMedia = useIntentionalSaveMedia();
const onPressSave = React.useCallback(() => {
@@ -56,18 +60,53 @@
});
}, [mediaInfo]);
+ const imageDimensions: Dimensions = React.useMemo(() => {
+ const frame = {
+ width: dimensionsInfo.width,
+ height: dimensionsInfo.safeAreaHeight,
+ };
+
+ // Make space for the close button
+ let { height: maxHeight, width: maxWidth } = frame;
+ if (maxHeight > maxWidth) {
+ maxHeight -= 100;
+ } else {
+ maxWidth -= 100;
+ }
+
+ const { dimensions } = mediaInfo;
+ if (dimensions.height < maxHeight && dimensions.width < maxWidth) {
+ return dimensions;
+ }
+
+ const heightRatio = maxHeight / dimensions.height;
+ const widthRatio = maxWidth / dimensions.width;
+ if (heightRatio < widthRatio) {
+ return {
+ height: maxHeight,
+ width: dimensions.width * heightRatio,
+ };
+ } else {
+ return {
+ width: maxWidth,
+ height: dimensions.height * widthRatio,
+ };
+ }
+ }, [dimensionsInfo.safeAreaHeight, dimensionsInfo.width, mediaInfo]);
+
const imageModal = React.useMemo(
() => (
<FullScreenViewModal
navigation={navigation}
route={route}
+ contentDimensions={imageDimensions}
saveContentCallback={onPressSave}
copyContentCallback={onPressCopy}
>
<Multimedia mediaInfo={mediaInfo} spinnerColor="white" />
</FullScreenViewModal>
),
- [mediaInfo, navigation, onPressCopy, onPressSave, route],
+ [imageDimensions, mediaInfo, navigation, onPressCopy, onPressSave, route],
);
return imageModal;

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 8:02 AM (15 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5936790
Default Alt Text
D9363.1768464121.diff (5 KB)

Event Timeline