feat: add bttv/ffz emote support

lib/components/chat_history/twitch/message.dart

@@ -7,6 +7,7 @@ import 'package:rtchat/components/chat_history/twitch/badge.dart';
 import 'package:rtchat/components/chat_history/twitch/message_link_preview.dart';
 import 'package:rtchat/models/message.dart';
 import 'package:rtchat/models/style.dart';
+import 'package:rtchat/models/twitch/third_party_emote.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 const colors = [
@@ -221,8 +222,9 @@ class TwitchMessageWidget extends StatelessWidget {
           break;
       }
 
-      // add text.
       final emotes = model.tags['emotes-raw'];
+      final bttvEmoteProvider =
+          Provider.of<ThirdPartyEmoteModel>(context, listen: true);
       if (model.deleted) {
         children.add(const TextSpan(text: "<deleted message>"));
       } else if (emotes != null) {
@@ -234,11 +236,9 @@ class TwitchMessageWidget extends StatelessWidget {
 
         for (final child in parsed) {
           if (child.start > index) {
-            children.addAll(parseText(
-              model.message.substring(index, child.start),
-              linkStyle,
-              tagStyle,
-            ));
+            final substring = model.message.substring(index, child.start);
+            children.addAll(processText(
+                substring, bttvEmoteProvider, styleModel, linkStyle, tagStyle));
           }
           final url =
               "https://static-cdn.jtvnw.net/emoticons/v1/${child.key}/1.0";
@@ -250,18 +250,13 @@ class TwitchMessageWidget extends StatelessWidget {
         }
 
         if (index < model.message.length) {
-          children.addAll(parseText(
-            model.message.substring(index),
-            linkStyle,
-            tagStyle,
-          ));
+          final substring = model.message.substring(index);
+          children.addAll(processText(
+              substring, bttvEmoteProvider, styleModel, linkStyle, tagStyle));
         }
       } else {
-        children.addAll(parseText(
-          model.message,
-          linkStyle,
-          tagStyle,
-        ));
+        children.addAll(processText(
+            model.message, bttvEmoteProvider, styleModel, linkStyle, tagStyle));
       }
 
       // if messsage has links and clips, then fetch the first clip link
@@ -277,4 +272,36 @@ class TwitchMessageWidget extends StatelessWidget {
           ));
     });
   }
+
+  List<InlineSpan> processText(String message, ThirdPartyEmoteModel bttvEmotes,
+      StyleModel styleModel, TextStyle linkStyle, TextStyle tagStyle) {
+    final List<InlineSpan> children = [];
+    var lastParsedStart = 0;
+    for (var start = 0; start < message.length;) {
+      final end = message.indexOf(" ", start) + 1;
+      final token =
+          end == 0 ? message.substring(start) : message.substring(start, end);
+      final emote = bttvEmotes.bttvGlobalEmotes[token.trim()] ??
+          bttvEmotes.bttvChannelEmotes[token.trim()] ??
+          bttvEmotes.ffzEmotes[token.trim()];
+      if (emote != null) {
+        children.addAll(parseText(
+            message.substring(lastParsedStart, start), linkStyle, tagStyle));
+        children.add(WidgetSpan(
+            alignment: PlaceholderAlignment.middle,
+            child: Image(
+                image: NetworkImage(emote.source),
+                height: styleModel.fontSize)));
+        start = end == 0 ? message.length : end;
+        lastParsedStart = start;
+      } else {
+        start = end == 0 ? message.length : end;
+      }
+    }
+    if (lastParsedStart != message.length) {
+      children.addAll(
+          parseText(message.substring(lastParsedStart), linkStyle, tagStyle));
+    }
+    return children;
+  }
 }

lib/main.dart

@@ -20,6 +20,7 @@ import 'package:rtchat/models/quick_links.dart';
 import 'package:rtchat/models/style.dart';
 import 'package:rtchat/models/tts.dart';
 import 'package:rtchat/models/twitch/badge.dart';
+import 'package:rtchat/models/twitch/third_party_emote.dart';
 import 'package:rtchat/models/twitch/emote.dart';
 import 'package:rtchat/models/user.dart';
 import 'package:rtchat/screens/settings/activity_feed.dart';
@@ -201,7 +202,16 @@ class App extends StatelessWidget {
             model.subscribe(channels.subscribedChannels);
           });
           return model;
