From 1f794319a97d9c91f35fa5d54a50adb0cfbe665f Mon Sep 17 00:00:00 2001
From: DuckieTM <info@camwijs.nl>
Date: Sun, 17 Mar 2024 09:53:18 +0100
Subject: [PATCH] Cleanup chatbar this needs to be fixed first

---
 src/api/utils/RoomChatFormatter.ts            |   6 -
 .../views/messenger/FriendsMessengerView.tsx  |   8 --
 .../widgets/chat-input/ChatInputView.scss     |   1 -
 .../room/widgets/chat-input/ChatInputView.tsx | 111 ++----------------
 4 files changed, 12 insertions(+), 114 deletions(-)

diff --git a/src/api/utils/RoomChatFormatter.ts b/src/api/utils/RoomChatFormatter.ts
index a6714cf..a9b273a 100644
--- a/src/api/utils/RoomChatFormatter.ts
+++ b/src/api/utils/RoomChatFormatter.ts
@@ -155,12 +155,6 @@ export const RoomChatFormatter = (content: string) => {
         );
     }
 
-    if (content.includes("giphy.com/media")) {
-        content = `
-            <p style='background-image: url(${content}.gif);width: 70px;height: 70px;margin: 4px 10px 2px 10px; background-size: cover;border-radius: 2px;'></p>
-        `;
-    }
-
     const match = content.match(/@[a-zA-Z]+@/);
     if (match) {
         const colorTag = match[0].toString();
diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index 62c5768..819f315 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx
@@ -4,7 +4,6 @@ import { FaTimes } from 'react-icons/fa';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, ReportType, SendMessageComposer } from '../../../../api';
 import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useHelp, useMessenger } from '../../../../hooks';
-import { ChatInputStickersSelectorConsolaView } from '../../../room/widgets/chat-input/ChatInputStickersSelectorConsolaView';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
@@ -237,13 +236,6 @@ function startRecordingConsola(){
                                 </Column>
                                 <Flex gap={ 1 }>
                                     <input type="text" className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } style={{paddingRight: 35}}/>
-                                    <div id="submenuChatConsola">
-            <ChatInputStickersSelectorConsolaView />  
-            <div id="microphoneConsoeOn" onClick={e => startRecordingConsola()} style={{marginLeft: "5px", display: "inline-block"}} className="icon chatmicrophoneConsoe-on-icon" />
-            <div id="microphoneConsoeOff" onClick={e => stopRecordingConsola()} style={{marginLeft: "5px", display: "none"}} className="icon chatmicrophoneConsoe-off-icon" />
-            <div id="deleteAudioConsola" onClick={e => deleteRecordingConsola()} style={{marginLeft: "5px", display: "none"}} className="icon chatdeleteAudioConsola-icon" />
-            <div onClick={() => hideSubMenuConsola()} className="icon chatequis-icon" style={{display: "inline-block"}} />
-        </div>
                                     <div onClick={() => showSubMenuConsola()} className="masiconstoolgen icon chatmas-icon" id="chatmasinfogen" style={{ position: 'relative', width: '40px', height: '27px', marginTop: '4px', marginRight: '0px', marginLeft: '0px', float: 'inherit', right: '0px', }}/>
                                     <Button variant="success" onClick={ send }>
                                         { LocalizeText('widgets.chatinput.say') }
diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
index f0a868e..493a03d 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.scss
+++ b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -65,7 +65,6 @@
         display: flex;
         align-items: center;
         padding: 0 0.75em;
