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

App loader; Snapcast group volume

Browse Source
This commit is contained in:
James Barnsley
2018-05-01 21:03:05 +12:00
parent 4249125b66
commit 781d46168a
7 changed files with 23564 additions and 25358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48770
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

46
mopidy_iris/static/index.html
View File

@ -31,30 +31,32 @@
<!-- Loading screen -->
<style>
@keyframes logo-pulse {
0% { opacity: 0.05; }
50% { opacity: 0.3; }
100% { opacity: 0.05; }
html {
background-color: #121212;
}
@keyframes loader {
0% { left: 0; right: 100%; }
50% { left: 0; right: 0; }
100% { left: 100%; right: 0; }
}
#app-loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #FFFFFF;
background-color: #121212;
top: 50vh;
right: 25vw;
left: 25vw;
width: 50vw;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #1A1A1A;
}
#app-loading-logo {
width: 80%;
max-width: 160px;
margin: 0 auto;
#app-loading::before {
position: absolute;
display: block;
content: '';
height: 100%;
background-image: url('/iris/assets/icon.svg');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
animation-name: logo-pulse;
animation-name: loader;
background: #444444;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
@ -66,9 +68,7 @@
<div id="app">
<!-- ReactJS app gets injected here, replacing the loader -->
<div id="app-loading">
<div id="app-loading-logo"></div>
</div>
<div id="app-loading"></div>
</div>
</body>
@ -77,7 +77,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1525121769";
var build = "1525163067";
var version = "3.17.4";
// Construct the script tag

44
src/index.html
View File

@ -31,30 +31,32 @@
<!-- Loading screen -->
<style>
@keyframes logo-pulse {
0% { opacity: 0.05; }
50% { opacity: 0.3; }
100% { opacity: 0.05; }
html {
background-color: #121212;
}
@keyframes loader {
0% { left: 0; right: 100%; }
50% { left: 0; right: 0; }
100% { left: 100%; right: 0; }
}
#app-loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #FFFFFF;
background-color: #121212;
top: 50vh;
right: 25vw;
left: 25vw;
width: 50vw;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #1A1A1A;
}
#app-loading-logo {
width: 80%;
max-width: 160px;
margin: 0 auto;
#app-loading::before {
position: absolute;
display: block;
content: '';
height: 100%;
background-image: url('/iris/assets/icon.svg');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
animation-name: logo-pulse;
animation-name: loader;
background: #444444;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
@ -66,9 +68,7 @@
<div id="app">
<!-- ReactJS app gets injected here, replacing the loader -->
<div id="app-loading">
<div id="app-loading-logo"></div>
</div>
<div id="app-loading"></div>
</div>
</body>

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

@ -230,6 +230,19 @@ class Snapcast extends React.Component{
</select>
</div>
</div>
<div className="field">
<div className="name">
Volume
</div>
<div className="input">
<VolumeControl
volume={group.volume}
mute={group.muted}
onVolumeChange={percent => this.props.pusherActions.setSnapcastGroupVolume(group.id, percent)}
onMuteChange={mute => this.props.pusherActions.setSnapcastGroupMute(group.id, mute)}
/>
</div>
</div>
<div className="field">
<div className="name">
Clients

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

@ -265,3 +265,19 @@ export function setSnapcastGroupStream(id, stream_id){
}
}
export function setSnapcastGroupMute(id, mute){
return {
type: 'PUSHER_SET_SNAPCAST_GROUP_MUTE',
id: id,
mute: mute
}
}
export function setSnapcastGroupVolume(id, percent){
return {
type: 'PUSHER_SET_SNAPCAST_GROUP_VOLUME',
id: id,
percent: percent
}
}

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

@ -873,6 +873,37 @@ const PusherMiddleware = (function(){
);
break
case 'PUSHER_SET_SNAPCAST_GROUP_MUTE':
var group = store.getState().pusher.snapcast_groups[action.id];
var data = {
method: 'Group.SetMute',
params: {
id: action.id,
mute: action.mute
}
}
request(store, 'snapcast_instruct', data)
.then(
response => {
store.dispatch({
type: 'PUSHER_SNAPCAST_GROUP_UPDATED',
key: action.id,
group: {
muted: response.mute
}
})
},
error => {
store.dispatch(coreActions.handleException(
'Error',
error,
error.message
));
}
);
break
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);