use same approach as Hold to Turn Off text for Tap to Turn On

Psiphon-Inc · Dec 13, 2024 · 4f507d8 · 4f507d8
1 parent 6b63477
commit 4f507d8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 67 deletions.
diff --git 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
@@ -25,16 +25,9 @@ import {
     Group,
     Image,
     Paint,
-    Paragraph,
     RadialGradient,
     Shadow,
-    SkParagraphStyle,
-    SkTextStyle,
-    Skia,
-    TextAlign,
-    TextDirection,
     interpolateColors,
-    useFonts,
     useImage,
     vec,
 } from "@shopify/react-native-skia";
@@ -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,
@@ -123,43 +115,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 +154,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 +169,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 +189,7 @@ export function ConduitOrbToggle({
             delay,
             withTiming(0.2, { duration: 1000 }),
         );
-        orbTextOpacity.value = withDelay(
+        tapToTurnOnInstructionOpacity.value = withDelay(
             delay,
             withTiming(1, { duration: 1000 }),
         );
@@ -348,7 +304,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 +346,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 +366,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 +472,6 @@ export function ConduitOrbToggle({
                                 },
                             )}
                         </Group>
-                        <Group>
-                            {/* Turn ON text displayed when Conduit is off */}
-                            <FaderGroup opacity={orbTextOpacity}>
-                                <Paragraph
-                                    paragraph={orbTextParagraph}
-                                    x={orbTextXOffset}
-                                    y={orbTextYOffset}
-                                    width={width}
-                                />
-                            </FaderGroup>
-                        </Group>
                     </Group>
                 </Group>
                 <Group>
@@ -562,6 +507,23 @@ export function ConduitOrbToggle({
                     ]}
                 />
             </GestureDetector>
+            <Animated.Text
+                adjustsFontSizeToFit
+                numberOfLines={1}
+                style={[
+                    ss.whiteText,
+                    ss.bodyFont,
+                    ss.absolute,
+                    {
+                        top: orbCenterY + finalOrbRadius + ss.padded.padding,
+                        width: "100%",
+                        textAlign: "center",
+                        opacity: tapToTurnOnInstructionOpacity,
+                    },
+                ]}
+            >
+                {t("TAP_TO_TURN_ON_I18N.string")}
+            </Animated.Text>
             {/* Long press instructions are shown when peers are connected */}
             <Animated.Text
                 adjustsFontSizeToFit
@@ -574,7 +536,7 @@ export function ConduitOrbToggle({
                         top: orbCenterY + finalOrbRadius + ss.padded.padding,
                         width: "100%",
                         textAlign: "center",
-                        opacity: longPressInstructionOpacity,
+                        opacity: holdToTurnOffInstructionOpacity,
                     },
                 ]}
             >