mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
Cleanup chatbar this needs to be fixed first
This commit is contained in:
DuckieTM
parent
d17fea128d
commit
1f794319a9
@ -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();
|
||||
|
||||
@ -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') }
|
||||
|
||||
@ -65,7 +65,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75em;
|
||||
margin-left: -11px;
|
||||
margin-right: 2px;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
@ -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'))
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user