287 lines
12 KiB
Dart
287 lines
12 KiB
Dart
import 'package:flex_color_scheme/flex_color_scheme.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:mangayomi/modules/anime/providers/state_provider.dart';
|
|
import 'package:mangayomi/modules/anime/widgets/subtitle_view.dart';
|
|
import 'package:mangayomi/modules/manga/reader/widgets/color_filter_widget.dart';
|
|
import 'package:mangayomi/providers/l10n_providers.dart';
|
|
import 'package:mangayomi/utils/extensions/build_context_extensions.dart';
|
|
|
|
class FontSettingWidget extends ConsumerStatefulWidget {
|
|
final bool hasSubtitleTrack;
|
|
const FontSettingWidget({super.key, required this.hasSubtitleTrack});
|
|
|
|
@override
|
|
ConsumerState<FontSettingWidget> createState() => _FontSettingWidgetState();
|
|
}
|
|
|
|
class _FontSettingWidgetState extends ConsumerState<FontSettingWidget> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final subtitleSettings = ref.watch(subtitleSettingsStateProvider);
|
|
return Padding(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
children: [
|
|
if (!widget.hasSubtitleTrack)
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
const Padding(
|
|
padding: EdgeInsets.all(2),
|
|
child: Icon(Icons.info_outline_rounded, size: 14),
|
|
),
|
|
Flexible(
|
|
child: Text(context.l10n.no_subtite_warning_message),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
iconButton(Icons.remove, () {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subtitleSettings..fontSize = subtitleSettings.fontSize! - 1, true);
|
|
setState(() {});
|
|
},
|
|
backgroundColor: context.dynamicWhiteBlackColor,
|
|
iconColors: context.isLight ? Colors.white : Colors.black,
|
|
size: 25),
|
|
SizedBox(
|
|
width: 200,
|
|
child: TextFormField(
|
|
controller: TextEditingController(text: subtitleSettings.fontSize.toString()),
|
|
keyboardType: TextInputType.number,
|
|
onChanged: (v) {
|
|
final val = int.tryParse(v);
|
|
if (val != null) {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subtitleSettings..fontSize = val, true);
|
|
}
|
|
},
|
|
decoration: InputDecoration(
|
|
labelText: context.l10n.font_size,
|
|
isDense: true,
|
|
filled: true,
|
|
fillColor: Colors.transparent,
|
|
enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: context.dynamicThemeColor)),
|
|
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: context.dynamicThemeColor)),
|
|
border: OutlineInputBorder(borderSide: BorderSide(color: context.dynamicThemeColor))),
|
|
),
|
|
),
|
|
iconButton(Icons.add, () {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subtitleSettings..fontSize = subtitleSettings.fontSize! + 1, true);
|
|
setState(() {});
|
|
},
|
|
backgroundColor: context.dynamicWhiteBlackColor,
|
|
iconColors: context.isLight ? Colors.white : Colors.black,
|
|
size: 25),
|
|
iconButton(Icons.format_bold, () {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subtitleSettings..useBold = !subtitleSettings.useBold!, true);
|
|
setState(() {});
|
|
}, iconColors: subtitleSettings.useBold! ? null : context.dynamicWhiteBlackColor.withValues(alpha: 0.5)),
|
|
iconButton(Icons.format_italic, () {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subtitleSettings..useItalic = !subtitleSettings.useItalic!, true);
|
|
setState(() {});
|
|
},
|
|
iconColors:
|
|
subtitleSettings.useItalic! ? null : context.dynamicWhiteBlackColor.withValues(alpha: 0.5)),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Text("Lorem ipsum dolor sit amet",
|
|
style: subtileTextStyle(ref).copyWith(fontSize: 22), textAlign: TextAlign.center),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(
|
|
subtitleSettings
|
|
..useItalic = false
|
|
..useBold = false
|
|
..fontSize = 45,
|
|
true);
|
|
setState(() {});
|
|
},
|
|
child: Text(context.l10n.reset))
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class ColorSettingWidget extends ConsumerStatefulWidget {
|
|
final bool hasSubtitleTrack;
|
|
const ColorSettingWidget({super.key, required this.hasSubtitleTrack});
|
|
|
|
@override
|
|
ConsumerState<ColorSettingWidget> createState() => _ColorSettingWidgetState();
|
|
}
|
|
|
|
class _ColorSettingWidgetState extends ConsumerState<ColorSettingWidget> {
|
|
String selector = "text";
|
|
|
|
Widget button(String text, String value, Color color) {
|
|
return ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
padding: const EdgeInsets.all(0),
|
|
backgroundColor: Colors.transparent,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
|
|
elevation: 0,
|
|
shadowColor: Colors.transparent),
|
|
onPressed: () {
|
|
setState(() {
|
|
selector = value;
|
|
});
|
|
},
|
|
child: Column(
|
|
children: [
|
|
Text(text, style: TextStyle(color: context.textColor)),
|
|
Padding(
|
|
padding: const EdgeInsets.all(2),
|
|
child: Container(
|
|
height: 25,
|
|
width: 25,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(5),
|
|
color: color,
|
|
border: Border.all(width: 2, color: context.dynamicWhiteBlackColor)),
|
|
),
|
|
),
|
|
Text("#${color.hexCode}", style: TextStyle(color: context.textColor)),
|
|
Icon(
|
|
Icons.arrow_drop_down,
|
|
color: selector != value ? Colors.transparent : context.textColor,
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final subSets = ref.watch(subtitleSettingsStateProvider);
|
|
final textColor =
|
|
Color.fromARGB(subSets.textColorA!, subSets.textColorR!, subSets.textColorG!, subSets.textColorB!);
|
|
final borderColor =
|
|
Color.fromARGB(subSets.borderColorA!, subSets.borderColorR!, subSets.borderColorG!, subSets.borderColorB!);
|
|
final backgroundColor = Color.fromARGB(
|
|
subSets.backgroundColorA!, subSets.backgroundColorR!, subSets.backgroundColorG!, subSets.backgroundColorB!);
|
|
return Padding(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
children: [
|
|
if (!widget.hasSubtitleTrack)
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
const Padding(
|
|
padding: EdgeInsets.all(2),
|
|
child: Icon(Icons.info_outline_rounded, size: 14),
|
|
),
|
|
Flexible(
|
|
child: Text(context.l10n.no_subtite_warning_message),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Expanded(flex: 3, child: button(context.l10n.text, "text", textColor)),
|
|
Expanded(flex: 3, child: button(context.l10n.border, "border", borderColor)),
|
|
Expanded(flex: 3, child: button(context.l10n.background, "backgroud", backgroundColor)),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Text("Lorem ipsum dolor sit amet",
|
|
style: subtileTextStyle(ref).copyWith(fontSize: 22), textAlign: TextAlign.center),
|
|
),
|
|
if (selector == "text") ...[
|
|
rgbaFilterWidget(subSets.textColorA!, subSets.textColorR!, subSets.textColorG!, subSets.textColorB!, (val) {
|
|
if (val.$3 == "r") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..textColorR = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "g") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..textColorG = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "b") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..textColorB = val.$1.toInt(), val.$2);
|
|
} else {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..textColorA = val.$1.toInt(), val.$2);
|
|
}
|
|
setState(() {});
|
|
}, context),
|
|
] else if (selector == "border") ...[
|
|
rgbaFilterWidget(subSets.borderColorA!, subSets.borderColorR!, subSets.borderColorG!, subSets.borderColorB!,
|
|
(val) {
|
|
if (val.$3 == "r") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..borderColorR = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "g") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..borderColorG = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "b") {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..borderColorB = val.$1.toInt(), val.$2);
|
|
} else {
|
|
ref.read(subtitleSettingsStateProvider.notifier).set(subSets..borderColorA = val.$1.toInt(), val.$2);
|
|
}
|
|
setState(() {});
|
|
}, context),
|
|
] else ...[
|
|
rgbaFilterWidget(subSets.backgroundColorA!, subSets.backgroundColorR!, subSets.backgroundColorG!,
|
|
subSets.backgroundColorB!, (val) {
|
|
if (val.$3 == "r") {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subSets..backgroundColorR = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "g") {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subSets..backgroundColorG = val.$1.toInt(), val.$2);
|
|
} else if (val.$3 == "b") {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subSets..backgroundColorB = val.$1.toInt(), val.$2);
|
|
} else {
|
|
ref
|
|
.read(subtitleSettingsStateProvider.notifier)
|
|
.set(subSets..backgroundColorA = val.$1.toInt(), val.$2);
|
|
}
|
|
setState(() {});
|
|
}, context),
|
|
],
|
|
TextButton(
|
|
onPressed: () {
|
|
ref.read(subtitleSettingsStateProvider.notifier).resetColor();
|
|
setState(() {});
|
|
},
|
|
child: Text(context.l10n.reset))
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
Widget iconButton(IconData icon, void Function()? onPressed,
|
|
{Color? backgroundColor, Color? iconColors, double size = 35}) =>
|
|
Padding(
|
|
padding: const EdgeInsets.all(5),
|
|
child: SizedBox(
|
|
height: size,
|
|
width: size,
|
|
child: IconButton(
|
|
iconSize: size * 0.9,
|
|
style: ButtonStyle(backgroundColor: WidgetStatePropertyAll(backgroundColor)),
|
|
padding: const EdgeInsets.all(1),
|
|
onPressed: onPressed,
|
|
icon: Icon(icon, color: iconColors)),
|
|
),
|
|
);
|