colored names

web/src/components/LogLine.tsx

@@ -4,6 +4,7 @@ import { useThirdPartyEmotes } from "../hooks/useThirdPartyEmotes";
 import { store } from "../store";
 import { LogMessage } from "../types/log";
 import { Message } from "./Message";
+import { User } from "./User";
 
 const LogLineContainer = styled.li`
 	display: flex;
@@ -14,7 +15,7 @@ const LogLineContainer = styled.li`
         user-select: none;
     }
 
-    .name {
+    .user {
         margin-left: 5px;
         user-select: none;
     }
@@ -32,8 +33,8 @@ export function LogLine({ message }: { message: LogMessage }) {
     }
 
     return <LogLineContainer>
-        <span className="timestamp">{message.timestamp.toLocaleString()}</span>
+        <span className="timestamp">{message.timestamp.toISOString()}</span>
-        {state.settings.showName.value && <span className="name">{message.displayName}:</span>}
+        {state.settings.showName.value && <User displayName={message.displayName} color={message.tags["color"]} />}
         <Message message={message} thirdPartyEmotes={[]} />
     </LogLineContainer>
 }
@@ -43,8 +44,8 @@ export function LogLineWithEmotes({ message }: { message: LogMessage }) {
     const { state } = useContext(store);
 
     return <LogLineContainer>
-        <span className="timestamp">{message.timestamp.toLocaleString()}</span>
+        <span className="timestamp">{message.timestamp.toISOString()}</span>
-        {state.settings.showName.value && <span className="name">{message.displayName}:</span>}
+        {state.settings.showName.value && <User displayName={message.displayName} color={message.tags["color"]} />}
         <Message message={message} thirdPartyEmotes={thirdPartyEmotes} />
     </LogLineContainer>
 }

web/src/components/Message.tsx

@@ -1,12 +1,17 @@
-import React from "react";
+import React, { useContext } from "react";
 import Linkify from "react-linkify";
 import styled from "styled-components";
+import { store } from "../store";
 import { LogMessage } from "../types/log";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 
 const MessageContainer = styled.div`
 	display: inline-flex;
 	align-items: center;
+
+	a {
+		margin: 0 2px;
+	}
 `;
 
 const Emote = styled.img`
@@ -16,7 +21,7 @@ const Emote = styled.img`
 `;
 
 export function Message({ message, thirdPartyEmotes }: { message: LogMessage, thirdPartyEmotes: Array<ThirdPartyEmote> }): JSX.Element {
-
+	const { state } = useContext(store);
 	const renderMessage = [];
 
 	let replaced;
@@ -26,16 +31,19 @@ export function Message({ message, thirdPartyEmotes }: { message: LogMessage, th
 		const c = message.text[x];
 
 		replaced = false;
-		for (const emote of message.emotes) {
+
-			if (emote.startIndex === x) {
+		if (state.settings.showEmotes.value) {
-				replaced = true;
+			for (const emote of message.emotes) {
-				renderMessage.push(<Emote
+				if (emote.startIndex === x) {
-					key={x}
+					replaced = true;
-					alt={emote.code}
+					renderMessage.push(<Emote
-					src={`https://static-cdn.jtvnw.net/emoticons/v1/${emote.id}/1.0`}
+						key={x}
-				/>);
+						alt={emote.code}
-				x += emote.endIndex - emote.startIndex - 1;
+						src={`https://static-cdn.jtvnw.net/emoticons/v1/${emote.id}/1.0`}
-				break;
+					/>);
+					x += emote.endIndex - emote.startIndex - 1;
+					break;
+				}
 			}
 		}
 

web/src/components/User.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styled from "styled-components";
+
+
+
+const UserContainer = styled.div.attrs(props => ({
+	style: {
+		color: props.color,
+	}
+}))`
+	display: inline-block;
+	margin-left: 5px;
+	font-weight: bold;
+`;
+
+export function User({ displayName, color }: { displayName: string, color: string }): JSX.Element {
+	
+	const renderColor = color !== "" ? color : "grey";
+
+	return <UserContainer color={renderColor} className="user">
+		{displayName}:
+	</UserContainer>;
+}

web/src/store.tsx

@@ -31,11 +31,11 @@ const defaultContext = {
         settings: {
             showEmotes: {
                 displayName: "Show Emotes",
-                value: true,
+                value: false,
             },
             showName: {
                 displayName: "Show Name",
-                value: false,
+                value: true,
             }
         },
         currentChannel: url.searchParams.get("channel"),
@@ -52,7 +52,7 @@ const { Provider } = store;
 
 const StateProvider = ({ children }: { children: JSX.Element }): JSX.Element => {
 
-    const [settings, setSettingsStorage] = useLocalStorage("settings", defaultContext.state.settings);
+    const [settings, setSettingsStorage] = useLocalStorage("justlog:settings", defaultContext.state.settings);
     const [state, setState] = useState({ ...defaultContext.state, settings });
 
     const setSettings = (newSettings: Settings) => {