mariolukas/hydraplay

A multiroom audio player setup, based on snapcast and mopidy.

About HydraPlay

HydraPlay is an easy to use multiroom audio player. HydraPlay provides an integrated web interface to multiple Mopidy instances and one Snapcast server. It generates all the complex configurations under the hood. Only one configuration file is needed to define what the user needs.

The server part is written in Python and provides a webserver for the frontend delivery. Besides that the server generates all configurations and cares about starting Mopidies and Snapcast.

The Frontend is written in TypeScript with the usage of Angular. It connects to the Mopidy and Snapcast web API's to combine all the fancy functions in one user interface.

HydraPlay was inspired by a project i have found on Youtube by Ryan Detzel.

This project is still under development, some things might be unstable

Screenshots

The scnreenshots below show two connected players and a configuration with two (default value) Mopidy instances.

Player controls

Stream/Zone controls

Playlist controls

Getting Started

The following steps require Docker and Docker Compose to be installed on your system.

Guide to install Docker

Guide for Docker Compose

1. Configure Hydraplay

Make a copy of the file hydra.example.json and rename it to hydra.private.json. This file contains all needed configurations for the setup.

Open the file in an editor and make your changes. If you want to enable Spotify you need a client_id and client_secret. Just follow the instructions of the Mopidy Spotify extension. Add the cliendId, client secret and your Spotify login credentials to the config. Enable Spotify and save all changes.

2. Start the Docker container

Now you are able to start the server with:

⚠️ Using this on a Mac with Apple silicon requires Rosetta, additionally you need to enable platform: linux/amd64 in the docker-compose.yml file.

docker-compose up

3. Connect a SnapClient to HydraPlay

Connect a SnapClient to the server.

Integrated Webclient (Snapweb)

The fastest way is by using the integrated webclient. Open a browser and go to

http://<your_server_ip>:<port_in_configuration>/client/

Click on the play button on the top right corner in the window.

Your client should be connected to the server ( you can proceed with the next step)

Connect with SnapClient

Alternatively use a more stable generic client on your client-side systems (e.g Raspberry Pi)

snapclient -h <server_ip>

Detailed information can be found on the offical Snapcast GitHub project documentation.

Use SnapCasts Android Client

Or even install the official android client on your mobile phone

https://github.com/badaix/snapdroid/releases/tag/v0.24.0

4. Open HydraPlay and use it!

Finally open a Browser and goto:

http://<your_server_ip>:<port_in_configuration>

Donations

If you like my work and want to support it, feel free to leave a donation.

Configuration

This section describes the HydraPlay cofiguration file hydra.example.conf

Hydraplay Section

port: defines the web port on which hydraplay will be available in the browser. Defaults is 8080

source_type: Defines which type of audio source should be used between mopidy and snapcast. Possible values are fifo and tcp. Defaults is tcp.

Snapcast Section

config_path: Defines the path to the generated Snapserver config file. Default for Docker usage is /tmp/,

server_port: Default is 1704

remote_port: Default is 1705

additional_fifos: Will be used for additional sources but is not implemented yet. Default is [],

codec: Defines Snapcsats audio codec. Possible values are flac, opus, ogg, pcm Default is flac

Mopidy Section

mpd_base_port: Default is 6600

web_base_port: Defines the web API port for Mopidy. This port is used by HydraPlay for connecting to the Mopidy web API. The first instance equals to this port. For all further instances the port is increased by a count of one. Default is6680

instances: Defines the number of stated Mopidy instances. Each instance represents one stream in HydraPlay. A good starting point would be number of instances equals number of clients. Defualt is 2

config_path: Defines the folder where HydraPlay generates the Mopidy configurations. Default is /tmp/,

Extensions

TODO

Development

Running a dev container locally

If you want to do some development on the ui you can use a local docker dev image for keeping things easy. The dev image is almost the same as the production image but it does not contain a pre-compiled version of the ui. Therefore the image build process is much faster. Just run

docker-compose -f docker-compose.dev.yml build

⚠️ Using this on a Mac with Apple silicon requires Rosetta, additionally you need to enable platform: linux/amd64 in the docker-compose.yml file.

Afterwards you can fire up the development environment by

docker-compose -f docker-compse.dev.yml up

Now you can proceed whit "Build the Angular Frontend"

