Polishing styles, preparing for playbar switcher

src/js/components/Servers.js

@@ -1,50 +1,26 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useStore, useDispatch } from 'react-redux';
 import Link from './Link';
 import Icon from './Icon';
 import TextField from './Fields/TextField';
 import { indexToArray } from '../util/arrays';
 import { Button } from './Button';
-import * as pusherActions from '../services/pusher/actions';
 import * as mopidyActions from '../services/mopidy/actions';
 import { iconFromKeyword } from '../util/helpers';
 import { I18n } from '../locale';
-import LinksSentence from './LinksSentence';
-import Thumbnail from './Thumbnail';
 
 const Server = ({
   server,
   current_server,
 }) => {
   if (!server) return null;
-  const { id, current_track, playback_state } = server;
   const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (id !== 'default') dispatch(mopidyActions.getServerState(id));
-  }, [id]);
   const remove = () => dispatch(mopidyActions.removeServer(server.id));
   const setAsCurrent = () => dispatch(mopidyActions.setCurrentServer(server));
+  const isCurrent = server.id === current_server;
 
   return (
     <div className="sub-tabs__content">
-      <label className="field">
-        <div className="name">
-          <I18n path="settings.servers.current_track" />
-          {playback_state ? ` (${playback_state})` : ''}
-        </div>
-        <div className="input">
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Thumbnail images={current_track?.images} size="small" />
-            <div style={{ paddingLeft: '1rem' }}>
-              <div>{current_track?.name}</div>
-              <em>
-                <LinksSentence items={current_track?.artists} type="artist" nolinks />
-              </em>
-            </div>
-          </div>
-        </div>
-      </label>
       <label className="field">
         <div className="name">
           <I18n path="settings.servers.name" />
@@ -108,19 +84,19 @@ const Server = ({
       </div>
 
       <Button
-        type="primary"
+        type={isCurrent ? 'default' : 'primary'}
         onClick={setAsCurrent}
         tracking={{
           category: 'Servers',
           action: 'SetAsCurrent',
-          label: (server.id === current_server ? 'Reconnect' : 'Switch'),
+          label: (isCurrent ? 'Reconnect' : 'Switch'),
         }}
       >
-        <I18n path={`settings.servers.${server.id === current_server ? 'reconnect' : 'switch'}`} />
+        <I18n path={`settings.servers.${isCurrent ? 'reconnect' : 'switch'}`} />
       </Button>
       <Button
         type="destructive"
-        disabled={server.id === current_server}
+        disabled={isCurrent}
         onClick={remove}
         tracking={{ category: 'Servers', action: 'Delete' }}
       >

src/js/locale/en.yaml

@@ -613,3 +613,5 @@ modal:
       snapcast_mute: Toggle mute for Snapcast client (where n is 1-9)
   servers:
     title: Server selector
+    current: Current server
+    nothing_playing: Nothing playing

src/js/services/mopidy/middleware.js

@@ -480,16 +480,23 @@ const MopidyMiddleware = (function () {
 
       case 'MOPIDY_GET_SERVER_STATE': {
         let server = { ...store.getState().mopidy.servers[action.id] };
-        fetch(`http://${server.host}:${server.port}/iris/http/get_server_state`)
+        if (!server.host || !server.port || server.host === '' || server.port === '') break;
+
+        const host = `http${server.ssl ? 's' : ''}://${server.host}:${server.port}`;
+        fetch(`${host}/iris/http/get_server_state`)
           .then((response) => response.json())
-          .then(({ result: { current_track, play_state } }) => {
-            if (current_track) {
-              const images = current_track.images
-                ? formatImages(digestMopidyImages(server, current_track.images))
+          .then(({ result }) => {
+            server = { ...server, ...result };
+            if (result.current_track) {
+              const images = result.current_track.images
+                ? formatImages(digestMopidyImages(server, result.current_track.images))
                 : null;
-              server.current_track = formatTrack({ ...current_track, images });
+              server.current_track = formatTrack({ ...result.current_track, images });
             }
-            store.dispatch(mopidyActions.updateServer({ ...server, play_state }));
+            store.dispatch(mopidyActions.updateServer(server));
+          })
+          .catch((error) => {
+            store.dispatch(coreActions.handleException('Could not fetch server', error, host));
           });
 
         break;

src/js/services/pusher/middleware.js

@@ -279,10 +279,10 @@ const PusherMiddleware = (function () {
 
         clearTimeout(reconnectTimer);
         store.dispatch({ type: 'PUSHER_CONNECTING' });
-
-        socket = new WebSocket(
-          `ws${window.location.protocol === 'https:' ? 's' : ''}://${store.getState().mopidy.host}:${store.getState().mopidy.port}/iris/ws/`,
-        );
+        const { host, port, ssl } = store.getState().mopidy;
+        let endpoint = `ws${ssl || window.location.protocol === 'https:' ? 's' : ''}://`;
+        endpoint += `${host}:${port}/iris/ws/`;
+        socket = new WebSocket(endpoint);
 
         socket.onopen = () => {
           store.dispatch({

src/js/views/modals/Servers.js

@@ -13,6 +13,7 @@ const Servers = () => {
   const history = useHistory();
   const dispatch = useDispatch();
   const servers = indexToArray(useSelector((state) => state.mopidy.servers || {}));
+  const current_server = useSelector((state) => state.mopidy.current_server);
 
   useEffect(() => dispatch(uiActions.setWindowTitle(i18n('modal.servers.title'))), []);
   useEffect(() => {
@@ -48,12 +49,25 @@ const Servers = () => {
                 <Thumbnail images={current_track?.images} size="small" />
                 <h4 className="list__item__name">
                   {name}
-                  {playback_state ? ` (${playback_state})` : ''}
+                  {playback_state && (
+                    <span className="flag flag--default">{playback_state}</span>
+                  )}
+                  {id === current_server && (
+                    <span className="flag flag--blue">
+                      <I18n path="modal.servers.current" />
+                    </span>
+                  )}
                 </h4>
-                <ul className="list__item__details details">
-                  <li>{current_track?.name}</li>
-                  <li><LinksSentence items={current_track?.artists} type="artist" nolinks /></li>
-                </ul>
+                {current_track ? (
+                  <ul className="list__item__details details">
+                    <li>{current_track?.name}</li>
+                    <li><LinksSentence items={current_track?.artists} type="artist" nolinks /></li>
+                  </ul>
+                ) : (
+                  <div className="list__item__details details">
+                    <I18n path="modal.servers.nothing_playing" />
+                  </div>
+                )}
               </div>
             );
           })}

src/scss/views/_modal.scss

@@ -183,15 +183,15 @@
             float: left;
           }
 
-          &__name,
-          &__details {
-            padding-left: 70px;
-          }
-
           &__name {
             padding-top: 0;
             margin-bottom: 5px;
-            display: block;
+            display: flex;
+            padding-left: 20px;
+          }
+
+          &__details {
+            padding-left: 70px;
           }
 
           .source {