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, useSafeArea: false,
barrierDismissible: true, barrierDismissible: true,
builder: (context) { builder: (context) {
return const StackDialog( return StackDialog(
title: "What is Tor?", title: "What is Tor?",
message: message:
"Short for \"The Onion Router\", is an open-source software that enables internet communication" "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.", " to obscure the origin and destination of data.",
rightButton: SecondaryButton( rightButton: SecondaryButton(
label: "Close", label: "Close",
onPressed: Navigator.of(context).pop,
), ),
); );
}, },
@ -144,7 +145,7 @@ class _TorSettingsViewState extends ConsumerState<TorSettingsView> {
useSafeArea: false, useSafeArea: false,
barrierDismissible: true, barrierDismissible: true,
builder: (context) { builder: (context) {
return const StackDialog( return StackDialog(
title: "What is Tor killswitch?", title: "What is Tor killswitch?",
message: message:
"A security feature that protects your information from accidental exposure by" "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.", " connection is disrupted or compromised.",
rightButton: SecondaryButton( rightButton: SecondaryButton(
label: "Close", label: "Close",
onPressed:
Navigator.of(context).pop,
), ),
); );
}, },
@ -243,54 +246,31 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
} }
} }
Color _color( Future<void> _playConnecting() async {
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 {
await _play( await _play(
from: "connection-start", from: "connecting-start",
to: "connection-end", to: "connecting-end",
repeat: true, repeat: true,
); );
} }
void _playConnected() async { Future<void> _playConnectingDone() async {
await _play( await _play(
from: "connection-end", from: "connecting-end",
to: "disconnection-start", to: "connected-start",
repeat: false,
);
}
Future<void> _playConnected() async {
await _play(
from: "connected-start",
to: "connected-end",
repeat: true, repeat: true,
); );
} }
void _playDisconnect() async { Future<void> _playDisconnect() async {
await _play( await _play(
from: "disconnection-start", from: "disconnection-start",
to: "disconnection-end", to: "disconnection-end",
@ -308,6 +288,8 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
final start = composition.getMarker(from)!.start; final start = composition.getMarker(from)!.start;
final end = composition.getMarker(to)!.start; final end = composition.getMarker(to)!.start;
controller1.value = start;
if (repeat) { if (repeat) {
await controller1.repeat( await controller1.repeat(
min: start, min: start,
@ -348,19 +330,20 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
final width = MediaQuery.of(context).size.width / 1.5; final width = MediaQuery.of(context).size.width / 1.5;
return TorSubscription( return TorSubscription(
onTorStatusChanged: (status) { onTorStatusChanged: (status) async {
_status = status; _status = status;
switch (_status) { switch (_status) {
case TorConnectionStatus.disconnected: case TorConnectionStatus.disconnected:
_playDisconnect(); await _playDisconnect();
break; break;
case TorConnectionStatus.connected: case TorConnectionStatus.connected:
_playConnected(); await _playConnectingDone();
await _playConnected();
break; break;
case TorConnectionStatus.connecting: case TorConnectionStatus.connecting:
_playConnecting(); await _playConnecting();
break; break;
} }
}, },
@ -381,21 +364,8 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
// height: width, // height: width,
onLoaded: (composition) { onLoaded: (composition) {
_completer.complete(composition); _completer.complete(composition);
// setState(() {
controller1.duration = composition.duration; 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) { if (_status == TorConnectionStatus.connected) {
_playConnected(); _playConnected();
} else if (_status == TorConnectionStatus.connecting) { } else if (_status == TorConnectionStatus.connecting) {
@ -404,19 +374,7 @@ class _TorAnimatedButtonState extends ConsumerState<TorAnimatedButton>
}, },
), ),
), ),
Text( const UpperCaseTorText(),
_label(
_status,
),
style: STextStyles.pageTitleH2(
context,
).copyWith(
color: _color(
_status,
Theme.of(context).extension<StackColors>()!,
),
),
)
], ],
), ),
), ),
@ -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. /// Connect to the Tor network.
/// ///
/// This method is called when the user taps the "Connect" button. /// This method is called when the user taps the "Connect" button.

View file

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