-        })
+        }),
+        ChangeNotifierProvider(create: (context) {
+          final model = ThirdPartyEmoteModel();
+          final channels = Provider.of<ChannelsModel>(context, listen: false);
+          model.subscribe(channels.subscribedChannels);
+          channels.addListener(() {
+            model.subscribe(channels.subscribedChannels);
+          });
+          return model;
+        }),
       ],
       child: DefaultTabController(
         initialIndex: 0,

lib/models/twitch/third_party_emote.dart

@@ -0,0 +1,125 @@
+import 'dart:convert';
+import 'dart:core';
+
+import 'package:flutter/foundation.dart';
+import 'package:http/http.dart' as http;
+import 'package:rtchat/models/channels.dart';
+
+final Map<String, Future<Map<String, ThirdPartyEmote>>> _bttvChannelCache = {};
+final Map<String, Future<Map<String, ThirdPartyEmote>>> _ffzCache = {};
+Future<Map<String, ThirdPartyEmote>>? _globalCache;
+
+Future<Map<String, ThirdPartyEmote>> getGlobalEmotes(Uri uri) async {
+  final response = await http.get(uri);
+  Map<String, ThirdPartyEmote> result = {};
+
+  if (response.statusCode == 200) {
+    jsonDecode(response.body).forEach((emote) {
+      final parsedEmote = ThirdPartyEmote.fromBttvJson(emote);
+      result[parsedEmote.code] = parsedEmote;
+    });
+  }
+
+  return result;
+}
+
+Future<Map<String, ThirdPartyEmote>> getChannelEmotes(Uri uri) async {
+  final response = await http.get(uri);
+  Map<String, ThirdPartyEmote> result = {};
+
+  if (response.statusCode == 200) {
+    jsonDecode(response.body)['channelEmotes'].forEach((emote) {
+      final parsedEmote = ThirdPartyEmote.fromBttvJson(emote);
+      result[parsedEmote.code] = parsedEmote;
+    });
+
+    jsonDecode(response.body)['sharedEmotes'].forEach((emote) {
+      final parsedEmote = ThirdPartyEmote.fromBttvJson(emote);
+      result[parsedEmote.code] = parsedEmote;
+    });
+  }
+
+  return result;
+}
+
+Future<Map<String, ThirdPartyEmote>> getFFZEmotes(Uri uri) async {
+  final response = await http.get(uri);
+  Map<String, ThirdPartyEmote> result = {};
+
+  if (response.statusCode == 200) {
+    jsonDecode(response.body).forEach((emote) {
+      final parsedEmote = ThirdPartyEmote.fromFFZJson(emote);
+      result[parsedEmote.code] = parsedEmote;
+    });
+  }
+
+  return result;
+}
+
+class ThirdPartyEmoteModel extends ChangeNotifier {
+  final Map<String, ThirdPartyEmote> _channelFFZEmotes = {};
+  final Map<String, ThirdPartyEmote> _channelBttvEmotes = {};
+  final Map<String, ThirdPartyEmote> _globalBttvEmotes = {};
+
+  Future<void> subscribe(Set<Channel> channels) async {
+    _channelBttvEmotes.clear();
+    _globalBttvEmotes.clear();
+    if (_globalCache == null) {
+      final uri = Uri.parse("https://api.betterttv.net/3/cached/emotes/global");
+      _globalCache = getGlobalEmotes(uri);
+    }
+    for (final channel in channels) {
+      if (channel.provider != "twitch") {
+        return;
+      }
+      if (!_bttvChannelCache.containsKey(channel.channelId)) {
+        final uri = Uri.parse(
+            "https://api.betterttv.net/3/cached/users/twitch/${channel.channelId}");
+        _bttvChannelCache[channel.channelId] = getChannelEmotes(uri);
+      }
+      if (!_ffzCache.containsKey(channel.channelId)) {
+        final uri = Uri.parse(
+            "https://api.betterttv.net/3/cached/frankerfacez/users/twitch/${channel.channelId}");
+        _ffzCache[channel.channelId] = getFFZEmotes(uri);
+      }
+    }
+    _globalBttvEmotes.addAll((await _globalCache)!);
+    for (final channel in channels) {
+      if (channel.provider != "twitch") {
+        return;
+      }
+      _channelBttvEmotes.addAll((await _bttvChannelCache[channel.channelId])!);
+      _channelFFZEmotes.addAll((await _ffzCache[channel.channelId])!);
+    }
+
+    notifyListeners();
+  }
+
+  Map<String, dynamic> get bttvGlobalEmotes => _globalBttvEmotes;
+
+  Map<String, dynamic> get bttvChannelEmotes => _channelBttvEmotes;
+
+  Map<String, dynamic> get ffzEmotes => _channelFFZEmotes;
+}
+
+class ThirdPartyEmote {
+  final String id;
+  final String code;
+  final String source;
+
+  ThirdPartyEmote({required this.id, required this.code, required this.source});
+
+  static ThirdPartyEmote fromBttvJson(Map<String, dynamic> json) {
+    return ThirdPartyEmote(
+        id: json['id'],
+        code: json['code'],
+        source: 'https://cdn.betterttv.net/emote/${json['id']}/1x');
+  }
+
+  static ThirdPartyEmote fromFFZJson(Map<String, dynamic> json) {
+    return ThirdPartyEmote(
+        id: json['id'].toString(),
+        code: json['code'],
+        source: json['images']['1x']);
+  }
+}