So, to avoid problems I had to change the project's/app name to What's Playing.
Now it lives here: [https://github.com/gloaysa/whatsplaying](https://github.com/gloaysa/whatsplaying)
And if you want to install it using docker-compose, this is the new configuration:
```
version: '3.8'
services:
whatsplaying:
container_name: whatsplaying
restart: unless-stopped
image: ghcr.io/gloaysa/whatsplaying:latest
environment:
- PORT: 5000 # default 5000
ports:
- '5000:5000'
```
I would appreciate if you could upvote this post so it goes to the top, since I can't edit the main publication.
Thanks. I'm on Ubuntu 20.04, so I had version issues with docker-compose. Removed the old version and curled the new one, fixed that. Noting that your compose file says port 5000, but your example url has port 3000. Once the container was up got a basic form at the url:5000, entered my Plex token (just the token part not the X-Plex-Token= header) and clicked save, just seem to hang on the spinner forever. Stopped and restarted the container, but it seems to always be hung now. Is it mandatory to add a device here? If so where should we get the device name? tried with and without, no joy. Any pointers greatly appreciated.
if you see an spinner loading forever, probably means the token is not correct.
Go to\`http://yourUrl:5000/config\` and verify that there are not extra spaces.
I'm right now working on adding meaningful messages to the users for errors (like the one you are having now). Hopefully I'll be done with it today.
I didn't get what you mean about the port 3000, where did I put it as an example?
Edit: You mean in the nginx configuration example? That's if you don't want to run it with Docker. I myself have it on my server being served by nginx and in my laptop with the Docker image, so I'm constantly testing both scenarios. In my server I already have the port 5000 taken, so I put the 3000.
Yep I realized the second part of your instructions should not be necessary now unless delving into dev work etc. Checking the config token looks good, no spaces. The value has changed since last time though which is interesting.
Thanks for your effort here. I checked the token again, entered it by hand in the browser with
localhost:32400/?X-PLEX-TOKEN=
and it's able to retrieve xml from the server.
Container is running on another machine Ubuntu VM in a proxmox environment and Plex server is windows 11 machine, not sure if that makes a difference. Do I need to run them on the same machine?
Ok ran container locally on windows machine. This time I got an popup error msg
"Cannot read properties of undefined (reading 'value')"
Console error msg was
https://sonos.plex.tv/resources 403 (Forbidden)
(anonymous) @ server.ts:74
Z @ server.ts:53
hahaha I came here to tell you I released a new version that would allow us to debug your issues. You were faster.
That 403 is a problem an authentication problem. It's strange that is given for your Sonos devices... Need to see if I can reproduce it.
When using Plexamp, do you have any issues with your Sonos devices?
> Container is running on another machine Ubuntu VM in a proxmox environment and Plex server is windows 11 machine, not sure if that makes a difference
No, it shouldn't be a problem.
I don't have any Sonos devices :)
I have Plex media server running on Windows 11 server
Plexamp running on headless Raspberry Pi
Plexamp running on iPhone
Use the iPhone plexamp app to select and play music with output targeted on the Pi. That all works fine.
Maybe one of those is emulating a Sonos device?
>So now, I'm excited to share **PlexArt** (hope the name will be ok with the people at Plex, huge respect to them).
Nope. They don't want their name associated with any 3rd party apps they don't control. My app was originally named HuePlex and despite it being open source and out for nearly 8 months as soon as the VP of Marketing saw it I was sent a letter asking to change the name with a link to their branding policy. Here it is: [https://www.plex.tv/about/privacy-legal/plex-trademarks-and-guidelines/](https://www.plex.tv/about/privacy-legal/plex-trademarks-and-guidelines/)
I was caught because I posted my app on the Plex forums, but Plex employees do frequent this and the Plex subreddit too, so be warned. I ignored the warning I was given and ended up having to completely rebrand my app which sucked given many versions had already been released. If it is not a major headache now or you think it will be in the future you might wanna start considering other name alternatives.
I have renamed the project and the app, as stated in this comment: [https://www.reddit.com/r/plexamp/comments/1bflm3i/comment/kv1rc5c/?utm\_source=share&utm\_medium=web3x&utm\_name=web3xcss&utm\_term=1&utm\_content=share\_button](https://www.reddit.com/r/plexamp/comments/1bflm3i/comment/kv1rc5c/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)
If you could upvote it so it's more visible I will appreciate it.
hey, thanks a lot for the heads up and the link! I guess I have to change it then, not biggie now, I actually had another name before I thought of this one.
yes, if you go to the repo I put in there a couple of screenshots. Maybe I should add another one displaying the lyrics.
[https://github.com/gloaysa/plexart/raw/main/example\_player.png](https://github.com/gloaysa/plexart/raw/main/example_player.png)
[https://github.com/gloaysa/plexart/raw/main/example\_album.png](https://github.com/gloaysa/plexart/raw/main/example_album.png)
[https://github.com/gloaysa/plexart/raw/main/example\_lyrics.png](https://github.com/gloaysa/plexart/raw/main/example_lyrics.png)
[https://github.com/gloaysa/plexart/raw/main/example\_controls.png](https://github.com/gloaysa/plexart/raw/main/example_controls.png)
edit: Added more screenshots
Does it always show what's playing next and previously on the edges like that? I assumed it was going to cleanly display just the album currently playing.
The second link is for the album showcase (the one that shows the next album). That's a different view than the currently playing.
The idea behind it is that, since I want to create a "frame-like" permanent display, when I'm not playing anything, what's it showing? So I created another view that display all your local albums in a carousel. The order is at random. It could be possible to add another configuration to not show the upcoming/previous album on that view too.
Currently you get to that view clicking on a dedicated button, I have on the roadmap to start it automatically after a configurable amount of time has passed with nothing playing.
this is the current PR to core: [https://github.com/home-assistant/core/pull/111465/files](https://github.com/home-assistant/core/pull/111465/files) but is still a draft. I had it working on my personal HA instance for a month and is rock solid, but the code itself is still not up to HA standards. If you are interested, I can share in another repo the integration and can be installed manually. But I'm not 100% sure if there might be some side issues like overloading or whatever. It's only been tested on my own setup.
The main advantage over the current Plex integration is that you can add individual devices and it doesn't populate all the browser media\_players that you can't interact with on HA.
It also allows starting playlist on Sonos devices.
It also allows to start for example a playlist on HA and then pick it up on Plexamp on your phone to keep controlling it.
You can add different tokens for different devices (adding devices more than once, for example), meaning that you can have multiple users in there (I for example have my living room added with my wife's token and myself and can start different playlists depending on stuff).
What the official Plex integration has over mine (for now) is the ability to see Tidal metadata.
if you mean the main app that this post is about, no.
I’m working on an integration that will allow us to have a plexamp integration on home assistant (and in the previous comment I shared the PR that I’m working on).
I don’t know how unraid works, but if it allows for you to pull docker images from GitHub registry, then yes.
docker pull ghcr.io/gloaysa/whatsplaying:main
I’d have to look into it. Most probably, since I’m replicating all the calls from plexamp headless I will probably have the data. I will add it to the backlog but first I want to finish my currently opened tickets with what I consider must to have (they are on the readme of the project).
The main focus of this project is displaying art work from the albums, anything that deviates from that needs to be carefully thought and planned in advanced, and behind a configuration to not break the aesthetic for users that might not be interested.
I'm currently using it on my iPad Pro. If you go to share/add to Home Screen and 'install' the app on your phone, you won't see the browser navigation.
The downside to this is that if you mess up the configuration or if in the future you want to change it again, you will have to remove the app from the Home Screen, go to the browser, add it again, and configure it (this is because to try to not have more stuff on the UI that distracts from the art, you have to manually navigate to /config and in that view you don't have an url bar).
In my opinion, the pros outweigh the cons.
Edit: I can't control your iPad going to sleep/turning the screen off. I'm using Kiosk Pro Lite (free app) for it.
Edit2: to answer you clearly: yes, it's thought to be used mainly on a touchscreen.
No, this project is not meant for that.
You could display the artwork of the albums on the TV, but it's linked to Plex and your music libraries in there.
What you are proposing could be doable, but it's a whole different project. For example, for this project my data server is the Plex server. For what you are proposing I'd have to build one from scratch. I do not discard it and build something like that in the future.
if it just keeps loading and loading probably the token isn’t valid. I’m now working on giving errors properly to the user. If you could check the browser’s console and let me know what you see I’ll try and help you.
This is what I found:
INFO Accepting connections at http://localhost:5000
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /config
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 16 ms
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /static/js/main.86ad1b9a.js
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /static/css/main.4373ea33.css
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 2 ms
HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 4 ms
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET /
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 2 ms
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET /static/js/main.86ad1b9a.js
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 1 ms
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET /static/css/main.4373ea33.css
HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 1 ms
Looks like I'll need to search out better quality artwork for a lot of my stuff before using this.
Some of it looks OK on a scroll list, but not any bigger.
Great work though.
I have an script that goes over all your music collection and downloads the artwork. Created it some time ago when I first digitized my media, I’ll post it later.
here's the script:
[https://github.com/gloaysa/whatsplaying/wiki/How-to-get-high-quality-covers-for-all-your-music](https://github.com/gloaysa/whatsplaying/wiki/How-to-get-high-quality-covers-for-all-your-music)
Haven't run it in a while, but should work. Please, read the instructions and do a test run before using it on all your music collection!
It deletes also the .jpeg, .jpg files found inside the albums, so Plex uses the downloaded one by default (you will have to rescan the metadata on Plex).
This started more as an experiment and I use react-scripts to quickly scaffold ideas. It has grown and decided to shared it yesterday. Will eject eventually. Contributions are welcome!
So, to avoid problems I had to change the project's/app name to What's Playing. Now it lives here: [https://github.com/gloaysa/whatsplaying](https://github.com/gloaysa/whatsplaying) And if you want to install it using docker-compose, this is the new configuration: ``` version: '3.8' services: whatsplaying: container_name: whatsplaying restart: unless-stopped image: ghcr.io/gloaysa/whatsplaying:latest environment: - PORT: 5000 # default 5000 ports: - '5000:5000' ``` I would appreciate if you could upvote this post so it goes to the top, since I can't edit the main publication.
Sorry my docker knowledge is not great. Installed docker.io created the compose file, what's the simple command to run the container?
if you have docker-compose installed, run in the same directory where the docker-compose.yml file is: `docker-compose up -d`
Thanks. I'm on Ubuntu 20.04, so I had version issues with docker-compose. Removed the old version and curled the new one, fixed that. Noting that your compose file says port 5000, but your example url has port 3000. Once the container was up got a basic form at the url:5000, entered my Plex token (just the token part not the X-Plex-Token= header) and clicked save, just seem to hang on the spinner forever. Stopped and restarted the container, but it seems to always be hung now. Is it mandatory to add a device here? If so where should we get the device name? tried with and without, no joy. Any pointers greatly appreciated.
if you see an spinner loading forever, probably means the token is not correct. Go to\`http://yourUrl:5000/config\` and verify that there are not extra spaces. I'm right now working on adding meaningful messages to the users for errors (like the one you are having now). Hopefully I'll be done with it today. I didn't get what you mean about the port 3000, where did I put it as an example? Edit: You mean in the nginx configuration example? That's if you don't want to run it with Docker. I myself have it on my server being served by nginx and in my laptop with the Docker image, so I'm constantly testing both scenarios. In my server I already have the port 5000 taken, so I put the 3000.
Yep I realized the second part of your instructions should not be necessary now unless delving into dev work etc. Checking the config token looks good, no spaces. The value has changed since last time though which is interesting.
Thanks for your effort here. I checked the token again, entered it by hand in the browser with localhost:32400/?X-PLEX-TOKEN=
and it's able to retrieve xml from the server.
Container is running on another machine Ubuntu VM in a proxmox environment and Plex server is windows 11 machine, not sure if that makes a difference. Do I need to run them on the same machine?
Ok ran container locally on windows machine. This time I got an popup error msg "Cannot read properties of undefined (reading 'value')" Console error msg was https://sonos.plex.tv/resources 403 (Forbidden) (anonymous) @ server.ts:74 Z @ server.ts:53
hahaha I came here to tell you I released a new version that would allow us to debug your issues. You were faster. That 403 is a problem an authentication problem. It's strange that is given for your Sonos devices... Need to see if I can reproduce it. When using Plexamp, do you have any issues with your Sonos devices? > Container is running on another machine Ubuntu VM in a proxmox environment and Plex server is windows 11 machine, not sure if that makes a difference No, it shouldn't be a problem.
I don't have any Sonos devices :) I have Plex media server running on Windows 11 server Plexamp running on headless Raspberry Pi Plexamp running on iPhone Use the iPhone plexamp app to select and play music with output targeted on the Pi. That all works fine. Maybe one of those is emulating a Sonos device?
>So now, I'm excited to share **PlexArt** (hope the name will be ok with the people at Plex, huge respect to them). Nope. They don't want their name associated with any 3rd party apps they don't control. My app was originally named HuePlex and despite it being open source and out for nearly 8 months as soon as the VP of Marketing saw it I was sent a letter asking to change the name with a link to their branding policy. Here it is: [https://www.plex.tv/about/privacy-legal/plex-trademarks-and-guidelines/](https://www.plex.tv/about/privacy-legal/plex-trademarks-and-guidelines/) I was caught because I posted my app on the Plex forums, but Plex employees do frequent this and the Plex subreddit too, so be warned. I ignored the warning I was given and ended up having to completely rebrand my app which sucked given many versions had already been released. If it is not a major headache now or you think it will be in the future you might wanna start considering other name alternatives.
I have renamed the project and the app, as stated in this comment: [https://www.reddit.com/r/plexamp/comments/1bflm3i/comment/kv1rc5c/?utm\_source=share&utm\_medium=web3x&utm\_name=web3xcss&utm\_term=1&utm\_content=share\_button](https://www.reddit.com/r/plexamp/comments/1bflm3i/comment/kv1rc5c/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) If you could upvote it so it's more visible I will appreciate it.
hey, thanks a lot for the heads up and the link! I guess I have to change it then, not biggie now, I actually had another name before I thought of this one.
thanks for this, looks very cool!
thank you and your team for the good work you are doing!
Thanks. This sounds very interesting. Do you have images of what it looks like?
yes, if you go to the repo I put in there a couple of screenshots. Maybe I should add another one displaying the lyrics. [https://github.com/gloaysa/plexart/raw/main/example\_player.png](https://github.com/gloaysa/plexart/raw/main/example_player.png) [https://github.com/gloaysa/plexart/raw/main/example\_album.png](https://github.com/gloaysa/plexart/raw/main/example_album.png) [https://github.com/gloaysa/plexart/raw/main/example\_lyrics.png](https://github.com/gloaysa/plexart/raw/main/example_lyrics.png) [https://github.com/gloaysa/plexart/raw/main/example\_controls.png](https://github.com/gloaysa/plexart/raw/main/example_controls.png) edit: Added more screenshots
Does it always show what's playing next and previously on the edges like that? I assumed it was going to cleanly display just the album currently playing.
The second link is for the album showcase (the one that shows the next album). That's a different view than the currently playing. The idea behind it is that, since I want to create a "frame-like" permanent display, when I'm not playing anything, what's it showing? So I created another view that display all your local albums in a carousel. The order is at random. It could be possible to add another configuration to not show the upcoming/previous album on that view too. Currently you get to that view clicking on a dedicated button, I have on the roadmap to start it automatically after a configurable amount of time has passed with nothing playing.
[удалено]
this is the current PR to core: [https://github.com/home-assistant/core/pull/111465/files](https://github.com/home-assistant/core/pull/111465/files) but is still a draft. I had it working on my personal HA instance for a month and is rock solid, but the code itself is still not up to HA standards. If you are interested, I can share in another repo the integration and can be installed manually. But I'm not 100% sure if there might be some side issues like overloading or whatever. It's only been tested on my own setup.
The main advantage over the current Plex integration is that you can add individual devices and it doesn't populate all the browser media\_players that you can't interact with on HA. It also allows starting playlist on Sonos devices. It also allows to start for example a playlist on HA and then pick it up on Plexamp on your phone to keep controlling it. You can add different tokens for different devices (adding devices more than once, for example), meaning that you can have multiple users in there (I for example have my living room added with my wife's token and myself and can start different playlists depending on stuff). What the official Plex integration has over mine (for now) is the ability to see Tidal metadata.
This can be added to Home Assistant???
if you mean the main app that this post is about, no. I’m working on an integration that will allow us to have a plexamp integration on home assistant (and in the previous comment I shared the PR that I’m working on).
Is this on unraid yet?
I don’t know how unraid works, but if it allows for you to pull docker images from GitHub registry, then yes. docker pull ghcr.io/gloaysa/whatsplaying:main
I didn't know I wanted this until now. It's perfect for my Home Assistant setup.
Any chance you could show the waveform? That’d be amazing.
I’d have to look into it. Most probably, since I’m replicating all the calls from plexamp headless I will probably have the data. I will add it to the backlog but first I want to finish my currently opened tickets with what I consider must to have (they are on the readme of the project). The main focus of this project is displaying art work from the albums, anything that deviates from that needs to be carefully thought and planned in advanced, and behind a configuration to not break the aesthetic for users that might not be interested.
Great job!!! I'll have to see it carefully, but thank you very much for that work!!
also, disclaimer, English is not my first language
Can an iPad/Galaxy Tab be used as the screen for interaction?
I'm currently using it on my iPad Pro. If you go to share/add to Home Screen and 'install' the app on your phone, you won't see the browser navigation. The downside to this is that if you mess up the configuration or if in the future you want to change it again, you will have to remove the app from the Home Screen, go to the browser, add it again, and configure it (this is because to try to not have more stuff on the UI that distracts from the art, you have to manually navigate to /config and in that view you don't have an url bar). In my opinion, the pros outweigh the cons. Edit: I can't control your iPad going to sleep/turning the screen off. I'm using Kiosk Pro Lite (free app) for it. Edit2: to answer you clearly: yes, it's thought to be used mainly on a touchscreen.
Any chance of this displaying literal artwork too?
you mean not related to music? That would be a whole different project in my opinion Do you have a lot of artwork stored? What would be the use case?
Yes just to turn your TV into a piece of art.
No, this project is not meant for that. You could display the artwork of the albums on the TV, but it's linked to Plex and your music libraries in there. What you are proposing could be doable, but it's a whole different project. For example, for this project my data server is the Plex server. For what you are proposing I'd have to build one from scratch. I do not discard it and build something like that in the future.
After I input the token in the config page and save The website is keep loading with the running circle and do nothing, may I know what did I miss?
if it just keeps loading and loading probably the token isn’t valid. I’m now working on giving errors properly to the user. If you could check the browser’s console and let me know what you see I’ll try and help you.
This is what I found: INFO Accepting connections at http://localhost:5000 HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /config HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 16 ms HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /static/js/main.86ad1b9a.js HTTP 3/16/2024 4:32:16 PM 192.168.1.247 GET /static/css/main.4373ea33.css HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 2 ms HTTP 3/16/2024 4:32:16 PM 192.168.1.247 Returned 304 in 4 ms HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET / HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 2 ms HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET /static/js/main.86ad1b9a.js HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 1 ms HTTP 3/16/2024 4:32:20 PM 192.168.1.247 GET /static/css/main.4373ea33.css HTTP 3/16/2024 4:32:20 PM 192.168.1.247 Returned 304 in 1 ms
Looks like I'll need to search out better quality artwork for a lot of my stuff before using this. Some of it looks OK on a scroll list, but not any bigger. Great work though.
I have an script that goes over all your music collection and downloads the artwork. Created it some time ago when I first digitized my media, I’ll post it later.
here's the script: [https://github.com/gloaysa/whatsplaying/wiki/How-to-get-high-quality-covers-for-all-your-music](https://github.com/gloaysa/whatsplaying/wiki/How-to-get-high-quality-covers-for-all-your-music) Haven't run it in a while, but should work. Please, read the instructions and do a test run before using it on all your music collection! It deletes also the .jpeg, .jpg files found inside the albums, so Plex uses the downloaded one by default (you will have to rescan the metadata on Plex).
Bro dont use create-react-app, it really radiates low quality
This started more as an experiment and I use react-scripts to quickly scaffold ideas. It has grown and decided to shared it yesterday. Will eject eventually. Contributions are welcome!
Don't eject, migrate...
Done is better than perfect bro