Page MenuHomePhabricator
Differential D14304

[native] Migrate single tap gesture handling in FullScreenViewModal
ClosedPublic
Actions

Authored by angelika on Feb 6 2025, 5:11 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 10, 5:01 AM
Unknown Object (File)
Fri, Mar 14, 7:59 AM
Unknown Object (File)
Fri, Mar 14, 7:59 AM
Unknown Object (File)
Fri, Mar 14, 7:58 AM
Unknown Object (File)
Wed, Mar 12, 11:26 PM
Unknown Object (File)
Mar 12 2025, 9:30 AM
Unknown Object (File)
Mar 11 2025, 4:16 PM
Unknown Object (File)
Mar 11 2025, 4:14 PM
View All 36 Files
Subscribers
ashoat

Details

Reviewers
tomek
Commits
rCOMM624f6e3eacf9: [native] Migrate single tap gesture handling in FullScreenViewModal
Summary

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

Migrate single tap gesture.
On single tap:

  • if tap is on buttons then don't do anything
  • toggle the buttons on tap

There is also logic not really related to single tap gesture that is contained in singleTapUpdate and I've migrated it too:

  • if the image just became unzoomed and close button is hidden then toggle close button
  • if the image just because unzoomed then toggle action links

I've put it in useAnimatedReaction.

Depends on D14303

Test Plan

Tested after migration: verify the buttons are toggled after single tap.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

