Adding advanced server controls
This commit is contained in:
James Barnsley
@ -4291,84 +4291,73 @@ input[type="submit"] {
|
||||
left: 0;
|
||||
right: 0; } }
|
||||
|
||||
.snapcast .group.list {
|
||||
.snapcast .group:not(:first-child) {
|
||||
padding-top: 20px; }
|
||||
|
||||
.snapcast .group .clients {
|
||||
padding: 0 10px; }
|
||||
.snapcast .group.list:not(:first-child) {
|
||||
padding-top: 15px; }
|
||||
.snapcast .group.list .list-item {
|
||||
padding: 20px 0 0 0; }
|
||||
.snapcast .group.list .list-item:not(.header) {
|
||||
border: 0; }
|
||||
.snapcast .group.list .list-item > .name {
|
||||
width: 40%;
|
||||
padding-bottom: 4px;
|
||||
position: relative; }
|
||||
.snapcast .group.list .list-item > .name .status {
|
||||
position: absolute;
|
||||
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 {
|
||||
width: 28%;
|
||||
padding-left: 2%; }
|
||||
.snapcast .group.list .list-item > .latency {
|
||||
width: 28%;
|
||||
padding-left: 2%; }
|
||||
.snapcast .group.list .list-item.header {
|
||||
padding-top: 0;
|
||||
vertical-align: bottom;
|
||||
cursor: default; }
|
||||
.snapcast .group.list .list-item.header .name {
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
line-height: 14px; }
|
||||
.snapcast .group.list .list-item.client {
|
||||
padding: 20px 0 0 0; }
|
||||
.snapcast .group.list .list-item.client::after {
|
||||
.snapcast .group .clients .client {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clear: both; }
|
||||
.snapcast .group .clients .client::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.snapcast .group.list .list-item.client > .name {
|
||||
.snapcast .group .clients .client:not(:first-child) {
|
||||
padding-top: 8px; }
|
||||
.snapcast .group .clients .client > .name {
|
||||
width: 40%;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
.snapcast .group .clients .client > .name input {
|
||||
width: 100%;
|
||||
padding-right: 30px; }
|
||||
.snapcast .group .clients .client > .name .tools {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
z-index: 2; }
|
||||
.snapcast .group .clients .client > .name .tools .disconnected {
|
||||
padding: 12px 0;
|
||||
cursor: default;
|
||||
font-size: 12px; }
|
||||
.snapcast .group .clients .client > .volume {
|
||||
width: 28%;
|
||||
padding-left: 2%; }
|
||||
.snapcast .group .clients .client > .latency {
|
||||
width: 28%;
|
||||
padding-left: 2%; }
|
||||
.snapcast .group .clients .client > .volume input,
|
||||
.snapcast .group .clients .client > .latency input {
|
||||
width: 20%; }
|
||||
.snapcast .group.list .list-item.client .volume-control {
|
||||
.snapcast .group .clients .client .volume-control {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 4px;
|
||||
width: 80%;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box; }
|
||||
.snapcast .group.list .list-item.client .volume-control .mute-control {
|
||||
.snapcast .group .clients .client .volume-control .mute-control {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
border: 0; }
|
||||
.snapcast .group.list .list-item.client .volume-control .slider-wrapper {
|
||||
margin-left: 40px; }
|
||||
.snapcast .group.list .list-item.client .volume-control.muted .slider .progress {
|
||||
.snapcast .group .clients .client .volume-control .slider-wrapper {
|
||||
margin-left: 25px; }
|
||||
.snapcast .group .clients .client .volume-control.muted .slider .progress {
|
||||
background: #a3a19f; }
|
||||
.snapcast .group.list .list-item.client .latency-control {
|
||||
.snapcast .group .clients .client .latency-control {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 4px;
|
||||
width: 80%;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box; }
|
||||
.snapcast .group.list .list-item.client .latency-control .zero {
|
||||
.snapcast .group .clients .client .latency-control .zero {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
@ -4376,33 +4365,28 @@ input[type="submit"] {
|
||||
width: 1px;
|
||||
background: #383734;
|
||||
z-index: 1; }
|
||||
.snapcast .group.list .list-item.client .latency-control .progress.positive {
|
||||
.snapcast .group .clients .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 {
|
||||
.snapcast .group .clients .client .latency-control .progress.negative {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
@media (max-width: 800px) {
|
||||
.snapcast .group.list .list-item {
|
||||
.snapcast .group .clients .client {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important; }
|
||||
.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 {
|
||||
.snapcast .group .clients .client .col {
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.snapcast .group.list .list-item .col::after {
|
||||
.snapcast .group .clients .client .col::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.snapcast .group.list .list-item .col:not(.header) {
|
||||
.snapcast .group .clients .client .col:not(.header) {
|
||||
line-height: 45px; }
|
||||
.snapcast .group.list .list-item .col.volume {
|
||||
.snapcast .group .clients .client .col.volume {
|
||||
padding-bottom: 20px !important; } }
|
||||
|
||||
aside {
|
||||
@ -4549,7 +4533,6 @@ aside {
|
||||
position: relative;
|
||||
margin: 0 -10px -1px -10px;
|
||||
padding: 14px 30px 13px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
@ -4604,20 +4587,18 @@ aside {
|
||||
.list .list-item .uri-placeholder {
|
||||
word-break: break-all; }
|
||||
|
||||
.list.track-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.track-list .list-item .col.name {
|
||||
width: 40%; }
|
||||
|
||||
.list.track-list .list-item .col.artists, .list.track-list .list-item .col.album {
|
||||
width: 25%; }
|
||||
|
||||
.list.track-list .list-item .col.duration {
|
||||
width: 5%; }
|
||||
|
||||
:root .dragging .list.track-list .list-item.hover, .list.track-list .list-item.touch-drag-hover {
|
||||
border-top: 3px solid #32b5f2;
|
||||
margin-top: -3px;
|
||||
background: transparent; }
|
||||
|
||||
.list.track-list .list-item.has-touch-drag-zone {
|
||||
padding-left: 45px; }
|
||||
.list.track-list .list-item.has-touch-drag-zone .drag-zone {
|
||||
@ -4636,36 +4617,40 @@ aside {
|
||||
margin-top: -6px;
|
||||
pointer-events: none; }
|
||||
|
||||
.list.playlist-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.playlist-list .list-item .col.name {
|
||||
width: 50%; }
|
||||
|
||||
.list.playlist-list .list-item .col.owner {
|
||||
width: 20%; }
|
||||
|
||||
.list.playlist-list .list-item .col.source, .list.playlist-list .list-item .col.can_edit, .list.playlist-list .list-item .col.tracks_total, .list.playlist-list .list-item .col.popularity {
|
||||
width: 10%; }
|
||||
|
||||
.list.album-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.album-list .list-item .col.name, .list.album-list .list-item .col.artists {
|
||||
width: 30%; }
|
||||
|
||||
.list.album-list .list-item .col.added_at, .list.album-list .list-item .col.release_date {
|
||||
width: 15%; }
|
||||
|
||||
.list.album-list .list-item .col.tracks_total {
|
||||
width: 10%; }
|
||||
|
||||
.list.library-local-album-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.library-local-album-list .list-item .col.name, .list.library-local-album-list .list-item .col.artists {
|
||||
width: 45%; }
|
||||
|
||||
.list.library-local-album-list .list-item .col.tracks_total {
|
||||
width: 10%; }
|
||||
|
||||
.list.artist-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.artist-list .list-item .col.name {
|
||||
width: 70%; }
|
||||
|
||||
.list.artist-list .list-item .col.followers_total, .list.artist-list .list-item .col.popularity {
|
||||
width: 15%; }
|
||||
|
||||
.list.queue-track-list {
|
||||
cursor: pointer; }
|
||||
.list.queue-track-list .list-item {
|
||||
padding-right: 60px; }
|
||||
.list.queue-track-list .list-item .col.name, .list.queue-track-list .list-item .col.artists, .list.queue-track-list .list-item .col.album {
|
||||
@ -4681,14 +4666,16 @@ aside {
|
||||
content: ')';
|
||||
display: inline-block; }
|
||||
|
||||
.list.queue-history-track-list .list-item {
|
||||
cursor: pointer; }
|
||||
.list.queue-history-track-list .list-item .col.name {
|
||||
width: 60%; }
|
||||
|
||||
.list.queue-history-track-list .list-item .col.played_at, .list.queue-history-track-list .list-item .col.source {
|
||||
width: 20%; }
|
||||
|
||||
.list.related-artist-list {
|
||||
padding-bottom: 20px; }
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer; }
|
||||
.list.related-artist-list .artist {
|
||||
display: block;
|
||||
border: 0;
|
||||
@ -4758,7 +4745,8 @@ aside {
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
padding-left: 0.25em; }
|
||||
.list.queue-track-list .list-item .added .by {
|
||||
.list.queue-track-list .list-item .added .by,
|
||||
.list.queue-track-list .list-item .added .empty {
|
||||
display: none; }
|
||||
.list.queue-track-list .list-item .added .from {
|
||||
padding-left: 14px;
|
||||
@ -5343,6 +5331,8 @@ main header {
|
||||
display: block; }
|
||||
.dropdown-field.no-status-icon .options .option {
|
||||
padding-left: 12px; }
|
||||
.dropdown-field.no-label .label > .text {
|
||||
display: none; }
|
||||
.dropdown-field .options {
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
|
||||
@ -4772,11 +4772,14 @@ exports.getQueueMetadata = getQueueMetadata;
|
||||
exports.queueMetadataChanged = queueMetadataChanged;
|
||||
exports.addQueueMetadata = addQueueMetadata;
|
||||
exports.getSnapcast = getSnapcast;
|
||||
exports.snapcastServerLoaded = snapcastServerLoaded;
|
||||
exports.setSnapcastClientName = setSnapcastClientName;
|
||||
exports.setSnapcastClientMute = setSnapcastClientMute;
|
||||
exports.setSnapcastClientVolume = setSnapcastClientVolume;
|
||||
exports.setSnapcastClientLatency = setSnapcastClientLatency;
|
||||
exports.setSnapcastClientGroup = setSnapcastClientGroup;
|
||||
exports.deleteSnapcastClient = deleteSnapcastClient;
|
||||
exports.setSnapcastGroupStream = setSnapcastGroupStream;
|
||||
|
||||
/**
|
||||
* Actions and Action Creators
|
||||
@ -4989,6 +4992,13 @@ function getSnapcast() {
|
||||
};
|
||||
}
|
||||
|
||||
function snapcastServerLoaded(server) {
|
||||
return {
|
||||
type: 'PUSHER_SNAPCAST_SERVER_LOADED',
|
||||
server: server
|
||||
};
|
||||
}
|
||||
|
||||
function setSnapcastClientName(id, name) {
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
|
||||
@ -5021,6 +5031,15 @@ function setSnapcastClientLatency(id, latency) {
|
||||
};
|
||||
}
|
||||
|
||||
function setSnapcastClientGroup(id, group_id) {
|
||||
console.log(id, group_id);
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_CLIENT_GROUP',
|
||||
id: id,
|
||||
group_id: group_id
|
||||
};
|
||||
}
|
||||
|
||||
function deleteSnapcastClient(id) {
|
||||
return {
|
||||
type: 'PUSHER_DELETE_SNAPCAST_CLIENT',
|
||||
@ -5028,6 +5047,14 @@ function deleteSnapcastClient(id) {
|
||||
};
|
||||
}
|
||||
|
||||
function setSnapcastGroupStream(id, stream_id) {
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_GROUP_STREAM',
|
||||
id: id,
|
||||
stream_id: stream_id
|
||||
};
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 18 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
@ -19458,6 +19485,9 @@ var DropdownField = function (_React$Component) {
|
||||
if (this.props.no_status_icon) {
|
||||
className += ' no-status-icon';
|
||||
}
|
||||
if (this.props.no_label) {
|
||||
className += ' no-label';
|
||||
}
|
||||
if (this.props.button) {
|
||||
className += ' buttonify';
|
||||
}
|
||||
@ -24492,6 +24522,14 @@ var Track = function (_React$Component) {
|
||||
);
|
||||
break;
|
||||
|
||||
case "search":
|
||||
var link = _react2.default.createElement(
|
||||
_URILink2.default,
|
||||
{ type: 'search', uri: track.added_from.replace("iris:", "") },
|
||||
'search'
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
var link = _react2.default.createElement(
|
||||
_URILink2.default,
|
||||
@ -24528,7 +24566,7 @@ var Track = function (_React$Component) {
|
||||
} else {
|
||||
var added = _react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'placeholder' },
|
||||
{ className: 'empty' },
|
||||
'-'
|
||||
);
|
||||
}
|
||||
@ -49459,7 +49497,17 @@ function reducer() {
|
||||
return Object.assign({}, pusher, { config: action.config });
|
||||
|
||||
case 'PUSHER_SNAPCAST':
|
||||
return Object.assign({}, pusher, { snapcast_clients: action.snapcast_clients, snapcast_groups: action.snapcast_groups });
|
||||
return Object.assign({}, pusher, {
|
||||
snapcast_streams: action.snapcast_streams,
|
||||
snapcast_groups: action.snapcast_groups,
|
||||
snapcast_clients: action.snapcast_clients
|
||||
});
|
||||
|
||||
case 'PUSHER_SNAPCAST_GROUP_UPDATED':
|
||||
var snapcast_groups = Object.assign({}, pusher.snapcast_groups);
|
||||
var group = snapcast_groups[action.key];
|
||||
snapcast_groups[action.key] = Object.assign({}, group, action.group);
|
||||
return Object.assign({}, pusher, { snapcast_groups: snapcast_groups });
|
||||
|
||||
case 'PUSHER_SNAPCAST_CLIENT_UPDATED':
|
||||
var snapcast_clients = Object.assign({}, pusher.snapcast_clients);
|
||||
@ -51432,12 +51480,21 @@ var PusherMiddleware = function () {
|
||||
**/
|
||||
case 'PUSHER_GET_SNAPCAST':
|
||||
request(store, 'snapcast_instruct', action.data).then(function (response) {
|
||||
store.dispatch(pusherActions.snapcastServerLoaded(response.server));
|
||||
}, function (error) {
|
||||
store.dispatch(coreActions.handleException('Could not get Snapcast server', error, error.message));
|
||||
});
|
||||
break;
|
||||
|
||||
case 'PUSHER_SNAPCAST_SERVER_LOADED':
|
||||
console.log(action);
|
||||
var groups = {};
|
||||
var clients = {};
|
||||
var streams = {};
|
||||
|
||||
// Loop all the groups
|
||||
for (var i = 0; i < response.server.groups.length; i++) {
|
||||
var group = response.server.groups[i];
|
||||
for (var i = 0; i < action.server.groups.length; i++) {
|
||||
var group = action.server.groups[i];
|
||||
var clients_ids = [];
|
||||
|
||||
// And now this groups' clients
|
||||
@ -51456,13 +51513,17 @@ var PusherMiddleware = function () {
|
||||
};
|
||||
}
|
||||
|
||||
// Loop all the streams
|
||||
for (var i = 0; i < action.server.streams.length; i++) {
|
||||
var stream = action.server.streams[i];
|
||||
streams[stream.id] = stream;
|
||||
}
|
||||
|
||||
store.dispatch({
|
||||
type: 'PUSHER_SNAPCAST',
|
||||
snapcast_clients: clients,
|
||||
snapcast_groups: groups
|
||||
});
|
||||
}, function (error) {
|
||||
store.dispatch(coreActions.handleException('Could not get Snapcast server', error, error.message));
|
||||
snapcast_groups: groups,
|
||||
snapcast_streams: streams
|
||||
});
|
||||
break;
|
||||
|
||||
@ -51572,6 +51633,24 @@ var PusherMiddleware = function () {
|
||||
});
|
||||
break;
|
||||
|
||||
case 'PUSHER_SET_SNAPCAST_CLIENT_GROUP':
|
||||
var group = store.getState().pusher.snapcast_groups[action.group_id];
|
||||
var clients_ids = Object.assign([], group.clients_ids, [action.id]);
|
||||
var data = {
|
||||
method: 'Group.SetClients',
|
||||
params: {
|
||||
id: action.group_id,
|
||||
clients: clients_ids
|
||||
}
|
||||
};
|
||||
|
||||
request(store, 'snapcast_instruct', data).then(function (response) {
|
||||
store.dispatch(pusherActions.snapcastServerLoaded(response.server));
|
||||
}, function (error) {
|
||||
store.dispatch(coreActions.handleException('Error', error, error.message));
|
||||
});
|
||||
break;
|
||||
|
||||
case 'PUSHER_DELETE_SNAPCAST_CLIENT':
|
||||
var data = {
|
||||
method: 'Server.DeleteClient',
|
||||
@ -51590,6 +51669,29 @@ var PusherMiddleware = function () {
|
||||
});
|
||||
break;
|
||||
|
||||
case 'PUSHER_SET_SNAPCAST_GROUP_STREAM':
|
||||
var group = store.getState().pusher.snapcast_groups[action.id];
|
||||
var data = {
|
||||
method: 'Group.SetStream',
|
||||
params: {
|
||||
id: action.id,
|
||||
stream_id: action.stream_id
|
||||
}
|
||||
};
|
||||
|
||||
request(store, 'snapcast_instruct', data).then(function (response) {
|
||||
store.dispatch({
|
||||
type: 'PUSHER_SNAPCAST_GROUP_UPDATED',
|
||||
key: action.id,
|
||||
group: {
|
||||
stream_id: action.stream_id
|
||||
}
|
||||
});
|
||||
}, function (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);
|
||||
@ -51722,6 +51824,7 @@ var MopidyMiddleware = function () {
|
||||
break;
|
||||
|
||||
case 'event:trackPlaybackEnded':
|
||||
// This doesn't fire when it's the last track in the queue... bug in Mopidy?
|
||||
store.dispatch(mopidyActions.clearCurrentTrack());
|
||||
store.dispatch(mopidyActions.getTimePosition());
|
||||
break;
|
||||
@ -68022,7 +68125,7 @@ var Search = function (_React$Component) {
|
||||
_react2.default.createElement(
|
||||
'section',
|
||||
{ className: 'list-wrapper' },
|
||||
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: this.props.params.query, show_source_icon: true }),
|
||||
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:' + this.props.params.query, show_source_icon: true }),
|
||||
_react2.default.createElement(_LazyLoadListener2.default, { enabled: this.props['tracks_more'] && spotify_search_enabled, loadMore: function loadMore() {
|
||||
return _this2.loadMore('tracks');
|
||||
} })
|
||||
@ -68127,7 +68230,7 @@ var Search = function (_React$Component) {
|
||||
var tracks_section = _react2.default.createElement(
|
||||
'section',
|
||||
{ className: 'list-wrapper' },
|
||||
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: this.props.params.query, show_source_icon: true }),
|
||||
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:' + this.props.params.query, show_source_icon: true }),
|
||||
_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props['tracks_more'] && spotify_search_enabled, loadMore: function loadMore() {
|
||||
return _this2.loadMore('tracks');
|
||||
} })
|
||||
@ -70288,6 +70391,10 @@ var _TextField = __webpack_require__(257);
|
||||
|
||||
var _TextField2 = _interopRequireDefault(_TextField);
|
||||
|
||||
var _DropdownField = __webpack_require__(40);
|
||||
|
||||
var _DropdownField2 = _interopRequireDefault(_DropdownField);
|
||||
|
||||
var _helpers = __webpack_require__(1);
|
||||
|
||||
var helpers = _interopRequireWildcard(_helpers);
|
||||
@ -70372,17 +70479,34 @@ var Snapcast = function (_React$Component) {
|
||||
);
|
||||
}
|
||||
|
||||
var streams = [];
|
||||
for (var key in this.props.snapcast_streams) {
|
||||
if (this.props.snapcast_streams.hasOwnProperty(key)) {
|
||||
streams.push(this.props.snapcast_streams[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// Construct a simple array of our groups index
|
||||
var groups = [];
|
||||
var groups_dropdown = [];
|
||||
for (var group_id in this.props.snapcast_groups) {
|
||||
if (this.props.snapcast_groups.hasOwnProperty(group_id)) {
|
||||
var group = this.props.snapcast_groups[group_id];
|
||||
|
||||
// Append to our groups dropdown source array
|
||||
groups_dropdown.push({
|
||||
label: group.name ? group.name : group.stream_id,
|
||||
value: group.id
|
||||
});
|
||||
|
||||
// Merge the group's clients into this group (also as a simple array)
|
||||
var clients = [];
|
||||
for (var i = 0; i < group.clients_ids.length; i++) {
|
||||
if (this.props.snapcast_clients.hasOwnProperty(group.clients_ids[i])) {
|
||||
clients.push(this.props.snapcast_clients[group.clients_ids[i]]);
|
||||
var client = this.props.snapcast_clients[group.clients_ids[i]];
|
||||
if (client.connected || this.props.snapcast_show_disconnected_clients) {
|
||||
clients.push(client);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70395,29 +70519,89 @@ var Snapcast = function (_React$Component) {
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'snapcast' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'field checkbox' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'input' },
|
||||
_react2.default.createElement(
|
||||
'button',
|
||||
{ onClick: function onClick(e) {
|
||||
return _this2.props.pusherActions.getSnapcast();
|
||||
} },
|
||||
'Refresh'
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'label',
|
||||
null,
|
||||
_react2.default.createElement('input', {
|
||||
type: 'checkbox',
|
||||
name: 'snapcast_show_disconnected_clients',
|
||||
checked: this.props.snapcast_show_disconnected_clients,
|
||||
onChange: function onChange(e) {
|
||||
return _this2.props.uiActions.set({ snapcast_show_disconnected_clients: !_this2.props.snapcast_show_disconnected_clients });
|
||||
} }),
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'label' },
|
||||
'Show disconnected clients'
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
groups.map(function (group) {
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'list group', key: group.id },
|
||||
{ className: 'group', key: group.id },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'list-item header' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'col name' },
|
||||
group.name ? group.name : 'Untitled group'
|
||||
'h3',
|
||||
{ className: 'name' },
|
||||
group.name ? group.name : group.stream_id
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'col volume' },
|
||||
'Volume'
|
||||
{ className: 'field dropdown' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'name' },
|
||||
'Source'
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'col latency' },
|
||||
'Latency'
|
||||
{ className: 'input' },
|
||||
_react2.default.createElement(
|
||||
'select',
|
||||
{ onChange: function onChange(e) {
|
||||
return _this2.props.pusherActions.setSnapcastGroupStream(group.id, e.target.value);
|
||||
}, value: group.stream_id },
|
||||
streams.map(function (stream) {
|
||||
return _react2.default.createElement(
|
||||
'option',
|
||||
{ value: stream.id, key: stream.id },
|
||||
stream.id,
|
||||
' (',
|
||||
stream.status,
|
||||
')'
|
||||
);
|
||||
})
|
||||
)
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'field' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'name' },
|
||||
'Clients'
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'input' },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'list clients' },
|
||||
group.clients.map(function (client) {
|
||||
var name = client.config.name ? client.config.name : client.host.name;
|
||||
return _react2.default.createElement(
|
||||
@ -70432,24 +70616,13 @@ var Snapcast = function (_React$Component) {
|
||||
},
|
||||
value: name
|
||||
}),
|
||||
client.connected ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'status has-tooltip' },
|
||||
_react2.default.createElement(_reactFontawesome2.default, { className: 'green-text', name: 'circle' }),
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'tooltip' },
|
||||
'Connected'
|
||||
)
|
||||
) : _react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'status has-tooltip' },
|
||||
_react2.default.createElement(_reactFontawesome2.default, { className: 'grey-text', name: 'circle' }),
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'tooltip' },
|
||||
'Not connected'
|
||||
)
|
||||
'div',
|
||||
{ className: 'tools' },
|
||||
client.connected ? null : _react2.default.createElement(_reactFontawesome2.default, { className: 'disconnected red-text', name: 'plug' }),
|
||||
_react2.default.createElement(_DropdownField2.default, { icon: 'cog', name: 'Group', no_label: true, value: group.id, options: groups_dropdown, handleChange: function handleChange(val) {
|
||||
_this2.props.pusherActions.setSnapcastClientGroup(client.id, group.id);_this2.props.uiActions.hideContextMenu();
|
||||
} })
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
@ -70493,6 +70666,9 @@ var Snapcast = function (_React$Component) {
|
||||
)
|
||||
);
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
})
|
||||
);
|
||||
@ -70506,6 +70682,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
|
||||
return {
|
||||
snapcast_enabled: state.pusher.config.snapcast_enabled,
|
||||
pusher_connected: state.pusher.connected,
|
||||
snapcast_show_disconnected_clients: state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false,
|
||||
snapcast_streams: state.pusher.snapcast_streams,
|
||||
snapcast_groups: state.pusher.snapcast_groups,
|
||||
snapcast_clients: state.pusher.snapcast_clients
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -22,7 +22,7 @@
|
||||
"start_url": "/iris/index.html",
|
||||
"background_color": "#08d58f",
|
||||
"theme_color": "#181818",
|
||||
"display": "standalone",
|
||||
"display": "fullscreen",
|
||||
"app": {
|
||||
"background": {}
|
||||
}
|
||||
|
||||
@ -18,9 +18,12 @@
|
||||
<link rel="manifest" href="/iris/assets/manifest.json">
|
||||
|
||||
<!-- Apple app -->
|
||||
<link rel="apple-touch-startup-image" href="/iris/assets/logo-full-512.png">
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/logo-app-192.png">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/logo-app-512.png">
|
||||
<meta name="apple-mobile-web-app-title" content="Iris" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#121212">
|
||||
<link rel="apple-touch-startup-image" href="/iris/assets/logo-full-512.png" />
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/logo-app-192.png" />
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/logo-app-512.png" />
|
||||
|
||||
<!-- Raven Sentry -->
|
||||
<script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
|
||||
@ -73,7 +76,7 @@
|
||||
|
||||
// Release details
|
||||
// These are automatically injected to built HTML
|
||||
var build = "1524541685";
|
||||
var build = "1524953170";
|
||||
var version = "3.17.4";
|
||||
|
||||
// Construct the script tag
|
||||
|
||||
@ -51,6 +51,9 @@ export default class DropdownField extends React.Component{
|
||||
if (this.props.no_status_icon){
|
||||
className += ' no-status-icon';
|
||||
}
|
||||
if (this.props.no_label){
|
||||
className += ' no-label';
|
||||
}
|
||||
if (this.props.button){
|
||||
className += ' buttonify';
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import ArtistSentence from './ArtistSentence'
|
||||
import VolumeControl from './Fields/VolumeControl'
|
||||
import LatencyControl from './Fields/LatencyControl'
|
||||
import TextField from './Fields/TextField'
|
||||
import DropdownField from './Fields/DropdownField'
|
||||
|
||||
import * as helpers from '../helpers'
|
||||
import * as coreActions from '../services/core/actions'
|
||||
@ -58,12 +59,26 @@ class Snapcast extends React.Component{
|
||||
)
|
||||
}
|
||||
|
||||
var streams = [];
|
||||
for (var key in this.props.snapcast_streams){
|
||||
if (this.props.snapcast_streams.hasOwnProperty(key)){
|
||||
streams.push(this.props.snapcast_streams[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// Construct a simple array of our groups index
|
||||
var groups = [];
|
||||
var groups_dropdown = [];
|
||||
for (var group_id in this.props.snapcast_groups){
|
||||
if (this.props.snapcast_groups.hasOwnProperty(group_id)){
|
||||
var group = this.props.snapcast_groups[group_id];
|
||||
|
||||
// Append to our groups dropdown source array
|
||||
groups_dropdown.push({
|
||||
label: (group.name ? group.name : group.stream_id),
|
||||
value: group.id
|
||||
});
|
||||
|
||||
// Merge the group's clients into this group (also as a simple array)
|
||||
var clients = [];
|
||||
for (var i = 0; i < group.clients_ids.length; i++){
|
||||
@ -107,18 +122,34 @@ class Snapcast extends React.Component{
|
||||
{
|
||||
groups.map(group => {
|
||||
return (
|
||||
<div className="list group" key={group.id}>
|
||||
<div className="list-item header">
|
||||
<div className="col name">
|
||||
{group.name ? group.name : 'Untitled group'}
|
||||
<div className="group" key={group.id}>
|
||||
<h3 className="name">
|
||||
{group.name ? group.name : group.stream_id}
|
||||
</h3>
|
||||
<div className="field dropdown">
|
||||
<div className="name">
|
||||
Source
|
||||
</div>
|
||||
<div className="col volume">
|
||||
Volume
|
||||
</div>
|
||||
<div className="col latency">
|
||||
Latency
|
||||
<div className="input">
|
||||
<select onChange={e => this.props.pusherActions.setSnapcastGroupStream(group.id, e.target.value)} value={group.stream_id}>
|
||||
{
|
||||
streams.map(stream => {
|
||||
return (
|
||||
<option value={stream.id} key={stream.id}>
|
||||
{stream.id} ({stream.status})
|
||||
</option>
|
||||
);
|
||||
})
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="name">
|
||||
Clients
|
||||
</div>
|
||||
<div className="input">
|
||||
<div className="list clients">
|
||||
{
|
||||
group.clients.map(client => {
|
||||
var name = client.config.name ? client.config.name : client.host.name;
|
||||
@ -129,13 +160,10 @@ class Snapcast extends React.Component{
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
|
||||
value={name}
|
||||
/>
|
||||
{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 className="tools">
|
||||
{client.connected ? null : <FontAwesome className="disconnected red-text" name="plug" />}
|
||||
<DropdownField icon="cog" name="Group" no_label value={group.id} options={groups_dropdown} handleChange={val => {this.props.pusherActions.setSnapcastClientGroup(client.id, group.id); this.props.uiActions.hideContextMenu()}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col volume">
|
||||
<VolumeControl
|
||||
@ -167,6 +195,9 @@ class Snapcast extends React.Component{
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
@ -180,6 +211,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
snapcast_enabled: state.pusher.config.snapcast_enabled,
|
||||
pusher_connected: state.pusher.connected,
|
||||
snapcast_show_disconnected_clients: (state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false),
|
||||
snapcast_streams: state.pusher.snapcast_streams,
|
||||
snapcast_groups: state.pusher.snapcast_groups,
|
||||
snapcast_clients: state.pusher.snapcast_clients
|
||||
}
|
||||
|
||||
@ -203,6 +203,13 @@ export function getSnapcast(){
|
||||
}
|
||||
}
|
||||
|
||||
export function snapcastServerLoaded(server){
|
||||
return {
|
||||
type: 'PUSHER_SNAPCAST_SERVER_LOADED',
|
||||
server: server
|
||||
}
|
||||
}
|
||||
|
||||
export function setSnapcastClientName(id, name){
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
|
||||
@ -235,6 +242,15 @@ export function setSnapcastClientLatency(id, latency){
|
||||
}
|
||||
}
|
||||
|
||||
export function setSnapcastClientGroup(id, group_id){
|
||||
console.log(id,group_id);
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_CLIENT_GROUP',
|
||||
id: id,
|
||||
group_id: group_id
|
||||
}
|
||||
}
|
||||
|
||||
export function deleteSnapcastClient(id){
|
||||
return {
|
||||
type: 'PUSHER_DELETE_SNAPCAST_CLIENT',
|
||||
@ -242,3 +258,11 @@ export function deleteSnapcastClient(id){
|
||||
}
|
||||
}
|
||||
|
||||
export function setSnapcastGroupStream(id, stream_id){
|
||||
return {
|
||||
type: 'PUSHER_SET_SNAPCAST_GROUP_STREAM',
|
||||
id: id,
|
||||
stream_id: stream_id
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -586,13 +586,27 @@ const PusherMiddleware = (function(){
|
||||
request(store, 'snapcast_instruct', action.data)
|
||||
.then(
|
||||
response => {
|
||||
store.dispatch(pusherActions.snapcastServerLoaded(response.server));
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Could not get Snapcast server',
|
||||
error,
|
||||
error.message
|
||||
));
|
||||
}
|
||||
);
|
||||
break
|
||||
|
||||
case 'PUSHER_SNAPCAST_SERVER_LOADED':
|
||||
console.log(action);
|
||||
var groups = {};
|
||||
var clients = {};
|
||||
var streams = {};
|
||||
|
||||
// Loop all the groups
|
||||
for (var i = 0; i < response.server.groups.length; i++){
|
||||
var group = response.server.groups[i];
|
||||
for (var i = 0; i < action.server.groups.length; i++){
|
||||
var group = action.server.groups[i];
|
||||
var clients_ids = [];
|
||||
|
||||
// And now this groups' clients
|
||||
@ -612,8 +626,8 @@ const PusherMiddleware = (function(){
|
||||
}
|
||||
|
||||
// Loop all the streams
|
||||
for (var i = 0; i < response.server.streams.length; i++){
|
||||
var stream = response.server.streams[i];
|
||||
for (var i = 0; i < action.server.streams.length; i++){
|
||||
var stream = action.server.streams[i];
|
||||
streams[stream.id] = stream;
|
||||
}
|
||||
|
||||
@ -623,15 +637,6 @@ const PusherMiddleware = (function(){
|
||||
snapcast_groups: groups,
|
||||
snapcast_streams: streams
|
||||
});
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Could not get Snapcast server',
|
||||
error,
|
||||
error.message
|
||||
));
|
||||
}
|
||||
);
|
||||
break
|
||||
|
||||
case 'PUSHER_SET_SNAPCAST_CLIENT_NAME':
|
||||
@ -772,6 +777,32 @@ const PusherMiddleware = (function(){
|
||||
);
|
||||
break
|
||||
|
||||
case 'PUSHER_SET_SNAPCAST_CLIENT_GROUP':
|
||||
var group = store.getState().pusher.snapcast_groups[action.group_id];
|
||||
var clients_ids = Object.assign([], group.clients_ids, [action.id]);
|
||||
var data = {
|
||||
method: 'Group.SetClients',
|
||||
params: {
|
||||
id: action.group_id,
|
||||
clients: clients_ids
|
||||
}
|
||||
}
|
||||
|
||||
request(store, 'snapcast_instruct', data)
|
||||
.then(
|
||||
response => {
|
||||
store.dispatch(pusherActions.snapcastServerLoaded(response.server));
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Error',
|
||||
error,
|
||||
error.message
|
||||
));
|
||||
}
|
||||
);
|
||||
break
|
||||
|
||||
case 'PUSHER_DELETE_SNAPCAST_CLIENT':
|
||||
var data = {
|
||||
method: 'Server.DeleteClient',
|
||||
@ -798,6 +829,37 @@ const PusherMiddleware = (function(){
|
||||
);
|
||||
break
|
||||
|
||||
case 'PUSHER_SET_SNAPCAST_GROUP_STREAM':
|
||||
var group = store.getState().pusher.snapcast_groups[action.id];
|
||||
var data = {
|
||||
method: 'Group.SetStream',
|
||||
params: {
|
||||
id: action.id,
|
||||
stream_id: action.stream_id
|
||||
}
|
||||
}
|
||||
|
||||
request(store, 'snapcast_instruct', data)
|
||||
.then(
|
||||
response => {
|
||||
store.dispatch({
|
||||
type: 'PUSHER_SNAPCAST_GROUP_UPDATED',
|
||||
key: action.id,
|
||||
group: {
|
||||
stream_id: action.stream_id
|
||||
}
|
||||
})
|
||||
},
|
||||
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);
|
||||
|
||||
@ -55,7 +55,17 @@ export default function reducer(pusher = {}, action){
|
||||
return Object.assign({}, pusher, { config: action.config });
|
||||
|
||||
case 'PUSHER_SNAPCAST':
|
||||
return Object.assign({}, pusher, { snapcast_clients: action.snapcast_clients, snapcast_groups: action.snapcast_groups });
|
||||
return Object.assign({}, pusher, {
|
||||
snapcast_streams: action.snapcast_streams,
|
||||
snapcast_groups: action.snapcast_groups,
|
||||
snapcast_clients: action.snapcast_clients
|
||||
});
|
||||
|
||||
case 'PUSHER_SNAPCAST_GROUP_UPDATED':
|
||||
var snapcast_groups = Object.assign({}, pusher.snapcast_groups);
|
||||
var group = snapcast_groups[action.key];
|
||||
snapcast_groups[action.key] = Object.assign({}, group, action.group);
|
||||
return Object.assign({}, pusher, { snapcast_groups: snapcast_groups });
|
||||
|
||||
case 'PUSHER_SNAPCAST_CLIENT_UPDATED':
|
||||
var snapcast_clients = Object.assign({}, pusher.snapcast_clients);
|
||||
|
||||
@ -33,6 +33,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.no-label {
|
||||
.label > .text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
color: $black;
|
||||
position: absolute;
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
position: relative;
|
||||
margin: 0 -10px -1px -10px;
|
||||
padding: 14px 30px 13px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
@ -96,6 +95,8 @@
|
||||
|
||||
&.track-list {
|
||||
.list-item {
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 40%;
|
||||
@ -142,6 +143,8 @@
|
||||
}
|
||||
|
||||
&.playlist-list .list-item {
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 50%;
|
||||
@ -159,6 +162,8 @@
|
||||
}
|
||||
|
||||
&.album-list .list-item {
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name,
|
||||
&.artists {
|
||||
@ -175,6 +180,8 @@
|
||||
}
|
||||
|
||||
&.library-local-album-list .list-item{
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name,
|
||||
&.artists {
|
||||
@ -187,6 +194,8 @@
|
||||
}
|
||||
|
||||
&.artist-list .list-item {
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 70%;
|
||||
@ -199,6 +208,8 @@
|
||||
}
|
||||
|
||||
&.queue-track-list {
|
||||
cursor: pointer;
|
||||
|
||||
.list-item {
|
||||
padding-right: 60px;
|
||||
.col {
|
||||
@ -230,6 +241,8 @@
|
||||
}
|
||||
|
||||
&.queue-history-track-list .list-item {
|
||||
cursor: pointer;
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 60%;
|
||||
@ -243,6 +256,7 @@
|
||||
|
||||
&.related-artist-list {
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.artist {
|
||||
display: block;
|
||||
|
||||
@ -1,40 +1,49 @@
|
||||
|
||||
.snapcast {
|
||||
|
||||
.group.list {
|
||||
padding: 0 10px;
|
||||
.group {
|
||||
|
||||
&:not(:first-child){
|
||||
padding-top: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 20px 0 0 0;
|
||||
.clients {
|
||||
padding: 0 10px;
|
||||
|
||||
&:not(.header){
|
||||
.client {
|
||||
@include clearfix();
|
||||
border: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
|
||||
&:not(:first-child){
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
& > .name {
|
||||
width: 40%;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
|
||||
.fa {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
|
||||
input {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
|
||||
.disconnected {
|
||||
padding: 12px 0;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,34 +57,6 @@
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
&.header {
|
||||
padding-top: 0;
|
||||
vertical-align: bottom;
|
||||
cursor: default;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&.client {
|
||||
@include clearfix();
|
||||
padding: 20px 0 0 0;
|
||||
|
||||
& > .name {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .volume,
|
||||
& > .latency {
|
||||
input {
|
||||
@ -137,22 +118,11 @@
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
&.header {
|
||||
display: block;
|
||||
|
||||
.volume,
|
||||
.latency {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
@include clearfix();
|
||||
float: none !important;
|
||||
@ -172,3 +142,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user