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

Snapcast to BEM

Browse Source
This commit is contained in:
James Barnsley
2018-09-24 16:10:42 +12:00
parent 1bb0c80431
commit 06f8ee9060
11 changed files with 1914 additions and 1861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
mopidy_iris/static/app.css
View File

@ -4445,78 +4445,85 @@ $icon-websocket: \e920;
.snapcast button {
margin-bottom: 0px; }
.snapcast .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0; }
.snapcast .volume-control .slider-wrapper {
margin-left: 30px; }
.snapcast .volume-control.group-volume-control {
.snapcast__group__volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box; }
.snapcast__group__volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0; }
.snapcast__group__volume-control .slider-wrapper {
margin-left: 30px; }
.snapcast .volume-control.client-volume-control {
.snapcast__groups {
padding-top: 10px; }
.snapcast__group {
padding-top: 10px;
border-top: 1px solid #383734; }
.snapcast__group:not(:last-child) {
padding-bottom: 20px; }
.snapcast__clients {
padding: 0 10px; }
.snapcast__client {
border: 0;
padding: 0;
clear: both; }
.snapcast__client::after {
content: '';
clear: both;
display: block; }
.snapcast__client:not(:first-child) {
padding-top: 8px; }
.snapcast__client__volume-control {
padding-top: 11px;
padding-right: 10px;
display: block;
vertical-align: middle;
box-sizing: border-box; }
.snapcast .groups {
padding-top: 10px; }
.snapcast .groups .group {
padding-top: 10px;
border-top: 1px solid #383734; }
.snapcast .groups .group:not(:last-child) {
padding-bottom: 20px; }
.snapcast .groups .group .clients {
padding: 0 10px; }
.snapcast .groups .group .clients .client {
border: 0;
padding: 0;
clear: both; }
.snapcast .groups .group .clients .client::after {
content: '';
clear: both;
display: block; }
.snapcast .groups .group .clients .client:not(:first-child) {
padding-top: 8px; }
.snapcast .groups .group .clients .client > .name {
.snapcast__client__volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0; }
.snapcast__client__volume-control .slider-wrapper {
margin-left: 30px; }
.snapcast__client__name {
width: 40%;
padding-bottom: 4px;
position: relative;
display: block;
box-sizing: border-box;
border: 0; }
.snapcast .groups .group .clients .client > .name input {
.snapcast__client__name input {
width: 100%;
padding-right: 30px; }
.snapcast .groups .group .clients .client > .name .group-dropdown-field {
.snapcast__client__group-dropdown-field {
float: right;
margin-bottom: -3.2rem; }
.snapcast .groups .group .clients .client > .name .group-dropdown-field .icon {
.snapcast__client__group-dropdown-field .icon {
padding-right: 0; }
.snapcast .groups .group .clients .client > .volume {
.snapcast__client__volume {
width: 28%;
padding-left: 2%; }
.snapcast .groups .group .clients .client > .latency {
.snapcast__client__latency {
width: 28%;
padding-left: 2%; }
.snapcast .groups .group .clients .client > .latency input[type="number"] {
.snapcast__client__latency input[type="number"] {
width: 20%; }
.snapcast .groups .group .clients .client .latency-control {
.snapcast__client__latency .latency-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .groups .group .clients .client .latency-control .zero {
.snapcast__client__latency .latency-control .zero {
position: absolute;
top: -4px;
left: 50%;
@ -4524,31 +4531,31 @@ $icon-websocket: \e920;
width: 1px;
background: #383734;
z-index: 0; }
.snapcast .groups .group .clients .client .latency-control .progress.positive {
.snapcast__client__latency .latency-control .progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.snapcast .groups .group .clients .client .latency-control .progress.negative {
.snapcast__client__latency .latency-control .progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.snapcast .groups .group .clients .client .latency-control .progress.negative:after {
.snapcast__client__latency .latency-control .progress.negative:after {
right: auto;
left: -1px; }
@media (max-width: 800px) {
.snapcast .groups .group .clients .client {
.snapcast__client {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important; }
.snapcast .groups .group .clients .client .col {
.snapcast__client .col {
clear: both;
display: block !important;
float: none !important;
width: auto !important;
padding: 0; }
.snapcast .groups .group .clients .client .col::after {
.snapcast__client .col::after {
content: '';
clear: both;
display: block; }
.snapcast .groups .group .clients .client .col.volume, .snapcast .groups .group .clients .client .col.latency {
.snapcast__client .col.volume, .snapcast__client .col.latency {
padding-top: 5px; } }
.output-control {

3250
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

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

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1537746267";
var build = "1537753000";
var version = "3.26.2";
// Construct the script tag

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

@ -53,7 +53,7 @@ class Snapcast extends React.Component{
}
return (
<div className="list clients">
<div className="list snapcast__clients">
{
group.clients.map(client => {
var name = client.config.name ? client.config.name : client.host.name;
@ -78,10 +78,10 @@ class Snapcast extends React.Component{
});
return (
<div className="list-item client" key={client.id}>
<div className="col name">
<div className={"list-item snapcast__client "+(client.connected ? "snapcast__client--connected" : "snapcast__client--disconnected")} key={client.id}>
<div className="col name snapcast__client__name">
<DropdownField
className="group-dropdown-field"
className="snapcast__client__group-dropdown-field"
icon="settings"
name="Group"
no_label
@ -96,16 +96,16 @@ class Snapcast extends React.Component{
value={name}
/>
</div>
<div className="col volume">
<div className="col snapcast__client__volume">
<VolumeControl
className="client-volume-control"
className="snapcast__client__volume-control"
volume={client.config.volume.percent}
mute={client.config.volume.muted}
onVolumeChange={percent => this.props.snapcastActions.setClientVolume(client.id, percent)}
onMuteChange={mute => this.props.snapcastActions.setClientMute(client.id, mute)}
/>
</div>
<div className="col latency">
<div className="col snapcast__client__latency">
<LatencyControl
max="100"
value={client.config.latency}
@ -201,7 +201,7 @@ class Snapcast extends React.Component{
</div>
</div>
<div className="groups">
<div className="snapcast__groups">
{
groups.map(group => {
@ -214,7 +214,7 @@ class Snapcast extends React.Component{
group_volume = group_volume / group.clients.length;
return (
<div className="group" key={group.id}>
<div className="snapcast__group" key={group.id}>
<div className="field">
<div className="name">
Name
@ -250,7 +250,7 @@ class Snapcast extends React.Component{
</div>
<div className="input">
<VolumeControl
className="group-volume-control"
className="snapcast__group__volume-control"
volume={group_volume}
mute={group.muted}
onVolumeChange={(percent, old_percent) => this.props.snapcastActions.setGroupVolume(group.id, percent, old_percent)}

10
src/js/services/mopidy/actions.js
View File

@ -8,6 +8,16 @@ export function set(data){
}
}
export function request(method, params = null, response_callback = null, error_callback = null){
return {
type: 'MOPIDY_REQUEST',
method: method,
params: params,
response_callback: response_callback,
error_callback: error_callback
}
}
export function connect(){
return {
type: 'MOPIDY_CONNECT'

22
src/js/services/mopidy/middleware.js
View File

@ -241,6 +241,28 @@ const MopidyMiddleware = (function(){
})
break;
case 'MOPIDY_REQUEST':
request(socket, store, action.method, action.params)
.then(
response => {
if (action.response_callback){
store.dispatch(action.response_callback.call(this, response));
}
},
error => {
if (action.error_callback){
store.dispatch(action.error_callback.call(this, error));
} else {
store.dispatch(coreActions.handleException(
'Mopidy request failed',
error,
action.method,
action
));
}
}
);
break
/**
* General playback

4
src/js/services/pusher/actions.js
View File

@ -75,9 +75,9 @@ export function connectionRemoved(connection){
}
}
export function instruct(method, params = null, response_callback = null, error_callback = null){
export function request(method, params = null, response_callback = null, error_callback = null){
return {
type: 'PUSHER_INSTRUCT',
type: 'PUSHER_REQUEST',
method: method,
params: params,
response_callback: response_callback,

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

@ -244,7 +244,7 @@ const PusherMiddleware = (function(){
next(action);
break;
case 'PUSHER_INSTRUCT':
case 'PUSHER_REQUEST':
request(store, action.method, action.params)
.then(
response => {
@ -257,8 +257,10 @@ const PusherMiddleware = (function(){
store.dispatch(action.error_callback.call(this, error));
} else {
store.dispatch(coreActions.handleException(
'Instruct failed',
error
'Pusher request failed',
error,
action.method,
action
));
}
}

2
src/js/services/snapcast/middleware.js
View File

@ -12,7 +12,7 @@ const SnapcastMiddleware = (function(){
// A snapcast request is an alias of the Pusher request
const request = (store, params = null, response_callback = null, error_callback = null) => {
store.dispatch(
pusherActions.instruct(
pusherActions.request(
'snapcast_instruct',
params,
response_callback,

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

@ -5,7 +5,12 @@
margin-bottom: 0px;
}
.volume-control {
&__group {
&__volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box;
.mute-control {
display: inline-block;
@ -17,38 +22,27 @@
.slider-wrapper {
margin-left: 30px;
}
&.group-volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box;
}
&.client-volume-control {
padding-top: 11px;
padding-right: 10px;
display: block;
vertical-align: middle;
box-sizing: border-box;
}
}
.groups {
&__groups {
padding-top: 10px;
}
.group {
&__group {
padding-top: 10px;
border-top: 1px solid $grey;
&:not(:last-child){
padding-bottom: 20px;
}
}
.clients {
&__clients {
padding: 0 10px;
}
.client {
&__client {
@include clearfix();
border: 0;
padding: 0;
@ -58,7 +52,26 @@
padding-top: 8px;
}
& > .name {
&__volume-control {
padding-top: 11px;
padding-right: 10px;
display: block;
vertical-align: middle;
box-sizing: border-box;
.mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0;
}
.slider-wrapper {
margin-left: 30px;
}
}
&__name {
width: 40%;
padding-bottom: 4px;
position: relative;
@ -70,8 +83,9 @@
width: 100%;
padding-right: 30px;
}
}
.group-dropdown-field {
&__group-dropdown-field {
float: right;
margin-bottom: -3.2rem;
@ -79,21 +93,19 @@
padding-right: 0;
}
}
}
& > .volume {
&__volume {
width: 28%;
padding-left: 2%;
}
& > .latency {
&__latency {
width: 28%;
padding-left: 2%;
input[type="number"] {
width: 20%;
}
}
.latency-control {
display: inline-block;
@ -128,6 +140,7 @@
}
}
}
}
@include responsive($bp_medium){
padding-left: 0 !important;
@ -150,6 +163,3 @@
}
}
}
}
}
}