angelika created this revision.Feb 6 2025, 5:11 PM
angelika held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptFeb 6 2025, 5:11 PM
angelika added a child revision: D14305: [native] Migrate double tap gesture handling in FullScreenViewModal.Feb 6 2025, 5:12 PM
Harbormaster completed remote builds in B33419: Diff 46948.Feb 6 2025, 6:04 PM
angelika edited the summary of this revision. (Show Details)Feb 7 2025, 5:48 AM
angelika added inline comments.
native/components/full-screen-view-modal.react.js
1183–1200 ↗(On Diff #46948)

Toggles close button and animates its opacity. When animation is finished, the close button is enabled/disabled.
curCloseButtonOpacity - current opacity of the close button
targetCloseButtonOpacity - the state we're animating towards, can be 0 or 1

1202–1219 ↗(On Diff #46948)

Toggles action links and animates their opacity. When animation is finished, the action links are enabled/disabled.
curActionLinksOpacity - current opacity of the close button
targetActionLinksOpacity - the state we're animating towards, can be 0 or 1

native/flow-typed/npm/react-native-reanimated_v2.x.x.js
609 ↗(On Diff #46948)

AnimatableValue is string or number or array of numbers, but animated reaction can have anything as a value we're reacting to, in particular we need boolean. In original reanimated v2 types we also don't have :AnimatableValue here https://github.com/software-mansion/react-native-reanimated/blob/2.17.0/src/reanimated2/hook/useAnimatedReaction.ts#L8

angelika updated this revision to Diff 47082.Feb 12 2025, 8:51 PM

Rebase & bugfixes

angelika published this revision for review.Feb 12 2025, 9:06 PM
Harbormaster completed remote builds in B33498: Diff 47082.Feb 12 2025, 10:00 PM
tomek accepted this revision.Feb 17 2025, 3:32 AM
This revision is now accepted and ready to land.Feb 17 2025, 3:32 AM
ashoat added inline comments.Feb 18 2025, 2:53 AM
native/components/full-screen-view-modal.react.js
1230 ↗(On Diff #47082)

In the old system, when the image becomes zoomed, we toggle the action links off.

Is this handled in a later diff via doubleTapGesture?

1241 ↗(On Diff #47082)

Shouldn't we prevent a single tap from toggling the action links when the image is zoomed?

angelika updated this revision to Diff 47186.Feb 20 2025, 2:13 PM

Rebase & bugfixes

angelika mentioned this in D14299: [native] Migrate state in FullScreenViewModal to functional component.Feb 20 2025, 2:39 PM
angelika added inline comments.Feb 20 2025, 2:49 PM
native/components/full-screen-view-modal.react.js
1230 ↗(On Diff #47082)

good catch! fixed

1241 ↗(On Diff #47082)

good catch! fixed

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

Rebase

Harbormaster completed remote builds in B33600: Diff 47220.Feb 24 2025, 5:29 AM
Closed by commit rCOMM624f6e3eacf9: [native] Migrate single tap 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: rCOMM624f6e3eacf9: [native] Migrate single tap gesture handling in FullScreenViewModal.

Revision Contents
Changeset List

PathSize
native/
components/
203 lines
flow-typed/
npm/
2 lines

Diff 47248

View Options

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

Show All 12 Lines
} from '../actions/user-actions.js'; } from '../actions/user-actions.js';
import { useIsLoggedInToAuthoritativeKeyserver } from '../hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from '../hooks/account-hooks.js';
import { useGetAndUpdateDeviceListsForUsers } from '../hooks/peer-list-hooks.js'; import { useGetAndUpdateDeviceListsForUsers } from '../hooks/peer-list-hooks.js';
import { useLegacyAshoatKeyserverCall } from '../keyserver-conn/legacy-keyserver-call.js'; import { useLegacyAshoatKeyserverCall } from '../keyserver-conn/legacy-keyserver-call.js';
import { usersWithMissingDeviceListSelector } from '../selectors/user-selectors.js'; import { usersWithMissingDeviceListSelector } from '../selectors/user-selectors.js';
import { IdentityClientContext } from '../shared/identity-client-context.js'; import { IdentityClientContext } from '../shared/identity-client-context.js';
import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js'; import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js';
import { relationshipActions } from '../types/relationship-types.js'; import { relationshipActions } from '../types/relationship-types.js';
import { getMessageForException } from '../utils/errors.js'; import { getMessageForException, FetchTimeout } from '../utils/errors.js';
import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
import { import {
relyingOnAuthoritativeKeyserver, relyingOnAuthoritativeKeyserver,
usingCommServicesAccessToken, usingCommServicesAccessToken,
} from '../utils/services-utils.js'; } from '../utils/services-utils.js';
function UserInfosHandler(): React.Node { function UserInfosHandler(): React.Node {
Show All 9 Lines const userInfosWithMissingUsernames = React.useMemo(() => {
); );
return Object.fromEntries(entriesWithoutUsernames); return Object.fromEntries(entriesWithoutUsernames);
}, [userInfos]); }, [userInfos]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const findUserIdentities = useFindUserIdentities(); const findUserIdentities = useFindUserIdentities();
const requestedIDsRef = React.useRef(new Set<string>()); const requestedIDsRef = React.useRef(new Set<string>());
const requestedAvatarsRef = React.useRef(new Set<string>());
const callUpdateRelationships = const callUpdateRelationships =
useLegacyAshoatKeyserverCall(updateRelationships); useLegacyAshoatKeyserverCall(updateRelationships);
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
const loggedInToAuthKeyserver = useIsLoggedInToAuthoritativeKeyserver(); const loggedInToAuthKeyserver = useIsLoggedInToAuthoritativeKeyserver();
Show All 34 Lines void (async () => {
}); });
} }
return { userInfos: newUserInfos }; return { userInfos: newUserInfos };
})(); })();
void dispatchActionPromise(findUserIdentitiesActionTypes, promise); void dispatchActionPromise(findUserIdentitiesActionTypes, promise);
// 2. Fetch avatars from auth keyserver // 2. Fetch avatars from auth keyserver
if (relyingOnAuthoritativeKeyserver) { if (relyingOnAuthoritativeKeyserver) {
const userIDsWithoutOwnID = newUserIDs.filter( const userIDsWithoutOwnID = newUserIDs.filter(
id => id !== currentUserInfo?.id, id =>
id !== currentUserInfo?.id && !requestedAvatarsRef.current.has(id),
); );
if (userIDsWithoutOwnID.length === 0) { if (userIDsWithoutOwnID.length === 0) {
return; return;
} }
void dispatchActionPromise(
updateRelationshipsActionTypes, userIDsWithoutOwnID.forEach(id => requestedAvatarsRef.current.add(id));
callUpdateRelationships({
const updateRelationshipsPromise = (async () => {
try {
return await callUpdateRelationships({
action: relationshipActions.ACKNOWLEDGE, action: relationshipActions.ACKNOWLEDGE,
userIDs: userIDsWithoutOwnID, userIDs: userIDsWithoutOwnID,
}), });
} catch (e) {
if (e instanceof FetchTimeout) {
userIDsWithoutOwnID.forEach(id =>
requestedAvatarsRef.current.delete(id),
);
}
throw e;
}
})();
void dispatchActionPromise(
updateRelationshipsActionTypes,
updateRelationshipsPromise,
); );
} }
})(); })();
}, [ }, [
getAuthMetadata, getAuthMetadata,
callUpdateRelationships, callUpdateRelationships,
currentUserInfo?.id, currentUserInfo?.id,
dispatchActionPromise, dispatchActionPromise,
▲ Show 20 Lines • Show All 60 Lines • Show Last 20 Lines
View Options

native/flow-typed/npm/react-native-reanimated_v2.x.x.js

Show All 12 Lines
} from '../actions/user-actions.js'; } from '../actions/user-actions.js';
import { useIsLoggedInToAuthoritativeKeyserver } from '../hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from '../hooks/account-hooks.js';
import { useGetAndUpdateDeviceListsForUsers } from '../hooks/peer-list-hooks.js'; import { useGetAndUpdateDeviceListsForUsers } from '../hooks/peer-list-hooks.js';
import { useLegacyAshoatKeyserverCall } from '../keyserver-conn/legacy-keyserver-call.js'; import { useLegacyAshoatKeyserverCall } from '../keyserver-conn/legacy-keyserver-call.js';
import { usersWithMissingDeviceListSelector } from '../selectors/user-selectors.js'; import { usersWithMissingDeviceListSelector } from '../selectors/user-selectors.js';
import { IdentityClientContext } from '../shared/identity-client-context.js'; import { IdentityClientContext } from '../shared/identity-client-context.js';
import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js'; import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js';
import { relationshipActions } from '../types/relationship-types.js'; import { relationshipActions } from '../types/relationship-types.js';
import { getMessageForException } from '../utils/errors.js'; import { getMessageForException, FetchTimeout } from '../utils/errors.js';
import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
import { import {
relyingOnAuthoritativeKeyserver, relyingOnAuthoritativeKeyserver,
usingCommServicesAccessToken, usingCommServicesAccessToken,
} from '../utils/services-utils.js'; } from '../utils/services-utils.js';
function UserInfosHandler(): React.Node { function UserInfosHandler(): React.Node {
Show All 9 Lines const userInfosWithMissingUsernames = React.useMemo(() => {
); );
return Object.fromEntries(entriesWithoutUsernames); return Object.fromEntries(entriesWithoutUsernames);
}, [userInfos]); }, [userInfos]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const findUserIdentities = useFindUserIdentities(); const findUserIdentities = useFindUserIdentities();
const requestedIDsRef = React.useRef(new Set<string>()); const requestedIDsRef = React.useRef(new Set<string>());
const requestedAvatarsRef = React.useRef(new Set<string>());
const callUpdateRelationships = const callUpdateRelationships =
useLegacyAshoatKeyserverCall(updateRelationships); useLegacyAshoatKeyserverCall(updateRelationships);
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
const loggedInToAuthKeyserver = useIsLoggedInToAuthoritativeKeyserver(); const loggedInToAuthKeyserver = useIsLoggedInToAuthoritativeKeyserver();
Show All 34 Lines void (async () => {
}); });
} }
return { userInfos: newUserInfos }; return { userInfos: newUserInfos };
})(); })();
void dispatchActionPromise(findUserIdentitiesActionTypes, promise); void dispatchActionPromise(findUserIdentitiesActionTypes, promise);
// 2. Fetch avatars from auth keyserver // 2. Fetch avatars from auth keyserver
if (relyingOnAuthoritativeKeyserver) { if (relyingOnAuthoritativeKeyserver) {
const userIDsWithoutOwnID = newUserIDs.filter( const userIDsWithoutOwnID = newUserIDs.filter(
id => id !== currentUserInfo?.id, id =>
id !== currentUserInfo?.id && !requestedAvatarsRef.current.has(id),
); );
if (userIDsWithoutOwnID.length === 0) { if (userIDsWithoutOwnID.length === 0) {
return; return;
} }
void dispatchActionPromise(
updateRelationshipsActionTypes, userIDsWithoutOwnID.forEach(id => requestedAvatarsRef.current.add(id));
callUpdateRelationships({
const updateRelationshipsPromise = (async () => {
try {
return await callUpdateRelationships({
action: relationshipActions.ACKNOWLEDGE, action: relationshipActions.ACKNOWLEDGE,
userIDs: userIDsWithoutOwnID, userIDs: userIDsWithoutOwnID,
}), });
} catch (e) {
if (e instanceof FetchTimeout) {
userIDsWithoutOwnID.forEach(id =>
requestedAvatarsRef.current.delete(id),
);
}
throw e;
}
})();
void dispatchActionPromise(
updateRelationshipsActionTypes,
updateRelationshipsPromise,
); );
} }
})(); })();
}, [ }, [
getAuthMetadata, getAuthMetadata,
callUpdateRelationships, callUpdateRelationships,
currentUserInfo?.id, currentUserInfo?.id,
dispatchActionPromise, dispatchActionPromise,
▲ Show 20 Lines • Show All 60 Lines • Show Last 20 Lines