Adding pop-up volume control for snapcast, #274

mopidy_iris/static/app.css

@@ -4236,7 +4236,7 @@ input[type="submit"] {
   cursor: pointer; }
   .slider .track {
     position: absolute;
-    background: #323232;
+    background: rgba(0, 0, 0, 0.2);
     border-radius: 2px; }
     .slider .track .progress {
       position: absolute;
@@ -4382,7 +4382,7 @@ input[type="submit"] {
         margin-bottom: -8px; }
     .playback-controls section.progress {
       bottom: 10px;
-      left: 150px;
+      left: 130px;
       right: 260px;
       padding-left: 20px;
       padding-right: 20px;
@@ -4594,6 +4594,49 @@ input[type="submit"] {
             .snapcast .group .clients .client .col.volume, .snapcast .group .clients .client .col.latency {
               padding-top: 5px; } }
 
+.snapcast-volume-control {
+  position: relative; }
+  .snapcast-volume-control .volumes {
+    position: absolute;
+    bottom: 40px;
+    right: 0px;
+    width: 250px;
+    border-radius: 3px;
+    background: #454440;
+    color: #FFFFFF;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
+    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); }
+    .snapcast-volume-control .volumes:after {
+      content: '';
+      display: block;
+      width: 6px;
+      height: 6px;
+      background: #454440;
+      -ms-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+      position: absolute;
+      bottom: -3px;
+      right: 9px; }
+    .snapcast-volume-control .volumes .client {
+      padding: 10px 12px 6px; }
+      .snapcast-volume-control .volumes .client:not(:first-child) {
+        border-top: 1px solid rgba(255, 255, 255, 0.1); }
+      .snapcast-volume-control .volumes .client .name {
+        display: block;
+        padding-bottom: 5px; }
+      .snapcast-volume-control .volumes .client .volume-control {
+        display: block;
+        position: relative;
+        padding-left: 22px; }
+        .snapcast-volume-control .volumes .client .volume-control .mute-control {
+          position: absolute;
+          top: -2px;
+          left: -2px;
+          padding: 2px; }
+
 aside {
   position: fixed;
   top: 0;
@@ -5556,15 +5599,15 @@ main header {
     .dropdown-field .options:before {
       content: '';
       display: block;
-      position: absolute;
+      width: 6px;
-      top: -6px;
+      height: 6px;
-      right: 10px;
       background: #FFFFFF;
-      width: 0;
+      -ms-transform: rotate(45deg);
-      height: 0;
+      -webkit-transform: rotate(45deg);
-      border-left: 5px solid #121212;
+      transform: rotate(45deg);
-      border-right: 5px solid #121212;
+      position: absolute;
-      border-bottom: 6px solid #FFFFFF; }
+      top: -3px;
+      right: 9px; }
     .dropdown-field .options > .liner {
       color: #000000;
       background: #FFFFFF;
@@ -5572,18 +5615,6 @@ main header {
       max-height: 70vh;
       overflow-y: auto;
       border-radius: 3px; }
-      .dropdown-field .options > .liner:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -6px;
-        right: 10px;
-        background: #FFFFFF;
-        width: 0;
-        height: 0;
-        border-left: 5px solid #121212;
-        border-right: 5px solid #121212;
-        border-bottom: 6px solid #FFFFFF; }
       .dropdown-field .options > .liner .option {
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;

mopidy_iris/static/app.js

@@ -24042,7 +24042,7 @@ var VolumeControl = function (_React$Component) {
 				{ className: className, onWheel: function onWheel(e) {
 						return _this3.handleWheel(e);
 					} },
-				this.renderMuteButton(),
+				this.props.NoMuteButton ? null : this.renderMuteButton(),
 				_react2.default.createElement(
 					'div',
 					{ className: 'slider-wrapper' },
@@ -58357,6 +58357,10 @@ var _VolumeControl = __webpack_require__(96);
 
 var _VolumeControl2 = _interopRequireDefault(_VolumeControl);
 
+var _SnapcastVolumeControl = __webpack_require__(314);
+
+var _SnapcastVolumeControl2 = _interopRequireDefault(_SnapcastVolumeControl);
+
 var _Dater = __webpack_require__(33);
 
 var _Dater2 = _interopRequireDefault(_Dater);
@@ -58616,7 +58620,8 @@ var PlaybackControls = function (_React$Component) {
 					{ className: 'settings' },
 					this.renderConsumeButton(),
 					this.renderRandomButton(),
-					this.renderRepeatButton()
+					this.renderRepeatButton(),
+					this.props.snapcast_enabled ? _react2.default.createElement(_SnapcastVolumeControl2.default, null) : null
 				),
 				_react2.default.createElement(
 					'section',
@@ -58681,6 +58686,7 @@ var PlaybackControls = function (_React$Component) {
 
 var mapStateToProps = function mapStateToProps(state, ownProps) {
 	return {
+		snapcast_enabled: state.pusher.config.snapcast_enabled,
 		http_streaming_active: state.core.http_streaming_active,
 		http_streaming_enabled: state.core.http_streaming_enabled,
 		http_streaming_encoding: state.core.http_streaming_encoding,
@@ -76735,6 +76741,198 @@ exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 287 */,
+/* 288 */,
+/* 289 */,
+/* 290 */,
+/* 291 */,
+/* 292 */,
+/* 293 */,
+/* 294 */,
+/* 295 */,
+/* 296 */,
+/* 297 */,
+/* 298 */,
+/* 299 */,
+/* 300 */,
+/* 301 */,
+/* 302 */,
+/* 303 */,
+/* 304 */,
+/* 305 */,
+/* 306 */,
+/* 307 */,
+/* 308 */,
+/* 309 */,
+/* 310 */,
+/* 311 */,
+/* 312 */,
+/* 313 */,
+/* 314 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = __webpack_require__(0);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = __webpack_require__(3);
+
+var _redux = __webpack_require__(2);
+
+var _VolumeControl = __webpack_require__(96);
+
+var _VolumeControl2 = _interopRequireDefault(_VolumeControl);
+
+var _Icon = __webpack_require__(5);
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _helpers = __webpack_require__(1);
+
+var helpers = _interopRequireWildcard(_helpers);
+
+var _actions = __webpack_require__(16);
+
+var pusherActions = _interopRequireWildcard(_actions);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var SnapcastVolumeControl = function (_React$Component) {
+	_inherits(SnapcastVolumeControl, _React$Component);
+
+	function SnapcastVolumeControl(props) {
+		_classCallCheck(this, SnapcastVolumeControl);
+
+		var _this = _possibleConstructorReturn(this, (SnapcastVolumeControl.__proto__ || Object.getPrototypeOf(SnapcastVolumeControl)).call(this, props));
+
+		_this.state = {
+			expanded: false
+		};
+		return _this;
+	}
+
+	_createClass(SnapcastVolumeControl, [{
+		key: 'componentDidMount',
+		value: function componentDidMount() {
+			if (this.props.pusher_connected && this.props.snapcast_enabled) {
+				this.props.pusherActions.getSnapcast();
+			}
+		}
+	}, {
+		key: 'renderVolumes',
+		value: function renderVolumes() {
+			var _this2 = this;
+
+			var clients = [];
+			for (var key in this.props.snapcast_clients) {
+				if (this.props.snapcast_clients.hasOwnProperty(key)) {
+					var client = this.props.snapcast_clients[key];
+					//if (client.connected){
+					clients.push(client);
+					//}
+				}
+			}
+
+			return _react2.default.createElement(
+				'div',
+				{ className: 'volumes' },
+				clients.map(function (client) {
+					var name = client.config.name ? client.config.name : client.host.name;
+
+					return _react2.default.createElement(
+						'div',
+						{ className: 'client', key: client.id },
+						_react2.default.createElement(
+							'span',
+							{ className: 'name' },
+							name
+						),
+						_react2.default.createElement(_VolumeControl2.default, {
+							className: 'client-volume-control',
+							volume: client.config.volume.percent,
+							mute: client.config.volume.muted,
+							onVolumeChange: function onVolumeChange(percent) {
+								return _this2.props.pusherActions.setSnapcastClientVolume(client.id, percent);
+							},
+							onMuteChange: function onMuteChange(mute) {
+								return _this2.props.pusherActions.setSnapcastClientMute(client.id, mute);
+							}
+						})
+					);
+				})
+			);
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var _this3 = this;
+
+			if (this.state.expanded) {
+				return _react2.default.createElement(
+					'span',
+					{ className: 'snapcast-volume-control' },
+					_react2.default.createElement(
+						'a',
+						{ className: 'control speakers active', onClick: function onClick(e) {
+								return _this3.setState({ expanded: !_this3.state.expanded });
+							} },
+						_react2.default.createElement(_Icon2.default, { name: 'speaker' })
+					),
+					this.renderVolumes()
+				);
+			} else {
+				return _react2.default.createElement(
+					'span',
+					{ className: 'snapcast-volume-control' },
+					_react2.default.createElement(
+						'a',
+						{ className: 'control speakers', onClick: function onClick(e) {
+								return _this3.setState({ expanded: !_this3.state.expanded });
+							} },
+						_react2.default.createElement(_Icon2.default, { name: 'speaker' })
+					)
+				);
+			}
+		}
+	}]);
+
+	return SnapcastVolumeControl;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, ownProps) {
+	return {
+		snapcast_enabled: state.pusher.config.snapcast_enabled,
+		pusher_connected: state.pusher.connected,
+		snapcast_clients: state.pusher.snapcast_clients
+	};
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+	return {
+		pusherActions: (0, _redux.bindActionCreators)(pusherActions, dispatch)
+	};
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(SnapcastVolumeControl);
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=app.js.map

mopidy_iris/static/index.html

@@ -77,7 +77,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1527585609";
+	var build = "1527670659";
 	var version = "3.19.0";
 
 	// Construct the script tag

src/js/components/Fields/PlaybackControls.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
 
 import ProgressSlider from './ProgressSlider'
 import VolumeControl from './VolumeControl'
+import SnapcastVolumeControl from './SnapcastVolumeControl'
 import Dater from './../Dater'
 import ArtistSentence from './../ArtistSentence'
 import Thumbnail from './../Thumbnail'
@@ -107,6 +108,7 @@ class PlaybackControls extends React.Component{
 					{this.renderConsumeButton()}
 					{this.renderRandomButton()}
 					{this.renderRepeatButton()}
+					{this.props.snapcast_enabled ? <SnapcastVolumeControl /> : null}
 				</section>
 
 				<section className="progress">
@@ -148,6 +150,7 @@ class PlaybackControls extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		snapcast_enabled: state.pusher.config.snapcast_enabled,
 		http_streaming_active: state.core.http_streaming_active,
 		http_streaming_enabled: state.core.http_streaming_enabled,
 		http_streaming_encoding: state.core.http_streaming_encoding,

src/js/components/Fields/SnapcastVolumeControl.js

@@ -0,0 +1,98 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import VolumeControl from './VolumeControl'
+import Icon from '../Icon'
+
+import * as helpers from '../../helpers'
+import * as pusherActions from '../../services/pusher/actions'
+
+class SnapcastVolumeControl extends React.Component{
+
+	constructor(props){
+		super(props);
+
+		this.state = {
+			expanded: false
+		}
+	}
+
+	componentDidMount(){
+		if (this.props.pusher_connected && this.props.snapcast_enabled){
+			this.props.pusherActions.getSnapcast();
+		}
+	}
+
+	renderVolumes(){
+
+		var clients = [];
+		for (var key in this.props.snapcast_clients){
+			if (this.props.snapcast_clients.hasOwnProperty(key)){
+				var client = this.props.snapcast_clients[key];
+				//if (client.connected){
+					clients.push(client);
+				//}
+			}
+		}
+
+		return (
+			<div className="volumes">
+				{
+					clients.map(client => {
+						var name = client.config.name ? client.config.name : client.host.name;
+
+						return (
+							<div className="client" key={client.id}>
+								<span className="name">
+									{name}
+								</span>
+								<VolumeControl 
+									className="client-volume-control"
+									volume={client.config.volume.percent}
+									mute={client.config.volume.muted}
+									onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, percent)}
+									onMuteChange={mute => this.props.pusherActions.setSnapcastClientMute(client.id, mute)}
+								/>
+							</div>
+						)
+					})
+				}
+			</div>
+		);
+	}
+
+	render(){
+		if (this.state.expanded){
+			return (
+				<span className="snapcast-volume-control">
+					<a className="control speakers active" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
+					{this.renderVolumes()}
+				</span>
+			);
+		} else {
+			return (
+				<span className="snapcast-volume-control">
+					<a className="control speakers" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
+				</span>
+			);
+		}
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		snapcast_enabled: state.pusher.config.snapcast_enabled,
+		pusher_connected: state.pusher.connected,
+		snapcast_clients: state.pusher.snapcast_clients
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		pusherActions: bindActionCreators(pusherActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SnapcastVolumeControl)

src/js/components/Fields/VolumeControl.js

@@ -78,7 +78,7 @@ export default class VolumeControl extends React.Component{
 
 		return (
 			<span className={className} onWheel={e => this.handleWheel(e)}>
-				{this.renderMuteButton()}
+				{this.props.NoMuteButton ? null : this.renderMuteButton()}
 				<div className="slider-wrapper">
 					<div className="slider horizontal" onClick={e => this.handleClick(e)}>
 						<div className="track">

src/scss/app.scss

@@ -15,6 +15,7 @@
 @import 'components/slider';
 @import 'components/playback-controls';
 @import 'components/snapcast';
+@import 'components/snapcast-volume-control';
 @import 'components/sidebar';
 @import 'components/lists';
 @import 'components/grid';

src/scss/components/_dropdown-field.scss

@@ -57,15 +57,15 @@
 		&:before {
 			content: '';
 			display: block;
-			position: absolute;
+			width: 6px;
-			top: -6px;
+			height: 6px;
-			right: 10px;
 			background: $white;
-			width: 0;
+			-ms-transform: rotate(45deg);
-			height: 0;
+			-webkit-transform: rotate(45deg);
-			border-left: 5px solid $darkest_grey;
+			transform: rotate(45deg);
-			border-right: 5px solid $darkest_grey;
+			position: absolute;
-			border-bottom: 6px solid $white;
+			top: -3px;
+			right: 9px;
 		}
 
 		& > .liner {
@@ -76,20 +76,6 @@
 			overflow-y: auto;
 			border-radius: 3px;
 
-			&:before {
-				content: '';
-				display: block;
-				position: absolute;
-				top: -6px;
-				right: 10px;
-				background: $white;
-				width: 0;
-				height: 0;
-				border-left: 5px solid $darkest_grey;
-				border-right: 5px solid $darkest_grey;
-				border-bottom: 6px solid $white;
-			}
-
 			.option {
 				@include animate();
 				position: relative;

src/scss/components/_playback-controls.scss

@@ -124,7 +124,7 @@
 
 		&.progress {
 			bottom: 10px;
-			left: 150px;
+			left: 130px;
 			right: 260px;
 			padding-left: 20px;
 			padding-right: 20px;

src/scss/components/_slider.scss

@@ -5,7 +5,7 @@
 
 	.track {
 		position: absolute;
-		background: lighten($dark_grey, 10%);
+		background: rgba(0,0,0,0.2);
 		border-radius: 2px;
 
 		.progress {

src/scss/components/_snapcast-volume-control.scss

@@ -0,0 +1,59 @@
+
+.snapcast-volume-control {
+	position: relative;
+
+	.volumes {
+		position: absolute;
+		bottom: 40px;
+		right: 0px;
+		width: 250px;
+		border-radius: 3px;
+		background: lighten($grey,5%);
+		color: $white;
+		font-size: 14px;
+		font-weight: 500;
+		text-align: left;
+		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
+
+		&:after {
+			content: '';
+			display: block;
+			width: 6px;
+			height: 6px;
+			background: lighten($grey,5%);
+			-ms-transform: rotate(45deg);
+			-webkit-transform: rotate(45deg);
+			transform: rotate(45deg);
+			position: absolute;
+			bottom: -3px;
+			right: 9px;
+		}
+
+		.client {
+			padding: 10px 12px 6px;
+
+			&:not(:first-child) {
+				border-top: 1px solid rgba(255,255,255,0.1);
+			}
+
+			.name {
+				display: block;
+				padding-bottom: 5px;
+			}
+
+			.volume-control {
+				display: block;
+				position: relative;
+				padding-left: 22px;
+
+				.mute-control {
+					position: absolute;
+					top: -2px;
+					left: -2px;
+					padding: 2px;
+				}
+			}
+		}
+	}
+}
+