Page MenuHomePhabricator

Restore "about" feature in article gallery view
Closed, ResolvedPublic

Description

Problem

The media PCS endpoint used in the gallery view was removed. See T248553: `media` endpoint stopped working as before

The gallery was restored using the media-list endpoint but it doesn't have the media metadata so the about button is currently unavailable.

This task is about adding the about button back with the media description, author, and license.

Solution

The media metadata can be retrieved using the LicenseUrl|LicenseShortName|ImageDescription|Artist&iiextmetadatalanguage=en&iiextmetadatamultilang=1&iiprop=url|extmetadata|dimensions&iiurlwidth=640&prop=imageinfo&rawcontinue=&titles=File:Volc%C3%A1n_Ubinas,_Arequipa,_Per%C3%BA,_2015-08-02,_DD_50.JPG | MW API.

Options to integrate it in the current version of the code include:

  1. fetch metadata (in batches) for all media as part of useArticle(). This change is made in a single place and the rest of the app stays as it is. It adds a delay before showing the article but the gallery and the about features will be fast.
  2. fetch metadata when the user selects the about button. This keeps the article loading as it is now but adds a delay when users use the about feature. It may require a loading indicator.
  3. lazy load the metadata after the article is loaded but before (hopefully) the users use the about button. This is more complex but probably gives the best user experience. Although all those network requests are quite wasteful for those users who will never look at the metadata.

For MVP

Implement option 2 that will fetch metadata when the user selects the about button. Use the loading indicator that exists for page previews within the app.

Description section: When the description is not available from the API, fallback to captions. If captions are not available, fallback to using the image file name in the description section.

Author and license: When the author information is not available, use the copy "Unknown author"

Event Timeline

SBisson triaged this task as High priority.Mar 26 2020, 6:59 PM
SBisson updated the task description. (Show Details)
  1. The easiest but require more user bandwidth before read the article
  2. Haven't tested yet, but it's possible the image containing no metadata
  3. can we show center key as loading indicator?

extra benefit if we have T246681: Load Media API asynchronously (Performance Recommendation)

Is it possible to tell how long the delay is for either option 1 or 2?
Milliseconds? Seconds? long enough for a user to notice?

My preference is for Option 2 for MVP.

Is it possible to tell how long the delay is for either option 1 or 2?
Milliseconds? Seconds? long enough for a user to notice?

Yes, probably long enough for users to notice but probably reasonable in most cases. However, this would need a loading indicator and the possibility to cancel if they are tired of waiting since some networks are slow and unreliable.

My preference is for Option 2 for MVP.

Me too.

Recommend : loading indicator similar to article preview

Screen Shot 2020-03-27 at 16.03.54.png (435×360 px, 11 KB)

Second option with a loading indicator does seem to make more sense to me as well

hueitan added a subscriber: SGautam_WMF.

@SGautam_WMF @AMuigai Don't bother with the empty content, API handles that already, given at least Unknown author

Screen Shot 2020-03-30 at 23.42.24.png (435×360 px, 31 KB)

Article en/Brazil, 3rd image has no image info so the popup has only a header.

Screen Shot 2020-03-31 at 06.46.04.png (580×480 px, 96 KB)

Ok, then please ignore my above message and we need the copy text for no image info cases.

just curious when checking it's file page, https://commons.wikimedia.org/w/index.php?curid=1704283, it does have the description / author / license but doesn't return in the response?

Ok, then please ignore my above message and we need the copy text for no image info cases.

just curious when checking it's file page, https://commons.wikimedia.org/w/index.php?curid=1704283, it does have the description / author / license but doesn't return in the response?

If you make the API call against commons it returns the image info: https://commons.wikimedia.org/w/api.php?format=json&formatversion=2&origin=*&action=query&prop=imageinfo&iiextmetadatafilter=License|LicenseShortName|ImageDescription|Artist&iiextmetadatalanguage=en&iiextmetadatamultilang=1&iiprop=url|extmetadata&titles=File%3ANational_Seal_of_Brazil_(color).svg

Note that the api base url is commons.wikimedia.org not commons.wikipedia.org, things work as expected, and there are still some cases given no image info, so copy text/design still needed here.

for example if we go to the article Brasilien in language de

http://localhost:8080/#/article/de/Brasilien

starting from 6th image on gallery, no imageinfo is given.

for example if we go to the article Brasilien in language de

http://localhost:8080/#/article/de/Brasilien

starting from 6th image on gallery, no imageinfo is given.

To follow up this message, this image is not available in commons, therefore it returns no image info

However, the image is not exported to commons, but still available in Wikipedia

Commons API :
https://commons.wikimedia.org/w/api.php?format=json&formatversion=2&origin=*&action=query&prop=imageinfo&iiextmetadatafilter=License|LicenseShortName|ImageDescription|Artist&iiextmetadatalanguage=de&iiextmetadatamultilang=1&iiprop=url|extmetadata&titles=File:Klima_portoalegre.svg

Wikipedia API : documentation
https://de.wikipedia.org/w/api.php?format=json&formatversion=2&origin=*&action=query&format=json&prop=imageinfo&iiextmetadatamultilang=1&iiprop=url|extmetadata&titles=File:Klima_portoalegre.svg

Question, are we safe to use Wikipedia API when no data response from Commons API? are they stable API?

Question, are we safe to use Wikipedia API when no data response from Commons API? are they stable API?

@SBisson do you know?

It looks like we can get the image metadata from the wiki where it is hosted. We can figure out if it's common or the current language wiki by looking at the srcset object in the media API response.