Add basic suport for media in messages

Caused duplications if it went multiple loops without connecting and then connected

package-lock.json

@@ -14,6 +14,7 @@
         "polished": "^4.1.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "styled-components": "^5.3.3"
       }
@@ -7932,6 +7933,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13279,6 +13288,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -21878,6 +21911,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -25600,6 +25641,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3"
   },

src/components/app/app.jsx

@@ -1,14 +1,34 @@
 import { useEffect, useState, useRef } from 'react';
+import { useQuery } from '../../hooks';
 
 import ChatLog from '../chat-log';
 
 const maxsize = 25;
 
+const retryLoop = async (func) => {
+  try {
+    return await func();
+  } catch (error) {
+    retryLoop(func);
+  }
+};
+
 function App() {
   const [messages, setMessages] = useState(Array(maxsize).fill(null));
+  const query = useQuery();
+
   const socket = useRef(null);
 
   useEffect(() => {
+    const websocketAddress = query.get('ws') ?? 'ws://127.0.0.1:8080';
+    const attemptConnect = async () => {
+      const ws = new WebSocket(websocketAddress);
+      ws.addEventListener('message', onEvent);
+      ws.addEventListener('error', onDiscconect);
+      ws.addEventListener('close', onDiscconect);
+      socket.current = ws
+    };
+
     const onEvent = function (event) {
       setMessages((state) => {
         const newState = [...state];
@@ -17,20 +37,19 @@ function App() {
         return newState;
       });
     };
+    const onDiscconect = function (event) {
+      retryLoop(attemptConnect);
+    }
 
-    const attemptConnect = () => {
+    onDiscconect();
-      socket.current = new WebSocket('ws://127.0.0.1:13337');
-      const onError = () => setTimeout(attemptConnect, 1000);
-      socket.current.addEventListener('error', onError);
-      socket.current.addEventListener('message', onEvent);
-    };
-    attemptConnect();
 
     return () => {
       socket.current.removeEventListener('message', onEvent);
+      socket.current.removeEventListener('error', onDiscconect);
+      socket.current.removeEventListener('close', onDiscconect);
       socket.current.close();
     }
-  }, [socket, maxsize, setMessages]);
+  }, [socket, maxsize, setMessages, query]);
 
   return (
     <ChatLog log={messages} />

src/components/chat-log/chat-log.jsx

@@ -9,6 +9,8 @@ const elementMap = {
   null: Spacer,
 };
 
+const selfChats = ['self', 'birbspace'];
+
 function ChatLog({
   log,
 }) {
@@ -19,8 +21,9 @@ function ChatLog({
     }
     const bestRenderableInterface = event.type.find((interfaceName) => Object.keys(elementMap).includes(interfaceName));
     const renderer = elementMap[bestRenderableInterface];
-    return [event, renderer];
+    const deemphasize = !selfChats.includes(event.data.via ?? 'unknown');
-  }).filter(([event, renderer]) => !!renderer);
+    return [event, renderer, deemphasize];
+  }).filter(([event, renderer, deemphasize]) => !!renderer);
 
   useEffect(() => {
     listRef.current.scrollTop = -1;
@@ -28,8 +31,8 @@ function ChatLog({
 
   return (
     <List ref={listRef}>
-      {renderableEvents.map(([event, Element]) => (
+      {renderableEvents.map(([event, Element, deemphasize]) => (
-        <Element key={event.data.id} {...event.data} />
+        <Element key={event.data.id} deemphasize={deemphasize} {...event.data} />
       ))}
     </List>
   );

src/components/chat-log/chat-log.style.js

@@ -19,6 +19,9 @@ export const List = styled.div`
     width: 0px;
     background: transparent;
   }
+
+  font-family: 'Source Code Pro', monospace;
+  font-size: 24px;
 `;
 
 export const Spacer = styled.div`

src/components/chat-log/message/message.jsx

@@ -1,8 +1,9 @@
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { XTERM_COLORS } from '../../../index.style';
 
-import { Wrapper, Author, Body, Emote } from './message.style';
+import { Wrapper, Author, Body, Emote, Attachments } from './message.style';
 
 const stringHashcode = (str) => {
   var hash = 0, i, chr;
@@ -17,27 +18,49 @@ const stringHashcode = (str) => {
 
 const emoteRegex = /:([^:\s]+):/g;
 
+const elForType = {
+  image: (src) => <img src={src} />,
+  audio: (src) => <audio src={src} />,
+  video: (src) => <video src={src} />,
+};
+
 function Message({
-  user_id, user_name, user_type, user_color, text, emotes,
+  user_id, user_name, user_type, user_color, text, emotes, attachments,
   deemphasize,
 }) {
   const fallbackColor = XTERM_COLORS[(stringHashcode(user_id.toString()) % 144) + 88];
+  const displayFiles = useMemo(() => {
+    if (attachments) {
+      const filtered = attachments
+        .map(([type, url]) => [type.split('/')[0], url])
+        .filter(([type, url]) => Object.keys(elForType).includes(type));
+      return filtered;
+    }
+    return null;
+  }, [attachments]);
 
   return (
     <Wrapper type={user_type} color={user_color ?? fallbackColor} deemphasize={deemphasize}>
       <Author>
         [ {user_name} ]
       </Author>
-      <Body>
+      {!!text && (
-        {text.split(emoteRegex).map((textOrEmote, index) => {
+        <Body>
-          if (textOrEmote === "") return null;
+          {text.split(emoteRegex).map((textOrEmote, index) => {
-          if (index % 2 === 0) {
+            if (textOrEmote === "") return null;
-            return <span>{textOrEmote}</span>;
+            if (index % 2 === 0) {
-          } else {
+              return <span>{textOrEmote}</span>;
-            return <Emote src={emotes?.[textOrEmote]} />;
+            } else {
-          }
+              return <Emote src={emotes?.[textOrEmote]} title={textOrEmote} />;
-        }).filter((item) => item !== null)}
+            }
-      </Body>
+          }).filter((item) => item !== null)}
+        </Body>
+      )}
+      {!!displayFiles && (
+        <Attachments>
+          {displayFiles.map(([type, url]) => elForType[type](url))}
+        </Attachments>
+      )}
     </Wrapper>
   );
 }
@@ -47,17 +70,20 @@ Message.propTypes = {
   user_name: PropTypes.node.isRequired,
   user_type: PropTypes.string.isRequired,
   user_color: PropTypes.string,
-  text: PropTypes.node.isRequired,
+  text: PropTypes.node,
   emotes: PropTypes.shape({
     [PropTypes.string]: PropTypes.string,
   }),
   deemphasize: PropTypes.bool,
+  attachments: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
 };
 
 Message.defaultProps = {
+  text: '',
   user_color: undefined,
   emotes: {},
   deemphasize: false,
+  attachments: null,
 };
 
 export default Message;

src/components/chat-log/message/message.style.js

@@ -65,8 +65,6 @@ const setColors = ({ type, color, deemphasize }) => {
 
 export const Wrapper = styled.div`
   ${setColors}
-  font-family: 'Source Code Pro', monospace;
-  font-size: 18px;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -93,3 +91,19 @@ export const Wrapper = styled.div`
   animation: 160s fade cubic-bezier(.6,.04,.98,.34), 0.3s slide cubic-bezier(.08,.82,.17,1);
   animation-fill-mode: forwards;
 `;
+
+export const Attachments = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px 6px;
+  padding: 8px;
+
+  img {
+    flex: 1;
+    min-width: 33%;
+    max-width: 100%;
+    max-height: 300px;
+    object-fit: scale-down;
+  }
+`;

src/hooks/index.js

@@ -0,0 +1 @@
+export { default as useQuery } from './useQuery';

src/hooks/useQuery.js

@@ -0,0 +1,5 @@
+import { useLocation } from 'react-router-dom';
+
+export default function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
 import App from './components/app/app';
 
 import { GlobalStyle } from './index.style';
@@ -7,7 +8,9 @@ import { GlobalStyle } from './index.style';
 ReactDOM.render(
   <React.StrictMode>
     <GlobalStyle />
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );