Ability to disable Stickers and Display the Stickers As Text

src/renderer/components/chat/Chat.tsx

@@ -264,6 +264,18 @@ export const Chat = ({ chat }: { chat: {}[] }): React.ReactElement => {
     }
     shell.openExternal(`https://dlive.tv/${streamerAccount.displayname}`);
   };
+
+  const isSticker = (message: IChatObject) => {
+    if (!message.content) {
+      return false;
+    } else {
+      if (message.content.search(/^[:]emote/gi) > -1) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  };
 
   return (
     <PageMain>
@@ -313,8 +325,10 @@ export const Chat = ({ chat }: { chat: {}[] }): React.ReactElement => {
         </CurrentlyConnected>
         <ChatMessages>
           {reverse(
-            messages.map(message => (
-              <ChatMessage
+            messages.map(message => (   
+              !isSticker(message) ? 
+                <ChatMessage
+                config={config}
                 highlighted={
                   !!streamerAccount
                     ? (message.content || '')
@@ -325,7 +339,22 @@ export const Chat = ({ chat }: { chat: {}[] }): React.ReactElement => {
                 key={message.id}
                 message={message}
                 onAddStickerClick={openAddStickerPopup}
-              />
+              /> : 
+              config?.enableStickers ?
+              <ChatMessage
+              config={config}
+              highlighted={
+                !!streamerAccount
+                  ? (message.content || '')
+                      .toLowerCase()
+                      .includes(streamerAccount.displayname.toLowerCase())
+                  : false
+              }
+              key={message.id}
+              message={message}
+              onAddStickerClick={openAddStickerPopup}
+            /> : 
+            null         
             ))
           )}
           <ScrollTo id='scroll-to' />

src/renderer/components/chat/ChatInput.tsx

@@ -171,15 +171,7 @@ const ChatInputStickers = styled.div`
     height: 30px;
     width: 30px;
     color: ${(props: IChatInputSend): ThemeSet | string =>
-      props.disabled
-        ? props.disabledColor
-          ? props.disabledColor
-          : textInputDisabledTextColor
-          ? textInputDisabledTextColor
-          : '#ccc'
-        : props.color
-        ? props.color
-        : 'inherit'};
+      textInputDisabledTextColor ? textInputDisabledTextColor : 'inherit'};
     /* transition: all 0.15s ease-in; */
   }
 `;
@@ -270,7 +262,6 @@ export const ChatInput = ({
           onKeyDown={checkForEnter}
         />
         <ChatInputStickers
-          color={'#df1ebfcc'}
           colorHover={'#df1ebf'}
         >
           <FaGrinBeam onClick={sendStickerToStream} />

src/renderer/components/chat/ChatMessage.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { ThemeSet } from 'styled-theming';
-import { IChatColors, IChatObject, IGiftObject } from '@/renderer';
+import { IChatColors, IChatObject, IGiftObject, IConfig } from '@/renderer';
 import { getPhrase } from '@/renderer/helpers/lang';
 import { Icon } from '../generic-styled-components/Icon';
-import { FaEyeSlash, FaEye } from 'react-icons/fa';
-import { EmoteItem } from '../generic-styled-components/Emote';
+import { FaEyeSlash, FaEye, FaPlus } from 'react-icons/fa';
+import { EmoteItem, EmoteAsTextItem } from '../generic-styled-components/Emote';
 
 import {
   listItemColor,
@@ -19,7 +19,9 @@ interface IChatProps {
   padTop?: boolean;
   highlighted?: boolean;
   highlightedBackground?: string;
+  isSticker?: boolean;
   isEvent?: boolean;
+  config?: Partial<IConfig>;
 }
 
 const Chat = styled.div`
@@ -30,7 +32,7 @@ const Chat = styled.div`
   min-width: -webkit-fill-available;
   padding-top: ${(props: IChatProps): string =>
     props.padTop ? '30px' : 'unset'};
-  height: 55px;
+  height:  55px;
   background: ${(props: IChatProps): ThemeSet | string =>
     props.isEvent ? eventBackgroundColor : 'transparent'};
   color: ${(props: IChatProps): ThemeSet | string =>
@@ -122,6 +124,7 @@ const ChatUsername = styled.div`
  */
 export const ChatMessage = ({
   message,
+  config,
   colors = {
     owner: 'rgba(56,62,225,0.65)',
     bot: `rgba(104,52,215,0.65)`,
@@ -133,6 +136,7 @@ export const ChatMessage = ({
   onAddStickerClick = message => {}
 }: {
   message: IChatObject | IGiftObject;
+  config: Partial<IConfig>;
   colors?: IChatColors;
   highlighted: boolean;
   onAddStickerClick?: (e?: IChatObject | IGiftObject) => void;
@@ -242,6 +246,7 @@ export const ChatMessage = ({
       }
     }
   };
+
   const isGift = () => {
     if (!message.type) {
       return false;
@@ -305,7 +310,9 @@ export const ChatMessage = ({
     <Chat
       padTop={!message.deleted || deletedButShow}
       highlighted={highlighted}
-      isEvent={isEvent()}>
+      isSticker={isSticker()}
+      isEvent={isEvent()}
+      config={config}>
       {message.deleted && !deletedButShow ? null : (
         <ChatUsername>{message.sender.displayname}</ChatUsername>
       )}
@@ -322,14 +329,19 @@ export const ChatMessage = ({
       </ChatContent>
 
       <StickerContent hidden={!isSticker()}>
-        <EmoteItem
-          id={''}
-          dliveId={''}
-          url={stickerUrl()}
-          hideBorder={true}
-          height={50}
-          onClick={() => onAddStickerClick(message)}
-        />
+        {!config.enableStickersAsText ? 
+          <EmoteItem
+            id={''}
+            dliveId={''}
+            url={stickerUrl()}
+            hideBorder={true}
+            height={50}
+            onClick={() => onAddStickerClick(message)}
+          /> : 
+          <EmoteAsTextItem> 
+            <div>{message.content}</div>
+            <FaPlus onClick={() => onAddStickerClick(message)} />
+          </EmoteAsTextItem> }
       </StickerContent>
       <FollowContent hidden={!isFollow()}>
         {getPhrase('just_followed')}

src/renderer/components/chat/chatAddStickerPopup.tsx

@@ -21,7 +21,6 @@ import { sendMessage } from '@/renderer/helpers/dlive/sendMessage';
 import { FaTimes, FaHandMiddleFinger } from 'react-icons/fa';
 import { getPhrase } from '@/renderer/helpers/lang';
 import { Button } from '../generic-styled-components/button';
-import { AdvancedDiv, HoverStyle } from '../generic-styled-components/AdvancedDiv';
 import { Panel, PanelTitle, PanelSubtitle } from '../generic-styled-components/Panel'
 import { Emote } from '@/renderer/helpers/db/db';
 import { rxEmotes } from '@/renderer/helpers/rxEmote';