Page MenuHomePhorge
Files F33114826

D9362.1768485113.diff
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

D9362.1768485113.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
@@ -1,6 +1,5 @@
// @flow
-import Clipboard from '@react-native-clipboard/clipboard';
import invariant from 'invariant';
import * as React from 'react';
import {
@@ -24,11 +23,6 @@
import SWMansionIcon from './swmansion-icon.react.js';
import ConnectedStatusBar from '../connected-status-bar.react.js';
-import {
- useIntentionalSaveMedia,
- type IntentionalSaveMedia,
-} from '../media/save-media.js';
-import { displayActionResultModal } from '../navigation/action-result-modal.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import {
OverlayContext,
@@ -147,12 +141,13 @@
+navigation: AppNavigationProp<'ImageModal'>,
+route: NavigationRoute<'ImageModal'>,
+children: React.Node,
+ +saveContentCallback?: () => Promise<mixed>,
+ +copyContentCallback?: () => mixed,
};
type Props = {
...BaseProps,
// Redux state
+dimensions: DerivedDimensionsInfo,
- +intentionalSaveMedia: IntentionalSaveMedia,
// withOverlayContext
+overlayContext: ?OverlayContextType,
};
@@ -1009,6 +1004,8 @@
}
render() {
+ const { children, saveContentCallback, copyContentCallback } = this.props;
+
const statusBar = FullScreenViewModal.isActive(this.props) ? (
<ConnectedStatusBar hidden />
) : null;
@@ -1020,11 +1017,25 @@
opacity: this.actionLinksOpacity,
};
+ let saveButton;
+ if (saveContentCallback) {
+ saveButton = (
+ <TouchableOpacity
+ onPress={saveContentCallback}
+ disabled={!this.state.actionLinksEnabled}
+ style={styles.mediaIconButtons}
+ >
+ <SWMansionIcon name="save" style={styles.mediaIcon} />
+ <Text style={styles.mediaIconText}>Save</Text>
+ </TouchableOpacity>
+ );
+ }
+
let copyButton;
- if (Platform.OS === 'ios') {
+ if (Platform.OS === 'ios' && copyContentCallback) {
copyButton = (
<TouchableOpacity
- onPress={this.copy}
+ onPress={copyContentCallback}
disabled={!this.state.actionLinksEnabled}
style={styles.mediaIconButtons}
>
@@ -1034,13 +1045,31 @@
);
}
+ let mediaActionButtons;
+ if (saveContentCallback || copyContentCallback) {
+ mediaActionButtons = (
+ <Animated.View
+ style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
+ >
+ <View
+ style={styles.mediaIconsRow}
+ onLayout={this.onMediaIconsLayout}
+ ref={this.mediaIconsRef}
+ >
+ {saveButton}
+ {copyButton}
+ </View>
+ </Animated.View>
+ );
+ }
+
const view = (
<Animated.View style={styles.container}>
{statusBar}
<Animated.View style={[styles.backdrop, backdropStyle]} />
<View style={this.contentContainerStyle}>
<Animated.View style={this.imageContainerStyle}>
- {this.props.children}
+ {children}
</Animated.View>
</View>
<SafeAreaView style={styles.buttonsOverlay}>
@@ -1057,25 +1086,7 @@
<Text style={styles.closeButton}>×</Text>
</TouchableOpacity>
</Animated.View>
- <Animated.View
- style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
- >
- <View
- style={styles.mediaIconsRow}
- onLayout={this.onMediaIconsLayout}
- ref={this.mediaIconsRef}
- >
- <TouchableOpacity
- onPress={this.save}
- disabled={!this.state.actionLinksEnabled}
- style={styles.mediaIconButtons}
- >
- <SWMansionIcon name="save" style={styles.mediaIcon} />
- <Text style={styles.mediaIconText}>Save</Text>
- </TouchableOpacity>
- {copyButton}
- </View>
- </Animated.View>
+ {mediaActionButtons}
</View>
</SafeAreaView>
</Animated.View>
@@ -1126,26 +1137,6 @@
this.props.navigation.goBackOnce();
};
- save = () => {
- const { mediaInfo, item } = this.props.route.params;
- invariant(
- mediaInfo.type === 'photo' || mediaInfo.type === 'video',
- 'saving media of type ' + mediaInfo.type + ' is not supported',
- );
-
- const { id: uploadID, uri } = mediaInfo;
- const { id: messageServerID, localID: messageLocalID } = item.messageInfo;
- const ids = { uploadID, messageServerID, messageLocalID };
- return this.props.intentionalSaveMedia(uri, ids);
- };
-
- copy = () => {
- const { uri } = this.props.route.params.mediaInfo;
- Clipboard.setImageFromURL(uri, success => {
- displayActionResultModal(success ? 'copied!' : 'failed to copy :(');
- });
- };
-
setCloseButtonEnabled = ([enabledNum]: [number]) => {
const enabled = !!enabledNum;
if (this.state.closeButtonEnabled !== enabled) {
@@ -1275,13 +1266,11 @@
) {
const dimensions = useSelector(derivedDimensionsInfoSelector);
const overlayContext = React.useContext(OverlayContext);
- const intentionalSaveMedia = useIntentionalSaveMedia();
return (
<FullScreenViewModal
{...props}
dimensions={dimensions}
overlayContext={overlayContext}
- intentionalSaveMedia={intentionalSaveMedia}
/>
);
});
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
@@ -1,11 +1,15 @@
// @flow
+import Clipboard from '@react-native-clipboard/clipboard';
+import invariant from 'invariant';
import * as React from 'react';
import { type MediaInfo } from 'lib/types/media-types.js';
import Multimedia from './multimedia.react.js';
+import { useIntentionalSaveMedia } from './save-media.js';
import FullScreenViewModal from '../components/full-screen-view-modal.react.js';
+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 type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
@@ -29,14 +33,41 @@
function ImageModal(props: Props): React.Node {
const { navigation, route } = props;
+ const { mediaInfo, item } = route.params;
+
+ const intentionalSaveMedia = useIntentionalSaveMedia();
+
+ const onPressSave = React.useCallback(() => {
+ invariant(
+ mediaInfo.type === 'photo' || mediaInfo.type === 'video',
+ 'saving media of type ' + mediaInfo.type + ' is not supported',
+ );
+
+ const { id: uploadID, uri } = mediaInfo;
+ const { id: messageServerID, localID: messageLocalID } = item.messageInfo;
+ const ids = { uploadID, messageServerID, messageLocalID };
+ return intentionalSaveMedia(uri, ids);
+ }, [intentionalSaveMedia, item.messageInfo, mediaInfo]);
+
+ const onPressCopy = React.useCallback(() => {
+ const { uri } = mediaInfo;
+ Clipboard.setImageFromURL(uri, success => {
+ displayActionResultModal(success ? 'copied!' : 'failed to copy :(');
+ });
+ }, [mediaInfo]);
const imageModal = React.useMemo(
() => (
- <FullScreenViewModal navigation={navigation} route={route}>
- <Multimedia mediaInfo={route.params.mediaInfo} spinnerColor="white" />
+ <FullScreenViewModal
+ navigation={navigation}
+ route={route}
+ saveContentCallback={onPressSave}
+ copyContentCallback={onPressCopy}
+ >
+ <Multimedia mediaInfo={mediaInfo} spinnerColor="white" />
</FullScreenViewModal>
),
- [navigation, route],
+ [mediaInfo, navigation, onPressCopy, onPressSave, route],
);
return imageModal;

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 1:51 PM (17 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5938229
Default Alt Text
D9362.1768485113.diff (7 KB)

Event Timeline