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

Fully-functioning server controller and switcher

Browse Source
This commit is contained in:
James Barnsley
2021-10-16 22:31:15 +13:00
parent c29ff8d162
commit 8b031d12b8
3 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/js/components/Fields/OutputControl.js
View File

@ -25,6 +25,11 @@ const Header = ({ stream, server }) => {
name,
current_track,
} = server || {};
const canBeSelected = id && id !== current_server
const onClick = () => {
if (!canBeSelected) return;
dispatch(mopidyActions.setCurrentServer(server));
}
return (
<div className="output-control__output__header">
<Thumbnail
@ -33,17 +38,13 @@ const Header = ({ stream, server }) => {
className="output-control__output__header__thumbnail"
/>
<div className="output-control__output__header__content">
<h5 className="output-control__output__header__title">
<h5
className="output-control__output__header__title"
onClick={onClick}
style={{ cursor: canBeSelected ? 'pointer' : 'default' }}
>
{name || stream.id}
{stream.status === 'playing' && <Icon name="play_arrow" />}
{id && id !== current_server && (
<span
className="flag flag--default"
onClick={() => dispatch(mopidyActions.setCurrentServer(server))}
>
SWITCH TO THIS SERVER
</span>
)}
</h5>
{current_track && (
<ul className="details">

4
src/js/components/Sidebar.js
View File

@ -159,10 +159,6 @@ class Sidebar extends React.Component {
<I18n path="sidebar.settings" />
{this.renderStatusIcon()}
</Link>
<Link to="/servers" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="dns" type="material" />
<I18n path="sidebar.servers" />
</Link>
</section>
</nav>

19
src/scss/components/_output-control.scss
View File

@ -59,8 +59,6 @@
}
&__output {
padding-top: 1px;
&__header {
margin: 0.8rem;
display: flex;
@ -160,9 +158,15 @@
}
&__commands {
padding: 12px 18px 8px;
position: relative;
padding: 12px 12px 8px 12px;
border-radius: 3px 3px 0 0;
position: relative;
background: colour('off_white');
@include clearfix();
@include theme('dark') {
background: colour('grey');
}
}
@include responsive($bp_medium){
@ -176,7 +180,7 @@
display: none;
}
&__items {
&__inner {
top: auto;
right: 0;
bottom: 0;
@ -184,7 +188,6 @@
width: auto;
padding: 0;
border-radius: 0;
max-height: 50vh;
@include theme('dark') {
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);
@ -203,9 +206,9 @@
}
}
&__item {
&__output {
@include clearfix();
padding: 10px 18px 6px;
padding: 0;
&:not(:first-child){
border-color: rgba(128,128,128,0.05);