diff --git a/android/app/build.gradle b/android/app/build.gradle index a1d3c9d..d0fd7f3 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -119,8 +119,8 @@ android { applicationId 'ca.psiphon.conduit' minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 28 - versionName "1.3.0" + versionCode 29 + versionName "1.4.0" } signingConfigs { config { diff --git a/src/components/ConduitOrbToggle.tsx b/src/components/ConduitOrbToggle.tsx index a7b0735..f7d7646 100644 --- a/src/components/ConduitOrbToggle.tsx +++ b/src/components/ConduitOrbToggle.tsx @@ -25,23 +25,16 @@ import { Group, Image, Paint, - Paragraph, RadialGradient, Shadow, - SkParagraphStyle, - SkTextStyle, - Skia, - TextAlign, - TextDirection, interpolateColors, - useFonts, useImage, vec, } from "@shopify/react-native-skia"; import * as Haptics from "expo-haptics"; import React from "react"; import { useTranslation } from "react-i18next"; -import { View, useWindowDimensions } from "react-native"; +import { View } from "react-native"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; import Animated, { Easing, @@ -58,7 +51,7 @@ import Animated, { import { z } from "zod"; import { useAnimatedImageValue } from "@/src/animationHooks"; -import { drawBigFont, timedLog } from "@/src/common/utils"; +import { timedLog } from "@/src/common/utils"; import { ConduitConnectionLight } from "@/src/components/canvas/ConduitConnectionLight"; import { INPROXY_MAX_CLIENTS_MAX, @@ -70,8 +63,7 @@ import { useInproxyMustUpgrade, useInproxyStatus, } from "@/src/inproxy/hooks"; -import { fonts, palette, sharedStyles as ss } from "@/src/styles"; -import { FaderGroup } from "./canvas/FaderGroup"; +import { palette, sharedStyles as ss } from "@/src/styles"; export function ConduitOrbToggle({ width, @@ -82,7 +74,6 @@ export function ConduitOrbToggle({ }) { const { t, i18n } = useTranslation(); const isRTL = i18n.dir() === "rtl" ? true : false; - const win = useWindowDimensions(); const { toggleInproxy } = useInproxyContext(); const { data: inproxyStatus } = useInproxyStatus(); @@ -103,8 +94,6 @@ export function ConduitOrbToggle({ return dotsOpacity.value - 0.2; }, [dotsOpacity]); - // In the center of the canvas is the orb, a button that toggles Inproxy. - // The orb will have an animated gradient depending on InproxyState, flowing // between the following colors const orbColors = [ palette.black, @@ -123,43 +112,7 @@ export function ConduitOrbToggle({ }); // The "Turn On" text also uses interpolation to appear to fade in by going // from transparent to it's final color. - const orbText = t("TAP_TO_TURN_ON_I18N.string"); - const orbTextOpacity = useSharedValue(0); - - const fontMgr = useFonts({ Jura: [fonts.JuraRegular] }); - const fontSize = drawBigFont(win) ? 20 : 16; - const orbTextParagraph = React.useMemo(() => { - if (!fontMgr) { - return null; - } - let paragraphStyle: SkParagraphStyle = { - textAlign: TextAlign.Center, - }; - if (isRTL) { - paragraphStyle.textDirection = TextDirection.RTL; - } - - const mainTextStyle: SkTextStyle = { - fontFamilies: ["Jura"], - fontSize: fontSize, - fontStyle: { - weight: 300, - }, - letterSpacing: 1, // 5% of 20 - }; - - return Skia.ParagraphBuilder.Make(paragraphStyle, fontMgr) - .pushStyle(mainTextStyle) - .addText(orbText) - .build(); - }, [fontMgr]); - - const orbTextXOffset = orbTextParagraph - ? -orbTextParagraph.getMaxWidth() / 2 - : 0; - const orbTextYOffset = orbTextParagraph - ? -orbTextParagraph.getHeight() / 2 - : 0; + const tapToTurnOnInstructionOpacity = useSharedValue(0); // The orb will pop into existence at the start, animating from radius 0 up const orbRadius = useSharedValue(0); @@ -198,7 +151,7 @@ export function ConduitOrbToggle({ -1, true, ); - orbTextOpacity.value = withTiming(0, { duration: 500 }); + tapToTurnOnInstructionOpacity.value = withTiming(0, { duration: 500 }); dotsOpacity.value = withTiming(1, { duration: 1000 }); } @@ -213,7 +166,7 @@ export function ConduitOrbToggle({ timedLog("animateTurnOffProxy()"); cancelAnimation(orbColorsIndex); orbColorsIndex.value = withTiming(0, { duration: 500 }); - orbTextOpacity.value = withTiming(1, { duration: 500 }); + tapToTurnOnInstructionOpacity.value = withTiming(1, { duration: 500 }); dotsOpacity.value = withTiming(0.2, { duration: 1000 }); } @@ -233,7 +186,7 @@ export function ConduitOrbToggle({ delay, withTiming(0.2, { duration: 1000 }), ); - orbTextOpacity.value = withDelay( + tapToTurnOnInstructionOpacity.value = withDelay( delay, withTiming(1, { duration: 1000 }), ); @@ -348,7 +301,7 @@ export function ConduitOrbToggle({ // Since turning off the proxy will disconnect any connected users, require // a long press to turn off. When the user clicks the orb and a toggle would // disconnect users, we will show instruction to long press to turn off. - const longPressInstructionOpacity = useSharedValue(0); + const holdToTurnOffInstructionOpacity = useSharedValue(0); // If the module reports that inproxy must upgrade, show instructions const upgradeRequiredInstructionOpacity = useSharedValue(0); @@ -390,7 +343,7 @@ export function ConduitOrbToggle({ runOnJS(toggle)(); } else { animateOrbGiggle(); - longPressInstructionOpacity.value = withSequence( + holdToTurnOffInstructionOpacity.value = withSequence( withTiming(1, { duration: 1000 }), withTiming(1, { duration: 3000 }), withTiming(0, { duration: 1000 }), @@ -410,7 +363,7 @@ export function ConduitOrbToggle({ .onStart(() => { runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Heavy); runOnJS(toggle)(); - longPressInstructionOpacity.value = withTiming(0, { + holdToTurnOffInstructionOpacity.value = withTiming(0, { duration: 500, }); }) @@ -516,17 +469,6 @@ export function ConduitOrbToggle({ }, )} - - {/* Turn ON text displayed when Conduit is off */} - - - - @@ -562,6 +504,23 @@ export function ConduitOrbToggle({ ]} /> + + {t("TAP_TO_TURN_ON_I18N.string")} + {/* Long press instructions are shown when peers are connected */}