Page MenuHomePhabricator
Differential D14303

[native] Migrate pinch gesture handling in FullScreenViewModal
ClosedPublic
Actions

Authored by angelika on Feb 6 2025, 5:09 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Apr 15, 2:03 PM
Unknown Object (File)
Tue, Apr 15, 2:01 PM
Unknown Object (File)
Tue, Apr 15, 12:56 AM
Unknown Object (File)
Mon, Apr 14, 11:53 PM
Unknown Object (File)
Mon, Apr 14, 11:22 PM
Unknown Object (File)
Mon, Apr 14, 10:27 PM
Unknown Object (File)
Mon, Apr 14, 2:08 PM
Unknown Object (File)
Fri, Apr 4, 4:46 AM
View All 47 Files
Subscribers
ashoat

Details

Reviewers
tomek
ashoat
Commits
rCOMMc84b9db1aeb4: [native] Migrate pinch gesture handling in FullScreenViewModal
Summary

https://linear.app/comm/issue/ENG-8150/convert-fullscreenviewmodal-to-reanimated-2-syntax

Migrate`pinchUpdate` method which updates image scale when pinch gesture is in progress based on the delta between current and last pinch scale, just like in the original implementation.

Depends on D14302

Test Plan

Tested after migration: verify pinch gesture works.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

