diff --git a/src/js/components/Servers.js b/src/js/components/Servers.js index 7919eea3..98f090ed 100755 --- a/src/js/components/Servers.js +++ b/src/js/components/Servers.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { useStore, useDispatch } from 'react-redux'; import Link from './Link'; import Icon from './Icon'; @@ -8,6 +8,185 @@ import { Button } from './Button'; import * as mopidyActions from '../services/mopidy/actions'; import { iconFromKeyword } from '../util/helpers'; import { I18n } from '../locale'; +import LinksSentence from './LinksSentence'; +import { + digestMopidyImages, + formatImages, +} from '../util/format'; +import Thumbnail from './Thumbnail'; + +const callServer = ({ endpoint, method, params }) => new Promise((resolve, reject) => { + const body = { + jsonrpc: '2.0', + id: 1, + method, + params, + }; + fetch(endpoint, { + method: 'POST', + mode: 'no-cors', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body), + }) + .then((response) => response.json()) + .then(({ result }) => resolve(result)) + .catch((error) => { console.debug({ error }); reject() }); +}); + +const Server = ({ + server, + current_server, +}) => { + if (!server) return null; + const { id } = server; + const dispatch = useDispatch(); + const [currentTrack, setCurrentTrack] = useState(); + const [playState, setPlayState] = useState(); + + useEffect(() => { + const endpoint = `http://${server.host}:${server.port}/mopidy/rpc`; + callServer({ + endpoint, + method: 'core.playback.get_current_track', + }).then( + (track) => { + callServer({ + endpoint, + method: 'core.library.get_images', + params: { + uris: [track.uri], + }, + }).then(({ [track.uri]: images }) => { + console.debug({ track }) + setCurrentTrack({ + ...track, + images: images ? formatImages(digestMopidyImages(server, images)) : null, + }); + }); + }, + () => setCurrentTrack(null), + ); + + callServer({ + endpoint, + method: 'core.playback.get_state', + }).then(setPlayState, setPlayState); + }, [id]); + + const remove = () => { + dispatch(mopidyActions.removeServer(server.id)); + }; + + const setAsCurrent = () => { + dispatch(mopidyActions.setCurrentServer(server)); + }; + + return ( +