Add chat font scale setting

This commit is contained in:
Tommy Chow 2022-01-07 12:42:15 -05:00
parent a03084af1c
commit 84aca5900b
6 changed files with 94 additions and 63 deletions

View file

@ -3,8 +3,8 @@ import 'package:collection/collection.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:frosty/models/badges.dart';
import 'package:frosty/models/emotes.dart';
import 'package:frosty/screens/channel/chat/chat_assets_store.dart';
import 'package:intl/intl.dart';
import 'package:url_launcher/url_launcher.dart';
@ -76,12 +76,7 @@ class IRCMessage {
/// Returns an [InlineSpan] list that corresponds to the badges, username, words, and emotes of the given [IRCMessage].
List<InlineSpan> generateSpan({
required TextStyle? style,
required Map<String, Emote> emoteToObject,
required Map<String, BadgeInfoTwitch> twitchBadgeToObject,
Map<String, List<BadgeInfoFFZ>>? ffzUserToBadges,
Map<String, List<BadgeInfo7TV>>? sevenTVUserToBadges,
Map<String, BadgeInfoBTTV>? bttvUserToBadge,
RoomFFZ? ffzRoomInfo,
required ChatAssetsStore assetsStore,
bool showMessage = true,
bool useZeroWidth = false,
bool useReadableColors = false,
@ -90,6 +85,13 @@ class IRCMessage {
const badgeHeight = 20.0;
const emoteHeight = 30.0;
final emoteToObject = assetsStore.emoteToObject;
final twitchBadgeToObject = assetsStore.twitchBadgesToObject;
final ffzUserToBadges = assetsStore.userToFFZBadges;
final sevenTVUserToBadges = assetsStore.userTo7TVBadges;
final bttvUserToBadge = assetsStore.userToBTTVBadges;
final ffzRoomInfo = assetsStore.ffzRoomInfo;
// The span list that will be used to render the chat message
final span = <InlineSpan>[];
@ -119,7 +121,7 @@ class IRCMessage {
// Indicator to skip adding the bot badges later when adding the rest of FFZ badges.
var skipBot = false;
final ffzUserBadges = ffzUserToBadges?[tags['user-id']];
final ffzUserBadges = ffzUserToBadges[tags['user-id']];
final twitchBadges = tags['badges']?.split(',');
// Pasrse and add the Twitch badges to the span if they exist.
if (twitchBadges != null) {
@ -201,7 +203,7 @@ class IRCMessage {
}
// Add BTTV badges to span
final userBTTVBadge = bttvUserToBadge?[tags['user-id']];
final userBTTVBadge = bttvUserToBadge[tags['user-id']];
if (userBTTVBadge != null) {
span.add(
_createEmoteSpan(
@ -215,7 +217,7 @@ class IRCMessage {
}
// Add 7TV badges to end of badges span
final user7TVBadges = sevenTVUserToBadges?[tags['user-id']];
final user7TVBadges = sevenTVUserToBadges[tags['user-id']];
if (user7TVBadges != null) {
for (final badge in user7TVBadges) {
span.add(

View file

@ -33,44 +33,47 @@ class _ChatState extends State<Chat> {
FocusManager.instance.primaryFocus?.unfocus();
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
},
child: Observer(
builder: (context) => ListView.builder(
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
itemCount: chatStore.messages.length,
controller: chatStore.scrollController,
itemBuilder: (context, index) => Observer(
builder: (context) {
final message = chatStore.messages[index];
child: MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.fontScale),
child: Observer(
builder: (context) => ListView.builder(
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
itemCount: chatStore.messages.length,
controller: chatStore.scrollController,
itemBuilder: (context, index) => Observer(
builder: (context) {
final message = chatStore.messages[index];
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
return InkWell(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
},
onLongPress: () => showModalBottomSheet(
context: context,
builder: (context) => ChatUserModal(
username: message.user!,
chatStore: chatStore,
userId: message.tags['user-id']!,
displayName: message.tags['display-name']!,
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
return InkWell(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
},
onLongPress: () => showModalBottomSheet(
context: context,
builder: (context) => ChatUserModal(
username: message.user!,
chatStore: chatStore,
userId: message.tags['user-id']!,
displayName: message.tags['display-name']!,
),
),
),
child: ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
),
child: ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
),
);
}
return ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
);
}
return ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
);
},
},
),
),
),
),

View file

@ -36,12 +36,7 @@ class ChatMessage extends StatelessWidget {
TextSpan(
children: ircMessage.generateSpan(
style: DefaultTextStyle.of(context).style,
emoteToObject: assetsStore.emoteToObject,
twitchBadgeToObject: assetsStore.twitchBadgesToObject,
ffzUserToBadges: assetsStore.userToFFZBadges,
sevenTVUserToBadges: assetsStore.userTo7TVBadges,
bttvUserToBadge: assetsStore.userToBTTVBadges,
ffzRoomInfo: assetsStore.ffzRoomInfo,
assetsStore: assetsStore,
useZeroWidth: settingsStore.showZeroWidth,
useReadableColors: settingsStore.useReadableColors,
timestamp: timeStamps,
@ -75,12 +70,7 @@ class ChatMessage extends StatelessWidget {
TextSpan(
children: ircMessage.generateSpan(
style: DefaultTextStyle.of(context).style,
emoteToObject: assetsStore.emoteToObject,
twitchBadgeToObject: assetsStore.twitchBadgesToObject,
ffzUserToBadges: assetsStore.userToFFZBadges,
sevenTVUserToBadges: assetsStore.userTo7TVBadges,
bttvUserToBadge: assetsStore.userToBTTVBadges,
ffzRoomInfo: assetsStore.ffzRoomInfo,
assetsStore: assetsStore,
showMessage: settingsStore.showDeletedMessages,
useZeroWidth: settingsStore.showZeroWidth,
useReadableColors: settingsStore.useReadableColors,
@ -129,12 +119,7 @@ class ChatMessage extends StatelessWidget {
TextSpan(
children: ircMessage.generateSpan(
style: DefaultTextStyle.of(context).style,
emoteToObject: assetsStore.emoteToObject,
twitchBadgeToObject: assetsStore.twitchBadgesToObject,
ffzUserToBadges: assetsStore.userToFFZBadges,
sevenTVUserToBadges: assetsStore.userTo7TVBadges,
bttvUserToBadge: assetsStore.userToBTTVBadges,
ffzRoomInfo: assetsStore.ffzRoomInfo,
assetsStore: assetsStore,
useZeroWidth: settingsStore.showZeroWidth,
useReadableColors: settingsStore.useReadableColors,
timestamp: timeStamps,

View file

@ -47,6 +47,25 @@ class ChatSettings extends StatelessWidget {
value: settingsStore.useReadableColors,
onChanged: (newValue) => settingsStore.useReadableColors = newValue,
),
ListTile(
isThreeLine: true,
title: Text('Font scale: ${settingsStore.fontScale.toStringAsFixed(1)}x'),
subtitle: Column(
children: [
Slider.adaptive(
value: settingsStore.fontScale,
min: 0.5,
max: 2.0,
divisions: 15,
onChanged: (newValue) => settingsStore.fontScale = newValue,
),
Text(
'Hello! This is a preview for the font scale.',
textScaleFactor: settingsStore.fontScale,
),
],
),
),
],
);
},

View file

@ -56,6 +56,10 @@ abstract class _SettingsStoreBase with Store {
@observable
var useReadableColors = true;
@JsonKey(defaultValue: 1.0)
@observable
var fontScale = 1.0;
// Global configs
@JsonKey(defaultValue: false)
@observable

View file

@ -19,6 +19,7 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
..useTwelveHourTimestamps =
json['useTwelveHourTimestamps'] as bool? ?? false
..useReadableColors = json['useReadableColors'] as bool? ?? true
..fontScale = (json['fontScale'] as num?)?.toDouble() ?? 1.0
..fullScreen = json['fullScreen'] as bool? ?? false
..expandInfo = json['expandInfo'] as bool? ?? true;
@ -34,6 +35,7 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
'showTimestamps': instance.showTimestamps,
'useTwelveHourTimestamps': instance.useTwelveHourTimestamps,
'useReadableColors': instance.useReadableColors,
'fontScale': instance.fontScale,
'fullScreen': instance.fullScreen,
'expandInfo': instance.expandInfo,
};
@ -201,6 +203,21 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
});
}
final _$fontScaleAtom = Atom(name: '_SettingsStoreBase.fontScale');
@override
double get fontScale {
_$fontScaleAtom.reportRead();
return super.fontScale;
}
@override
set fontScale(double value) {
_$fontScaleAtom.reportWrite(value, super.fontScale, () {
super.fontScale = value;
});
}
final _$fullScreenAtom = Atom(name: '_SettingsStoreBase.fullScreen');
@override
@ -244,6 +261,7 @@ showZeroWidth: ${showZeroWidth},
showTimestamps: ${showTimestamps},
useTwelveHourTimestamps: ${useTwelveHourTimestamps},
useReadableColors: ${useReadableColors},
fontScale: ${fontScale},
fullScreen: ${fullScreen},
expandInfo: ${expandInfo}
''';