Page MenuHomePhorge
Files F33470768

D14232.1769037733.diff
No OneTemporary
Actions

Size
13 KB
Referenced Files
None
Subscribers
None

D14232.1769037733.diff
View Options

diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -29,6 +29,7 @@
import Reanimated, {
EasingNode as ReanimatedEasing,
type EventResult,
+ useSharedValue,
} from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
@@ -76,7 +77,6 @@
or,
eq,
greaterThan,
- lessThan,
add,
sub,
multiply,
@@ -246,6 +246,13 @@
autoExposure?: boolean,
};
+type Dimensions = {
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+};
+
type BaseProps = {
+handlePhotoCapture: (capture: PhotoCapture) => mixed,
+navigation:
@@ -288,6 +295,16 @@
+sendPhoto: () => Promise<void>,
+clearPendingImage: () => void,
+gesture: ExclusiveGesture,
+ +closeButtonRef: { current: ?React.ElementRef<TouchableOpacityInstance> },
+ +photoButtonRef: { current: ?React.ElementRef<TouchableOpacityInstance> },
+ +switchCameraButtonRef: {
+ current: ?React.ElementRef<TouchableOpacityInstance>,
+ },
+ +flashButtonRef: { current: ?React.ElementRef<TouchableOpacityInstance> },
+ +onCloseButtonLayout: () => void,
+ +onPhotoButtonLayout: () => void,
+ +onSwitchCameraButtonLayout: () => void,
+ +onFlashButtonLayout: () => void,
};
class CameraModal extends React.PureComponent<Props> {
@@ -297,30 +314,6 @@
tapHandler: ReactRef<TapGestureHandler> = React.createRef();
animationCode: Node;
- closeButton: ?React.ElementRef<TouchableOpacityInstance>;
- closeButtonX: Value = new Value(-1);
- closeButtonY: Value = new Value(-1);
- closeButtonWidth: Value = new Value(0);
- closeButtonHeight: Value = new Value(0);
-
- photoButton: ?React.ElementRef<TouchableOpacityInstance>;
- photoButtonX: Value = new Value(-1);
- photoButtonY: Value = new Value(-1);
- photoButtonWidth: Value = new Value(0);
- photoButtonHeight: Value = new Value(0);
-
- switchCameraButton: ?React.ElementRef<TouchableOpacityInstance>;
- switchCameraButtonX: Value = new Value(-1);
- switchCameraButtonY: Value = new Value(-1);
- switchCameraButtonWidth: Value = new Value(0);
- switchCameraButtonHeight: Value = new Value(0);
-
- flashButton: ?React.ElementRef<TouchableOpacityInstance>;
- flashButtonX: Value = new Value(-1);
- flashButtonY: Value = new Value(-1);
- flashButtonWidth: Value = new Value(0);
- flashButtonHeight: Value = new Value(0);
-
focusIndicatorX: Value = new Value(-1);
focusIndicatorY: Value = new Value(-1);
focusIndicatorScale: Value = new Value(0);
@@ -430,7 +423,10 @@
const lastTapY = new Value(0);
const fingerJustReleased = and(
gestureJustEnded(tapState),
- this.outsideButtons(lastTapX, lastTapY),
+ // TODO: it should be outsideButtons(lastTapX, lastTapY) here but
+ // outsideButtons is migrated so we can't call it
+ // for now focus is broken, but we'll fix it in the next diffs
+ 0,
);
const indicatorSpringClock = new Clock();
@@ -474,61 +470,7 @@
]);
}
- outsideButtons(x: Node, y: Node): Node {
- const {
- closeButtonX,
- closeButtonY,
- closeButtonWidth,
- closeButtonHeight,
- photoButtonX,
- photoButtonY,
- photoButtonWidth,
- photoButtonHeight,
- switchCameraButtonX,
- switchCameraButtonY,
- switchCameraButtonWidth,
- switchCameraButtonHeight,
- flashButtonX,
- flashButtonY,
- flashButtonWidth,
- flashButtonHeight,
- } = this;
- return and(
- or(
- lessThan(x, closeButtonX),
- greaterThan(x, add(closeButtonX, closeButtonWidth)),
- lessThan(y, closeButtonY),
- greaterThan(y, add(closeButtonY, closeButtonHeight)),
- ),
- or(
- lessThan(x, photoButtonX),
- greaterThan(x, add(photoButtonX, photoButtonWidth)),
- lessThan(y, photoButtonY),
- greaterThan(y, add(photoButtonY, photoButtonHeight)),
- ),
- or(
- lessThan(x, switchCameraButtonX),
- greaterThan(x, add(switchCameraButtonX, switchCameraButtonWidth)),
- lessThan(y, switchCameraButtonY),
- greaterThan(y, add(switchCameraButtonY, switchCameraButtonHeight)),
- ),
- or(
- lessThan(x, flashButtonX),
- greaterThan(x, add(flashButtonX, flashButtonWidth)),
- lessThan(y, flashButtonY),
- greaterThan(y, add(flashButtonY, flashButtonHeight)),
- ),
- );
- }
-
componentDidUpdate(prevProps: Props) {
- if (!this.props.hasCamerasOnBothSides && prevProps.hasCamerasOnBothSides) {
- this.switchCameraButtonX.setValue(-1);
- this.switchCameraButtonY.setValue(-1);
- this.switchCameraButtonWidth.setValue(0);
- this.switchCameraButtonHeight.setValue(0);
- }
-
if (this.props.deviceOrientation !== prevProps.deviceOrientation) {
this.props.setAutoFocusPointOfInterest(null);
this.cancelIndicatorAnimation.setValue(1);
@@ -611,9 +553,9 @@
{this.renderCameraContent(status)}
<TouchableOpacity
onPress={this.props.close}
- onLayout={this.onCloseButtonLayout}
+ onLayout={this.props.onCloseButtonLayout}
style={styles.closeButton}
- ref={this.closeButtonRef}
+ ref={this.props.closeButtonRef}
>
<Text style={styles.closeIcon}>×</Text>
</TouchableOpacity>
@@ -673,9 +615,9 @@
switchCameraButton = (
<TouchableOpacity
onPress={this.props.switchCamera}
- onLayout={this.onSwitchCameraButtonLayout}
+ onLayout={this.props.onSwitchCameraButtonLayout}
style={styles.switchCameraButton}
- ref={this.switchCameraButtonRef}
+ ref={this.props.switchCameraButtonRef}
>
<Icon name="ios-camera-reverse" style={styles.switchCameraIcon} />
</TouchableOpacity>
@@ -702,18 +644,18 @@
<Reanimated.View style={this.focusIndicatorStyle} />
<TouchableOpacity
onPress={this.props.changeFlashMode}
- onLayout={this.onFlashButtonLayout}
+ onLayout={this.props.onFlashButtonLayout}
style={styles.flashButton}
- ref={this.flashButtonRef}
+ ref={this.props.flashButtonRef}
>
{flashIcon}
</TouchableOpacity>
<View style={styles.bottomButtonsContainer}>
<TouchableOpacity
onPress={this.props.takePhoto}
- onLayout={this.onPhotoButtonLayout}
+ onLayout={this.props.onPhotoButtonLayout}
style={styles.saveButton}
- ref={this.photoButtonRef}
+ ref={this.props.photoButtonRef}
>
<View style={styles.saveButtonInner} />
</TouchableOpacity>
@@ -752,82 +694,6 @@
</Reanimated.View>
);
}
-
- closeButtonRef = (
- closeButton: ?React.ElementRef<typeof TouchableOpacity>,
- ) => {
- this.closeButton = (closeButton: any);
- };
-
- onCloseButtonLayout = () => {
- const { closeButton } = this;
- if (!closeButton) {
- return;
- }
- closeButton.measure((x, y, width, height, pageX, pageY) => {
- this.closeButtonX.setValue(pageX);
- this.closeButtonY.setValue(pageY);
- this.closeButtonWidth.setValue(width);
- this.closeButtonHeight.setValue(height);
- });
- };
-
- photoButtonRef = (
- photoButton: ?React.ElementRef<typeof TouchableOpacity>,
- ) => {
- this.photoButton = (photoButton: any);
- };
-
- onPhotoButtonLayout = () => {
- const { photoButton } = this;
- if (!photoButton) {
- return;
- }
- photoButton.measure((x, y, width, height, pageX, pageY) => {
- this.photoButtonX.setValue(pageX);
- this.photoButtonY.setValue(pageY);
- this.photoButtonWidth.setValue(width);
- this.photoButtonHeight.setValue(height);
- });
- };
-
- switchCameraButtonRef = (
- switchCameraButton: ?React.ElementRef<typeof TouchableOpacity>,
- ) => {
- this.switchCameraButton = (switchCameraButton: any);
- };
-
- onSwitchCameraButtonLayout = () => {
- const { switchCameraButton } = this;
- if (!switchCameraButton) {
- return;
- }
- switchCameraButton.measure((x, y, width, height, pageX, pageY) => {
- this.switchCameraButtonX.setValue(pageX);
- this.switchCameraButtonY.setValue(pageY);
- this.switchCameraButtonWidth.setValue(width);
- this.switchCameraButtonHeight.setValue(height);
- });
- };
-
- flashButtonRef = (
- flashButton: ?React.ElementRef<typeof TouchableOpacity>,
- ) => {
- this.flashButton = (flashButton: any);
- };
-
- onFlashButtonLayout = () => {
- const { flashButton } = this;
- if (!flashButton) {
- return;
- }
- flashButton.measure((x, y, width, height, pageX, pageY) => {
- this.flashButtonX.setValue(pageX);
- this.flashButtonY.setValue(pageY);
- this.flashButtonWidth.setValue(width);
- this.flashButtonHeight.setValue(height);
- });
- };
}
const styles = StyleSheet.create({
@@ -1216,6 +1082,136 @@
return Gesture.Exclusive(pinchGesture, tapGesture);
}, []);
+ const closeButtonRef =
+ React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
+ const closeButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const photoButtonRef =
+ React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
+ const photoButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const switchCameraButtonRef =
+ React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
+ const switchCameraButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const flashButtonRef =
+ React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
+ const flashButtonDimensions = useSharedValue({
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ });
+
+ const onCloseButtonLayout = React.useCallback(() => {
+ if (!closeButtonRef.current) {
+ return;
+ }
+ closeButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ closeButtonDimensions.value = { x: pageX, y: pageY, width, height };
+ });
+ }, [closeButtonDimensions]);
+
+ const onPhotoButtonLayout = React.useCallback(() => {
+ if (!photoButtonRef.current) {
+ return;
+ }
+ photoButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ photoButtonDimensions.value = { x: pageX, y: pageY, width, height };
+ });
+ }, [photoButtonDimensions]);
+
+ const onSwitchCameraButtonLayout = React.useCallback(() => {
+ if (!switchCameraButtonRef.current) {
+ return;
+ }
+ switchCameraButtonRef.current.measure(
+ (x, y, width, height, pageX, pageY) => {
+ switchCameraButtonDimensions.value = {
+ x: pageX,
+ y: pageY,
+ width,
+ height,
+ };
+ },
+ );
+ }, [switchCameraButtonDimensions]);
+
+ React.useEffect(() => {
+ if (!hasCamerasOnBothSides) {
+ switchCameraButtonDimensions.value = {
+ x: -1,
+ y: -1,
+ width: 0,
+ height: 0,
+ };
+ }
+ }, [hasCamerasOnBothSides, switchCameraButtonDimensions]);
+
+ const onFlashButtonLayout = React.useCallback(() => {
+ if (!flashButtonRef.current) {
+ return;
+ }
+ flashButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
+ flashButtonDimensions.value = { x: pageX, y: pageY, width, height };
+ });
+ }, [flashButtonDimensions]);
+
+ // TODO: temporarily it's unused, will be fixed in the next diff
+ // eslint-disable-next-line no-unused-vars
+ const outsideButtons = React.useCallback(
+ (x: number, y: number) => {
+ 'worklet';
+ const isOutsideButton = (dim: Dimensions) => {
+ return (
+ x < dim.x ||
+ x > dim.x + dim.width ||
+ y < dim.y ||
+ y > dim.y + dim.height
+ );
+ };
+ const isOutsideCloseButton = isOutsideButton(
+ closeButtonDimensions.value,
+ );
+ const isOutsidePhotoButton = isOutsideButton(
+ photoButtonDimensions.value,
+ );
+ const isOutsideSwitchCameraButton = isOutsideButton(
+ switchCameraButtonDimensions.value,
+ );
+ const isOutsideFlashButton = isOutsideButton(
+ flashButtonDimensions.value,
+ );
+ return (
+ isOutsideCloseButton &&
+ isOutsidePhotoButton &&
+ isOutsideSwitchCameraButton &&
+ isOutsideFlashButton
+ );
+ },
+ [
+ closeButtonDimensions,
+ flashButtonDimensions,
+ photoButtonDimensions,
+ switchCameraButtonDimensions,
+ ],
+ );
+
return (
<CameraModal
{...props}
@@ -1248,6 +1244,14 @@
sendPhoto={sendPhoto}
clearPendingImage={clearPendingImage}
gesture={gesture}
+ closeButtonRef={closeButtonRef}
+ photoButtonRef={photoButtonRef}
+ switchCameraButtonRef={switchCameraButtonRef}
+ flashButtonRef={flashButtonRef}
+ onCloseButtonLayout={onCloseButtonLayout}
+ onPhotoButtonLayout={onPhotoButtonLayout}
+ onSwitchCameraButtonLayout={onSwitchCameraButtonLayout}
+ onFlashButtonLayout={onFlashButtonLayout}
/>
);
});

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 21, 11:22 PM (11 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5972371
Default Alt Text
D14232.1769037733.diff (13 KB)

Event Timeline