-        margin-left: -11px;
         margin-right: 2px;
         width: 34px;
     }
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 6f75da6..51ccf7e 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom';
 import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
 import { Text } from '../../../../common';
 import { useChatInputWidget, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
-import { ChatInputStickersSelectorView } from './ChatInputStickersSelectorView';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 import { ChatInputColorSelectorView } from './ChatInputColorSelectorView';
 
@@ -15,91 +14,13 @@ export const ChatInputView: FC<{}> = props =>
     const { chatStyleId = 0, updateChatStyleId = null, chatColour = '', updateChatColour = null } = useSessionInfo();
     const { selectedUsername = '', floodBlocked = false, floodBlockedSeconds = 0, setIsTyping = null, setIsIdle = null, sendChat = null } = useChatInputWidget();
     const { roomSession = null } = useRoom();
-    const inputRef = useRef<HTMLInputElement>();
 
+    const inputRef = useRef<HTMLInputElement>();
     const chatModeIdWhisper = useMemo(() => LocalizeText('widgets.chatinput.mode.whisper'), []);
     const chatModeIdShout = useMemo(() => LocalizeText('widgets.chatinput.mode.shout'), []);
     const chatModeIdSpeak = useMemo(() => LocalizeText('widgets.chatinput.mode.speak'), []);
     const maxChatLength = useMemo(() => GetConfiguration<number>('chat.input.maxlength', 100), []);
 
-    var mediaRecorder;
-    var audioChunks = [];
-    var microphoneOn = document.getElementById("microphoneOn");
-    var microphoneOff = document.getElementById("microphoneOff");
-    var deleteAudio = document.getElementById("deleteAudio");
-    
-    var deletedAudio = false;
-	
-    function startRecording(authenticationKey: string) {
-        if (!GetSessionDataManager().userName) {
-            return;
-        }
-	if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        microphoneOn.style.display = "none";
-        microphoneOff.style.display = "inline-block";
-        deleteAudio.style.display = "inline-block";
-
-        navigator.mediaDevices.getUserMedia({ audio: true })
-            .then(stream => {
-                mediaRecorder = new MediaRecorder(stream);
-                mediaRecorder.start();
-
-                mediaRecorder.addEventListener("dataavailable", event => {
-                    audioChunks.push(event.data);
-                });
-
-                mediaRecorder.addEventListener("stop", () => {
-                    microphoneOn.style.display = "inline-block";
-                    microphoneOff.style.display = "none";
-                    deleteAudio.style.display = "none";
-
-                    if (!deletedAudio) {
-                        const audioBlob = new Blob(audioChunks);
-                        var fd = new FormData();
-                        fd.append("audio", audioBlob);
-                        fetch(GetConfiguration<string>('api.sound.url'), { method: "POST", body: fd })
-                            .then((response) => response.text())
-                            .then((resp) => {
-                                roomSession.sendChatMessage(GetConfiguration<string>('api.sound.upload') + GetSessionDataManager().userName + resp + ".mp3", 0);
-                            })
-                    }
-                    deletedAudio = false;
-                    audioChunks = [];
-                });
-            })
-            .catch(error => {
-                console.error('Error accessing microphone:', error);
-            });
-    } else {
-        console.error('getUserMedia is not supported');}
-	
-	}
-
-    function stopRecording(){
-        microphoneOn.style.display = "inline-block";
-        microphoneOff.style.display = "none";
-        deleteAudio.style.display = "none";
-        mediaRecorder.stop();
-    }
-
-    function deleteRecording(){
-        microphoneOn.style.display = "inline-block";
-        microphoneOff.style.display = "none";
-        deleteAudio.style.display = "none";
-        deletedAudio = true;
-        mediaRecorder.stop();
-    }
-
-    function showSubMenu(){
-        if(document.getElementById("submenuChat").style.display == "block") document.getElementById("submenuChat").style.display = "none";
-        else document.getElementById("submenuChat").style.display = "block"; 
-    }
-
-    function hideSubMenu(){
-        document.getElementById("submenuChat").style.display = "none";
-    }
-
-
     const anotherInputHasFocus = useCallback(() =>
     {
         const activeElement = document.activeElement;
@@ -316,23 +237,15 @@ export const ChatInputView: FC<{}> = props =>
 
     return (
         createPortal(
-            <div className="nitro-chat-input-container">
-				<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
+            <div className="nitro-chat-input-container">				
 			    <div className="input-sizer align-items-center">
-					<div onClick={() => showSubMenu()} className="iconcommandsright icon chatmas-icon" />
-					<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-						{ !floodBlocked &&
-							<input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
-						{ floodBlocked &&
-							<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
-							<div id="submenuChat">
-					<ChatInputStickersSelectorView /> 
-					<div id="microphoneOn" onClick={e => startRecording()} style={{marginLeft: "5px", display: "inline-block"}} className="icon chatmicrophone-on-icon" />
-					<div id="microphoneOff" onClick={e => stopRecording()} style={{marginLeft: "5px", display: "none"}} className="icon chatmicrophone-off-icon" />
-					<div id="deleteAudio" onClick={e => deleteRecording()} style={{marginLeft: "5px", display: "none"}} className="icon chatdeleteaudio-icon" />
-					<div onClick={() => hideSubMenu()} className="icon chatequis-icon" style={{display: "inline-block"}} />
-				</div>
-			</div>
-		</div>,document.getElementById('toolbar-chat-input-container'))
-	);
-}
+                    { !floodBlocked &&
+                    <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
+                    { floodBlocked &&
+                    <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
+                </div>
+				<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
+                <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
+            </div>, document.getElementById('toolbar-chat-input-container'))
+    );
+}
\ No newline at end of file