secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Leaning up snapcast component

Browse Source
This commit is contained in:
James Barnsley
2018-03-22 16:59:04 +13:00
parent ce0c41516a
commit b2067512a3
14 changed files with 2163 additions and 1242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/js/components/PlaybackControls.js
View File

@ -58,18 +58,6 @@ class PlaybackControls extends React.Component{
return button;
}
renderStreamingButton(){
var button = null;
if (this.props.http_streaming_enabled){
if (this.props.http_streaming_active){
button = <a className="control active has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: false})}><FontAwesome name="rss" /><span className="tooltip">Mute local stream</span></a>
} else {
button = <a className="control has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: true})}><FontAwesome name="rss" /><span className="tooltip">Un-mute local stream</span></a>;
}
}
return button;
}
handleThumbnailClick(e){
e.preventDefault();
this.props.uiActions.openModal('kiosk_mode');
@ -114,7 +102,6 @@ class PlaybackControls extends React.Component{
</section>
<section className="settings">
{this.renderStreamingButton()}
{this.renderConsumeButton()}
{this.renderRandomButton()}
{this.renderRepeatButton()}

69
src/js/components/Snapcast.js
View File

@ -29,45 +29,55 @@ class Snapcast extends React.Component{
}
}
renderMuteToggle(client){
if (client.config.volume.muted){
return (
<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent)}>
<FontAwesome name="volume-off" />
</span>
);
} else {
return (
<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent)}>
<FontAwesome name="volume-up" />
</span>
);
}
}
render(){
if (!this.props.snapcast){
if (!this.props.snapcast_clients || !this.props.snapcast_groups){
return null;
}
var clients = [];
for (var client_id in this.props.snapcast_clients){
if (this.props.snapcast_clients.hasOwnProperty(client_id)){
clients.push(this.props.snapcast_clients[client_id]);
}
}
return (
<div className="snapcast">
<div className="clients">
{
clients.map(client => {
return (
<div key={client.id}>
{client.config.volume.muted ? <FontAwesome name="volume-off" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent)} /> : <FontAwesome name="volume-up" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent)} />} {client.config.name ? client.config.name : client.host.name} {client.config.volume.percent}
</div>
);
})
}
</div>
</div>
);
// Construct a simple array of our groups index
var groups = [];
for (var group_id in this.props.snapcast_groups){
if (this.props.connections.hasOwnProperty(group_id)){
groups.push(this.props.snapcast_groups[group_id]);
if (this.props.snapcast_groups.hasOwnProperty(group_id)){
var group = this.props.snapcast_groups[group_id];
// Merge the group's clients into this group (also as a simple array)
var clients = [];
for (var i = 0; i < group.clients_ids.length; i++){
if (this.props.snapcast_clients.hasOwnProperty(group.clients_ids[i])){
clients.push(this.props.snapcast_clients[group.clients_ids[i]]);
}
}
groups.push(Object.assign(
{},
group,
{
clients: clients
}
));
}
}
return (
<div className="snapcast">
{
this.props.snapcast.groups.map(group => {
groups.map(group => {
return (
<div className="group" key={group.id}>
{group.muted ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-up" />} {group.name ? group.name : 'Untitled'}
@ -75,8 +85,9 @@ class Snapcast extends React.Component{
{
group.clients.map(client => {
return (
<div key={client.id}>
{client.config.volume.muted ? <FontAwesome name="volume-off" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent)} /> : <FontAwesome name="volume-up" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent)} />} {client.config.name ? client.config.name : client.host.name} {client.config.volume.percent}
<div className="client" key={client.id}>
{this.renderMuteToggle(client)}
{client.config.name ? client.config.name : client.host.name} {client.config.volume.percent}
</div>
);
})

29
src/js/services/pusher/middleware.js
View File

@ -522,23 +522,21 @@ const PusherMiddleware = (function(){
// Loop all the groups
for (var i = 0; i < response.server.groups.length; i++){
var group = response.server.groups[i];
groups[group.id] = {
id: group.id,
muted: group.muted,
name: group.name,
stream_id: group.stream_id
}
var clients_ids = [];
// And now this groups' clients
for (var i = 0; i < group.clients.length; i++){
var client = group.clients[i];
clients[client.id] = Object.assign(
{},
client,
{
group_id: group.id
}
)
clients[client.id] = client;
clients_ids.push(client.id);
}
groups[group.id] = {
id: group.id,
muted: group.muted,
name: group.name,
stream_id: group.stream_id,
clients_ids: clients_ids
}
}
@ -562,10 +560,9 @@ const PusherMiddleware = (function(){
request(store, 'snapcast_instruct', action.data)
.then(
response => {
console.log(response)
store.dispatch({
type: 'PUSHER_SNAPCAST_CLIENT_UPDATED',
key: response.client.id,
key: action.data.params.id,
client: {
config: {
volume: response.volume
@ -575,7 +572,7 @@ const PusherMiddleware = (function(){
},
error => {
store.dispatch(coreActions.handleException(
'ERR',
'Error',
error,
error.message
));

6
src/js/views/Debug.js
View File

@ -12,7 +12,6 @@ import URISchemesList from '../components/URISchemesList'
import VersionManager from '../components/VersionManager'
import Header from '../components/Header'
import Thumbnail from '../components/Thumbnail'
import Snapcast from '../components/Snapcast'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
@ -58,11 +57,6 @@ class Debug extends React.Component{
<div className="content-wrapper">
<h4 className="underline">Output</h4>
<div className="field">
<Snapcast />
</div>
<h4 className="underline">User interface</h4>
<form>
<div className="field checkbox">

110
src/js/views/Settings.js
View File

@ -16,6 +16,7 @@ import Parallax from '../components/Parallax'
import Icon from '../components/Icon'
import Thumbnail from '../components/Thumbnail'
import URILink from '../components/URILink'
import Snapcast from '../components/Snapcast'
import * as coreActions from '../services/core/actions'
import * as uiActions from '../services/ui/actions'
@ -265,6 +266,63 @@ class Settings extends React.Component {
<section className="content-wrapper">
<h4 className="underline">Audio output</h4>
<div className="field">
<Snapcast />
</div>
<h4 className="underline">Streaming</h4>
<div className="field checkbox">
<div className="name">Enable</div>
<div className="input">
<label>
<input
type="checkbox"
name="ssl"
checked={this.props.core.http_streaming_enabled}
onChange={e => this.props.coreActions.set({http_streaming_enabled: !this.props.core.http_streaming_enabled})} />
<span className="label has-tooltip">
Stream audio to this browser
<span className="tooltip">Requires streaming service like Icecast2</span>
</span>
</label>
</div>
</div>
<div className="field radio">
<div className="name">Encoding</div>
<div className="input">
<label>
<input
type="radio"
name="http_streaming_encoding"
checked={this.props.core.http_streaming_encoding == 'mpeg'}
onChange={e => this.props.coreActions.set({http_streaming_encoding: 'mpeg'})} />
<span className="label">mpeg (mp3)</span>
</label>
<label>
<input
type="radio"
name="http_streaming_encoding"
checked={this.props.core.http_streaming_encoding == 'ogg'}
onChange={e => this.props.coreActions.set({http_streaming_encoding: 'ogg'})} />
<span className="label">ogg</span>
</label>
</div>
</div>
<div className="field">
<div className="name">Location</div>
<div className="input">
<input
type="text"
onChange={e => this.props.coreActions.set({http_streaming_url: e.target.value})}
value={this.props.core.http_streaming_url} />
<div className="description">
The full URL to your stream endpoint
</div>
</div>
</div>
<h4 className="underline">Server</h4>
<div className="field">
@ -333,58 +391,6 @@ class Settings extends React.Component {
{this.renderApplyButton()}
</form>
<h4 className="underline">Streaming</h4>
<div className="field checkbox">
<div className="name">Enable</div>
<div className="input">
<label>
<input
type="checkbox"
name="ssl"
checked={this.props.core.http_streaming_enabled}
onChange={e => this.props.coreActions.set({http_streaming_enabled: !this.props.core.http_streaming_enabled})} />
<span className="label has-tooltip">
Stream audio to this browser
<span className="tooltip">Requires streaming service like Icecast2</span>
</span>
</label>
</div>
</div>
<div className="field radio">
<div className="name">Encoding</div>
<div className="input">
<label>
<input
type="radio"
name="http_streaming_encoding"
checked={this.props.core.http_streaming_encoding == 'mpeg'}
onChange={e => this.props.coreActions.set({http_streaming_encoding: 'mpeg'})} />
<span className="label">mpeg (mp3)</span>
</label>
<label>
<input
type="radio"
name="http_streaming_encoding"
checked={this.props.core.http_streaming_encoding == 'ogg'}
onChange={e => this.props.coreActions.set({http_streaming_encoding: 'ogg'})} />
<span className="label">ogg</span>
</label>
</div>
</div>
<div className="field">
<div className="name">Location</div>
<div className="input">
<input
type="text"
onChange={e => this.props.coreActions.set({http_streaming_url: e.target.value})}
value={this.props.core.http_streaming_url} />
<div className="description">
The full URL to your stream endpoint
</div>
</div>
</div>
<h4 className="underline">Localization</h4>
<div className="field">