frosty/lib/screens/settings/chat_settings.dart
2026-01-09 01:04:09 -05:00

347 lines
14 KiB
Dart

import 'dart:io';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:frosty/constants.dart';
import 'package:frosty/screens/settings/stores/settings_store.dart';
import 'package:frosty/screens/settings/widgets/settings_list_select.dart';
import 'package:frosty/screens/settings/widgets/settings_list_slider.dart';
import 'package:frosty/screens/settings/widgets/settings_list_switch.dart';
import 'package:frosty/screens/settings/widgets/settings_muted_words.dart';
import 'package:frosty/utils/context_extensions.dart';
import 'package:frosty/widgets/frosty_cached_network_image.dart';
import 'package:frosty/widgets/section_header.dart';
import 'package:frosty/widgets/settings_page_layout.dart';
import 'package:url_launcher/url_launcher.dart';
class ChatSettings extends StatefulWidget {
final SettingsStore settingsStore;
const ChatSettings({super.key, required this.settingsStore});
@override
State<ChatSettings> createState() => _ChatSettingsState();
}
class _ChatSettingsState extends State<ChatSettings> {
var showPreview = false;
@override
Widget build(BuildContext context) {
final settingsStore = widget.settingsStore;
return Observer(
builder: (context) => SettingsPageLayout(
children: [
const SectionHeader('Message sizing', isFirst: true),
ExpansionTile(
title: const Text('Preview'),
children: [
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
child: DefaultTextStyle(
style: DefaultTextStyle.of(
context,
).style.copyWith(fontSize: settingsStore.fontSize),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text.rich(
TextSpan(
children: [
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: FrostyCachedNetworkImage(
imageUrl:
'https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/3',
height:
defaultBadgeSize * settingsStore.badgeScale,
width:
defaultBadgeSize * settingsStore.badgeScale,
),
),
const TextSpan(text: ' Badge and emote preview. '),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: FrostyCachedNetworkImage(
imageUrl:
'https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/3.0',
height:
defaultEmoteSize * settingsStore.emoteScale,
width:
defaultEmoteSize * settingsStore.emoteScale,
),
),
],
),
textScaler: settingsStore.messageScale.textScaler,
),
SizedBox(height: settingsStore.messageSpacing),
Text(
'Hello! Here\'s a text preview.',
textScaler: settingsStore.messageScale.textScaler,
),
SizedBox(height: settingsStore.messageSpacing),
Text(
'And another for spacing without an emote!',
textScaler: settingsStore.messageScale.textScaler,
),
],
),
),
),
],
),
SettingsListSlider(
title: 'Badge scale',
trailing: '${settingsStore.badgeScale.toStringAsFixed(2)}x',
value: settingsStore.badgeScale,
min: 0.25,
max: 3.0,
divisions: 11,
onChanged: (newValue) => settingsStore.badgeScale = newValue,
),
SettingsListSlider(
title: 'Emote scale',
trailing: '${settingsStore.emoteScale.toStringAsFixed(2)}x',
value: settingsStore.emoteScale,
min: 0.25,
max: 3.0,
divisions: 11,
onChanged: (newValue) => settingsStore.emoteScale = newValue,
),
SettingsListSlider(
title: 'Message scale',
trailing: '${settingsStore.messageScale.toStringAsFixed(2)}x',
value: settingsStore.messageScale,
min: 0.5,
max: 2.0,
divisions: 6,
onChanged: (newValue) => settingsStore.messageScale = newValue,
),
SettingsListSlider(
title: 'Message spacing',
trailing: '${settingsStore.messageSpacing.toStringAsFixed(0)}px',
value: settingsStore.messageSpacing,
max: 30.0,
divisions: 15,
onChanged: (newValue) => settingsStore.messageSpacing = newValue,
),
SettingsListSlider(
title: 'Font size',
trailing: settingsStore.fontSize.toInt().toString(),
value: settingsStore.fontSize,
min: 5,
max: 20,
divisions: 15,
onChanged: (newValue) => settingsStore.fontSize = newValue,
),
const SectionHeader('Message appearance'),
SettingsListSwitch(
title: 'Show deleted messages',
subtitle: const Text(
'Restores the original message of deleted messages.',
),
value: settingsStore.showDeletedMessages,
onChanged: (newValue) =>
settingsStore.showDeletedMessages = newValue,
),
SettingsListSwitch(
title: 'Show message dividers',
value: settingsStore.showChatMessageDividers,
onChanged: (newValue) =>
settingsStore.showChatMessageDividers = newValue,
),
SettingsListSelect(
title: 'Message timestamps',
selectedOption: timestampNames[settingsStore.timestampType.index],
options: timestampNames,
onChanged: (newValue) => settingsStore.timestampType =
TimestampType.values[timestampNames.indexOf(newValue)],
),
const SectionHeader('Delay and latency'),
SettingsListSwitch(
title: 'Sync message delay and stream latency',
value: settingsStore.autoSyncChatDelay,
onChanged: (newValue) => settingsStore.autoSyncChatDelay = newValue,
),
if (!settingsStore.autoSyncChatDelay)
SettingsListSlider(
title: 'Message delay',
trailing: '${settingsStore.chatDelay.toInt()} seconds',
subtitle:
'Adds a delay before each message is rendered in chat. ${Platform.isIOS ? '15 seconds is recommended for iOS.' : ''}',
value: settingsStore.chatDelay,
max: 30.0,
divisions: 30,
onChanged: (newValue) => settingsStore.chatDelay = newValue,
),
const SectionHeader('Alerts'),
SettingsListSwitch(
title: 'Highlight first time chatters',
value: settingsStore.highlightFirstTimeChatter,
onChanged: (newValue) =>
settingsStore.highlightFirstTimeChatter = newValue,
),
SettingsListSwitch(
title: 'Show notices',
subtitle: const Text(
'Shows notices such as subs and re-subs, announcements, and raids.',
),
value: settingsStore.showUserNotices,
onChanged: (newValue) => settingsStore.showUserNotices = newValue,
),
const SectionHeader('Layout'),
SettingsListSwitch(
title: 'Move emote menu button left',
subtitle: const Text(
'Places the emote menu button on the left side to avoid accidental presses.',
),
value: settingsStore.emoteMenuButtonOnLeft,
onChanged: (newValue) =>
settingsStore.emoteMenuButtonOnLeft = newValue,
),
SettingsListSwitch(
title: 'Persist chat tabs',
subtitle: const Text(
'Secondary chat tabs are remembered when switching channels.',
),
value: settingsStore.persistChatTabs,
onChanged: (newValue) {
settingsStore.persistChatTabs = newValue;
if (!newValue) {
settingsStore.secondaryTabs = [];
}
},
),
const SectionHeader('Landscape mode'),
SettingsListSwitch(
title: 'Move chat left',
value: settingsStore.landscapeChatLeftSide,
onChanged: (newValue) =>
settingsStore.landscapeChatLeftSide = newValue,
),
SettingsListSwitch(
title: 'Force vertical chat',
subtitle: const Text(
'Intended for tablets and other larger displays.',
),
value: settingsStore.landscapeForceVerticalChat,
onChanged: (newValue) =>
settingsStore.landscapeForceVerticalChat = newValue,
),
SettingsListSelect(
title: 'Fill notch side',
subtitle:
'Overrides and fills the available space in devices with a display notch.',
selectedOption:
landscapeCutoutNames[settingsStore.landscapeCutout.index],
options: landscapeCutoutNames,
onChanged: (newValue) => settingsStore.landscapeCutout =
LandscapeCutoutType.values[landscapeCutoutNames.indexOf(
newValue,
)],
),
SettingsListSlider(
title: 'Chat overlay opacity',
trailing:
'${(settingsStore.fullScreenChatOverlayOpacity * 100).toStringAsFixed(0)}%',
subtitle:
'Sets the opacity (transparency) of the overlay chat in fullscreen mode.',
value: settingsStore.fullScreenChatOverlayOpacity,
divisions: 10,
onChanged: (newValue) =>
settingsStore.fullScreenChatOverlayOpacity = newValue,
),
const SectionHeader('Muted keywords'),
SettingsMutedWords(settingsStore: settingsStore),
SettingsListSwitch(
title: 'Match whole words',
subtitle: const Text(
'Only matches whole words instead of partial matches.',
),
value: settingsStore.matchWholeWord,
onChanged: (newValue) => settingsStore.matchWholeWord = newValue,
),
const SectionHeader('Autocomplete'),
SettingsListSwitch(
title: 'Show autocomplete bar',
subtitle: const Text(
'Shows a bar containing matching emotes and mentions while typing.',
),
value: settingsStore.autocomplete,
onChanged: (newValue) => settingsStore.autocomplete = newValue,
),
const SectionHeader('Emotes and badges'),
SettingsListSwitch(
title: 'Show Twitch emotes',
value: settingsStore.showTwitchEmotes,
onChanged: (newValue) => settingsStore.showTwitchEmotes = newValue,
),
SettingsListSwitch(
title: 'Show Twitch badges',
value: settingsStore.showTwitchBadges,
onChanged: (newValue) => settingsStore.showTwitchBadges = newValue,
),
SettingsListSwitch(
title: 'Show 7TV emotes',
value: settingsStore.show7TVEmotes,
onChanged: (newValue) => settingsStore.show7TVEmotes = newValue,
),
SettingsListSwitch(
title: 'Show BTTV emotes',
value: settingsStore.showBTTVEmotes,
onChanged: (newValue) => settingsStore.showBTTVEmotes = newValue,
),
SettingsListSwitch(
title: 'Show BTTV badges',
value: settingsStore.showBTTVBadges,
onChanged: (newValue) => settingsStore.showBTTVBadges = newValue,
),
SettingsListSwitch(
title: 'Show FFZ emotes',
value: settingsStore.showFFZEmotes,
onChanged: (newValue) => settingsStore.showFFZEmotes = newValue,
),
SettingsListSwitch(
title: 'Show FFZ badges',
value: settingsStore.showFFZBadges,
onChanged: (newValue) => settingsStore.showFFZBadges = newValue,
),
const SectionHeader('Recent messages'),
SettingsListSwitch(
title: 'Show historical recent messages',
subtitle: Text.rich(
TextSpan(
text:
'Loads historical recent messages in chat through a third-party API service at ',
children: [
TextSpan(
text: 'https://recent-messages.robotty.de/',
style: const TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
decorationColor: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () => launchUrl(
Uri.parse('https://recent-messages.robotty.de/'),
mode: settingsStore.launchUrlExternal
? LaunchMode.externalApplication
: LaunchMode.inAppBrowserView,
),
),
],
),
),
value: settingsStore.showRecentMessages,
onChanged: (newValue) =>
settingsStore.showRecentMessages = newValue,
),
],
),
);
}
}