Web UI hangs in main.js

[rickbol]

running MPD.FM at the console returns:

sh-5.1$ /usr/bin/node /home/srv-mpd-fm/MPD.FM/bin/www Station file "/home/srv-mpd-fm/MPD.FM/data/stations.json" will be used MPD client ready and connected to localhost:6600

then a connect from browser returns:

GET / 200 46.571 ms - 5045 GET /css/pure-min.css 200 10.389 ms - 16449 GET /css/main.css 200 14.537 ms - 2835 GET /js/plugins.js 200 26.256 ms - 760 GET /js/vendor/ReconnectingWebSocket.js 200 25.816 ms - 14429 GET /js/main.js 200 26.496 ms - 9383 GET /img/pause.svg 200 23.674 ms - 865 GET /img/play.svg 200 24.604 ms - 820 GET /icon.png 200 3.814 ms - 16358

In the browser I see an incompletely loaded page, with progress dots marching over a amshed up combo of play\pause buttons. In viewing the browsers dev tools... Console...

Uncaught TypeError: Vue.component is not a function

http://192.168.3.92:4200/js/main.js:17 main.js:17 Vue.component('radio-station', { props: ['station'] }) There's also a warning about using a development version of vue.global.js instead of a production version. It appears to be loading from a cdn in the cloud. The incompletely load webpage reports: Can't reach server - trying to reconnect... The server can't reach MPD - trying to reconnect... in the page. This is as far as I get. The default stations.json never loads. I'm running this on intel hardware and Debian Bullseye.

[wkrick]

I'm seeing the same thing. I'm not sure how to debug this. I don't know if the error is in the MPD service itself or if the issue is with MPD.FM. There hasn't been any updates to MPD.FM since 2018 so it's entirely possible that something has changed with MPD that broke it.

This is what I'm seeing: https://i.imgur.com/UxDcYyk.png

Also, I think the URL for the first station in the stations.json file isn't valid anymore...

https://bytefm.sslcast.addradio.de/bytefm/main/high/stream.mp3

I believe that this is a working streaming URL for ByteFM...

https://bytefm--di--nacs-ice-01--01--cdn.cast.addradio.de/bytefm/main/mid/stream.mp3

EDIT: I think part of the problem is the way that the Vue js framework is included in the index.html file. This file was last updated in Feb 6 2018 and at the time, the most current version of Vue was v2.5.13. The way that vue is referenced in the file always pulls the latest version of Vue which happens to be v3.2.37.

You can modify the index.html file near the end so that it pulls in a specific version of Vue like this...

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

Or if you just want the latest version of Vue 2.x you can do this...

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

While this fixes the UI somewhat for me, I'm still seeing an issue. It appears that the list of radio stations isn't getting loaded for whatever reason. I suspect a permissions problem, but I'm not sure how to troubleshoot further.

EDIT 2: I managed to get it working.

First, I can only get it working if I specify Vue 2.5.13 in /public/index.html. It seems like newer versions of Vue have changed some of the syntax and will require more invasive changes.

Second, I needed to move the radio-station inline template from /public/index.html to /public/js/main.js into the component definition because nothing I did would make it work as an inline template. I believe that inline templates were removed from Vue at some point but I'm not sure exactly which version.

I'd like to make whatever changes are needed for it to work with the latest version of Vue 3 but so far I haven't been successful. I know just enough about Vue to be dangerous so this may take some time.

If you want more information about my changes so far, let me know.

[wkrick]

I've managed to update the app so that it works correctly with the latest version of Vue. I've created a pull request...

https://github.com/florianheinemann/MPD.FM/pull/8

...from my modified fork...

https://github.com/wkrick/MPD.FM

[SJB78]

@wkrick Just wanted to say thanks for the fork. My PI had been in storage for some time, and MPD.FM had stopped working. Switching to your fork has it up and running again. Super happy!