--wip-- [skip ci]

Author: luke-h1

bun.lock

@@ -205,17 +205,16 @@
     "metro-react-native-babel-preset": "^0.74.1",
     "only-allow": "^1.2.1",
     "prettier": "^3.3.3",
+    "react-native-oss-license": "^0.7.0",
     "react-native-url-polyfill": "^2.0.0",
     "svgo": "^3.3.2",
     "ts-jest": "^29.2.5",
     "ts-migrate": "^0.1.35",
-    "ts-node": "^10.9.2",
-    "ts-node-dev": "^2.0.0",
+    "tsx": "^4.19.3",
     "typescript": "5.3.3",
     "typescript-eslint": "^8.21.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
-    "react-native-oss-license": "^0.7.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
@@ -249,6 +248,11 @@
     }
   },
   "trustedDependencies": [
-    "core-js"
+    "@sentry/cli",
+    "core-js",
+    "core-js-pure",
+    "esbuild",
+    "nx",
+    "protobufjs"
   ]
 }

package.json

@@ -1,14 +1,25 @@
+import { createHitslop } from '@app/utils';
 import { forwardRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 
-export type ButtonProps = TouchableOpacityProps;
+export type ButtonProps = TouchableOpacityProps & {};
 
 export const Button = forwardRef<View, ButtonProps>(
-  ({ children, onPress, style, ...touchableProps }, ref) => (
+  (
+    {
+      children,
+      onPress,
+      style,
+      hitSlop = createHitslop(10),
+      ...touchableProps
+    },
+    ref,
+  ) => (
     <TouchableOpacity
       ref={ref}
       {...touchableProps}
+      hitSlop={hitSlop}
       style={style}
       onPress={onPress}
     >

src/components/Button/Button.tsx

@@ -2,8 +2,10 @@
 /* eslint-disable camelcase */
 import { useAuthContext } from '@app/context/AuthContext';
 import { useAppNavigation, useTmiClient } from '@app/hooks';
-import { useChatStore } from '@app/store/chatStore';
-import { replaceWithEmotesV2 } from '@app/utils/chat/replaceTextWithEmotesV2';
+import { ChatUser, useChatStore } from '@app/store/chatStore';
+import { generateRandomTwitchColor } from '@app/utils';
+import { findBadges } from '@app/utils/chat/findBadges';
+import { replaceTextWithEmotes } from '@app/utils/chat/replaceTextWithEmotes';
 import { logger } from '@app/utils/logger';
 import { generateNonce } from '@app/utils/string/generateNonce';
 import { memo, useEffect, useRef, useState, JSX } from 'react';
@@ -21,7 +23,7 @@ import Animated, {
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { ChatUserstate } from 'tmi.js';
 import { Typography } from '../Typography';
-import { ChatMessageV2, ChatMessageV2Props } from './ChatMessageV2';
+import { ChatMessage, ChatMessageProps } from './ChatMessage';
 
 export interface FormattedChatMessage {
   user: ChatUserstate;
@@ -37,6 +39,17 @@ interface ChatProps {
 export const Chat = memo(({ channelName, channelId }: ChatProps) => {
   const { authState, user } = useAuthContext();
   const navigation = useAppNavigation();
+  const client = useTmiClient({
+    options: {
+      clientId: process.env.TWITCH_CLIENT_ID as string,
+    },
+    channels: [channelName],
+    identity: {
+      username: user?.display_name ?? '',
+      password: authState?.token.accessToken,
+    },
+  });
+
   const {
     sevenTvChannelEmotes,
     twitchChannelEmotes,
@@ -46,11 +59,20 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
     loadChannelResources,
     twitchGlobalEmotes,
     clearChannelResources,
-    loading,
+    status,
+    ttvUsers,
+    setTTvUsers,
+    twitchChannelBadges,
+    twitchGlobalBadges,
+    ffzGlobalBadges,
   } = useChatStore();
 
-  const loadChat = async () => {
+  navigation.addListener('beforeRemove', () => {
+    void client.disconnect();
     clearChannelResources();
+  });
+
+  const loadChat = async () => {
     await loadChannelResources(channelId);
   };
 
@@ -61,19 +83,16 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const flashListRef = useRef<FlatList<ChatMessageV2Props>>(null);
-  const messagesRef = useRef<ChatMessageV2Props[]>([]);
+  const flashListRef = useRef<FlatList<ChatMessageProps>>(null);
+  const messagesRef = useRef<ChatMessageProps[]>([]);
   const { styles } = useStyles(stylesheet);
 
-  // Get screen width & height to detect orientation
   const { width, height } = useWindowDimensions();
   const isLandscape = width > height;
 
-  // Reanimated shared values
   const chatWidth = useSharedValue(isLandscape ? width * 0.4 : width);
   const chatHeight = useSharedValue(isLandscape ? height : 600);
 
-  // Animate layout changes
   useEffect(() => {
     chatWidth.value = withTiming(isLandscape ? width * 0.4 : width, {
       duration: 300,
@@ -89,92 +108,121 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
     height: chatHeight.value,
   }));
 
-  const client = useTmiClient({
-    options: {
-      clientId: process.env.TWITCH_CLIENT_ID as string,
-      // skipUpdatingEmotesets: true,
-    },
-    channels: [channelName],
-    identity: {
-      username: user?.display_name,
-      password: authState?.token.accessToken,
-    },
-    connection: {
-      reconnect: !__DEV__,
-    },
-  });
+  const [messages, setMessages] = useState<ChatMessageProps[]>([]);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
 
-  const [messages, setMessages] = useState<ChatMessageV2Props[]>([]);
-
-  const connectToChat = () => {
-    void client.connect();
-
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    client.on('message', (_channel, tags, text, _self) => {
-      const userstate = tags;
-
-      const message_id = userstate.id || '0';
-      const message_nonce = generateNonce();
-
-      const replacedMessage = replaceWithEmotesV2({
-        bttvChannelEmotes: [],
-        bttvGlobalEmotes: [],
-        ffzChannelEmotes,
-        ffzGlobalEmotes,
-        inputString: text.trim(),
-        sevenTvChannelEmotes,
-        sevenTvGlobalEmotes,
-        twitchChannelEmotes,
-        twitchGlobalEmotes,
-        userstate,
-      });
+  const connectToChat = async () => {
+    if (isConnecting) return;
 
-      logger.chat.info('replacedMessage', replacedMessage);
+    try {
+      setIsConnecting(true);
+      setConnectionError(null);
+      await client.connect();
 
-      const newMessage: ChatMessageV2Props = {
-        userstate,
-        message: replacedMessage,
-        channel: '',
-        message_id,
-        message_nonce,
-        sender: '',
-      };
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      client.on('message', (_channel, tags, text, _self) => {
+        const userstate = tags;
 
-      // Append the new message to the existing messages
-      messagesRef.current = [...messagesRef.current, newMessage];
-      setMessages([...messagesRef.current]);
+        const message_id = userstate.id || '0';
+        const message_nonce = generateNonce();
 
-      // Scroll to the end of the chat
-      flashListRef.current?.scrollToEnd({ animated: false });
-    });
+        const replacedMessage = replaceTextWithEmotes({
+          bttvChannelEmotes: [],
+          bttvGlobalEmotes: [],
+          ffzChannelEmotes,
+          ffzGlobalEmotes,
+          inputString: text.trimEnd(),
+          sevenTvChannelEmotes,
+          sevenTvGlobalEmotes,
+          twitchChannelEmotes,
+          twitchGlobalEmotes,
+          userstate,
+        });
 
-    client.on('clearchat', () => {
-      messagesRef.current = [];
-      setMessages([]);
-      flashListRef.current?.scrollToEnd({ animated: false });
-    });
+        const replacedBadges = findBadges(
+          userstate,
+          twitchChannelBadges,
+          twitchGlobalBadges,
+          ffzGlobalBadges,
+        );
 
-    navigation.addListener('blur', () => {
-      void client.disconnect();
-    });
+        const foundTtvUser = ttvUsers.find(
+          u => u.name === `@${userstate.username}`,
+        );
+
+        if (!foundTtvUser) {
+          const ttvUser: ChatUser = {
+            name: `@${userstate.username}`,
+            userId: userstate['user-id'] ?? '',
+            color:
+              userstate.color ?? generateRandomTwitchColor(userstate.username),
+            avatar: '',
+          };
+
+          setTTvUsers([ttvUser]);
+        }
+
+        const newMessage: ChatMessageProps = {
+          userstate,
+          message: replacedMessage,
+          badges: replacedBadges,
+          channel: '',
+          message_id,
+          message_nonce,
+          sender: '',
+        };
+
+        // Append the new message to the existing messages
+        messagesRef.current = [...messagesRef.current, newMessage];
+        setMessages([...messagesRef.current]);
+
+        // Scroll to the end of the chat
+        flashListRef.current?.scrollToEnd({ animated: false });
+      });
+
+      client.on('clearchat', () => {
+        messagesRef.current = [];
+        setMessages([]);
+        flashListRef.current?.scrollToEnd({ animated: false });
+      });
+
+      client.on('disconnected', reason => {
+        logger.chat.info('Disconnected from chat:', reason);
+      });
+    } catch (error) {
+      logger.chat.error('Failed to connect to chat:', error);
+      setConnectionError('Failed to connect to chat');
+    } finally {
+      setIsConnecting(false);
+    }
   };
 
   useEffect(() => {
-    connectToChat();
-    return () => {
-      void client.disconnect();
-    };
+    if (status === 'fulfilled') {
+      void connectToChat();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [status]);
 
-  if (loading) {
+  if (status === 'loading') {
     return (
       <View>
         <Typography>Loading emotes</Typography>
       </View>
     );
   }
 
+  if (status === 'error' || connectionError) {
+    return (
+      <View>
+        <Typography>
+          Error: {connectionError || 'Error getting emotes'}
+        </Typography>
+      </View>
+    );
+  }
+
   return (
     <SafeAreaView style={styles.safeArea}>
       <Typography style={styles.header}>Chat</Typography>
@@ -184,10 +232,11 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
           ref={flashListRef}
           keyExtractor={(_, index) => index.toString()}
           renderItem={({ item }) => (
-            <ChatMessageV2
+            <ChatMessage
               channel={item.channel}
               message={item.message}
               userstate={item.userstate}
+              badges={item.badges}
               message_id={item.message_id}
               message_nonce={item.message_nonce}
               sender={item.sender}
@@ -208,6 +257,7 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
     </SafeAreaView>
   );
 });
+
 Chat.displayName = 'Chat';
 
 const stylesheet = createStyleSheet(theme => ({
@@ -231,12 +281,12 @@ const stylesheet = createStyleSheet(theme => ({
   },
   messageContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap', // Ensure text wraps
+    flexWrap: 'wrap',
     // alignItems: 'flex-start',
-    width: '100%', // Ensure it fits within the screen
+    width: '100%',
     paddingVertical: theme.spacing.xs,
     paddingHorizontal: theme.spacing.sm,
-    borderRadius: theme.radii.sm, // Optional: Add rounded corners
+    borderRadius: theme.radii.sm,
   },
   pausedOverlay: {
     position: 'absolute',