Provide per-app screenshots for AppData

[jiri-janousek]

Blocked by: #8

Currently, Nuvola uses screenshots of Deezer for all scripts, which is weird at least, e.g. you look for "Spotify" in GNOME Software and it shows an app with the screenshots of Deezer.

Since I cannot expect from script maintainers to create and periodically update their screenshots with Nuvola's desktop integration features, it would be better to create generic screenshots of the features and then replace the generic web view with a screenshot of the actual web view of a particular app.

• First, it is necessary to agree on the dimensions of the web view screenshots that are suitable for most apps. Nuvola should provide a Web View sidebar as a part of developer's tools. The sidebar will be used to retrieve current dimensions as well as to resize the web view to dimensions entered by the developer.

  Each maintainer should provide the minimal size when all playback controls are visible and the web page is usable, i.e., there is no clipping of the web page and no important elements are hidden behind a scrollbar.

• Once we agree on the dimensions, the maintainers will use the Web View sidebar to set the dimensions, take a snapshot of the web view and save it as src/webview.png.

• Nuvola SDK will combine the base screenshot and the web view snapshot into a final screenshot, which will be hosted on https://nuvola.tiliado.eu and referenced in AppData XML.

• Script maintainer may reference the screenshots in README.md.

Tasks:

• Nuvola adds Web View sidebar to get/set web view dimensions and take a snapshot.
• Maintainers are asked to provide minimal dimensions for their web apps.
• Suitable dimensions are selected and maintainers are asked to provide web view snapshots.
• Nuvola SDK combines base screenshots with web view snapshots.
• The final screenshots are pushed to https://nuvola.tiliado.eu
• Nuvola SDK references the screenshots in AppData XML.
• Maintainers are asked to reference the final screenshots in README.

[jiri-janousek]

Web View Sidebar

[jiri-janousek]

• "All screenshots should have a 16:9 aspect ratio, and should have a width that is no smaller than 620px..." -- AppStream ⁠Chapter 4. Metadata Quickstart
• 16:9 = 1280×768, 1600×900
• elementaryOs: dock 90 px, top bar 35 px, notifications 320 px from the right side, appindicator menu 385 px from right, mpris sound applet 389 from right => 1280×768 → 890×643 for window
• GNOME: top bar 35px, appindicator menu 238 px from right, MPRIS 385px from right, dock 75 px from left => 1280×768 → 820×733 for window
• Unity: left dock 76 px, quick list 175 px, top bar 35, MPRIS 335 px, HUD 300 px => 1280×768 → 695×733 for window

[jiri-janousek]

• The most common display resolutions of web users are HD 1366×768 and FHD 1920×1080 (source).
• Ideally, the final screenshot should fit the web browser window without downscaling. Unlikely on HD...
• GNOME Software uses approx. 806×423 px area for screenshots.
• Large screenshot, large file.
• Therefore, 1600×900 is too large. I'd go with 1280×768 for the final screenshots and the integration/desktop widgets will overlap the web view partially.

[jiri-janousek]

A few examples of my scripts:

• Deezer 991×600 (obviously, the minimal content width was set to show ads fully)

• Spotify 736×600 (ad clipped)
  

• Google Play Music 946×600 (with the scrollbar clipped)

[jiri-janousek]

An additional guideline for web view snapshots: Try to remove annoing elements (ads, nag banners):

Deezer 2 983×600

[jiri-janousek]

Hello @a-m-s, could you jump in? What are the minimum dimensions of the web view for your scripts? Please use the Web View sidebar from eu.tiliado.NuvolaAdk//master (that of stable suffers from a GTK+ bug and hangs).

[a-m-s]

I'm assuming you want a player view, rather than just the home page?

Jupiter broadcasting has a responsive design that changes as it gets smaller, so "minimal" is a tricky business. 1280x768 is fine. 991x600 is not, but 736x600 is fine again, although the navigation bar has now shrunk to a hamburger menu.
1280x768

991x600

736x600

BBC iPlayer is fine at any size, although more and more navigation items move to the "more" drop down. 1280x768 is good. It doesn't have visible player controls unless you mouse-over anyway.
1280x768

991x600

Amazon needs a horizontal scroll bar below 1020 pixels wide. The vertical width varies according to content, but clipping it would not be a problem.
1280x768