Build the Angular Frontend

nodejs is required before you can proceed. After you've installed nodejs you can build the ui by using:

cd src/ui
npm install -g @angular/cli -g
npm install
ng build

You can run ng build with the additional argument --watch for live re-compiling while you are working on your code.

The build folder is located at /src/hydraplay/server/static/player

Building the production image.

You can build a production image instead downloading by using:

docker build -f docker/Dockerfile -t mariolukas/hydraplay --build-arg SNAPCASTVERSION=0.26.0 .

⚠️ Using this on a Mac with Apple silicon requires Rosetta, additionally you need to enable platform: linux/amd64 in the docker-compose.yml file.

Details

You can find a blog post. which i wrote a couple of years ago when i started the project. A lot of things changed since the first setup. But it will give you and idea on how it works under the hood. ( the blog post describes the very first prototype! )

Known Issues

• mdns/avahi does not work within docker. You need to start your clients with the -h <ip_address_of_server> parameter.
• Play/Pause button will not change back after a track was completed. Somehow there is no Mopidy event incomming for EndOfTrack. (works with tcp sources)

Not Implemented yet

• add debian package config and make file
• add build script for raspberry pi image
• add more documentation ( for Raspberry Pi, MacOS with m1, run without docker, configuration etc. )
• provide ready to use pre-build docker images

Credits

This project would not have been possible without all the work on Snapcast and Mopidy! Special thanks to Ryan Detzel for the inspiration.

Community and Support

Join us at Discord (https://discord.gg/xs9CKfbpuY).

hydraplay's Issues

Option to manually remove (inactive) Snapclient from list.

When a Snapclient goes offline it remains in the HydraPlay front-end. (at least for some time?)

It would be nice to have a button to manually remove a disconnected Snapclient.
I was able to achieve remove the disconnected client from the list by removing it on one of the other connected Snapclients but it feels like a dirty workaround...

Add Carousel for moving between players.

It would be nice to have a carousel library for moving between the players.
I would prefer OWL Carousel.
A nice effect would also be that the current selected player comes to the
foreground ( gets bigger in front).

Outdated SSL certificates

Due to old SSL certificates YouTube extension doesn't work.

error:

2022-04-17 20:07:52,081 [8:3044013152] DEBUG - hydraplay.server.Executor.Mopidy_0: [youtube] eM8Ss28zjcE: Downloading webpage
2022-04-17 20:07:52,130 [8:3044013152] DEBUG - hydraplay.server.Executor.Mopidy_0: WARNING: Unable to download webpage: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1056)>

Upgrade of ca-certificates helped but had to update repositories. Ended up with Ubuntu repo Focal and ca-certificates (20210119). I believe ca-certificates are the main issue as updating python3-certifi didn't help.

Would be great if it's implemented in docker image.

Have to say, this is a great project. Thank you for all your work.

Add better documentation about how it works

This is a very interesting project to me because it seems like one of the few attempts to make a single cohesive control system for Snapcast and actual audio sources (Spotify, Google Music, etc). I've toyed with the idea of building something similar, just haven't found the time, so I'm intrigued with this project. But it's not clear to me how it works. Does HydraPlay spawn a new Snapcast server instance for each new source? Does it create new streams within a single Snapcast server (and if so, how, since the current JSON API doesn't support that)? Some kind of step-by-step documentation of a typical use case would be a big help in understanding how all these different projects interface with one another. Laid out like this:

User Space	Under the Hood
Some action in the UI	What actually happens with Snapserver, Mopidy, etc

Some questions there

Hi

I'm coming following some advices received on Reddit.
Seems Hydraplay will solve my problems :-)

Here is my house configuration:

• 1 or 2 speakers per Room (Around 4 rooms)
• I would like, if possible, to stream directly from my phone Spotify App
• ...And if possible use only one Raspberry with multiple soundcards
• Also, if possible, have Airplay

Of what I understood, Hydraplay will launch multiple instance of mopidy on one snapcast server.

How to affect a specific soundcard on one mobidy instance ?
Is it the correct way to do ? Also, in this type of configuration , will I have the ability to do a multiroom and also, a specific room stream ?

I guess I need to start multiple snapclient instances but I'm a bit lost to do that, and to affect them on a specific DAC)

THank you !

Bertrand

