Page MenuHomePhabricator
Differential D14306

[native] Migrate backdropOpacityUpdate in FullScreenViewModal
ClosedPublic
Actions

Authored by angelika on Feb 6 2025, 5:15 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 5:46 PM
Unknown Object (File)
Wed, Mar 26, 4:21 PM
Unknown Object (File)
Wed, Mar 26, 11:34 AM
Unknown Object (File)
Tue, Mar 25, 6:23 AM
Unknown Object (File)
Mon, Mar 17, 11:52 AM
Unknown Object (File)
Mon, Mar 17, 11:41 AM
Unknown Object (File)
Mon, Mar 17, 10:54 AM
Unknown Object (File)
Sun, Mar 16, 3:15 PM
View All 58 Files
Subscribers
ashoat

Details

Reviewers
tomek
ashoat
Commits
rCOMM89acbf761f52: [native] Migrate backdropOpacityUpdate in FullScreenViewModal
Summary

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

Migrate backdropOpacityUpdate function. In this function there are a couple of things mixed together going on:

  • depending on the current position of the image calculate backdrop opacity (progressiveOpacity) variable to give a hint to the user that you're closing the modal - the farer the image from the center the more transparent the backdrop
  • if pinch gesture is active or the image is zoomed in then ignore the above and run animation with timing on backdrop opacity to opacity = 1
  • if we move fast / far enough (shouldGoBack) animate image position with decay (so the image moves with inertia) and close the modal

Also I needed some minor things like migrating close method and adding withDecay method to reanimated types.

Depends on D14305

Test Plan

Tested after migration:

  • verify the background opacity is animated on pan
  • verify the modal is closed if panned fast/far enough when zoomed out

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

angelika created this revision.Feb 6 2025, 5:15 PM
angelika held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptFeb 6 2025, 5:15 PM
angelika added a child revision: D14307: [native] Migrate recenter functionality in FullScreenViewModal.Feb 6 2025, 5:17 PM
Harbormaster completed remote builds in B33421: Diff 46950.Feb 6 2025, 6:23 PM
angelika edited the summary of this revision. (Show Details)Feb 7 2025, 6:29 AM
angelika edited the summary of this revision. (Show Details)
angelika updated this revision to Diff 47084.Feb 12 2025, 8:52 PM

Rebase & bugfixes

angelika published this revision for review.Feb 12 2025, 9:08 PM
Harbormaster completed remote builds in B33500: Diff 47084.Feb 12 2025, 10:21 PM
tomek accepted this revision.Feb 17 2025, 3:47 AM
tomek added inline comments.
native/flow-typed/npm/react-native-reanimated_v2.x.x.js
597–604 ↗(On Diff #47084)

Should this be exact?

This revision is now accepted and ready to land.Feb 17 2025, 3:47 AM
ashoat added inline comments.Feb 19 2025, 5:32 PM
native/components/full-screen-view-modal.react.js
355 ↗(On Diff #47084)

In the old system, dismissingFromPan was taken into account in activeInteraction, which would prevent recenter and flingUpdate from running. Do we have a new mechanism to prevent recenter and flingUpdate from running while we are dismissing from pan?

1048–1053 ↗(On Diff #47084)

In the old system, this would trigger on panJustEnded, which was based on panActive, which would not be set if the pan started within the button bounds (!outsideButtons).

In contrast, it appears that your new logic will trigger even if the pan starts within the button bounds.

To address this, should we move panActive.value = false; to the bottom of panEnd, and only execute this new logic if (panActive.value)?

ashoat added inline comments.Feb 19 2025, 5:51 PM
native/components/full-screen-view-modal.react.js
355 ↗(On Diff #47084)

Looks like D14307 introduces something for this for recentering (isRunningDismissAnimation), but it doesn't appear to be used in D14308 for the fling update

ashoat added inline comments.Feb 19 2025, 5:57 PM
native/components/full-screen-view-modal.react.js
491–492 ↗(On Diff #47084)

I'm surprised to see that we don't seem to handle curScale during the shared transition. Any idea why that is? Am I missing something?

angelika updated this revision to Diff 47188.Feb 20 2025, 2:14 PM

Rebase & bugfixes

angelika marked an inline comment as done.Feb 20 2025, 3:03 PM
angelika added inline comments.
native/components/full-screen-view-modal.react.js
355 ↗(On Diff #47084)

I'll answer this in the appropriate diffs. In this diff we don't care yet about recenter and fling and activeInteraction and there is no context for the answer.

491–492 ↗(On Diff #47084)

But this code here is a shared transition? For me it looks like an inertia animation when dismissing a modal?

1048–1053 ↗(On Diff #47084)

You're right, fixed. I used early return though, shouldn't matter and the code is less nested.

ashoat added inline comments.Feb 20 2025, 9:51 PM
native/components/full-screen-view-modal.react.js
491–492 ↗(On Diff #47084)

Ah, oops – you're right. The shared transition is handled by the reverseNavigationProgress stuff, which covers x, y, and scale.

1048–1053 ↗(On Diff #47084)

Makes sense, that's definitely cleaner

angelika updated this revision to Diff 47200.Feb 21 2025, 8:07 PM

Add cancelAnimation for curScale

Harbormaster completed remote builds in B33580: Diff 47200.Feb 21 2025, 8:25 PM
ashoat accepted this revision.Feb 21 2025, 11:47 PM
angelika updated this revision to Diff 47222.Feb 24 2025, 3:52 AM

Rebase

Harbormaster completed remote builds in B33602: Diff 47222.Feb 24 2025, 5:56 AM
Closed by commit rCOMM89acbf761f52: [native] Migrate backdropOpacityUpdate 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: rCOMM89acbf761f52: [native] Migrate backdropOpacityUpdate in FullScreenViewModal.

Revision Contents
Changeset List

PathSize
native/
components/
163 lines
flow-typed/
npm/
15 lines

Diff 47250

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