angelika created this revision.Feb 6 2025, 5:09 PM
angelika held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptFeb 6 2025, 5:09 PM
angelika added a child revision: D14304: [native] Migrate single tap gesture handling in FullScreenViewModal.Feb 6 2025, 5:11 PM
Harbormaster completed remote builds in B33418: Diff 46947.Feb 6 2025, 5:55 PM
angelika edited the summary of this revision. (Show Details)Feb 7 2025, 5:27 AM
angelika added inline comments.
native/components/full-screen-view-modal.react.js
89–101 ↗(On Diff #46947)

The math for delta calculations are taken from here

angelika updated this revision to Diff 47081.Feb 12 2025, 8:51 PM
angelika marked an inline comment as not done.

Rebase & bugfixes

angelika published this revision for review.Feb 12 2025, 9:06 PM
Harbormaster completed remote builds in B33497: Diff 47081.Feb 12 2025, 9:50 PM
ashoat accepted this revision.Feb 14 2025, 12:51 AM
ashoat added inline comments.
native/components/full-screen-view-modal.react.js
1191–1192 ↗(On Diff #47081)

Looks like updating these is handled in D14311

This revision is now accepted and ready to land.Feb 14 2025, 12:51 AM
angelika updated this revision to Diff 47185.Feb 20 2025, 2:13 PM

Rebase & bugfixes

angelika updated this revision to Diff 47219.Feb 24 2025, 3:51 AM

Rebase

Harbormaster completed remote builds in B33599: Diff 47219.Feb 24 2025, 5:18 AM
Closed by commit rCOMMc84b9db1aeb4: [native] Migrate pinch gesture handling in FullScreenViewModal (authored by angelika). · Explain WhyFeb 25 2025, 2:48 AM
This revision was automatically updated to reflect the committed changes.
angelika added a commit: rCOMMc84b9db1aeb4: [native] Migrate pinch gesture handling in FullScreenViewModal.

Revision Contents
Changeset List

PathSize
native/
components/
75 lines

Diff 47247

View Options

native/components/full-screen-view-modal.react.js

Show First 20 Lines • Show All 155 Lines • ▼ Show 20 Lines
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
+dimensions: DerivedDimensionsInfo, +dimensions: DerivedDimensionsInfo,
// withOverlayContext // withOverlayContext
+overlayContext: ?OverlayContextType, +overlayContext: ?OverlayContextType,
+isActive: boolean, +isActive: boolean,
};
type State = {
+closeButtonEnabled: boolean, +closeButtonEnabled: boolean,
+actionLinksEnabled: boolean, +actionLinksEnabled: boolean,
}; +updateCloseButtonEnabled: ([number]) => void,
class FullScreenViewModal extends React.PureComponent<Props, State> { +updateActionLinksEnabled: ([number]) => void,
state: State = {
closeButtonEnabled: true,
actionLinksEnabled: true,
}; };
class FullScreenViewModal extends React.PureComponent<Props> {
closeButton: ?React.ElementRef<TouchableOpacityInstance>; closeButton: ?React.ElementRef<TouchableOpacityInstance>;
mediaIconsContainer: ?React.ElementRef<typeof View>; mediaIconsContainer: ?React.ElementRef<typeof View>;
closeButtonX: Value = new Value(-1); closeButtonX: Value = new Value(-1);
closeButtonY: Value = new Value(-1); closeButtonY: Value = new Value(-1);
closeButtonWidth: Value = new Value(0); closeButtonWidth: Value = new Value(0);
closeButtonHeight: Value = new Value(0); closeButtonHeight: Value = new Value(0);
closeButtonLastState: Value = new Value(1); closeButtonLastState: Value = new Value(1);
mediaIconsX: Value = new Value(-1); mediaIconsX: Value = new Value(-1);
▲ Show 20 Lines • Show All 472 Lines • ▼ Show 20 Lines return block([
], ],
), ),
), ),
set(this.actionLinksLastState, actionLinksState), set(this.actionLinksLastState, actionLinksState),
set(this.closeButtonLastState, closeButtonState), set(this.closeButtonLastState, closeButtonState),
set(wasZoomed, isZoomed), set(wasZoomed, isZoomed),
set(lastTapX, singleTapX), set(lastTapX, singleTapX),
set(lastTapY, singleTapY), set(lastTapY, singleTapY),
call([eq(curCloseButtonOpacity, 1)], this.setCloseButtonEnabled), call([eq(curCloseButtonOpacity, 1)], this.props.updateCloseButtonEnabled),
call([eq(curActionLinksOpacity, 1)], this.setActionLinksEnabled), call([eq(curActionLinksOpacity, 1)], this.props.updateActionLinksEnabled),
]); ]);
} }
doubleTapUpdate( doubleTapUpdate(
// Inputs // Inputs
doubleTapState: Node, doubleTapState: Node,
doubleTapX: Node, doubleTapX: Node,
doubleTapY: Node, doubleTapY: Node,
▲ Show 20 Lines • Show All 316 Lines • ▼ Show 20 Lines const mediaIconsButtonStyle = {
opacity: this.actionLinksOpacity, opacity: this.actionLinksOpacity,
}; };
let saveButton; let saveButton;
if (saveContentCallback) { if (saveContentCallback) {
saveButton = ( saveButton = (
<TouchableOpacity <TouchableOpacity
onPress={saveContentCallback} onPress={saveContentCallback}
disabled={!this.state.actionLinksEnabled} disabled={!this.props.actionLinksEnabled}
style={styles.mediaIconButtons} style={styles.mediaIconButtons}
> >
<SWMansionIcon name="save" style={styles.mediaIcon} /> <SWMansionIcon name="save" style={styles.mediaIcon} />
<Text style={styles.mediaIconText}>Save</Text> <Text style={styles.mediaIconText}>Save</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
let copyButton; let copyButton;
if (Platform.OS === 'ios' && copyContentCallback) { if (Platform.OS === 'ios' && copyContentCallback) {
copyButton = ( copyButton = (
<TouchableOpacity <TouchableOpacity
onPress={copyContentCallback} onPress={copyContentCallback}
disabled={!this.state.actionLinksEnabled} disabled={!this.props.actionLinksEnabled}
style={styles.mediaIconButtons} style={styles.mediaIconButtons}
> >
<SWMansionIcon name="copy" style={styles.mediaIcon} /> <SWMansionIcon name="copy" style={styles.mediaIcon} />
<Text style={styles.mediaIconText}>Copy</Text> <Text style={styles.mediaIconText}>Copy</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
Show All 26 Lines const view = (
</View> </View>
<SafeAreaView style={styles.buttonsOverlay}> <SafeAreaView style={styles.buttonsOverlay}>
<View style={styles.fill}> <View style={styles.fill}>
<Animated.View <Animated.View
style={[styles.closeButtonContainer, closeButtonStyle]} style={[styles.closeButtonContainer, closeButtonStyle]}
> >
<TouchableOpacity <TouchableOpacity
onPress={this.close} onPress={this.close}
disabled={!this.state.closeButtonEnabled} disabled={!this.props.closeButtonEnabled}
onLayout={this.onCloseButtonLayout} onLayout={this.onCloseButtonLayout}
ref={this.closeButtonRef} ref={this.closeButtonRef}
> >
<Text style={styles.closeButton}>×</Text> <Text style={styles.closeButton}>×</Text>
</TouchableOpacity> </TouchableOpacity>
</Animated.View> </Animated.View>
{mediaActionButtons} {mediaActionButtons}
</View> </View>
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines return (
</PinchGestureHandler> </PinchGestureHandler>
); );
} }
close = () => { close = () => {
this.props.navigation.goBackOnce(); this.props.navigation.goBackOnce();
}; };
setCloseButtonEnabled = ([enabledNum]: [number]) => {
const enabled = !!enabledNum;
if (this.state.closeButtonEnabled !== enabled) {
this.setState({ closeButtonEnabled: enabled });
}
};
setActionLinksEnabled = ([enabledNum]: [number]) => {
const enabled = !!enabledNum;
if (this.state.actionLinksEnabled !== enabled) {
this.setState({ actionLinksEnabled: enabled });
}
};
closeButtonRef = ( closeButtonRef = (
closeButton: ?React.ElementRef<typeof TouchableOpacity>, closeButton: ?React.ElementRef<typeof TouchableOpacity>,
) => { ) => {
this.closeButton = (closeButton: any); this.closeButton = (closeButton: any);
}; };
mediaIconsRef = (mediaIconsContainer: ?React.ElementRef<typeof View>) => { mediaIconsRef = (mediaIconsContainer: ?React.ElementRef<typeof View>) => {
this.mediaIconsContainer = mediaIconsContainer; this.mediaIconsContainer = mediaIconsContainer;
▲ Show 20 Lines • Show All 116 Lines • ▼ Show 20 Lines ) {
}, [isActive]); }, [isActive]);
React.useEffect(() => { React.useEffect(() => {
return () => { return () => {
Orientation.lockToPortrait(); Orientation.lockToPortrait();
}; };
}, []); }, []);
const [closeButtonEnabled, setCloseButtonEnabled] = React.useState(true);
const [actionLinksEnabled, setActionLinksEnabled] = React.useState(true);
const updateCloseButtonEnabled = React.useCallback(
([enabledNum]: [number]) => {
tomekUnsubmitted
Not Done
Inline Actions

We should prefer Array type

tomek: We should prefer `Array` type
angelikaAuthorUnsubmitted
Done
Inline Actions

This was just copied from the original code and the [number] argument will be replaced with number argument in https://phab.comm.dev/D14304 anyway

angelika: This was just copied from the original code and the `[number]` argument will be replaced with…
const enabled = !!enabledNum;
if (closeButtonEnabled !== enabled) {
setCloseButtonEnabled(enabled);
}
},
[closeButtonEnabled],
);
const updateActionLinksEnabled = React.useCallback(
([enabledNum]: [number]) => {
const enabled = !!enabledNum;
if (actionLinksEnabled !== enabled) {
setActionLinksEnabled(enabled);
}
},
[actionLinksEnabled],
);
return ( return (
<FullScreenViewModal <FullScreenViewModal
{...props} {...props}
dimensions={dimensions} dimensions={dimensions}
overlayContext={overlayContext} overlayContext={overlayContext}
isActive={isActive} isActive={isActive}
closeButtonEnabled={closeButtonEnabled}
actionLinksEnabled={actionLinksEnabled}
updateCloseButtonEnabled={updateCloseButtonEnabled}
updateActionLinksEnabled={updateActionLinksEnabled}
/> />
); );
}); });
export default ConnectedFullScreenViewModal; export default ConnectedFullScreenViewModal;