mirror of
https://github.com/kodjodevf/mangayomi.git
synced 2026-04-07 06:29:22 +00:00
412 lines
14 KiB
Dart
412 lines
14 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),
|
|
),
|
|
),
|
|
);
|