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

Polishing snapcast UI

Browse Source
This commit is contained in:
James Barnsley
2018-04-19 06:20:54 +12:00
parent 4e049d403e
commit 6035963f1f
7 changed files with 23829 additions and 25638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
mopidy_iris/static/app.css
View File

@ -4299,30 +4299,35 @@ input[type="submit"] {
border: 0; }
.snapcast .group.list .list-item > .name {
width: 40%;
float: left;
padding-bottom: 4px;
position: relative; }
.snapcast .group.list .list-item > .name .disconnected {
.snapcast .group.list .list-item > .name .status {
position: absolute;
top: 10px;
right: 5px;
z-index: 2; }
top: 0;
left: 0;
z-index: 2;
padding: 12px;
cursor: default; }
.snapcast .group.list .list-item > .name .status .fa {
font-size: 12px; }
.snapcast .group.list .list-item > .name input {
padding-left: 30px; }
.snapcast .group.list .list-item > .volume {
float: left;
width: 28%;
padding-left: 2%; }
.snapcast .group.list .list-item > .latency {
float: left;
width: 28%;
padding-left: 2%; }
.snapcast .group.list .list-item.header {
padding-top: 0;
vertical-align: bottom; }
vertical-align: bottom;
cursor: default; }
.snapcast .group.list .list-item.header .name {
font-size: 14px;
color: #FFFFFF;
text-transform: none;
font-weight: 600; }
font-weight: 600;
line-height: 14px; }
.snapcast .group.list .list-item.client {
padding: 20px 0 0 0; }
.snapcast .group.list .list-item.client::after {
@ -4335,9 +4340,12 @@ input[type="submit"] {
border: 0; }
.snapcast .group.list .list-item.client > .name input {
width: 100%; }
.snapcast .group.list .list-item.client > .volume input,
.snapcast .group.list .list-item.client > .latency input {
width: 20%; }
.snapcast .group.list .list-item.client .volume-control {
display: block;
padding-top: 14px;
padding-top: 12px;
float: left;
width: 80%;
padding-right: 10px;
@ -4353,11 +4361,40 @@ input[type="submit"] {
background: #a3a19f; }
.snapcast .group.list .list-item.client .latency-control {
display: block;
padding-top: 14px;
padding-top: 12px;
float: left;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .group.list .list-item.client .latency-control .zero {
position: absolute;
top: -4px;
left: 50%;
bottom: 0;
width: 1px;
background: #383734;
z-index: 1; }
.snapcast .group.list .list-item.client .latency-control .progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.snapcast .group.list .list-item.client .latency-control .progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media (max-width: 800px) {
.snapcast .group.list .list-item.header {
display: block; }
.snapcast .group.list .list-item.header .volume,
.snapcast .group.list .list-item.header .latency {
display: none !important; }
.snapcast .group.list .list-item .col {
float: none !important;
width: auto !important;
padding-left: 0;
padding-right: 0; }
.snapcast .group.list .list-item .col::after {
content: '';
clear: both;
display: block; } }
aside {
position: fixed;

49297
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -73,7 +73,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1523954490";
var build = "1524034824";
var version = "3.16.3";
// Construct the script tag

5
src/js/components/LatencyControl.js
View File

@ -79,6 +79,7 @@ export default class LatencyControl extends React.Component{
var percentage = Math.round((value / this.props.max) * 100 / 2);
var left = 50;
var width = percentage;
var negative = false;
// Negative value
// We reverse it to a positive for easier maths and style rules
@ -90,14 +91,16 @@ export default class LatencyControl extends React.Component{
var percentage = Math.round((value / this.props.max) * 100 / 2);
var left = 50 - percentage;
var width = percentage;
var negative = true;
}
return (
<span className="latency-control" onWheel={e => this.handleWheel(e)}>
<div className="slider-wrapper">
<div className="slider horizontal" onClick={e => this.handleClick(e)}>
<div className="zero"></div>
<div className="track">
<div className="progress" style={{ width: width+'%', left: left+'%' }}></div>
<div className={"progress "+(negative ? 'negative' : 'positive')} style={{ width: width+'%', left: left+'%' }}></div>
</div>
</div>
</div>

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

@ -32,6 +32,12 @@ class Snapcast extends React.Component{
// Just connected
if (newProps.snapcast_enabled && !this.props.pusher_connected && newProps.pusher_connected){
this.props.pusherActions.getSnapcast();
// Just enabled
// This is the more probable scenario as we don't know if we're enabled until pusher connects
// and then gets the config from the server
} else if (!this.props.snapcast_enabled && newProps.snapcast_enabled && newProps.pusher_connected){
this.props.pusherActions.getSnapcast();
}
}
@ -83,13 +89,13 @@ class Snapcast extends React.Component{
return (
<div className="list group" key={group.id}>
<div className="list-item header">
<div className="name">
<div className="col name">
{group.name ? group.name : 'Untitled group'}
</div>
<div className="volume">
<div className="col volume">
Volume
</div>
<div className="latency">
<div className="col latency">
Latency
</div>
</div>
@ -97,15 +103,21 @@ class Snapcast extends React.Component{
group.clients.map(client => {
var name = client.config.name ? client.config.name : client.host.name;
return (
<div className={"list-item client "+(client.connected ? 'connected' : 'disconnected')} key={client.id}>
<div className="name">
<div className="list-item client" key={client.id}>
<div className="col name">
<TextField
onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
value={name}
/>
{!client.connected ? <span className="disconnected flag grey">DISCONNECTED</span> : null}
{client.connected ? <span className="status has-tooltip">
<FontAwesome className="green-text" name="circle" />
<span className="tooltip">Connected</span>
</span> : <span className="status has-tooltip">
<FontAwesome className="grey-text" name="circle" />
<span className="tooltip">Not connected</span>
</span>}
</div>
<div className="volume">
<div className="col volume">
<VolumeControl
volume={client.config.volume.percent}
mute={client.config.volume.muted}
@ -118,7 +130,7 @@ class Snapcast extends React.Component{
value={client.config.volume.percent}
/>
</div>
<div className="latency">
<div className="col latency">
<LatencyControl
max="100"
value={client.config.latency}
@ -127,7 +139,7 @@ class Snapcast extends React.Component{
<TextField
className="tiny"
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
value={client.config.latency}
value={String(client.config.latency)}
/>
</div>
</div>

72
src/scss/components/_snapcast.scss
View File

@ -17,26 +17,33 @@
& > .name {
width: 40%;
float: left;
padding-bottom: 4px;
position: relative;
.disconnected {
.status {
position: absolute;
top: 10px;
right: 5px;
top: 0;
left: 0;
z-index: 2;
padding: 12px;
cursor: default;
.fa {
font-size: 12px;
}
}
input {
padding-left: 30px;
}
}
& > .volume {
float: left;
width: 28%;
padding-left: 2%;
}
& > .latency {
float: left;
width: 28%;
padding-left: 2%;
}
@ -44,12 +51,14 @@
&.header {
padding-top: 0;
vertical-align: bottom;
cursor: default;
.name {
font-size: 14px;
color: $white;
text-transform: none;
font-weight: 600;
line-height: 14px;
}
}
@ -66,10 +75,17 @@
width: 100%;
}
}
& > .volume,
& > .latency {
input {
width: 20%;
}
}
.volume-control {
display: block;
padding-top: 14px;
padding-top: 12px;
float: left;
width: 80%;
padding-right: 10px;
@ -95,11 +111,51 @@
.latency-control {
display: block;
padding-top: 14px;
padding-top: 12px;
float: left;
width: 80%;
padding-right: 10px;
box-sizing: border-box;
.zero {
position: absolute;
top: -4px;
left: 50%;
bottom: 0;
width: 1px;
background: $grey;
z-index: 1;
}
.progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
@include responsive($bp_medium){
&.header {
display: block;
.volume,
.latency {
display: none !important;
}
}
.col {
@include clearfix();
float: none !important;
width: auto !important;
padding-left: 0;
padding-right: 0;
}
}
}