Initial Stream situation is broken.

When the player is started for the first time the stream selection looks corrupted.
The player should not show any stream until the first stream was selected for a player. It should add new streams every time the user opens the media library and searches a new stream. This should work until the max. number of streams is reached. After that the user needs to use one of the already playing streams for loading a new source on it.

Control from mobile browser not working after a while

I haven't tested this thoroughly, so I can't say the exact steps how to reproduce. I'm also not sure if this is really only on mobile.
But this has bugged me for a while, so I finally decided to write this issue.
Next time it happens to me, I can expand this description.

• I'm using HydraPlay on my mobile phone to start playing music
• then I just let it play for some time (15 minutes? 30 minutes? enough time for my phone to go to sleep or for me to use other apps on my phone)
• then later I reopen the browser on my phone to stop playback or to change the volume, the following happens:
• the interface is reacting normally.
  • when I press the play-pause-button, it toggles between the play and pause visual
  • when I interact with the volume slider, it behaves normally. I can slide it to a different position
• BUT: the actual music playback does not react at all. Volume does not change, playback just continues.
• Workaround: reload the web page and everything works again

Instructions for installing Hydraplay

Hi,

In the readme, the installation instructions for the Hydraplay are a bit vague. Could you please expand this section so it's clearer to understand.

Thanks

Adding songs to an empty queue and hitting play does not start playing.

When a stream is not playing anything (e.g. at the very beginning after starting the whole system) I can add new songs to a queue by searching and then clicking on the plus on the right of the search results.
If I subsequently press the play button (in the main playback screen) nothing happens.
I would expect the music from the queue to start playing.

edit: the skip to next song and skip to previous buttons also do nothing in this state.

Player directory/files missing in git

There is no directory for the player in git.
HydraPlay/src/hydraplay/server/static/player is missing

UI change: queue change more accessible; stream control more clear

The UI is simple (for now) but there is room for improvement.

From the main (playback-) screen there are 2 screens that a user can switch to:

1. stream/device control
2. queue/song search

In everyday use the queue/song search functionality is the one that is probably used more frequently, so it should be easily accessible. Currently the user has to hit a tiny button in the bottom right corner to get there. This needs to be more prominent and easier to click.

The stream/device control is opened by clicking on the currently playing song cover art. It's big and easy to click, but the user is not informed about where they have to click to get to the stream/device control screen.

The "back" button from both screens is tiny and hard to reach at the top right. (Also it is not instantly clear that this is the back button, as it is more of a downward facing arrow.)

I attached a UI mock-up that shows the user at first glance what the options are. Three buttons for the three sections with the current one highlighted. This is in no way meant to be perfect. Only to visualize, what I mean. Obviously the words could be replaced by icons, the buttons could be moved to the top of the screen, etc.
( I think, the words "Streams" and "Queue" are not THAT helpful to a new user but at least they instantly know that they have 3 options/pages to check out and they will always know, where they are and how to get back. No hidden information. )

Add support for YouTube

Implement support for YouTube:

• show search results from YouTube
• support YouTube Playlists (if possible)
• support YouTube live-streams (if possible)

Playlists and Tracklists not showing until user changes stream at least once.

How to reproduce:

