update onion animation and some tor settings refactoring

This commit is contained in:
julian 2023-09-15 16:14:01 -06:00
parent b148ae2ad4
commit 4ca352e713
3 changed files with 186 additions and 147 deletions

File diff suppressed because one or more lines are too long

View file

@ -75,7 +75,7 @@ class _TorSettingsViewState extends ConsumerState<TorSettingsView> {
useSafeArea: false,
barrierDismissible: true,
builder: (context) {
return const StackDialog(
return StackDialog(
title: "What is Tor?",
message:
"Short for \"The Onion Router\", is an open-source software that enables internet communication"
@ -83,6 +83,7 @@ class _TorSettingsViewState extends ConsumerState<TorSettingsView> {
" to obscure the origin and destination of data.",
rightButton: SecondaryButton(
label: "Close",
onPressed: Navigator.of(context).pop,
),
);
},
@ -144,7 +145,7 @@ class _TorSettingsViewState extends ConsumerState<TorSettingsView> {
useSafeArea: false,
barrierDismissible: true,
builder: (context) {
return const StackDialog(
return StackDialog(
title: "What is Tor killswitch?",
message:
"A security feature that protects your information from accidental exposure by"
@ -152,6 +153,8 @@ class _TorSettingsViewState extends ConsumerState<TorSettingsView> {
" connection is disrupted or compromised.",
rightButton: SecondaryButton(
label: "Close",
onPressed:
Navigator.of(context).pop,
),
);
},
@ -243,54 +246,31 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
}
}
Color _color(
TorConnectionStatus status,
StackColors colors,
) {
switch (status) {
case TorConnectionStatus.disconnected:
return colors.textSubtitle3;
case TorConnectionStatus.connected:
return colors.accentColorGreen;
case TorConnectionStatus.connecting:
return colors.accentColorYellow;
}
}
String _label(
TorConnectionStatus status,
) {
switch (status) {
case TorConnectionStatus.disconnected:
return "CONNECT";
case TorConnectionStatus.connected:
return "STOP";
case TorConnectionStatus.connecting:
return "CONNECTING";
}
}
void _playConnecting() async {
Future<void> _playConnecting() async {
await _play(
from: "connection-start",
to: "connection-end",
from: "connecting-start",
to: "connecting-end",
repeat: true,
);
}
void _playConnected() async {
Future<void> _playConnectingDone() async {
await _play(
from: "connection-end",
to: "disconnection-start",
from: "connecting-end",
to: "connected-start",
repeat: false,
);
}
Future<void> _playConnected() async {
await _play(
from: "connected-start",
to: "connected-end",
repeat: true,
);
}
void _playDisconnect() async {
Future<void> _playDisconnect() async {
await _play(
from: "disconnection-start",
to: "disconnection-end",
@ -308,6 +288,8 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
final start = composition.getMarker(from)!.start;
final end = composition.getMarker(to)!.start;
controller1.value = start;
if (repeat) {
await controller1.repeat(
min: start,
@ -348,19 +330,20 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
final width = MediaQuery.of(context).size.width / 1.5;
return TorSubscription(
onTorStatusChanged: (status) {
onTorStatusChanged: (status) async {
_status = status;
switch (_status) {
case TorConnectionStatus.disconnected:
_playDisconnect();
await _playDisconnect();
break;
case TorConnectionStatus.connected:
_playConnected();
await _playConnectingDone();
await _playConnected();
break;
case TorConnectionStatus.connecting:
_playConnecting();
await _playConnecting();
break;
}
},
@ -381,21 +364,8 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
// height: width,
onLoaded: (composition) {
_completer.complete(composition);
// setState(() {
controller1.duration = composition.duration;
// TODO: clean up (waiting for updated onion lottie animation file)
// });
print(
"=======================================================");
composition.markers.forEach((e) {
print(e.name);
});
print(
"=======================================================");
//
if (_status == TorConnectionStatus.connected) {
_playConnected();
} else if (_status == TorConnectionStatus.connecting) {
@ -404,19 +374,7 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
},
),
),
Text(
_label(
_status,
),
style: STextStyles.pageTitleH2(
context,
).copyWith(
color: _color(
_status,
Theme.of(context).extension<StackColors>()!,
),
),
)
const UpperCaseTorText(),
],
),
),
@ -546,6 +504,78 @@ class _TorButtonState extends ConsumerState<TorButton> {
}
}
class UpperCaseTorText extends ConsumerStatefulWidget {
const UpperCaseTorText({super.key});
@override
ConsumerState<UpperCaseTorText> createState() => _UpperCaseTorTextState();
}
class _UpperCaseTorTextState extends ConsumerState<UpperCaseTorText> {
late TorConnectionStatus _status;
Color _color(
TorConnectionStatus status,
StackColors colors,
) {
switch (status) {
case TorConnectionStatus.disconnected:
return colors.textSubtitle3;
case TorConnectionStatus.connected:
return colors.accentColorGreen;
case TorConnectionStatus.connecting:
return colors.accentColorYellow;
}
}
String _label(
TorConnectionStatus status,
) {
switch (status) {
case TorConnectionStatus.disconnected:
return "CONNECT";
case TorConnectionStatus.connected:
return "STOP";
case TorConnectionStatus.connecting:
return "CONNECTING";
}
}
@override
void initState() {
_status = ref.read(pTorService).status;
super.initState();
}
@override
Widget build(BuildContext context) {
return TorSubscription(
onTorStatusChanged: (status) {
setState(() {
_status = status;
});
},
child: Text(
_label(
_status,
),
style: STextStyles.pageTitleH2(
context,
).copyWith(
color: _color(
_status,
Theme.of(context).extension<StackColors>()!,
),
),
));
}
}
/// Connect to the Tor network.
///
/// This method is called when the user taps the "Connect" button.

View file

@ -219,8 +219,21 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.end,
MainAxisAlignment
.spaceBetween,
children: [
Padding(
padding:
const EdgeInsets.only(
left: 32,
),
child: Text(
"What is Tor?",
style:
STextStyles.desktopH2(
context),
),
),
DesktopDialogCloseButton(
onPressedOverride: () =>
Navigator.of(context)
@ -229,34 +242,24 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
],
),
Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Text(
"What is Tor?",
style:
STextStyles.desktopH2(
context),
),
const SizedBox(
height: 20,
),
Text(
"Short for \"The Onion Router\", is an open-source software that enables internet communication"
" to remain anonymous by routing internet traffic through a series of layered nodes,"
" to obscure the origin and destination of data.",
style: STextStyles
.desktopTextMedium(
context)
.copyWith(
color: Theme.of(context)
.extension<
StackColors>()!
.textDark3,
),
),
],
padding: const EdgeInsets.only(
top: 12,
left: 32,
bottom: 32,
right: 32,
),
child: Text(
"Short for \"The Onion Router\", is an open-source software that enables internet communication"
" to remain anonymous by routing internet traffic through a series of layered nodes,"
" to obscure the origin and destination of data.",
style: STextStyles
.desktopTextMedium(
context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark3,
),
),
),
],
@ -289,21 +292,25 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
children: [
Row(
children: [
RichText(
textAlign: TextAlign.start,
text: TextSpan(
children: [
TextSpan(
text: "Tor killswitch",
style: STextStyles.desktopTextExtraExtraSmall(
context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
),
TextSpan(
text: "\nWhat is Tor killswitch?",
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tor killswitch",
style: STextStyles.desktopTextExtraExtraSmall(
context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark),
),
const SizedBox(
height: 8,
),
RichText(
textAlign: TextAlign.start,
text: TextSpan(
text: "What is Tor killswitch?",
style: STextStyles.richLink(context).copyWith(
fontSize: 14,
),
@ -321,8 +328,20 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.end,
MainAxisAlignment
.spaceBetween,
children: [
Padding(
padding:
const EdgeInsets.only(
left: 32,
),
child: Text(
"What is Tor killswitch?",
style: STextStyles
.desktopH2(context),
),
),
DesktopDialogCloseButton(
onPressedOverride: () =>
Navigator.of(context)
@ -332,35 +351,25 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
),
Padding(
padding:
const EdgeInsets.all(20),
child: Column(
mainAxisSize:
MainAxisSize.max,
children: [
Text(
"What is Tor killswitch?",
style: STextStyles
.desktopH2(context),
),
const SizedBox(
height: 20,
),
Text(
"A security feature that protects your information from accidental exposure by"
" disconnecting your device from the Tor network if the"
" connection is disrupted or compromised.",
style: STextStyles
.desktopTextMedium(
context)
.copyWith(
color: Theme.of(
context)
.extension<
StackColors>()!
.textDark3,
),
),
],
const EdgeInsets.only(
top: 12,
left: 32,
bottom: 32,
right: 32,
),
child: Text(
"A security feature that protects your information from accidental exposure by"
" disconnecting your device from the Tor network if the"
" connection is disrupted or compromised.",
style: STextStyles
.desktopTextMedium(
context)
.copyWith(
color: Theme.of(context)
.extension<
StackColors>()!
.textDark3,
),
),
),
],
@ -370,8 +379,8 @@ class _TorSettingsState extends ConsumerState<TorSettings> {
);
},
),
],
),
),
],
),
],
),