Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Dec 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f507d8
use same approach as Hold to Turn Off text for Tap to Turn On
tmgrask Dec 13, 2024
dbd2fde
unused win
tmgrask Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
97 changes: 28 additions & 69 deletions src/components/ConduitOrbToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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();
Expand All @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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 });
}

Expand All @@ -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 });
}

Expand All @@ -233,7 +186,7 @@ export function ConduitOrbToggle({
delay,
withTiming(0.2, { duration: 1000 }),
);
orbTextOpacity.value = withDelay(
tapToTurnOnInstructionOpacity.value = withDelay(
delay,
withTiming(1, { duration: 1000 }),
);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 }),
Expand All @@ -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,
});
})
Expand Down Expand Up @@ -516,17 +469,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>
Expand Down Expand Up @@ -562,6 +504,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
Expand All @@ -574,7 +533,7 @@ export function ConduitOrbToggle({
top: orbCenterY + finalOrbRadius + ss.padded.padding,
width: "100%",
textAlign: "center",
opacity: longPressInstructionOpacity,
opacity: holdToTurnOffInstructionOpacity,
},
]}
>
Expand Down
Loading