mirror of
https://github.com/Dr-Blank/Vaani.git
synced 2025-12-06 02:59:28 +00:00
feat: extensive settings for media controls through notification (#28)
* feat: add notification settings customisation options * feat: add notification settings page and update routing
This commit is contained in:
Dr.Blank
GitHub
parent
721b0a87fc
commit
3cf0a0b124
21 changed files with 1391 additions and 376 deletions
|
|
@ -11,6 +11,7 @@ import 'package:vaani/api/server_provider.dart';
|
|||
import 'package:vaani/router/router.dart';
|
||||
import 'package:vaani/settings/app_settings_provider.dart';
|
||||
import 'package:vaani/settings/models/app_settings.dart' as model;
|
||||
import 'package:vaani/settings/view/simple_settings_page.dart';
|
||||
|
||||
class AppSettingsPage extends HookConsumerWidget {
|
||||
const AppSettingsPage({
|
||||
|
|
@ -26,253 +27,272 @@ class AppSettingsPage extends HookConsumerWidget {
|
|||
final serverURIController = useTextEditingController();
|
||||
final sleepTimerSettings = appSettings.playerSettings.sleepTimerSettings;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('App Settings'),
|
||||
),
|
||||
body: SettingsList(
|
||||
sections: [
|
||||
// Appearance section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
title: Text(
|
||||
'Appearance',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile.switchTile(
|
||||
initialValue: appSettings.themeSettings.isDarkMode,
|
||||
title: const Text('Dark Mode'),
|
||||
description: const Text('we all know dark mode is better'),
|
||||
leading: appSettings.themeSettings.isDarkMode
|
||||
? const Icon(Icons.dark_mode)
|
||||
: const Icon(Icons.light_mode),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).toggleDarkMode();
|
||||
},
|
||||
),
|
||||
SettingsTile.switchTile(
|
||||
initialValue:
|
||||
appSettings.themeSettings.useMaterialThemeOnItemPage,
|
||||
title: const Text('Adaptive Theme on Item Page'),
|
||||
description: const Text(
|
||||
'get fancy with the colors on the item page at the cost of some performance',
|
||||
),
|
||||
leading: appSettings.themeSettings.useMaterialThemeOnItemPage
|
||||
? const Icon(Icons.auto_fix_high)
|
||||
: const Icon(Icons.auto_fix_off),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
useMaterialThemeOnItemPage: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
return SimpleSettingsPage(
|
||||
title: const Text('App Settings'),
|
||||
sections: [
|
||||
// General section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
|
||||
// Sleep Timer section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
title: Text(
|
||||
'General',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile(
|
||||
title: const Text('Notification Media Player'),
|
||||
leading: const Icon(Icons.play_lesson),
|
||||
description: const Text(
|
||||
'Customize the media player in notifications',
|
||||
),
|
||||
onPressed: (context) {
|
||||
context.pushNamed(Routes.notificationSettings.name);
|
||||
},
|
||||
),
|
||||
title: Text(
|
||||
'Sleep Timer',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
],
|
||||
),
|
||||
// Appearance section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
title: Text(
|
||||
'Appearance',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile.switchTile(
|
||||
initialValue: appSettings.themeSettings.isDarkMode,
|
||||
title: const Text('Dark Mode'),
|
||||
description: const Text('we all know dark mode is better'),
|
||||
leading: appSettings.themeSettings.isDarkMode
|
||||
? const Icon(Icons.dark_mode)
|
||||
: const Icon(Icons.light_mode),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).toggleDarkMode();
|
||||
},
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile.navigation(
|
||||
// initialValue: sleepTimerSettings.autoTurnOnTimer,
|
||||
title: const Text('Auto Turn On Timer'),
|
||||
description: const Text(
|
||||
'Automatically turn on the sleep timer based on the time of day',
|
||||
),
|
||||
leading: sleepTimerSettings.autoTurnOnTimer
|
||||
? const Icon(Icons.timer)
|
||||
: const Icon(Icons.timer_off),
|
||||
onPressed: (context) {
|
||||
// push the sleep timer settings page
|
||||
context.pushNamed(Routes.autoSleepTimerSettings.name);
|
||||
},
|
||||
// a switch to enable or disable the auto turn off time
|
||||
trailing: IntrinsicHeight(
|
||||
child: Row(
|
||||
children: [
|
||||
VerticalDivider(
|
||||
color: Theme.of(context).dividerColor.withOpacity(0.5),
|
||||
indent: 8.0,
|
||||
endIndent: 8.0,
|
||||
// width: 8.0,
|
||||
// thickness: 2.0,
|
||||
// height: 24.0,
|
||||
SettingsTile.switchTile(
|
||||
initialValue:
|
||||
appSettings.themeSettings.useMaterialThemeOnItemPage,
|
||||
title: const Text('Adaptive Theme on Item Page'),
|
||||
description: const Text(
|
||||
'get fancy with the colors on the item page at the cost of some performance',
|
||||
),
|
||||
leading: appSettings.themeSettings.useMaterialThemeOnItemPage
|
||||
? const Icon(Icons.auto_fix_high)
|
||||
: const Icon(Icons.auto_fix_off),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
useMaterialThemeOnItemPage: value,
|
||||
),
|
||||
Switch(
|
||||
value: sleepTimerSettings.autoTurnOnTimer,
|
||||
onChanged: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.playerSettings
|
||||
.sleepTimerSettings(
|
||||
autoTurnOnTimer: value,
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Sleep Timer section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
title: Text(
|
||||
'Sleep Timer',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile.navigation(
|
||||
// initialValue: sleepTimerSettings.autoTurnOnTimer,
|
||||
title: const Text('Auto Turn On Timer'),
|
||||
description: const Text(
|
||||
'Automatically turn on the sleep timer based on the time of day',
|
||||
),
|
||||
leading: sleepTimerSettings.autoTurnOnTimer
|
||||
? const Icon(Icons.timer)
|
||||
: const Icon(Icons.timer_off),
|
||||
onPressed: (context) {
|
||||
// push the sleep timer settings page
|
||||
context.pushNamed(Routes.autoSleepTimerSettings.name);
|
||||
},
|
||||
// a switch to enable or disable the auto turn off time
|
||||
trailing: IntrinsicHeight(
|
||||
child: Row(
|
||||
children: [
|
||||
VerticalDivider(
|
||||
color: Theme.of(context).dividerColor.withOpacity(0.5),
|
||||
indent: 8.0,
|
||||
endIndent: 8.0,
|
||||
// width: 8.0,
|
||||
// thickness: 2.0,
|
||||
// height: 24.0,
|
||||
),
|
||||
Switch(
|
||||
value: sleepTimerSettings.autoTurnOnTimer,
|
||||
onChanged: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.playerSettings
|
||||
.sleepTimerSettings(
|
||||
autoTurnOnTimer: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Backup and Restore section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
title: Text(
|
||||
'Backup and Restore',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile(
|
||||
title: const Text('Copy to Clipboard'),
|
||||
leading: const Icon(Icons.copy),
|
||||
description: const Text(
|
||||
'Copy the app settings to the clipboard',
|
||||
),
|
||||
onPressed: (context) async {
|
||||
// copy to clipboard
|
||||
await Clipboard.setData(
|
||||
ClipboardData(
|
||||
text: jsonEncode(appSettings.toJson()),
|
||||
),
|
||||
);
|
||||
// show toast
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Settings copied to clipboard'),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
SettingsTile(
|
||||
title: const Text('Restore'),
|
||||
leading: const Icon(Icons.restore),
|
||||
description: const Text(
|
||||
'Restore the app settings from the backup',
|
||||
),
|
||||
onPressed: (context) {
|
||||
final formKey = GlobalKey<FormState>();
|
||||
// show a dialog to get the backup
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Restore Backup'),
|
||||
content: Form(
|
||||
key: formKey,
|
||||
child: TextFormField(
|
||||
controller: serverURIController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Backup',
|
||||
hintText: 'Paste the backup here',
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'Please paste the backup here';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
if (formKey.currentState!.validate()) {
|
||||
final backup = serverURIController.text;
|
||||
final newSettings = model.AppSettings.fromJson(
|
||||
// decode the backup as json
|
||||
jsonDecode(backup),
|
||||
);
|
||||
ref
|
||||
.read(appSettingsProvider.notifier)
|
||||
.update(newSettings);
|
||||
Navigator.of(context).pop();
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Settings restored'),
|
||||
),
|
||||
);
|
||||
},
|
||||
// clear the backup
|
||||
serverURIController.clear();
|
||||
}
|
||||
},
|
||||
child: const Text('Restore'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// a button to reset the app settings
|
||||
SettingsTile(
|
||||
title: const Text('Reset App Settings'),
|
||||
leading: const Icon(Icons.settings_backup_restore),
|
||||
description: const Text(
|
||||
'Reset the app settings to the default values',
|
||||
),
|
||||
onPressed: (context) async {
|
||||
// confirm the reset
|
||||
final res = await showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Reset App Settings'),
|
||||
content: const Text(
|
||||
'Are you sure you want to reset the app settings?',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Backup and Restore section
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
title: Text(
|
||||
'Backup and Restore',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
tiles: [
|
||||
SettingsTile(
|
||||
title: const Text('Copy to Clipboard'),
|
||||
leading: const Icon(Icons.copy),
|
||||
description: const Text(
|
||||
'Copy the app settings to the clipboard',
|
||||
),
|
||||
onPressed: (context) async {
|
||||
// copy to clipboard
|
||||
await Clipboard.setData(
|
||||
ClipboardData(
|
||||
text: jsonEncode(appSettings.toJson()),
|
||||
),
|
||||
);
|
||||
// show toast
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Settings copied to clipboard'),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
SettingsTile(
|
||||
title: const Text('Restore'),
|
||||
leading: const Icon(Icons.restore),
|
||||
description: const Text(
|
||||
'Restore the app settings from the backup',
|
||||
),
|
||||
onPressed: (context) {
|
||||
final formKey = GlobalKey<FormState>();
|
||||
// show a dialog to get the backup
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Restore Backup'),
|
||||
content: Form(
|
||||
key: formKey,
|
||||
child: TextFormField(
|
||||
controller: serverURIController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Backup',
|
||||
hintText: 'Paste the backup here',
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'Please paste the backup here';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(false);
|
||||
},
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
if (formKey.currentState!.validate()) {
|
||||
final backup = serverURIController.text;
|
||||
final newSettings = model.AppSettings.fromJson(
|
||||
// decode the backup as json
|
||||
jsonDecode(backup),
|
||||
);
|
||||
ref
|
||||
.read(appSettingsProvider.notifier)
|
||||
.update(newSettings);
|
||||
Navigator.of(context).pop();
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Settings restored'),
|
||||
),
|
||||
);
|
||||
// clear the backup
|
||||
serverURIController.clear();
|
||||
}
|
||||
},
|
||||
child: const Text('Restore'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// a button to reset the app settings
|
||||
SettingsTile(
|
||||
title: const Text('Reset App Settings'),
|
||||
leading: const Icon(Icons.settings_backup_restore),
|
||||
description: const Text(
|
||||
'Reset the app settings to the default values',
|
||||
),
|
||||
onPressed: (context) async {
|
||||
// confirm the reset
|
||||
final res = await showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Reset App Settings'),
|
||||
content: const Text(
|
||||
'Are you sure you want to reset the app settings?',
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(true);
|
||||
},
|
||||
child: const Text('Reset'),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(false);
|
||||
},
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop(true);
|
||||
},
|
||||
child: const Text('Reset'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
// if the user confirms the reset
|
||||
if (res == true) {
|
||||
ref.read(appSettingsProvider.notifier).reset();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
// if the user confirms the reset
|
||||
if (res == true) {
|
||||
ref.read(appSettingsProvider.notifier).reset();
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue