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

Responsive Snapcast; Customisable scrollWheel attribute, fixes #272

Browse Source
This commit is contained in:
James Barnsley
2018-04-19 08:05:42 +12:00
parent 6035963f1f
commit 02cd964e1e
7 changed files with 25710 additions and 23742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
mopidy_iris/static/app.css
View File

@ -4344,9 +4344,9 @@ input[type="submit"] {
.snapcast .group.list .list-item.client > .latency input { .snapcast .group.list .list-item.client > .latency input {
width: 20%; } width: 20%; }
.snapcast .group.list .list-item.client .volume-control { .snapcast .group.list .list-item.client .volume-control {
display: block; display: inline-block;
padding-top: 12px; vertical-align: middle;
float: left; padding-top: 4px;
width: 80%; width: 80%;
padding-right: 10px; padding-right: 10px;
box-sizing: border-box; } box-sizing: border-box; }
@ -4360,9 +4360,9 @@ input[type="submit"] {
.snapcast .group.list .list-item.client .volume-control.muted .slider .progress { .snapcast .group.list .list-item.client .volume-control.muted .slider .progress {
background: #a3a19f; } background: #a3a19f; }
.snapcast .group.list .list-item.client .latency-control { .snapcast .group.list .list-item.client .latency-control {
display: block; display: inline-block;
padding-top: 12px; vertical-align: middle;
float: left; padding-top: 4px;
width: 80%; width: 80%;
padding-right: 10px; padding-right: 10px;
box-sizing: border-box; } box-sizing: border-box; }
@ -4381,20 +4381,27 @@ input[type="submit"] {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
@media (max-width: 800px) { @media (max-width: 800px) {
.snapcast .group.list .list-item.header { .snapcast .group.list .list-item {
display: block; } padding-left: 0 !important;
.snapcast .group.list .list-item.header .volume, padding-right: 0 !important; }
.snapcast .group.list .list-item.header .latency { .snapcast .group.list .list-item.header {
display: none !important; } display: block; }
.snapcast .group.list .list-item .col { .snapcast .group.list .list-item.header .volume,
float: none !important; .snapcast .group.list .list-item.header .latency {
width: auto !important; display: none !important; }
padding-left: 0; .snapcast .group.list .list-item .col {
padding-right: 0; } float: none !important;
.snapcast .group.list .list-item .col::after { width: auto !important;
content: ''; padding-left: 0;
clear: both; padding-right: 0; }
display: block; } } .snapcast .group.list .list-item .col::after {
content: '';
clear: both;
display: block; }
.snapcast .group.list .list-item .col:not(.header) {
line-height: 45px; }
.snapcast .group.list .list-item .col.volume {
padding-bottom: 20px !important; } }
aside { aside {
position: fixed; position: fixed;

49323
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

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

@ -49,23 +49,25 @@ export default class LatencyControl extends React.Component{
} }
handleWheel(e){ handleWheel(e){
if (this.props.scrollWheel){
// Identify which direction we've scrolled (inverted) // Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly // This is simplified and doesn't consider momentum as it varies wildly
// between browsers and devices // between browsers and devices
var direction = (e.deltaY > 0 ? -1 : 1) var direction = (e.deltaY > 0 ? -1 : 1)
var value = this.props.value; var value = this.props.value;
value += direction * 5 value += direction * 5
if (value > this.props.max){ if (value > this.props.max){
value = this.props.max; value = this.props.max;
} else if (value < -this.props.max){ } else if (value < -this.props.max){
value = -this.props.max; value = -this.props.max;
}
this.props.onChange(value);
e.preventDefault();
} }
this.props.onChange(value);
e.preventDefault();
} }
render(){ render(){

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

@ -118,6 +118,7 @@ class PlaybackControls extends React.Component{
<section className="volume"> <section className="volume">
<VolumeControl <VolumeControl
scrollWheel
volume={this.props.volume} volume={this.props.volume}
mute={this.props.mute} mute={this.props.mute}
onVolumeChange={percent => this.props.mopidyActions.setVolume(percent)} onVolumeChange={percent => this.props.mopidyActions.setVolume(percent)}

28
src/js/components/VolumeControl.js
View File

@ -26,23 +26,25 @@ export default class VolumeControl extends React.Component{
} }
handleWheel(e){ handleWheel(e){
if (this.props.scrollWheel){
// Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly
// between browsers and devices
var direction = (e.deltaY > 0 ? -1 : 1)
var percent = this.props.volume;
// Identify which direction we've scrolled (inverted) percent += direction * 5
// This is simplified and doesn't consider momentum as it varies wildly
// between browsers and devices
var direction = (e.deltaY > 0 ? -1 : 1)
var percent = this.props.volume;
percent += direction * 5 if (percent > 100){
percent = 100
} else if (percent < 0){
percent = 0
}
if (percent > 100){ this.props.onVolumeChange(percent);
percent = 100 e.preventDefault();
} else if (percent < 0){
percent = 0
} }
this.props.onVolumeChange(percent);
e.preventDefault();
} }
renderMuteButton(){ renderMuteButton(){

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

@ -84,9 +84,9 @@
} }
.volume-control { .volume-control {
display: block; display: inline-block;
padding-top: 12px; vertical-align: middle;
float: left; padding-top: 4px;
width: 80%; width: 80%;
padding-right: 10px; padding-right: 10px;
box-sizing: border-box; box-sizing: border-box;
@ -110,9 +110,9 @@
} }
.latency-control { .latency-control {
display: block; display: inline-block;
padding-top: 12px; vertical-align: middle;
float: left; padding-top: 4px;
width: 80%; width: 80%;
padding-right: 10px; padding-right: 10px;
box-sizing: border-box; box-sizing: border-box;
@ -141,6 +141,9 @@
@include responsive($bp_medium){ @include responsive($bp_medium){
padding-left: 0 !important;
padding-right: 0 !important;
&.header { &.header {
display: block; display: block;
@ -156,6 +159,14 @@
width: auto !important; width: auto !important;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
&:not(.header){
line-height: 45px;
}
&.volume {
padding-bottom: 20px !important;
}
} }
} }
} }