Modernize the script

[jiri-janousek]

Hello @a-m-s. I'm posting tiliado/nuvolaplayer#424 for you as well because there may still be a few tiny changes to make (probably the first three tasks from the check list). Could you check that `nuvolasdk convert-project' works as advertised? Thanks :-)

---

There have been a lot of changes lately. I need you to review and modernize your script (tiliado/nuvolaplayer#424) so that it keeps providing the best user experience possible. Eventually, I'd like to push some of them to Ubuntu software store as snap packages (tiliado/nuvolaplayer#273). If it increases the revenue of the project, I'd love to share it with the script maintainers (tiliado/nuvolaplayer#430).

I also need to know whether you still use this script and are willing to maintain it further. If you don't, I'll remove it from the stable repository until a new maintainer is found. No hard feelings though, you created & maintained it voluntarily and I'm glad for that.

Checklist

Use it to mark finished items.

• .gitignore is up-to-date
• README.md corresponds to the latest template
• metadata.in.json uses two spaces for indentation and no trailing whitespace
• integrate.js uses Standard JavaScript coding style
• The Chromium-based backend is required and Flash is disabled unless it is really required.
• The integration script works as expected with Nuvola API 4.11.
• Custom actions were added if applicable.
• Volume management is integrated if applicable.
• A track progress bar is integrated if applicable.
• Track rating is integrated if applicable.
• The web view snapshot (src/webview.png) was added.

Getting started

Since Nuvola migrated from DEB/RPM packages to cross-distribution Flatpak packages, the development also occurs inside Flatpak sandbox. All you need is to install Flatpak and Nuvola App Developer Kit (ADK), then you can start hacking. You don't have to worry about installing/building of dependencies, all you need is at your disposal. Learn more about Nuvola ADK.

The way the web app scripts are launched has changed as well. All you need is to launch Nuvola ADK, cd to your project directory and run nuvolaruntime -D.

Semi-automatic changes

• I tried hard to make some changes automatic. Install Nuvola ADK and run nuvolasdk convert-project. If there are any issues, please report them.
• Update .gitignore: nuvolasdk convert-project should have fixed that.
• Update README.md: nuvolasdk convert-project will provide you with the new template (template--README.md) and a difference between it and your README.md (template--README.md.diff). Update your README.md to match the template - I will probably copy most of the template content and keep only the Copyright section from your current README.md.
• Convert metadata.in.json: The metadata.in.json now uses two spaces for indentation and no trailing whitespace. nuvolasdk convert-project should have fixed that.
• Convert integrate.js: Nuvola adopted Standard JavaScript coding style. This allows us to automatically check the scripts for coding errors and mistakes. nuvolasdk convert-project runs standard --fix, which tries to convert your integrate.js.
  • If you see errors regarding tab characters, replace tabs with spaces in a text editor and run standard --fix again.
  • If there is something ugly, please fix that manually. It sometimes creates long if-else single lines.
  • If there are other errors, please fix them and run standard --fix again and again...

• Commit the changes before moving to the next section.

Chromium-based backend and HTML5 playback without Flash plugin

A long-time effort to get rid of Flash plugin may finally succeed. Nuvola had to switch a web rendering engine from WebKitGTK+ to Chromium Embedded Framework. Many scripts have already been ported, it's time to port the rest.

• Add/set "requirements": "Chromium[65] Codec[MP3] Feature[MSE]" to metadata.in.json, run ./configure, and then launch your script with nuvolaruntime. Remember that you need to run ./configure whenever you changes metadata.in.json.
• If there are any JavaScript errors or the website fails to load, let me know to help you.
• Note that some synchronous API calls are not available in the Chromium-based backend for technical reasons. Use async variant instead - see Nuvola 4.8 API changelog.
• Check whether audio playback works right away.
• If your web app complains about missing Flash plugin, use "requirements": "Chromium[65] Codec[MP3] Feature[MSE] Feature[Flash]" and test again.

Update integration script

• Set '"api_major": "4", "api_minor": "11" in metadata.in.json.
• Look at NuvolaKit JavaScript API changelog - a few useful functions were added.
• Make sure that your script and basic integration features (player metadata) work as expected.

Add new features

Several new features have been added to Nuvola. Look at them whether they apply to your web app.

• Custom actions - these are not new, but aren't widely used.
• Volume management - since Nuvola 4.5
• Track progress bar - since Nuvola 4.5
• Track rating - since Nuvola 3.1

Add web view snapshot

• Provide a representative snapshot of web view of your script to be used for screenshots. See Provide per-app screenshots for AppData nuvolasdk#5 for the reasoning behind that.
• First, navigate to a proper page.
• Enable Developer tools in Preferences and open Developer sidebar.
• Try to remove annoying elements (ads, nag banners):
  
• Open Web View sidebar, set dimensions to 1080×600 and click Resize web view. If is necessary, e.g. because of the breakpoints of a responsive layout of the page, you can choose narrower dimensions.
• Then take a snapshot of the web view and save it as src/webview.png.
• Run ./configure; make all and look at the resulting screenshots in the screenshots directory.
• The base screenshot still says "Deezer" but that will change to "Nuvola Player" or something like that in the final base screenshot. Also, the Unity base screenshot has an extra scrollbar, that will be fixed as well.

[a-m-s]

Done.