Azuracast: New public player questions (Vue vs JS)

[gammaw]

Hi,

since recent player code changes (https://github.com/AzuraCast/AzuraCast/commit/6ebb9f8e3bdd87e80b3f9e3abe13af6424e026ac and https://github.com/AzuraCast/AzuraCast/commit/59ea35d7073b1f5fdadf3f23fad681e4c37722b8) we don't quite get how the player architecture works.

We still see in the HTML code this Javascript dependency: /static/dist/radio_player-41928e87b3.js It seems to be a generated file. Can you tell what source files (Vue etc.?) and what tools do you use to generate it?

The background is that we'd like to embed and customize the player without having the dependency to those JS files for at least two reasons: 1) every time the "hash" in the file name changes our player is broken after updates and 2) we don't want an explicit dependency to the player code so that we can update independently. For example, now we can't update Azuracast because it would break our embedded player (we don't use the embed code because we don't need things like song length etc.).

Thanks in advance!

[SlvrEagle23]

@gammaw The Vue component used to build the public radio player code can be found here:
https://github.com/AzuraCast/AzuraCast/blob/master/web/static/vue/radio_player.vue

You can customize this code and build it yourself in order to have a completely independent player that isn't affected by our build process.

[gammaw]

@SlvrEagle23 thanks. Can you give us a hint how to translate the vue file into js the easiest? Vue seems to be a non-trivial environment to dive into. What is your build process?

[gammaw]

@SlvrEagle23 @Vaalyn I'm trying to reproduce /static/dist/radio_player-7987ae4284.js (your current build at the moment). This is what I tried:

• I start with this: https://github.com/AzuraCast/AzuraCast/blob/master/web/static/vue/radio_player.vue
• I set up an npm/vue environment and I use instant prototyping (vue build radio_player.vue);
• As a result, I get one css file and two js files (called app.7de69e28.js and chunk-vendors.aef76cec.js).

It seems to me that your js file is kind of the concatenation of my two js files and the css. Am I on the right track?

Thanks!

[SlvrEagle23]

@gammaw Here's how we build the Vue components:
https://github.com/AzuraCast/AzuraCast/blob/master/web/static/gulpfile.js#L158-L182

We use the Gulp build toolchain to handle moving, minifying, and cache-busting our static assets across the board, but to handle the Vue components, we have Webpack handle that job. If you're just building the Vue component, you can just run Webpack directly with a configuration similar to the one we use.

[gammaw]

@SlvrEagle23 thanks a lot. In the 0.9.5 release notes you say that the new player makes it easier to build custom players. What is the recommended work flow to do so? The way with Gulp etc. you described above?

Background: we're having a hard time fixing our current player as it is based on the HTML code of your old player, which was using your CSS and JS files (the JS was not used to build the player itself, it just exported functions). Now, using the JS you generate out of Vue is very painful to build a HTML page (and probably a no go) but this would enable us not setting up a Vue build process. Worst of all, we cannot update Azuracast since you changed the player.

[SlvrEagle23]

@gammaw If you aren't able to make our player on our web site work directly, even with custom javascript and custom CSS support on public pages, then your best bet is likely to build the Vue single-file component yourself with Webpack.

The frontend build process is not always simple these days, and in our case, the reason we hash the filename whenever it's changed is to fix issues with browser caches. It's unfortunately necessary for our setup.

[Vaalyn]

Closing the issue as it seems to be resolved.