Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide per-app screenshots for AppData #5

Closed
6 of 7 tasks
jiri-janousek opened this issue Apr 24, 2018 · 24 comments
Closed
6 of 7 tasks

Provide per-app screenshots for AppData #5

jiri-janousek opened this issue Apr 24, 2018 · 24 comments
Assignees
Labels
type: enhancement A new feature or an improvement of already present feature.

Comments

@jiri-janousek
Copy link
Member

jiri-janousek commented Apr 24, 2018

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 added a commit to tiliado/nuvolaplayer that referenced this issue Apr 24, 2018
It is used to retrieve/change web view dimensions and to take a
snapshot.

Issue: tiliado/nuvolasdk#5
@jiri-janousek
Copy link
Member Author

Web View Sidebar
nuvola_webview_sidebar

@jiri-janousek
Copy link
Member Author

  • "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
Copy link
Member Author

  • 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
Copy link
Member Author

jiri-janousek commented Apr 26, 2018

A few examples of my scripts:

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

  • Spotify 736×600 (ad clipped)
    spotify

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

@jiri-janousek
Copy link
Member Author

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

Deezer 2 983×600
deezer2

@jiri-janousek
Copy link
Member Author

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
Copy link

a-m-s commented Apr 26, 2018

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
jb1280x768
991x600
jb991x600
736x600
jp736x600

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
bbc1280x768
991x600
bbc991x600

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
amazon1280x768

@jiri-janousek
Copy link
Member Author

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
Copy link

a-m-s commented Apr 26, 2018

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

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 added a commit to tiliado/nuvolaplayer that referenced this issue Apr 26, 2018
@jiri-janousek
Copy link
Member Author

[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
Copy link

a-m-s commented Apr 27, 2018

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

@jiri-janousek
Copy link
Member Author

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

@jiri-janousek
Copy link
Member Author

 ~/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'

pantheon

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

@jiri-janousek
Copy link
Member Author

Fixed:
pantheon

jiri-janousek added a commit that referenced this issue May 9, 2018
It automatically detects `src/webview.png` file and creates screenshots
in the `screenshots` directory.

Issue: #5
@jiri-janousek
Copy link
Member Author

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
Copy link

a-m-s commented May 10, 2018

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

@jiri-janousek
Copy link
Member Author

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
Copy link

a-m-s commented May 10, 2018

Do I need to do anything else now?

@jiri-janousek
Copy link
Member Author

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

@jiri-janousek
Copy link
Member Author

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

#8

jiri-janousek added a commit to tiliado/nuvola-app-deezer that referenced this issue Jun 7, 2018
- Issue: tiliado/nuvolaplayer#420
- Issue: tiliado/nuvolasdk#5

Signed-off-by: Jiří Janoušek <[email protected]>
@jiri-janousek jiri-janousek removed the blocked This ticket is blocked by another ticked, which needs to be resolved first. label Jun 9, 2018
@jiri-janousek jiri-janousek added status: in progress type: enhancement A new feature or an improvement of already present feature. and removed enhancement labels Jun 18, 2018
@jiri-janousek jiri-janousek self-assigned this Jun 18, 2018
@jiri-janousek
Copy link
Member Author

🎉 All scripts have a web view screenshot.

jiri-janousek added a commit that referenced this issue Jul 6, 2018
Issue: #5

Signed-off-by: Jiří Janoušek <[email protected]>
@jiri-janousek
Copy link
Member Author

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

@jiri-janousek
Copy link
Member Author

jiri-janousek added a commit that referenced this issue Nov 10, 2018
Issue: #5

Signed-off-by: Jiří Janoušek <[email protected]>
@jiri-janousek jiri-janousek added release notes The work on the ticket is ready, but needs to be released and announced. and removed status: in progress labels Nov 11, 2018
@jiri-janousek
Copy link
Member Author

Fixed in Nuvola 4.14

@ghost ghost removed the release notes The work on the ticket is ready, but needs to be released and announced. label Nov 11, 2018
jiri-janousek added a commit to tiliado/nuvola.tiliado.eu that referenced this issue Dec 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement A new feature or an improvement of already present feature.
Projects
None yet
Development

No branches or pull requests

2 participants