diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 156 | ||||
| -rw-r--r-- | src/Chat.js | 164 |
2 files changed, 168 insertions, 152 deletions
@@ -1,5 +1,4 @@ import React, { Component } from "react"; -import { render } from "react-dom"; import { Container, Header, @@ -7,30 +6,14 @@ import { Grid, Segment, List, - Input, Message, Dropdown } from "semantic-ui-react"; import "fomantic-ui-css/semantic.min.css"; -import { w3cwebsocket as W3CWebSocket } from "websocket"; -import Moment from "react-moment"; -import "moment/locale/es"; import "./App.css"; import StreamInfo from "./StreamInfo"; +import Chat from "./Chat"; -const client = new W3CWebSocket("wss://radio.bienvenidoainternet.org/daemon/"); -const chatColors = [ - "grey", - "red", - "pink", - "orange", - "yellow", - "green", - "teal", - "blue", - "purple", - "black" -]; class App extends Component { constructor(props) { super(props); @@ -38,18 +21,12 @@ class App extends Component { ready: false, response: {}, history: [], - chat: [], - chatMessage: "", infoUpdate: {}, currentSong: "", streamsAvailable: [], multipleSources: false, - selectedStream: 0, - chatUserCount: 0, - isChatOnline: false + selectedStream: 0 }; - this.handleOnChange = this.handleOnChange.bind(this); - this.sendMessage = this.sendMessage.bind(this); this.streamCount = 0; } @@ -67,25 +44,6 @@ class App extends Component { return prevCount === this.streamCount; } - addMessage(message, color, own = false, sender = "") { - var ts = new Date(); - this.setState( - prevState => ({ - chat: [ - ...prevState.chat, - { content: message, color: color, own, timestamp: ts, author: sender } - ], - chatMessage: "" - }), - () => { - let chatContainer = document.getElementById("chatContainer"); - if (chatContainer != null) { - chatContainer.scrollTop = chatContainer.scrollHeight; - } - } - ); - } - log(object) { if (process.env.NODE_ENV === "development") { console.log(object); @@ -111,70 +69,6 @@ class App extends Component { } } - sendMessage() { - const { chatMessage } = this.state; - client.send("MSG:1:" + chatMessage); - this.addMessage(chatMessage, "black", true); - this.setState({ chatMessage: "" }); - } - - componentWillMount() { - client.onopen = () => { - //console.info("[Chat] Connected to BaiTV Chat!"); - this.setState({ isChatOnline: true }); - }; - client.onmessage = message => { - //console.info("[Chat] Message: " + message.data); - this.processChatMessage(message.data); - }; - client.onerror = () => { - this.setState({ isChatOnline: false }); - this.addMessage("Ha ocurrido un error conectándose al chat.", "red"); - //console.error("[Chat] Ha ocurrido un error"); - }; - } - - translateColon(msg) { - return msg ? msg.replace(/%3A/g, ":") : ""; - } - - processChatMessage(line) { - console.log("<< " + line); - const args = line.split(":"); - switch (args[0]) { - case "MSG": - this.addMessage(this.translateColon(args[2]), chatColors[args[1]]); - break; - case "FMSG": - this.addMessage( - this.translateColon(args[3]), - chatColors[args[2]], - false, - args[1] - ); - break; - case "WELCOME": - this.addMessage("Conectado al chat, " + args[1], "green"); - break; - case "COUNT": - this.setState({ chatUserCount: args[1] }); - break; - case "FLOOD": - this.addMessage( - "Error: Estas enviando mensajes demasido rápido!", - "red" - ); - break; - default: - console.error("[Chat] Unsupported command " + args[0]); - break; - } - } - - handleOnChange(e, data) { - this.setState({ chatMessage: data.value }); - } - compareSongs() { const { currentSong, @@ -307,13 +201,9 @@ class App extends Component { ready, response, history, - chat, - chatMessage, streamsAvailable, multipleSources, - selectedStream, - chatUserCount, - isChatOnline + selectedStream } = this.state; const isOnline = response.source !== undefined; @@ -411,45 +301,7 @@ class App extends Component { </div> </Grid.Column> <Grid.Column width={10}> - <Header as="h3"> - Chat - <Header.Subheader>{`Usuarios en el chat: ${chatUserCount}`}</Header.Subheader> - </Header> - <div id="chatContainer"> - <List> - {chat.map((message, i) => ( - <List.Item key={i}> - [<Moment format="HH:mm:ss" date={message.timestamp} />]{" "} - <span className={`ui text ${message.color}`}> - {message.content} - </span> - </List.Item> - ))} - </List> - </div> - <Input - fluid - size="mini" - action={{ - content: "Enviar", - onClick: () => { - this.sendMessage(); - }, - disabled: !isChatOnline - }} - placeholder="" - value={chatMessage} - onChange={this.handleOnChange} - style={{ marginTop: "0.75em" }} - maxLength={128} - onKeyUp={e => { - let char = e.which || e.keyCode; - if (char === 13) { - this.sendMessage(); - } - }} - disabled={!isChatOnline} - /> + <Chat /> </Grid.Column> </Grid.Row> </Grid> diff --git a/src/Chat.js b/src/Chat.js new file mode 100644 index 0000000..175797a --- /dev/null +++ b/src/Chat.js @@ -0,0 +1,164 @@ +import React, { Component } from "react"; +import { w3cwebsocket as W3CWebSocket } from "websocket"; +import { Header, List, Input } from "semantic-ui-react"; +import Moment from "react-moment"; +import "moment/locale/es"; + +class Chat extends Component { + constructor(props) { + super(props); + this.state = { + chat: [], + chatMessage: "", + chatUserCount: 0, + isChatOnline: false + }; + this.client = {}; + this.chatColors = [ + "grey", + "red", + "pink", + "orange", + "yellow", + "green", + "teal", + "blue", + "purple", + "black" + ]; + this.handleOnChange = this.handleOnChange.bind(this); + this.sendMessage = this.sendMessage.bind(this); + } + + handleOnChange(e, data) { + this.setState({ chatMessage: data.value }); + } + + translateColon(msg) { + return msg ? msg.replace(/%3A/g, ":") : ""; + } + + addMessage(message, color, own = false, sender = "") { + var ts = new Date(); + this.setState( + prevState => ({ + chat: [ + ...prevState.chat, + { content: message, color: color, own, timestamp: ts, author: sender } + ], + chatMessage: "" + }), + () => { + let chatContainer = document.getElementById("chatContainer"); + if (chatContainer != null) { + chatContainer.scrollTop = chatContainer.scrollHeight; + } + } + ); + } + + componentWillMount() { + this.client = new W3CWebSocket( + "wss://radio.bienvenidoainternet.org/daemon/" + ); + this.client.onopen = () => { + this.setState({ isChatOnline: true }); + }; + this.client.onmessage = message => { + this.processChatMessage(message.data); + }; + this.client.onerror = () => { + this.setState({ isChatOnline: false }); + this.addMessage("Ha ocurrido un error conectándose al chat.", "red"); + }; + } + + sendMessage() { + const { chatMessage } = this.state; + this.client.send("MSG:1:" + chatMessage); + this.addMessage(chatMessage, "black", true); + this.setState({ chatMessage: "" }); + } + + processChatMessage(line) { + console.log("<< " + line); + const args = line.split(":"); + switch (args[0]) { + case "MSG": + this.addMessage(this.translateColon(args[2]), this.chatColors[args[1]]); + break; + case "FMSG": + this.addMessage( + this.translateColon(args[3]), + this.chatColors[args[2]], + false, + args[1] + ); + break; + case "WELCOME": + this.addMessage("Conectado al chat, " + args[1], "green"); + break; + case "COUNT": + this.setState({ chatUserCount: args[1] }); + break; + case "FLOOD": + this.addMessage( + "Error: Estas enviando mensajes demasido rápido!", + "red" + ); + break; + default: + console.error("[Chat] Unsupported command " + args[0]); + break; + } + } + + render() { + const { chat, chatMessage, chatUserCount, isChatOnline } = this.state; + return ( + <> + <Header as="h3"> + Chat + <Header.Subheader>{`Usuarios en el chat: ${chatUserCount}`}</Header.Subheader> + </Header> + <div id="chatContainer"> + <List> + {chat.map((message, i) => ( + <List.Item key={i}> + [<Moment format="HH:mm:ss" date={message.timestamp} />]{" "} + <span className={`ui text ${message.color}`}> + {message.content} + </span> + </List.Item> + ))} + </List> + </div> + <Input + fluid + size="mini" + action={{ + content: "Enviar", + onClick: () => { + this.sendMessage(); + }, + disabled: !isChatOnline + }} + placeholder="" + value={chatMessage} + onChange={this.handleOnChange} + style={{ marginTop: "0.75em" }} + maxLength={128} + onKeyUp={e => { + let char = e.which || e.keyCode; + if (char === 13) { + this.sendMessage(); + } + }} + disabled={!isChatOnline} + /> + </> + ); + } +} + +export default Chat; |