Sending control_url to snapcast meta so users can jump to Mopidy instance

src/js/components/Fields/OutputControl.js

@@ -18,19 +18,26 @@ import { I18n } from '../../locale';
 
 const Header = ({ stream, server }) => {
   const dispatch = useDispatch();
-  const current_server = useSelector((state) => state.mopidy.current_server);
   const {
     id,
     meta,
     status,
   } = stream || {};
-  const canBeSelected = server?.id && server.id !== current_server;
+  const controlURL = meta?.control_url ? new URL(meta.control_url) : null;
+  const controlServer = controlURL ? {
+    id: meta?.control_url,
+    ssl: controlURL.protocol === 'https:',
+    host: controlURL.hostname,
+    port: controlURL.port || (controlURL.protocol === 'https:' ? '443' : '80'),
+  } : null;
+  console.debug({ controlURL, controlServer });
+  const images = meta?.images ? formatImages(digestMopidyImages(controlServer, meta.images)) : null;
+
   const onClick = () => {
-    if (!canBeSelected) return;
-    dispatch(mopidyActions.setCurrentServer(server));
-  }
-  const images = meta?.images ? formatImages(digestMopidyImages(server, meta.images)) : null;
-  console.debug(images, meta.images)
+    if (!controlServer) return;
+    dispatch(mopidyActions.setCurrentServer(controlServer));
+  };
+
   return (
     <div className="output-control__output__header">
       <Thumbnail
@@ -40,12 +47,13 @@ const Header = ({ stream, server }) => {
       />
       <div className="output-control__output__header__content">
         <h5
-          className="output-control__output__header__title"
+          className="output-control__output__header__title tooltip"
           onClick={onClick}
-          style={{ cursor: canBeSelected ? 'pointer' : 'default' }}
+          style={{ cursor: controlServer ? 'pointer' : 'default' }}
         >
           {server?.name || id}
           {status === 'playing' && <Icon name="play_arrow" />}
+          {controlURL && <div className="tooltip__content">{meta.control_url}</div>}
         </h5>
         {meta && (
           <ul className="details">

src/js/components/Servers.js

@@ -8,6 +8,7 @@ import { Button } from './Button';
 import * as mopidyActions from '../services/mopidy/actions';
 import { iconFromKeyword } from '../util/helpers';
 import { I18n } from '../locale';
+import { decodeUri, encodeUri } from '../util/format';
 
 const Server = ({
   server,
@@ -107,9 +108,10 @@ const Server = ({
 };
 
 const Servers = ({
-  match: { params: { id: serverId } },
+  match: { params: { id } },
   history,
 }) => {
+  const serverId = decodeUri(id);
   const store = useStore();
   const dispatch = useDispatch();
   const {
@@ -128,7 +130,7 @@ const Servers = ({
   const addServer = () => {
     const action = mopidyActions.addServer();
     dispatch(action);
-    history.push(`/settings/servers/${action.server.id}`);
+    history.push(`/settings/servers/${encodeUri(action.server.id)}`);
   };
 
   const Menu = () => (
@@ -166,7 +168,7 @@ const Servers = ({
               history={history}
               className="menu-item"
               activeClassName="menu-item--active"
-              to={`/settings/servers/${server.id}`}
+              to={`/settings/servers/${encodeUri(server.id)}`}
               scrollTo="#servers-menu"
               key={server.id}
             >

src/js/services/mopidy/actions.js

@@ -22,15 +22,21 @@ export function updateServers(servers) {
   };
 }
 
-export function addServer() {
+export function addServer(data) {
+  const server = {
+    host: window.location.hostname,
+    port: window.location.port
+      ? window.location.port
+      : (window.location.protocol === 'https:' ? '443' : '80'),
+    ssl: window.location.protocol === 'https:',
+    ...data,
+  };
   return {
     type: 'MOPIDY_UPDATE_SERVER',
     server: {
-      id: generateGuid(),
-      name: 'New server',
-      host: window.location.hostname,
-      port: (window.location.port ? window.location.port : (window.location.protocol === 'https:' ? '443' : '80')),
-      ssl: window.location.protocol === 'https:',
+      ...server,
+      id: `http${server.ssl ? 's' : ''}://${server.host}:${server.port}`,
+      name: `${server.host}${server.ssl ? ' 🔒' : ''}`,
     },
   };
 }

src/js/services/mopidy/middleware.js

@@ -459,6 +459,11 @@ const MopidyMiddleware = (function () {
         break;
 
       case 'MOPIDY_SET_CURRENT_SERVER':
+        const existingServer = action.server.id
+          ? store.getState().mopidy.servers[action.server.id]
+          : null;
+        if (!existingServer) store.dispatch(mopidyActions.addServer(action.server));
+
         store.dispatch(mopidyActions.set({
           current_server: action.server.id,
           host: action.server.host,
@@ -476,6 +481,7 @@ const MopidyMiddleware = (function () {
           },
           250,
         );
+        next(action);
         break;
 
       case 'MOPIDY_GET_SERVER_STATE': {