[jiri-janousek]

Jupiter broadcasting has a responsive design that changes as it gets smaller, so "minimal" is a tricky business. 1280x768 is fine. 991x600 is not, [...]

How about 1080×650?

BBC iPlayer is fine at any size, although more and more navigation items move to the "more" drop down. 1280x768 is good. It doesn't have visible player controls unless you mouse-over anyway.
1280x768

Can be the player controls captured or do they fade away immediately?

---

It's time to spin up my virtual machines and test following:

• The virtual display size: 1280×768
• The web view width: 1080 px => 200 px left, enough space for a vertical dock or for Nuvola's sidebar
• The web view height: 650 px => 118 px left, enough space for a horizontal dock, a system bar and a title bar

[a-m-s]

1080x650 is not so great. The controls are no longer visible.

The BBC controls fade very quickly. I could capture it with another snapshot tool. Of course, if the controls are visible then it's playing a video and the image in the viewer is likely to be less inspiring.

[jiri-janousek]

[me] 16:9 = 1280×768, 1600×900

Well, 1280×720 is 16:9, not 1280×768 :-/

1080x650 is not so great. The controls are no longer visible.

Which is the best width < 1080 px for 650 px height?

The BBC controls fade very quickly. I could capture it with another snapshot tool. Of course, if the controls are visible then it's playing a video and the image in the viewer is likely to be less inspiring.

Fair point, use whathever screen is the most representative for the web app. Btw, I've added an optional delay to the snapshot tool. I think I will need it for YouTube.

[a-m-s]

The website changes layout at 960px, so the "best" is 959x650. 1280x720 is fine too.

[jiri-janousek]

• This is an elementaryOS Loki base screenshot with 1080×600 transparent web view area:
• The same for Ubuntu 16.04 with Unity:
• So we really cannot have 1080×650 but only 1080×600 :-(

[jiri-janousek]

 ~/dev/repo/nuvola/apps/nuvola-app-deezer $ make all
python3 -m nuvolasdk create-addondata  -o nuvola-app-deezer.metainfo.xml -m metadata.json
python3 -m nuvolasdk create-screenshots -o screenshots -i src/webview.png
'/home/fenryxo/dev/repo/nuvola/nuvolasdk/nuvolasdk/data/screenshots/pantheon.png' → '/home/fenryxo/dev/repo/nuvola/apps/nuvola-app-deezer/screenshots/pantheon.png'
'/home/fenryxo/dev/repo/nuvola/nuvolasdk/nuvolasdk/data/screenshots/unity.png' → '/home/fenryxo/dev/repo/nuvola/apps/nuvola-app-deezer/screenshots/unity.png'
Timestamp file: '/home/fenryxo/dev/repo/nuvola/apps/nuvola-app-deezer/screenshots/timestamp.txt'

It looks ok on white background, but in reality, there are semitransparent pixels! Need to read more Pillow doc.

[jiri-janousek]

Fixed:

[jiri-janousek]

Hello @a-m-s, could you try that with your script? Save a screenshot as src/webview.png, install the latest Nuvola ADK and run ./configure; make all. The web view area is 1080×600. If the screenshot is narrower than 1080, it is centered and the rest is filled with a gray color.

The base screenshots are not final (e.g. the Unity one has a scrollbar that should be removed eventually), but they are good enough for testing.

[a-m-s]

It seems to work ok, although the base image still says "Deezer".

[jiri-janousek]

It will say "Nuvola Player" or something like that in the final base screenshot. I've been working on a player demo script to be used to create base screen shots.

[a-m-s]

Do I need to do anything else now?

[jiri-janousek]

You can commit the web view snapshots. I'll then use them when the final base screenshots are ready.

[jiri-janousek]

I've been working on a player demo script to be used to create base screen shots.

→ #8

[jiri-janousek]

🎉 All scripts have a web view screenshot.

[jiri-janousek]

New base screenshots show "Nuvola Player" instead of "Deezer".

[jiri-janousek]

• Screenshots are built with Circle CI: https://circleci.com/gh/tiliado
• I just need to download them and publish to https://nuvola.tiliado.eu/screenshots/apps

[jiri-janousek]

Fixed in Nuvola 4.14