From 84aca5900b1e94b7b56ae037c3477976ef777ab2 Mon Sep 17 00:00:00 2001 From: Tommy Chow Date: Fri, 7 Jan 2022 12:42:15 -0500 Subject: [PATCH] Add chat font scale setting --- lib/models/irc_message.dart | 22 +++--- lib/screens/channel/chat/chat.dart | 73 ++++++++++--------- lib/screens/channel/chat/chat_message.dart | 21 +----- lib/screens/settings/chat_settings.dart | 19 +++++ .../settings/stores/settings_store.dart | 4 + .../settings/stores/settings_store.g.dart | 18 +++++ 6 files changed, 94 insertions(+), 63 deletions(-) diff --git a/lib/models/irc_message.dart b/lib/models/irc_message.dart index 0b10f4c6..53ac8c6e 100644 --- a/lib/models/irc_message.dart +++ b/lib/models/irc_message.dart @@ -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 generateSpan({ required TextStyle? style, - required Map emoteToObject, - required Map twitchBadgeToObject, - Map>? ffzUserToBadges, - Map>? sevenTVUserToBadges, - Map? 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 = []; @@ -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( diff --git a/lib/screens/channel/chat/chat.dart b/lib/screens/channel/chat/chat.dart index 22a245a1..de6b2bc5 100644 --- a/lib/screens/channel/chat/chat.dart +++ b/lib/screens/channel/chat/chat.dart @@ -33,44 +33,47 @@ class _ChatState extends State { 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, - ); - }, + }, + ), ), ), ), diff --git a/lib/screens/channel/chat/chat_message.dart b/lib/screens/channel/chat/chat_message.dart index fbf9c93a..5f45b6ae 100644 --- a/lib/screens/channel/chat/chat_message.dart +++ b/lib/screens/channel/chat/chat_message.dart @@ -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, diff --git a/lib/screens/settings/chat_settings.dart b/lib/screens/settings/chat_settings.dart index 734434f1..a0e51418 100644 --- a/lib/screens/settings/chat_settings.dart +++ b/lib/screens/settings/chat_settings.dart @@ -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, + ), + ], + ), + ), ], ); }, diff --git a/lib/screens/settings/stores/settings_store.dart b/lib/screens/settings/stores/settings_store.dart index f26b2e0e..309d10bc 100644 --- a/lib/screens/settings/stores/settings_store.dart +++ b/lib/screens/settings/stores/settings_store.dart @@ -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 diff --git a/lib/screens/settings/stores/settings_store.g.dart b/lib/screens/settings/stores/settings_store.g.dart index 25ae98a4..2926e9b2 100644 --- a/lib/screens/settings/stores/settings_store.g.dart +++ b/lib/screens/settings/stores/settings_store.g.dart @@ -19,6 +19,7 @@ SettingsStore _$SettingsStoreFromJson(Map 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 _$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} ''';