janis/aes67-daemon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #43 from bondagit/vite

Browse Source 
feat: use vite as bundler
This commit is contained in:
Andrea Bondavalli 2021-05-29 11:22:55 +02:00 committed by GitHub
commit 73454073cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 172 additions and 1798 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webui/.gitignore vendored
View File

@ -17,3 +17,8 @@ yarn-debug.log*
yarn-error.log*
package-lock.json
node_modules
.DS_Store
dist
dist-ssr
*.local

1623
webui/README.md
View File

File diff suppressed because it is too large Load Diff

12
webui/public/index.html → webui/index.html
View File

@ -3,20 +3,12 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="shortcut icon" href="/src/favicon.ico">
<title>AES67 Daemon WebUI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

18
webui/package.json
View File

@ -2,20 +2,24 @@
"name": "aes67-daemon-webui",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=12.0.0"
},
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-modal": "^3.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toastify": "^7.0.4"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
"devDependencies": {
"@vitejs/plugin-react-refresh": "^1.3.3",
"vite": "^2.3.4"
},
"browserslist": {
"production": [

8
webui/src/index.js → webui/src/App.jsx
View File

@ -1,5 +1,5 @@
//
// index.js
// App.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -26,6 +26,8 @@ import 'react-toastify/dist/ReactToastify.css';
import ConfigTabs from './ConfigTabs';
import './styles.css';
toast.configure()
function App() {
@ -45,6 +47,4 @@ function App() {
);
}
const container = document.createElement('div');
document.body.appendChild(container);
render( <App/>, container);
export default App

36
webui/src/Config.js → webui/src/Config.jsx
View File

@ -1,5 +1,5 @@
//
// Config.js
// Config.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -19,13 +19,11 @@
//
import React, {Component} from 'react';
import { toast } from 'react-toastify';
import { toast } from 'react-toastify';
import RestAPI from './Services';
import Loader from './Loader';
require('./styles.css');
class Config extends Component {
constructor(props) {
super(props);
@ -107,7 +105,7 @@ class Config extends Component {
}))
.catch(err => this.setState({isConfigLoading: false}));
}
inputIsValid() {
return !this.state.playoutDelayErr &&
!this.state.maxTicFrameSizeErr &&
@ -124,22 +122,22 @@ class Config extends Component {
onSubmit(event) {
event.preventDefault();
RestAPI.setConfig(
this.state.logSeverity,
this.state.syslogProto,
this.state.syslogServer,
this.state.rtpMcastBase,
this.state.rtpPort,
this.state.rtspPort,
this.state.playoutDelay,
this.state.ticFrameSizeAt1fs,
this.state.sampleRate,
this.state.maxTicFrameSize,
this.state.logSeverity,
this.state.syslogProto,
this.state.syslogServer,
this.state.rtpMcastBase,
this.state.rtpPort,
this.state.rtspPort,
this.state.playoutDelay,
this.state.ticFrameSizeAt1fs,
this.state.sampleRate,
this.state.maxTicFrameSize,
this.state.sapMcastAddr,
this.state.sapInterval,
this.state.mdnsEnabled)
.then(response => toast.success('Config updated, daemon restart ...'));
}
render() {
return (
<div className='config'>
@ -175,7 +173,7 @@ class Config extends Component {
</tr>
<tr>
<th align="left"> <label>Initial Sample rate</label> </th>
<th align="left">
<th align="left">
<select value={this.state.sampleRate} onChange={e => this.setState({sampleRate: e.target.value})}>
<option value="44100">44.1 kHz</option>
<option value="48000">48 kHz</option>
@ -237,7 +235,7 @@ class Config extends Component {
<table><tbody>
<tr>
<th align="left"> <label>Syslog protocol</label> </th>
<th align="left">
<th align="left">
<select value={this.state.syslogProto} onChange={e => this.setState({syslogProto: e.target.value})}>
<option value="none">none</option>
<option value="">local</option>
@ -251,7 +249,7 @@ class Config extends Component {
</tr>
<tr>
<th align="left"> <label>Log severity</label> </th>
<th align="left">
<th align="left">
<select value={this.state.logSeverity} onChange={e => this.setState({logSeverity: e.target.value})}>
<option value="1">debug</option>
<option value="2">info</option>

6
webui/src/ConfigTabs.js → webui/src/ConfigTabs.jsx
View File

@ -1,5 +1,5 @@
//
// ConfigTabs.js
// ConfigTabs.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -28,15 +28,13 @@ import Sources from './Sources';
import Sinks from './Sinks';
import RemoteSources from './RemoteSources';
require('./styles.css');
class ConfigTabs extends Component {
static propTypes = {
currentTab: PropTypes.string.isRequired
};
render() {
return (
return (
<div>
<h1>AES67 Daemon</h1>
<Tabs currentTab={this.props.currentTab}>

2
webui/src/Loader.js → webui/src/Loader.jsx
View File

@ -1,5 +1,5 @@
//
// Loader.js
// Loader.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//

22
webui/src/PTP.js → webui/src/PTP.jsx
View File

@ -1,5 +1,5 @@
//
// PTP.js
// PTP.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import {toast} from 'react-toastify';
import RestAPI from './Services';
import Loader from './Loader';
require('./styles.css');
class PTPConfig extends Component {
static propTypes = {
@ -141,9 +139,9 @@ class PTP extends Component {
.then(response => response.json())
.then(
data => this.setState({
status: data.status,
gmid: data.gmid,
jitter: parseInt(data.jitter, 10),
status: data.status,
gmid: data.gmid,
jitter: parseInt(data.jitter, 10),
isStatusLoading: false
}))
.catch(err => this.setState({isStatusLoading: false}));
@ -155,19 +153,19 @@ class PTP extends Component {
.then(response => response.json())
.then(
data => this.setState({
domain: parseInt(data.domain, 10),
dscp: parseInt(data.dscp, 10),
domain: parseInt(data.domain, 10),
dscp: parseInt(data.dscp, 10),
isConfigLoading: false
}))
.catch(err => this.setState({isConfigLoading: false}));
}
componentDidMount() {
this.fetchStatus();
this.fetchConfig();
this.interval = setInterval(() => { this.fetchStatus() }, 10000)
}
componentWillUnmount() {
clearInterval(this.interval);
}
@ -175,10 +173,10 @@ class PTP extends Component {
render() {
return (
<div className='ptp'>
{ this.state.isConfigLoading ? <Loader/> :
{ this.state.isConfigLoading ? <Loader/> :
<PTPConfig domain={this.state.domain} dscp={this.state.dscp}/> }
<br/>
{ this.state.isStatusLoading ? <Loader/> :
{ this.state.isStatusLoading ? <Loader/> :
<PTPStatus status={this.state.status} gmid={this.state.gmid} jitter={this.state.jitter}/> }
</div>
)

26
webui/src/RemoteSources.js → webui/src/RemoteSources.jsx
View File

@ -1,5 +1,5 @@
//
// RemoteSource.js
// RemoteSource.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import RestAPI from './Services';
import Loader from './Loader';
import SourceInfo from './SourceInfo';
require('./styles.css');
class RemoteSourceEntry extends Component {
static propTypes = {
source: PropTypes.string.isRequired,
@ -42,9 +40,9 @@ class RemoteSourceEntry extends Component {
constructor(props) {
super(props);
this.state = {
this.state = {
rtp_address: 'n/a',
port: 'n/a'
port: 'n/a'
};
}
@ -91,7 +89,7 @@ class RemoteSourceList extends Component {
return (
<div id='remote-sources-table'>
<table className="table-stream"><tbody>
{this.props.sources.length > 0 ?
{this.props.sources.length > 0 ?
<tr className='tr-stream'>
<th>Source</th>
<th>Address</th>
@ -118,11 +116,11 @@ class RemoteSourceList extends Component {
class RemoteSources extends Component {
constructor(props) {
super(props);
this.state = {
sources: [],
isLoading: false,
infoIsOpen: false,
infoTitle: ''
this.state = {
sources: [],
isLoading: false,
infoIsOpen: false,
infoTitle: ''
};
this.onInfoClick = this.onInfoClick.bind(this);
this.onReloadClick = this.onReloadClick.bind(this);
@ -152,7 +150,7 @@ class RemoteSources extends Component {
this.setState({infoIsOpen: false});
this.fetchRemoteSources();
}
onInfoClick(id) {
const source = this.state.sources.find(s => s.id === id);
this.openInfo("Announced Source Info", source, true);
@ -179,14 +177,14 @@ class RemoteSources extends Component {
));
return (
<div id='sources'>
{ this.state.isLoading ? <Loader/>
{ this.state.isLoading ? <Loader/>
: <RemoteSourceList
onReloadClick={this.onReloadClick}
sources={sources} /> }
{ this.state.infoIsOpen ?
<SourceInfo infoIsOpen={this.state.infoIsOpen}
closeInfo={this.closeInfo}
infoTitle={this.state.infoTitle}
infoTitle={this.state.infoTitle}
id={this.state.source.id}
source={this.state.source.source}
name={this.state.source.name}

22
webui/src/SinkEdit.js → webui/src/SinkEdit.jsx
View File

@ -1,5 +1,5 @@
//
// SinkEdit.js
// SinkEdit.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const editCustomStyles = {
content : {
top: '50%',
@ -102,9 +100,9 @@ class SinkEdit extends Component {
this.state.source ? this.state.source : '',
this.state.sdp ? this.state.sdp : '',
this.state.ignoreRefclkGmid,
this.state.map,
this.state.map,
this.props.isEdit)
.then(function(response) {
.then(function(response) {
this.props.applyEdit();
toast.success(message);
}.bind(this));
@ -148,8 +146,8 @@ class SinkEdit extends Component {
}
inputIsValid() {
return !this.state.nameErr &&
!this.state.sourceErr &&
return !this.state.nameErr &&
!this.state.sourceErr &&
(this.state.useSdp || this.state.source) &&
(!this.state.useSdp || this.state.sdp);
}
@ -157,7 +155,7 @@ class SinkEdit extends Component {
render() {
return (
<div id='sink-edit'>
<Modal ariaHideApp={false}
<Modal ariaHideApp={false}
isOpen={this.props.editIsOpen}
onRequestClose={this.props.closeEdit}
style={editCustomStyles}
@ -185,7 +183,7 @@ class SinkEdit extends Component {
<th align="left">
<select value={this.state.sdp} onChange={this.onChangeRemoteSourceSDP} disabled={this.state.useSdp ? undefined : true}>
<option key='' value=''> -- select a remote source SDP -- </option>
{
{
this.state.sources.map((v) => <option key={v.id} value={v.sdp}>{v.source + ' from ' + v.address + ' - ' + v.name}</option>)
}
</select>
@ -197,7 +195,7 @@ class SinkEdit extends Component {
</tr>
<tr>
<th align="left"> <label>Delay (samples) </label> </th>
<th align="left">
<th align="left">
<select value={this.state.delay} onChange={e => this.setState({delay: e.target.value})}>
<option value="192">192 - 4ms@48KHz</option>
<option value="384">384 - 8ms@48KHz</option>
@ -219,8 +217,8 @@ class SinkEdit extends Component {
<th align="left">Audio Channels map</th>
<th align="left">
<select value={this.state.map[0]} onChange={this.onChangeChannelsMap}>
{ this.state.channels > 1 ?
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Input ' + parseInt(v + 1, 10) + ' -> ALSA Input ' + parseInt(v + this.state.channels, 10)}</option>) :
{ this.state.channels > 1 ?
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Input ' + parseInt(v + 1, 10) + ' -> ALSA Input ' + parseInt(v + this.state.channels, 10)}</option>) :
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Input ' + parseInt(v + 1, 10)}</option>)
}
</select>

8
webui/src/SinkRemove.js → webui/src/SinkRemove.jsx
View File

@ -1,5 +1,5 @@
//
// SinkRemove.js
// SinkRemove.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const removeCustomStyles = {
content : {
top: '50%',
@ -58,7 +56,7 @@ class SinkRemove extends Component {
}
removeSink(message) {
RestAPI.removeSink(this.props.sink.id).then(function(response) {
RestAPI.removeSink(this.props.sink.id).then(function(response) {
toast.success(message);
this.props.applyEdit();
}.bind(this));
@ -75,7 +73,7 @@ class SinkRemove extends Component {
render() {
return (
<div id='sink-remove'>
<Modal ariaHideApp={false}
<Modal ariaHideApp={false}
isOpen={this.props.removeIsOpen}
onRequestClose={this.props.closeEdit}
style={removeCustomStyles}

52
webui/src/Sinks.js → webui/src/Sinks.jsx
View File

@ -1,5 +1,5 @@
//
// Sinks.js
// Sinks.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -26,8 +26,6 @@ import Loader from './Loader';
import SinkEdit from './SinkEdit';
import SinkRemove from './SinkRemove';
require('./styles.css');
class SinkEntry extends Component {
static propTypes = {
id: PropTypes.number.isRequired,
@ -39,10 +37,10 @@ class SinkEntry extends Component {
constructor(props) {
super(props);
this.state = {
this.state = {
min_time: 'n/a',
flags: 'n/a',
errors: 'n/a'
errors: 'n/a'
};
}
@ -76,8 +74,8 @@ class SinkEntry extends Component {
flags += (flags ? ',' : '') + 'all muted';
if (status.sink_flags._muted)
flags += (flags ? ',' : '') + 'muted';
this.setState({
min_time: status.sink_min_time + ' ms',
this.setState({
min_time: status.sink_min_time + ' ms',
flags: flags ? flags : 'idle',
errors: errors ? errors : 'none'
});
@ -119,7 +117,7 @@ class SinkList extends Component {
return (
<div id='sinks-table'>
<table className="table-stream"><tbody>
{this.props.sinks.length > 0 ?
{this.props.sinks.length > 0 ?
<tr className='tr-stream'>
<th>ID</th>
<th>Name</th>
@ -137,7 +135,7 @@ class SinkList extends Component {
<span className='pointer-area' onClick={this.handleReloadClick}> <img width='30' height='30' src='/reload.png' alt=''/> </span>
&nbsp;&nbsp;
{this.props.sinks.length < 64 ?
<span className='pointer-area' onClick={this.handleAddClick}> <img width='30' height='30' src='/plus.png' alt=''/> </span>
<span className='pointer-area' onClick={this.handleAddClick}> <img width='30' height='30' src='/plus.png' alt=''/> </span>
: undefined}
</div>
);
@ -147,14 +145,14 @@ class SinkList extends Component {
class Sinks extends Component {
constructor(props) {
super(props);
this.state = {
sinks: [],
sink: {},
isLoading: false,
isEdit: false,
editIsOpen: false,
removeIsOpen: false,
editTitle: ''
this.state = {
sinks: [],
sink: {},
isLoading: false,
isEdit: false,
editIsOpen: false,
removeIsOpen: false,
editTitle: ''
};
this.onEditClick = this.onEditClick.bind(this);
this.onTrashClick = this.onTrashClick.bind(this);
@ -191,13 +189,13 @@ class Sinks extends Component {
onReloadClick() {
this.fetchSinks();
}
closeEdit() {
this.setState({editIsOpen: false});
this.setState({removeIsOpen: false});
this.fetchSinks();
}
onEditClick(id) {
const sink = this.state.sinks.find(s => s.id === id);
this.openEdit("Edit Sink " + id, sink, true);
@ -209,15 +207,15 @@ class Sinks extends Component {
}
onAddClick() {
let id;
let id;
/* find first free id */
for (id = 0; id < 63; id++) {
if (this.state.sinks[id] === undefined ||
if (this.state.sinks[id] === undefined ||
this.state.sinks[id].id !== id) {
break;
}
}
const defaultSink = {
const defaultSink = {
'id': id,
'name': 'ALSA Sink ' + id,
'io': 'Audio Device',
@ -230,7 +228,7 @@ class Sinks extends Component {
};
this.openEdit('Add Sink ' + id, defaultSink, false);
}
render() {
this.state.sinks.sort((a, b) => (a.id > b.id) ? 1 : -1);
const sinks = this.state.sinks.map((sink) => (
@ -244,15 +242,15 @@ class Sinks extends Component {
));
return (
<div id='sinks'>
{ this.state.isLoading ? <Loader/>
: <SinkList onAddClick={this.onAddClick}
{ this.state.isLoading ? <Loader/>
: <SinkList onAddClick={this.onAddClick}
onReloadClick={this.onReloadClick}
sinks={sinks} /> }
{ this.state.editIsOpen ?
<SinkEdit editIsOpen={this.state.editIsOpen}
closeEdit={this.closeEdit}
applyEdit={this.applyEdit}
editTitle={this.state.editTitle}
editTitle={this.state.editTitle}
isEdit={this.state.isEdit}
sink={this.state.sink} />
: undefined }
@ -260,7 +258,7 @@ class Sinks extends Component {
<SinkRemove removeIsOpen={this.state.removeIsOpen}
closeEdit={this.closeEdit}
applyEdit={this.applyEdit}
sink={this.state.sink}
sink={this.state.sink}
key={this.state.sink.id} />
: undefined }
</div>

26
webui/src/SourceEdit.js → webui/src/SourceEdit.jsx
View File

@ -1,5 +1,5 @@
//
// SourceEdit.js
// SourceEdit.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const editCustomStyles = {
content : {
top: '50%',
@ -38,7 +36,7 @@ const editCustomStyles = {
}
};
const max_packet_size = 1440; //bytes
const max_packet_size = 1440; //bytes
class SourceEdit extends Component {
static propTypes = {
@ -114,7 +112,7 @@ class SourceEdit extends Component {
this.state.refclkPtpTraceable,
this.state.map,
this.props.isEdit)
.then(function(response) {
.then(function(response) {
toast.success(message);
this.props.applyEdit();
}.bind(this));
@ -127,7 +125,7 @@ class SourceEdit extends Component {
onCancel() {
this.props.closeEdit();
}
getMaxChannels(codec, samples) {
let maxChannels = Math.floor(max_packet_size / (samples * (codec === 'L16' ? 2 : 3)));
return maxChannels > 64 ? 64 : maxChannels;
@ -144,7 +142,7 @@ class SourceEdit extends Component {
let maxChannels = this.getMaxChannels(this.state.codec, this.state.maxSamplesPerPacket);
this.setState({ codec: codec, maxChannels: maxChannels, channelsErr: this.state.channels > maxChannels });
}
onChangeChannels(e) {
if (e.currentTarget.checkValidity()) {
let channels = parseInt(e.target.value, 10);
@ -194,7 +192,7 @@ class SourceEdit extends Component {
}
getMaxSamplesPerPacket() {
return (this.props.source.max_samples_per_packet > (this.props.ticFrameSizeAt1fs * this.getnFS())) ?
return (this.props.source.max_samples_per_packet > (this.props.ticFrameSizeAt1fs * this.getnFS())) ?
(this.props.ticFrameSizeAt1fs * this.getnFS()) : this.props.source.max_samples_per_packet;
}
@ -202,7 +200,7 @@ class SourceEdit extends Component {
let duration = (samples * 1000000) / this.props.sampleRate;
if (duration >= 1000) {
duration /= 1000;
if (duration == Math.round(duration))
if (duration == Math.round(duration))
return Math.round(duration).toString() + 'ms';
else
return (Math.round(duration * 1000) / 1000).toString() + 'ms';
@ -222,7 +220,7 @@ class SourceEdit extends Component {
render() {
return (
<div id='source-edit'>
<Modal ariaHideApp={false}
<Modal ariaHideApp={false}
isOpen={this.props.editIsOpen}
onRequestClose={this.props.closeEdit}
style={editCustomStyles}
@ -243,7 +241,7 @@ class SourceEdit extends Component {
</tr>
<tr>
<th align="left"> <label>Max samples per packet </label> </th>
<th align="left">
<th align="left">
<select value={this.state.maxSamplesPerPacket} onChange={this.onChangeMaxSamplesPerPacket}>
<option value="6" disabled={this.checkMaxSamplesPerPacket(6) ? undefined : true}>6 - {this.getPacketDuration(6)}</option>
<option value="12" disabled={this.checkMaxSamplesPerPacket(12) ? undefined : true}>12 - {this.getPacketDuration(12)}</option>
@ -256,7 +254,7 @@ class SourceEdit extends Component {
</tr>
<tr>
<th align="left"> <label>Codec</label> </th>
<th align="left">
<th align="left">
<select value={this.state.codec} onChange={this.onChangeCodec}>
<option value="L16">L16</option>
<option value="L24">L24</option>
@ -299,8 +297,8 @@ class SourceEdit extends Component {
<th align="left">Audio Channels map</th>
<th align="left">
<select value={this.state.map[0]} onChange={this.onChangeChannelsMap}>
{ this.state.channels > 1 ?
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Output ' + parseInt(v + 1, 10) + ' -> ALSA Output ' + parseInt(v + this.state.channels, 10)}</option>) :
{ this.state.channels > 1 ?
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Output ' + parseInt(v + 1, 10) + ' -> ALSA Output ' + parseInt(v + this.state.channels, 10)}</option>) :
this.state.audioMap.map((v) => <option key={v} value={v}>{'ALSA Output ' + parseInt(v + 1, 10)}</option>)
}
</select>

8
webui/src/SourceInfo.js → webui/src/SourceInfo.jsx
View File

@ -1,5 +1,5 @@
//
// SourceInfo.js
// SourceInfo.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -22,8 +22,6 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';
require('./styles.css');
const infoCustomStyles = {
content : {
top: '50%',
@ -59,11 +57,11 @@ class SourceInfo extends Component {
onClose() {
this.props.closeInfo();
}
render() {
return (
<div id='source-info'>
<Modal ariaHideApp={false}
<Modal ariaHideApp={false}
isOpen={this.props.infoIsOpen}
onRequestClose={this.props.closeInfo}
style={infoCustomStyles}

8
webui/src/SourceRemove.js → webui/src/SourceRemove.jsx
View File

@ -1,5 +1,5 @@
//
// SourceRemove.js
// SourceRemove.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const removeCustomStyles = {
content : {
top: '50%',
@ -58,7 +56,7 @@ class SourceRemove extends Component {
}
removeSource(message) {
RestAPI.removeSource(this.props.source.id).then(function(response) {
RestAPI.removeSource(this.props.source.id).then(function(response) {
toast.success(message);
this.props.applyEdit();
}.bind(this));
@ -75,7 +73,7 @@ class SourceRemove extends Component {
render() {
return (
<div id='source-remove'>
<Modal ariaHideApp={false}
<Modal ariaHideApp={false}
isOpen={this.props.removeIsOpen}
onRequestClose={this.props.closeEdit}
style={removeCustomStyles}

54
webui/src/Sources.js → webui/src/Sources.jsx
View File

@ -1,5 +1,5 @@
//
// Sources.js
// Sources.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -27,8 +27,6 @@ import SourceEdit from './SourceEdit';
import SourceRemove from './SourceRemove';
import SourceInfo from './SourceInfo';
require('./styles.css');
class SourceEntry extends Component {
static propTypes = {
id: PropTypes.number.isRequired,
@ -41,10 +39,10 @@ class SourceEntry extends Component {
constructor(props) {
super(props);
this.state = {
this.state = {
address: 'n/a',
port: 'n/a',
sdp: ''
sdp: ''
};
}
@ -108,7 +106,7 @@ class SourceList extends Component {
return (
<div id='sources-table'>
<table className="table-stream"><tbody>
{this.props.sources.length > 0 ?
{this.props.sources.length > 0 ?
<tr className='tr-stream'>
<th>ID</th>
<th>Name</th>
@ -125,7 +123,7 @@ class SourceList extends Component {
<span className='pointer-area' onClick={this.handleReloadClick}> <img width='30' height='30' src='/reload.png' alt=''/> </span>
&nbsp;&nbsp;
{this.props.sources.length < 64 ?
<span className='pointer-area' onClick={this.handleAddClick}> <img width='30' height='30' src='/plus.png' alt=''/> </span>
<span className='pointer-area' onClick={this.handleAddClick}> <img width='30' height='30' src='/plus.png' alt=''/> </span>
: undefined}
</div>
);
@ -135,19 +133,19 @@ class SourceList extends Component {
class Sources extends Component {
constructor(props) {
super(props);
this.state = {
sources: [],
source: {},
isLoading: false,
isConfigLoading: false,
isEdit: false,
isInfo: false,
editIsOpen: false,
infoIsOpen: false,
this.state = {
sources: [],
source: {},
isLoading: false,
isConfigLoading: false,
isEdit: false,
isInfo: false,
editIsOpen: false,
infoIsOpen: false,
removeIsOpen: false,
ticFrameSizeAt1fs: '',
sampleRate: '',
editTitle: ''
editTitle: ''
};
this.onInfoClick = this.onInfoClick.bind(this);
this.onEditClick = this.onEditClick.bind(this);
@ -192,7 +190,7 @@ class Sources extends Component {
this.closeEdit();
this.fetchSources();
}
closeEdit() {
this.setState({editIsOpen: false});
this.setState({removeIsOpen: false});
@ -202,7 +200,7 @@ class Sources extends Component {
closeInfo() {
this.setState({infoIsOpen: false});
}
onInfoClick(id, sdp) {
const source = this.state.sources.find(s => s.id === id);
this.openInfo("Local Source Info", source, sdp, true);
@ -223,15 +221,15 @@ class Sources extends Component {
}
onAddClick() {
let id;
let id;
/* find first free id */
for (id = 0; id < 63; id++) {
if (this.state.sources[id] === undefined ||
if (this.state.sources[id] === undefined ||
this.state.sources[id].id !== id) {
break;
}
}
const defaultSource = {
const defaultSource = {
'id': id,
'enabled': true,
'name': 'ALSA Source ' + id,
@ -246,7 +244,7 @@ class Sources extends Component {
};
this.openEdit('Add Source ' + id, defaultSource, false);
}
render() {
this.state.sources.sort((a, b) => (a.id > b.id) ? 1 : -1);
const sources = this.state.sources.map((source) => (
@ -261,14 +259,14 @@ class Sources extends Component {
));
return (
<div id='sources'>
{ this.state.isLoading || this.state.isConfigLoading ? <Loader/>
: <SourceList onAddClick={this.onAddClick}
{ this.state.isLoading || this.state.isConfigLoading ? <Loader/>
: <SourceList onAddClick={this.onAddClick}
onReloadClick={this.onReloadClick}
sources={sources} /> }
{ this.state.infoIsOpen ?
<SourceInfo infoIsOpen={this.state.infoIsOpen}
closeInfo={this.closeInfo}
infoTitle={this.state.infoTitle}
infoTitle={this.state.infoTitle}
isInfo={this.state.isInfo}
id={this.state.source.id.toString()}
name={this.state.source.name}
@ -279,7 +277,7 @@ class Sources extends Component {
<SourceEdit editIsOpen={this.state.editIsOpen}
closeEdit={this.closeEdit}
applyEdit={this.applyEdit}
editTitle={this.state.editTitle}
editTitle={this.state.editTitle}
isEdit={this.state.isEdit}
ticFrameSizeAt1fs={this.state.ticFrameSizeAt1fs}
sampleRate={this.state.sampleRate}
@ -289,7 +287,7 @@ class Sources extends Component {
<SourceRemove removeIsOpen={this.state.removeIsOpen}
closeEdit={this.closeEdit}
applyEdit={this.applyEdit}
source={this.state.source}
source={this.state.source}
key={this.state.source.id} />
: undefined }
</div>

4
webui/src/Tab.js → webui/src/Tab.jsx
View File

@ -1,5 +1,5 @@
//
// Tab.js
// Tab.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -51,7 +51,7 @@ class Tab extends Component {
className += ' tab-list-active';
}
return (
return (
<li className={className} onClick={onClick}>{label}</li>
);
}

12
webui/src/Tabs.js → webui/src/Tabs.jsx
View File

@ -1,5 +1,5 @@
//
// Tabs.js
// Tabs.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -46,11 +46,11 @@ class Tabs extends Component {
state: { activeTab, }
} = this;
return (
return (
<div className="tabs">
<ol className="tab-list"> { children.map((child) => {
<ol className="tab-list"> { children.map((child) => {
const { label } = child.props;
return (
return (
<Tab activeTab={ activeTab }
key={ label }
label={ label }
@ -58,11 +58,11 @@ class Tabs extends Component {
/>
); })
}
</ol>
</ol>
<div className="tab-content"> { children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
}) }
}) }
</div>
</div>
);

11
webui/src/main.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './styles.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)

7
webui/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()]
})