From d647b3e6628d76dbe207ce5991335c30787a8a6d Mon Sep 17 00:00:00 2001 From: Renard Date: Sun, 8 Mar 2020 18:04:24 -0300 Subject: First commit --- src/App.css | 26 +++ src/App.js | 467 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/App.test.js | 9 + src/StreamInfo.js | 62 +++++++ src/index.css | 13 ++ src/index.js | 12 ++ src/serviceWorker.js | 141 ++++++++++++++++ src/setupTests.js | 5 + 8 files changed, 735 insertions(+) create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/App.test.js create mode 100644 src/StreamInfo.js create mode 100644 src/index.css create mode 100644 src/index.js create mode 100644 src/serviceWorker.js create mode 100644 src/setupTests.js (limited to 'src') diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..1b1cca9 --- /dev/null +++ b/src/App.css @@ -0,0 +1,26 @@ +body { + background-color: #373b41; +} + +.dropdownLabel { + display: block; + margin: 0 0 0.28571429rem 0; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: 700; + text-transform: none; +} + +#historyContainer { + min-height: 6em; + max-height: 6em; + overflow-y: scroll; + overflow-wrap: break-word; +} + +#chatContainer { + min-height: 25em; + max-height: 25em; + overflow-y: scroll; + overflow-wrap: break-word; +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..3260705 --- /dev/null +++ b/src/App.js @@ -0,0 +1,467 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import { + Container, + Header, + Icon, + 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"; + +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); + this.state = { + ready: false, + response: {}, + history: [], + chat: [], + chatMessage: "", + infoUpdate: {}, + currentSong: "", + streamsAvailable: [], + multipleSources: false, + selectedStream: 0, + chatUserCount: 0, + isChatOnline: false + }; + this.handleOnChange = this.handleOnChange.bind(this); + this.sendMessage = this.sendMessage.bind(this); + this.streamCount = 0; + } + + checkStream(result) { + const prevCount = this.streamCount; + if (result.source !== undefined) { + if (Array.isArray(result)) { + this.streamCount = result.length; + } else { + this.streamCount = 1; + } + } else { + this.streamCount = 0; + } + 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); + } + } + + refreshPlayer() { + let audio = document.getElementById("player"); + if (audio !== null) { + audio.pause(); + audio.load(); + audio.play(); + } + } + + addToHistory(song) { + this.setState(prevState => ({ + history: [...prevState.history, song] + })); + let historyContainer = document.getElementById("historyContainer"); + if (historyContainer != null) { + historyContainer.scrollTop = historyContainer.scrollHeight; + } + } + + 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, + multipleSources, + selectedStream, + response + } = this.state; + const currentStream = multipleSources + ? response.source[selectedStream] + : response.source; + + if (`${currentStream.artist} - ${currentStream.title}` !== currentSong) { + this.addToHistory(currentSong); + this.setState({ + currentSong: `${currentStream.artist} - ${currentStream.title}` + }); + } + } + + updateInfo() { + const { + currentSong, + multipleSources, + selectedStream, + response + } = this.state; + const currentStream = multipleSources + ? response.source[selectedStream] + : response.source; + if (currentSong === "") { + this.setState({ + currentSong: `${currentStream.artist} - ${currentStream.title}` + }); + } + + fetch("https://bienvenidoainternet.org:8443/status-json.xsl") + .then(response => response.json()) + .then(result => { + this.log(result); + this.checkStream(result); + const source = result.icestats.source; + if (source !== undefined) { + let multipleStreams = Array.isArray(source); + if (!multipleStreams && Array.isArray(this.state.response.source)) { + this.setState( + { + response: result.icestats, + streamsAvailable: [], + multipleSources: multipleStreams, + selectedStream: 0 + }, + () => this.compareSongs() + ); + this.refreshPlayer(); + } else { + let streams = []; + if (Array.isArray(source)) { + source.map((stream, index) => + streams.push({ + key: index, + value: index, + text: `[${stream.listeners}] ${stream.server_name} - ${stream.server_description}` + }) + ); + } + this.setState( + { + response: result.icestats, + streamsAvailable: streams, + multipleSources: multipleStreams + }, + () => this.compareSongs() + ); + } + } else { + // No hay streams disponibles + this.setState( + { + response: result.icestats, + multipleSources: true, + streamsAvailable: {}, + selectedStream: 0 + }, + () => this.compareSongs() + ); + } + }); + } + + componentDidMount() { + fetch("https://bienvenidoainternet.org:8443/status-json.xsl") + .then(response => response.json()) + .then(result => + this.setState( + { + response: result.icestats, + infoUpdate: setInterval(() => this.updateInfo(), 10000) + }, + () => { + const { source } = this.state.response; + if (source !== undefined && Array.isArray(source)) { + let streams = []; + source.map((stream, index) => + streams.push({ + key: index, + value: index, + text: `[${stream.listeners}] ${stream.server_name} - ${stream.server_description}` + }) + ); + console.log(streams); + this.setState({ + multipleSources: true, + streamsAvailable: streams, + ready: true + }); + } else if (source !== undefined) { + this.setState({ + multipleSources: false, + selectedStream: 0, + ready: true + }); + } + } + ) + ); + } + + render() { + const { + ready, + response, + history, + chat, + chatMessage, + streamsAvailable, + multipleSources, + selectedStream, + chatUserCount, + isChatOnline + } = this.state; + const isOnline = response.source !== undefined; + + if (!ready) { + return "Loading"; + } + + const currentStream = multipleSources + ? response.source[selectedStream] + : response.source; + + const currentStreamURL = currentStream.listenurl.replace( + "http://bienvenidoainternet.org:8000", + "https://bienvenidoainternet.org:8443" + ); + + return ( + + + + + +
+ + + BaiRadio + + {ready ? response.server_id : "Sin información"} + + +
+
+ + + + +
+ + + + {isOnline ? ( + <> + {multipleSources && ( + <> + + + this.setState({ selectedStream: d.value }, () => { + let audio = document.getElementById("player"); + if (audio !== null) { + audio.pause(); + audio.load(); + audio.play(); + } + }) + } + /> + + )} + +
Información de la transmisión
+ + + ) : ( + + Oops + Actualmente no hay nadie transmitiendo en Bai Radio + + )} + +
Historial de canciones
+
+ + {history.map((song, i) => ( + + + {song} + + ))} + +
+
+ +
+ Chat + {`Usuarios en el chat: ${chatUserCount}`} +
+
+ + {chat.map((message, i) => ( + + []{" "} + + {message.content} + + + ))} + +
+ { + 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} + /> +
+
+
+
+ + + Bienvenido a Internet 2010 - 2020 + + +
+ ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..4db7ebc --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/StreamInfo.js b/src/StreamInfo.js new file mode 100644 index 0000000..fd88150 --- /dev/null +++ b/src/StreamInfo.js @@ -0,0 +1,62 @@ +import React from "react"; +import { List } from "semantic-ui-react"; +import Moment from "react-moment"; +import "moment/locale/es"; + +const StreamInfo = props => { + const { stream } = props; + return ( + <> + + + + + {`Usuarios escuchando: ${stream.listeners}`} + + + + + + + Transmitiendo{" "} + + + + + + + + {stream.server_name} + {stream.server_description} + + + + + + + {stream.audio_channels === 2 ? "Stereo" : "Mono"} + + {`Bitrate: ${stream["ice-bitrate"]} kbps, ${stream["ice-samplerate"]} Hz`} + + + + + + Canción actual + {`${stream.artist} - ${stream.title}`} + + + + + Descargar archivo m3u + + + ); +}; + +export default StreamInfo; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..87d1be5 --- /dev/null +++ b/src/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render(, document.getElementById('root')); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 0000000..c4838eb --- /dev/null +++ b/src/serviceWorker.js @@ -0,0 +1,141 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' } + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); + } +} diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..74b1a27 --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; -- cgit v1.2.1-18-gbd029