Page MenuHomePhabricator
Differential D14302

[native] Migrate pan gesture handling in FullScreenViewModal
ClosedPublic
Actions

Authored by angelika on Feb 6 2025, 5:08 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 16, 4:26 PM
Unknown Object (File)
Wed, Apr 16, 1:35 PM
Unknown Object (File)
Wed, Apr 16, 10:08 AM
Unknown Object (File)
Wed, Apr 16, 7:12 AM
Unknown Object (File)
Wed, Apr 16, 12:45 AM
Unknown Object (File)
Tue, Apr 15, 11:49 PM
Unknown Object (File)
Mon, Apr 14, 8:19 PM
Unknown Object (File)
Sun, Apr 13, 8:34 AM
View All 58 Files
Subscribers
ashoat

Details

Reviewers
tomek
ashoat
Commits
rCOMMc2e2ab2d01b8: [native] Migrate pan gesture handling in FullScreenViewModal
Summary

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

Migrate panUpdate method which updates image position when pan gesture is in progress based on the delta between current and last pan translation, just like in the original implementation. Also migrate panActive value.

Depends on D14301

Test Plan

Tested after migration: verify pan 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:08 PM
angelika held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptFeb 6 2025, 5:08 PM
angelika added a child revision: D14303: [native] Migrate pinch gesture handling in FullScreenViewModal.Feb 6 2025, 5:09 PM
Harbormaster completed remote builds in B33417: Diff 46946.Feb 6 2025, 5:46 PM
angelika edited the summary of this revision. (Show Details)Feb 7 2025, 5:24 AM
angelika added inline comments.Feb 7 2025, 5:29 AM
native/components/full-screen-view-modal.react.js
103–115 ↗(On Diff #46946)

The math for pan delta calculation is taken from here

angelika updated this revision to Diff 47080.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 B33496: Diff 47080.Feb 12 2025, 9:41 PM
ashoat accepted this revision.Feb 14 2025, 12:46 AM
ashoat added inline comments.
native/components/full-screen-view-modal.react.js
1235–1270 ↗(On Diff #47080)

This approach makes sense, but I wonder how you will handle replacing panJustEnded. I guess you'll add something like this to panEnd?

if (panActive.value) {
  potentiallyGoBack();
  recenter();
  flingUpdate();
}
This revision is now accepted and ready to land.Feb 14 2025, 12:46 AM
angelika updated this revision to Diff 47184.Feb 20 2025, 2:13 PM

Rebase & bugfixes

angelika added inline comments.Feb 20 2025, 2:47 PM
native/components/full-screen-view-modal.react.js
1235–1270 ↗(On Diff #47080)

Yes, panEnd callback is the same as panJustEnded set to true. In the next diffs I add stuff there.

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

Rebase

Harbormaster failed remote builds in B33598: Diff 47218!Feb 24 2025, 5:13 AM
This revision was landed with ongoing or failed builds.Feb 25 2025, 2:48 AM
Closed by commit rCOMMc2e2ab2d01b8: [native] Migrate pan gesture handling in FullScreenViewModal (authored by angelika). · Explain Why
This revision was automatically updated to reflect the committed changes.
angelika added a commit: rCOMMc2e2ab2d01b8: [native] Migrate pan gesture handling in FullScreenViewModal.

Revision Contents
Changeset List

PathSize
native/
components/
73 lines

Diff 47246

View Options

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

// @flow // @flow
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js'; import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js';
import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
import { decryptBase64, useFetchAndDecryptMedia } from './encryption-utils.js'; import { decryptBase64, useFetchAndDecryptMedia } from './encryption-utils.js';
import LoadableImage from './loadable-image.react.js'; import LoadableImage from './loadable-image.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import type { ImageSource } from '../types/react-native.js'; import type { ImageSource } from '../types/react-native.js';
import type { ImageStyle } from '../types/styles.js'; import type { ImageStyle } from '../types/styles.js';
type BaseProps = { type BaseProps = {
+blobURI: string, +blobURI: string,
+encryptionKey: string, +encryptionKey: string,
+onLoad?: (uri: string) => void, +onLoad?: (uri: string) => void,
Show All 14 Lines const {
thumbHash: encryptedThumbHash, thumbHash: encryptedThumbHash,
} = props; } = props;
const fetchAndDecryptMedia = useFetchAndDecryptMedia(); const fetchAndDecryptMedia = useFetchAndDecryptMedia();
const mediaCache = React.useContext(MediaCacheContext); const mediaCache = React.useContext(MediaCacheContext);
const [source, setSource] = React.useState<?ImageSource>(null); const [source, setSource] = React.useState<?ImageSource>(null);
const connection = useSelector(connectionSelector(authoritativeKeyserverID)); const connected = useSelector(state => state.connectivity.connected);
invariant(connection, 'keyserver missing from keyserverStore'); const prevConnectedRef = React.useRef(connected);
const connectionStatus = connection.status;
const prevConnectionStatusRef = React.useRef(connectionStatus);
const [attempt, setAttempt] = React.useState(0); const [attempt, setAttempt] = React.useState(0);
const [errorOccured, setErrorOccured] = React.useState(false); const [errorOccured, setErrorOccured] = React.useState(false);
if (prevConnectionStatusRef.current !== connectionStatus) { if (prevConnectedRef.current !== connected) {
if (!source && connectionStatus === 'connected') { if (!source && connected) {
setAttempt(attempt + 1); setAttempt(attempt + 1);
} }
prevConnectionStatusRef.current = connectionStatus; prevConnectedRef.current = connected;
} }
const placeholder = React.useMemo(() => { const placeholder = React.useMemo(() => {
if (!encryptedThumbHash) { if (!encryptedThumbHash) {
return null; return null;
} }
try { try {
const decryptedThumbHash = decryptBase64( const decryptedThumbHash = decryptBase64(
▲ Show 20 Lines • Show All 62 Lines • Show Last 20 Lines