1. Reload the HydraPlay-Website in Browser (I'm using Chrome on PC)
2. Click on "Playlists" on the bottom of any of the shown panels. An empty Tracklist is shown. Even if there are currently songs playing on this device/stream.
3. Click on "Playlists" on top. (next to "Tracklist"). An empty list of Playlists is shown.

Current workaround: Change any stream:

1. Click on "Streams" on the bottom of any of the shown panels.
2. Click any of the shown streams. Now the problem described above is fixed.

Manual tracklist reordering

Let the user reorder tracks in the tracklist. Preferably by drag-n-drop.

On PC: Standard drag-n-drop
On mobile: for example start drag-n-drop by long-pressing on a track

docker file solely for hydra play

Hey,

Awesome project!! I saw the same youtube video as you a while ago but has taken me a while to get to the point of actually implementing it and what you have done is incredible!

I have an unRAID box where I am running a mopidy docker container and a snapcast container. I am in the process of scaling this up to more mopidy containers.

I was wondering if you could help in getting a hydraPlay docker container setup? or do you think it would be better to run Hydraplay on an Nginx docker to serve to my browsers? it looks like the current docker files install mopidy and snapcast. I am very new to writing docker files so I am sorry if this is basic

Cheers

Spotify search with multiple words does not find anything

If I search for single words, I get results from spotify.
If I enter multiple words, separated by a space, I don't get any results.

edit:
for some words it works. for some it doesn't.
works: summer song
not working: warm im altenheim

npm install not working

hello all,
For the moment i cannot get the build.
these steps i did:

I installed node.js
created a folder at /home/pi/hydraplay
In home/pi/hydraplay I ran git clone https://github.com/mariolukas/HydraPlay.git.
I then ran npm install in home/pi/hydraplay/HydraPlay/hydraplay
if i run npm install in home/pi/hydraplay/HydraPlay
npm WARN saveError ENOENT: no such file or directory, open '/home/pi/hydraplay/HydraPlay/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/pi/hydraplay/HydraPlay/package.json'
npm WARN HydraPlay No description
npm WARN HydraPlay No repository field.
npm WARN HydraPlay No README data
npm WARN HydraPlay No license field.

up to date in 0.582s
found 0 vulnerabilities

if i run in npm install in home/pi/hydraplay/HydraPlay/hydraplay,
it start to build something but with some warning, also no build file is visible

Installed to /home/pi/hydraplay/HydraPlay/hydraplay/node_modules/node-sass/vendor/linux-arm-79/binding.node
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@>=2.4.0 < 3.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/compiler@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

added 75 packages from 62 contributors and audited 43725 packages in 694.879s

5 packages are looking for funding
run npm fund for details

found 6 vulnerabilities (1 low, 3 moderate, 2 high)
run npm audit fix to fix them, or npm audit for details

can somebody help me with this? what do i do wrong?

kind regards

Add support for mopidy extentions

Request to add more mopidy extentions that are already supported by mopidy but not jet by hydraplay.

In my case I wanted to add the bandcamp extention but in the logs I found this line:

DEBUG - hydraplay.server.Executor.Mopidy_1: Ignoring config section 'bandcamp' because no matching extension was found

white webpage

Hello,

as I too once saw Ryan's video on YT, I was pleasantly surprised someone got the idea further and published code. I already had a proof of concept snapcast/mopidy setup installed on my DIY NAS running OMV4 (Debian Stretch) on amd64 without pulseaudio, and it works well with Android snapclients. Once I stumbled upon HydraPlay, of course I wanted that. I modified my setup a little bit by following the instructions in the README (installed & configured everything), streaming still works, I now have multile mopidy instances running on different ports, started by separate systemd units. As of HydraPlay, my understanding was to checkout the sources and give websockify the -web argument pointing to the src subfolder of HydraPlay (only that one contains an index.html, any other will just list the directory contents). Pointing any browser to the LAN address on port 8080 will just load a white page, which shows the source of index.html if I right-click to see the web page source. Some browsers even show the Angular favicon.

What could be wrong, where to look for some logs, how to debug?

Add Lazy Load for Cover Art Images

Loading all cover art images makes the ui very slow. A better solution would be a lazy load mechanism.
(e.g. https://github.com/tjoskar/ng-lazyload-image)

Exposed constainer ports

EXPOSE 32768-61000

Are these ports really all necessary?
I use Unraid with a custom network and all exposed ports are displayed in a list, the interface takes a long time to load because the list is too long.

It's a great project, thanks a lot for that.

Add filter for search by source.

Add an option to filter the search results by sources. ( Spotify, local, Tunein etc.)

Add option to set one stream to all players.

It would be nice to have an icon or button for setting all players to the selected players stream. AKA sycing all zones/groups

Black Screen - TypeError: this.getExtraNgModuleProviders is not a function

Hello friend,

i already knew your project some years ago, when i started to build my multiroom setup. Unfortunately i couldnt get it runnuing due to lack of experience and documentation.

I wanted to give it a try again now, but i ran into a similar issue again.

I could already install and compile your interface wothout errors (only warnings), but i still have a black screen. IPs and Ports of Mopidy and Snapserver instances are correct.

When i load the page in my Browser i get a black screen again and the following error:
TypeError: this.getExtraNgModuleProviders is not a function

After some research I fount a thread at stackoverflow where it says there may be an incompatibility with @angular/platform-browser-dynamic package.

I tried to update all version dependencies in the package.json file, but when i try to compile it with "ng build" i get even more errors.

Do you maybe have a hint, where i could start troubleshooting?

Select codec for the Snapcast Server in hydra.private.json

I use an ESP32 as Snapcast client, but it has only the opus codec.

Add Mopidy-Iris for each stream and link to it from main screen panels

The USP of HydraPlay is switching devices, streams, zones, rooms. And it is great at that. However there are loads of playlist/playback functionalities that it is not capable of (yet). A quick solution for this would be to have HydraPlay as excellent back-end combined with Iris as excellent front-end. In the long run the user will need Iris less and less, as HydraPlay will get more and more features, but this hybrid solution will jump start the system to 100% functionality in no time.

Mopidy-Iris has every front-end functionality one could hope for, so if there was an instance of Iris available for each stream, the user can basically achieve everything they want.
If all they need is already possible with the standard HydraPlay front-end, perfect! But if it isn't, they could use Iris for "advanced music search/playlist management/etc."

On each of the stream panels of HydraPlay there could be a button, that takes the user to the Iris-interface belonging to that stream.
Once a user has set up the current room/device/stream configuration, they will usually stick to controlling what songs are played for some time until they might want to change the stream configuration some time later. So the user would not have to constantly switch between HydraPlay and Iris but rather switch only once in a while.

Add "playback progress bar" (not sure what it's called.. scrubber maybe?)

Currently the main playback screen only has 3 buttons: previeous, play/pause, next.

It would be nice to jump to the middle of the current track or back to the beginning.
Usually there is this "progress bar" in audio apps, that shows how far the song has played and lets the user interact with it. (scrubbing?)

• Display "Progress bar for currently played song"
• Display the length (minutes:seconds) of the current song (e.g. on the right side, next to the progress bar)
• Display how much (minutes:seconds) of the current song has already been played. (current position of the "scrubber????") (e.g. on the left side of the progress bar)

One more thing. You need to build HydraPlay before you place the files into `/home/pi/hydraplay`

One more thing. You need to build HydraPlay before you place the files into /home/pi/hydraplay

1. Install node on the pi or on your local machine
2. change to the HydraPlay Source folder.
3. Install dependencies with npm install
4. change the ip and ports in environment.ts
5. Build with ng build
6. the result will be in target/build
7. copy all files in target/build to /home/pi/hydraplay on the pi
8. try to connect.

Originally posted by @mariolukas in #16 (comment)

Loading a large Spotify playlist makes the browser interface incredibly slow

Loading a large Spotify playlist (in my case ~200 songs) leads to the browser interface to lag and makes it extremely unresponsive. On mobile it sometimes even lets my browser (Chrome and Brave) crash.

Support aliases (user defined display names) for Snapclients

A snapcast client is shown with the standard device name that is not always easily readable.
A solution would be the support of aliases that a user can configure via the main GUI.

• Let the user change the displayed name of a connected snapcast client (e.g. by clicking on the name or by clicking on a small pen symbol next to the name)
• Store the user defined names so that they can be displayed after a client disconnected and reconnected
• Store the user defined names so that they can be displayed after HydraPlay was restarted

Add support for Spotify playlists

Spotify playlist integration

• search for a playlist
• show all owned playlists
• append playlist to current queue
• play
• play on shuffle

Add "repeat" and "shuffle" to the HydraPlay queue

Add buttons to control the way, the current queue is played:

• Repeat: once the end of the current queue is reached, jump to the top again
• Repeat (1 track): once the end of the current track is reached, start it again from the beginning
• Shuffle: play the current queue in random order (without changing the actual order of the tracks in the queue)
• Shuffle Repeat: don't just play every track once in a random order, but continue playing them multiple times (in random order)

Spotify login error: <ErrorType.USER_NEEDS_PREMIUM: 15>

Spotify disabled access to libspotify on May 16, 2022

I think it is a Mopidy thing, but for your information, Spotify not working anymore.

https://developer.spotify.com/community/news/2022/04/12/libspotify-sunset/

Player still shows a "current song" after removing all tracks from queue.

How to reproduce:

1. Have a stream
2. Add a song to the tracklist
3. Start playing the song
4. The player now shows the cover art of the currently played (or paused) song.
5. Remove all songs from the tracklist

Expected behavior:

• The player now shows the "empty stream" placeholder image.

Actual behavior:

• The player still shows the cover art from step 4 above

Workaround:

• Reload HydraPlay Website removes the cover art and shows empty stream placeholder.

Switchover to websockify as proxy for web sockets.

This is related to #4.

Scrollbar not visible in search view (content overflow issue)

There is no scrollbar in the window. See screenshut

Tracklist reordering on Mobile Devices makes scrolling only possible on scrollbar.

Since the Tracklist can be reordered now, another issue came up. Angular CDK does not handle a touch event like expected with a long touch for reordering.

Work on performance. Snapcast response time.

https://github.com/mariolukas/SnapProxy

Websocket response performance is bad. I don't know why.
It might be related to both sockets, mopidy and snap cast proxy.
But definitely the response time of snapcast proxy is bad.
When i use the snapcast app all things are working fast. I am
getting fast responses on the snap cast server. That is the
behaviour which says me that it is an issue related to the proxy.

Error on startup: IsADirectoryError: [Errno 21] Is a directory: '/etc/hydraplay/hydra.config.json'

I did a new install from scratch.
Cloned the project.
docker-compose build
then created and edited the hydraplay.private.json

additionally I had to edit one port int the docker-compose.yml because I already have a webserver running on port 8080, so I changed
ports:
- 8080:8080
to
ports:
- 8090:8080

when I start it with docker-compose up I get:

Attaching to hydraplay
hydraplay | 2021-11-19 17:34:32,545 [9:140400629872448] DEBUG - hydraplay.config: Loading config file.
hydraplay | Traceback (most recent call last):
hydraplay | File "/hydraplay/hydraplay.sh", line 14, in
hydraplay | main()
hydraplay | File "/hydraplay/hydraplay.sh", line 11, in main
hydraplay | hydraplay.main.main()
hydraplay | File "/hydraplay/hydraplay/main.py", line 116, in main
hydraplay | server = HydraServer()
hydraplay | File "/hydraplay/hydraplay/server/HydraServer.py", line 26, in init
hydraplay | self.config = Config(self.base_path)
hydraplay | File "/hydraplay/hydraplay/config.py", line 10, in init
hydraplay | self.content = self.load_json(file_name)
hydraplay | File "/hydraplay/hydraplay/config.py", line 15, in load_json
hydraplay | with open(file) as json_data_file:
hydraplay | IsADirectoryError: [Errno 21] Is a directory: '/etc/hydraplay/hydra.config.json'
hydraplay exited with code 1

Volume slider not uniformly positioned when having multiple devices in one stream

It seems that the volume slider stays in the same line, unless the device name is too long. Then it breaks into the next line.
The screenshot should make it clear.

Spotify controls via Spotify Connect API

Hi @mariolukas
in my setup I use snapcast with one mpd and one spotify (via librespot) stream. I guess the mopidy controller you have in place would also be able to control mpd. If not, switching to mopidy would not be an issue for me.

What would be required to add support for librespot control via this interface?
I guess you would only need to issue different play/pause/next/previous commands for a new stream type, am I correct?
In a quick search I found a few implementations for the Spotify Connect API in the programming languages you use here which is used to issue these commands:
JavaScript: https://github.com/thorpelawrence/alexa-spotify-connect/blob/master/connect.js#L109
TypeScript: https://github.com/illBeRoy/spotify-tvos-app/blob/9abd14ab8948a8dd8bc431440b00363e44bd932a/src/api/spotify.driver.ts#L44

Is this something you might look into or is this out of your scope here?

Player reorder

In web interface players come up in some order, but not sorted by name or time of joining the server.
It would be nice to let the user set the order, either by dragging them or in menu.

docker-compose fails with current git clone

tested with Dockerfile.armhf

Step 8/23 : RUN pip3 install tornado jinja2
 ---> Running in 39c2783e6de6
Requirement already satisfied: tornado in /usr/lib/python3/dist-packages (5.1.1)
Collecting jinja2
  Downloading https://files.pythonhosted.org/packages/20/9a/e5d9ec41927401e41aea8af6d16e78b5e612bca4699d417f646a9610a076/Jinja2-3.0.3-py3-none-any.whl (133kB)
Collecting MarkupSafe>=2.0 (from jinja2)
  Downloading https://files.pythonhosted.org/packages/bf/10/ff66fea6d1788c458663a84d88787bae15d45daa16f6b3ef33322a51fc7e/MarkupSafe-2.0.1.tar.gz
    Complete output from command python setup.py egg_info:
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
    ModuleNotFoundError: No module named 'setuptools'
    
    ----------------------------------------
Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-hhnxmqe5/MarkupSafe/
The command '/bin/sh -c pip3 install tornado jinja2' returned a non-zero code: 1
ERROR: Service 'hydraplay' failed to build : Build failed

Filter search results

Implement functionality to filter search results:

• deselect certain sources. (e.g. deselect Spotify to exclude Spotify results)
• select certain sources (e.g. only select Spotify to only show Spotify results)
• change filter AFTER completing a search (1. enter search term, 2. hit enter, 3. wait for search results, 4. change filter to refine the results)
• filter for metadata like length, release date, artist, ... (if possible)

Error when I start Hydraplay with docker-compose on a Raspberry Pi

I get an error after "docker-compose up"
ERROR: for hydraplay Cannot start service hydraplay: driver failed programming external connectivity on endpoint hydraplay (c97335517f80432630950e211997aa76b0ed89a42d3a01974f1215e6a2178753): Error starting userland proxy: listen tcp4 0.0.0.0:6665: bind: address already in use

How can I change the port 6665?

Build a docker image for the Server Setup.

The Server Setup itself isn't that easy, or maybe a lot of stuff to configure.
A "self configuring" Docker Image would be great.

It should

• have a docker compose file
• preconfigured snapcast server
• preconfigured pulseaudio depending of a number N of streams which comes with a compose ENV variable.
• preconfigured mopidy instances depending of a number N of streams which also comes with a compose ENV variable
• auto startup of all components
• as many streams as clients are found
• auto configure the pipes of snap cast server
• all needed sources (spotify, tune in, etc. ) configured in mopidy.

The words "Player", "Streams", "Playlists", "Search", and "Tune" at the bottom are not clickable.

The words below the icons at the bottom of the panels are not clickable.
Obviously a very small issue. Maybe this even is intentional.
Especially using it on PC I intuitively tried clicking the words multiple times and nothing happened.

To me it feels like the icons combined with the text together represent a button/area that is clickable, but as of now only the icon is clickable.

N SnapCast instances

Hi @mariolukas, I just found your repo here.
Nice work! I had also seen that youtube video you mention in the readme and found the interface quite nice.

I am looking to integrate your Interface into my setup and am currently trying to understand how it is working and what I would have to change.

I think there is a copy-paste-mistake in your Readme.

Did you mean N mopidy instances where you write N SnapCast instances?

Software on Server:
- Pulseaudio
- Snapcast Server
- N SnapCast instances
- SnapProxy

Let the user add and delete streaming channels.

As far as I understand, there is currently a fixed number of 2 streams.

Let the user create a new one or even better: dynamically create one, as soon as all streams are being listened to, so there is always a "spare" one, in case a device wants to change to a free channel.

As long as 2 or more streams are unoccupied, delete one.

ng build - issues

Hello, firstly - KUDOS man!!!! Great work here. So i am completely new to angular here so please let me apologise now.. I have issue when running ng build

root@DietPi:~/HydraPlay/hydraplay# ng build
Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
Error: Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/root/HydraPlay/hydraplay/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42)
at MergeMapSubscriber._tryNext (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
at MergeMapSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at MapSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/map.js:55:26)
at MapSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at SwitchMapSubscriber.notifyNext (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/switchMap.js:86:26)
at InnerSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at /root/HydraPlay/hydraplay/node_modules/rxjs/internal/util/subscribeTo.js:17:28
at Object.subscribeToResult (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
at SwitchMapSubscriber._innerSub (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/switchMap.js:65:54)
at SwitchMapSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/switchMap.js:55:14)
at SwitchMapSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at SwitchMapSubscriber.notifyNext (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/operators/switchMap.js:86:26)
at InnerSubscriber._next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/Subscriber.js:67:18)
at /root/HydraPlay/hydraplay/node_modules/rxjs/internal/util/subscribeTo.js:17:28
at Object.subscribeToResult (/root/HydraPlay/hydraplay/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)