Include "Media of the day" in Explore

[vanshikaarora]

Summary: Explore fragment currently is used for featured Images Unlike Wikimedia commons website main page includes both category and Images we can add the same feature in our app's explore fragments for featured category.

How to add this feature?

The explore fragment can contain two tabs one for featured Images the other for featured categories. Which will have list of the featured categories fetched from API

Would you like to work on the issue? Yes

[vanshikaarora]

For working on this I have gone through the web page and the API'S. Whereby I found that this feature can be implemented just like on the website.

• A new tab for categories can be added in the explore
• This tab will contain the list of categories which are hardcoded
• Clicking on any of them sends a network request to fetch the featured categor

@maskaravivek @nicolas-raoul @misaochan @neslihanturan Kindly share your opinion regarding this :)

[nicolas-raoul]

"Media of the day" could be added just before the featured pictures that appear when you open "Explore", good idea.

The categories system is being slowly replaced with the Structured Commons system, so I don't think investing much time developing new category browsing features should be our priority. In a few weeks I will submit an issue for adding Structured Commons properties when uploading, that will be a big task (big enough for a GSoC for instance) and make more sense to implement. I will try to think of a similar top-down browsing UI within Structured Commons.

[vanshikaarora]

The categories system is being slowly replaced with the Structured Commons system, so I don't think investing much time developing new category browsing features should be our priority. In a few weeks I will submit an issue for adding Structured Commons properties when uploading, that will be a big task (big enough for a GSoC for instance) and make more sense to implement. I will try to think of a similar top-down browsing UI within Structured Commons.

Structured Commons System would definitely be better indeed :)

[vanshikaarora]

"Media of the day" could be added just before the featured pictures that appear when you open "Explore", good idea.

For this In the documentation is see the API for fetching Media of the day.

So shall I create a separate issue for this or work in the same?

[vanshikaarora]

"Media of the day" could be added just before the featured pictures that appear when you open "Explore", good idea.

@nicolas-raoul Shall I add the "Media of the day" along with "Featured pictures" in a heterogeneous RecyclerView Or Should I create a separate tab for "Media of the day"

[nicolas-raoul]

No need to create a separate tab, I think. Most people don't need to know how the pics are selected. They are just nice and interesting pictures.

[vanshikaarora]

@nicolas-raoul So shall I add two horizontal recyclerViews?

[nicolas-raoul]

Sorry I don't know what is the best way to implement that in Android :-/

[vanshikaarora]

Sorry I don't know what is the best way to implement that in Android :-/

@nicolas-raoul we need to have more suggestions then regarding the UI part :)

@maskaravivek @neslihanturan @misaochan Can you please pitch in your ideas :)

[nicolas-raoul]

I suggest using the same view as now, but simply feeding a mix of pictures from different sources into it:

• First picture: media of the day
• Next pictures: what comes from the currently implemented request. So, no need to change anything in the UI, I believe :-)

[vanshikaarora]

Ohh so is it like alternate media of the day as well as pictures of the day?

[nicolas-raoul]

The images currently shown are the latest added pictures of this category: https://commons.wikimedia.org/wiki/Category:Featured_pictures I believe.

[vanshikaarora]

The images currently shown are the latest added pictures of this category: https://commons.wikimedia.org/wiki/Category:Featured_pictures I believe.

@nicolas-raoul Yes, the images currently fetched are the featured images from the API https://commons.wikimedia.org/w/api.php?action=help&modules=featuredfeed

Currently it fetches the images by setting feed =potd, on setting feed =motd we can fetch media of the day. So is it to be set in the same view as the current featured images.

Please correct me if there is any difference in opinion :)

[maskaravivek]

Currently it fetches the images by setting feed =potd, on setting feed =motd we can fetch media of the day. So is it to be set in the same view as the current featured images.

Yes, we can show it in the same view. :)

[vanshikaarora]

Yes, we can show it in the same view. :)

Since we have multiple upvotes for the same. Then I'll start working on this and add it to the same Recycler view with alternating potd and motd.

[vanshikaarora]

@maskaravivek @nicolas-raoul Can you please let me know

@Override
    @Nullable
    public Single<Media> getMediaOfTheDay() {
        return Single.fromCallable(() -> {
            CustomApiResult apiResult = null;
            try {
                String template = "Template:Potd/" + DateUtils.getCurrentDate();
                CustomMwApi.RequestBuilder requestBuilder = api.action("query")
                        //.param("generator", "media")
                        .param("format", "xml")
                        .param("prop", "imageinfo")
                        .param("iiprop", "url|extmetadata");

                apiResult = requestBuilder.get();
            } catch (IOException e) {
                Timber.e(e, "Failed to obtain searchCategories");
            }

            if (apiResult == null) {
                return null;
            }

            CustomApiResult imageNode = apiResult.getNode("/api/query/pages/page");
            if (imageNode == null
                    || imageNode.getDocument() == null) {
                return null;
            }

            return CategoryImageUtils.getMediaFromPage(imageNode.getDocument());
        });
    }

is this the current api request that I am making?

[maskaravivek]

This will fetch only one image. Instead use

https://commons.wikimedia.org/w/api.php?action=featuredfeed&feed=potd&format=json

[vanshikaarora]

This will fetch only one image. Instead use

https://commons.wikimedia.org/w/api.php?action=featuredfeed&feed=potd&format=json

@maskaravivek I tried to use this API but the response returned is in XML format. Can I recieve the response in JSON format?

[maskaravivek]

Nope, unfortunately, this API ignores the XML response.

https://www.mediawiki.org/wiki/API:Showing_interesting_content#How_it_works_on_Wikimedia_wikis

[vanshikaarora]

@maskaravivek I tried using this for the API:

CustomMwApi.RequestBuilder requestBuilder = api.action("featuredfeed")
                        .param("feed","potd")
                        .param("format","json");

But the result returned was:

Is it something wrong with the API call?

[maskaravivek]

Is it not working?

Can you share the full API response from logcat?

[vanshikaarora]

I have recieved the following in my debug logs

[maskaravivek]

You are sending format param twice. Am not sure if that is causing the issue. Rest of the request looks fine.

According to the response, potd value is not valid.

[vanshikaarora]

You are sending format param twice

@maskaravivek I have modified this error but still I got an invalid respose from the API. with an error code="unknown_feed".

[maskaravivek]

You are using the beta app. Can you check on prod environment? It's possible that beta server doesn't have this feed

[vanshikaarora]

@maskaravivek Here is the reponse in prod environment: The response doesn't returns an error code="unknown_feed" but yet it isn't the one expected the title in the information obtained isn't the title of my self-uploaded image

[maskaravivek]

The response looks correct but you might need to parse it differently. Can you compare the responses for category images and this feed and find the differences.

[vanshikaarora]

@maskaravivek Here is the response for category images both are pretty similiar

The parsing for CategoryList is done with

CustomMwApi.RequestBuilder requestBuilder = api.action("query")
                    .param("generator", "categories")
                    .param("format", "xml")
                    .param("titles", categoryName)
                    .param("prop", "info")
                    .param("cllimit", "500")
                    .param("iiprop", "url|extmetadata");

while for motd I have added

CustomMwApi.RequestBuilder requestBuilder = api.action("featuredfeed")
                        .param("feed","potd");

Can you compare the responses for category images and this feed and find the differences.

Should I use the same code for parsing mediaoftheday as of categorylist?

[vanshikaarora]

@maskaravivek I have modified the code and now I am using the following for receiving response

api.action("featuredfeed")
        .param("format","json")
        .param("feedformat","rss")
        .param("feed","motd")
        .get()
        .getNode("rss/channel/item/description").getDocument().getFirstChild().getNodeValue();

The response generated is as follows:

<div class="mw-parser-output"><div class="floatright">
<table class="toccolours" style="width:300px;text-align:center">
<tbody><tr>
<th lang="en"><a href="/wiki/Commons:Media_of_the_day" title="Commons:Media of the day">Media of the day</a>
</th></tr>
<tr>
<td class="toccolours" style="padding:0"><div id="mwe_player_0" class="PopUpMediaTransform" style="width:300px;" videopayload="&lt;div class=&quot;mediaContainer&quot; style=&quot;width:854px&quot;&gt;&lt;video id=&quot;mwe_player_1&quot; poster=&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Prague_2018-04-19.webm/854px--Prague_2018-04-19.webm.jpg&quot; controls=&quot;&quot; preload=&quot;none&quot; autoplay=&quot;&quot; style=&quot;width:854px;height:480px&quot; class=&quot;kskin&quot; data-durationhint=&quot;33.069&quot; data-startoffset=&quot;0&quot; data-mwtitle=&quot;Prague_2018-04-19.webm&quot; data-mwprovider=&quot;local&quot;&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.480p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;SD WebM (480P)&quot; data-shorttitle=&quot;WebM 480P&quot; data-transcodekey=&quot;480p.webm&quot; data-width=&quot;854&quot; data-height=&quot;480&quot; data-bandwidth=&quot;880752&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.480p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;SD VP9 (480P)&quot; data-shorttitle=&quot;VP9 480P&quot; data-transcodekey=&quot;480p.vp9.webm&quot; data-width=&quot;854&quot; data-height=&quot;480&quot; data-bandwidth=&quot;1367936&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.720p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;HD WebM (720P)&quot; data-shorttitle=&quot;WebM 720P&quot; data-transcodekey=&quot;720p.webm&quot; data-width=&quot;1280&quot; data-height=&quot;720&quot; data-bandwidth=&quot;1618600&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.720p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;HD VP9 (720P)&quot; data-shorttitle=&quot;VP9 720P&quot; data-transcodekey=&quot;720p.vp9.webm&quot; data-width=&quot;1280&quot; data-height=&quot;720&quot; data-bandwidth=&quot;2635144&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.1080p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;Full HD WebM (1080P)&quot; data-shorttitle=&quot;WebM 1080P&quot; data-transcodekey=&quot;1080p.webm&quot; data-width=&quot;1920&quot; data-height=&quot;1080&quot; data-bandwidth=&quot;3743848&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.1080p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;Full HD VP9 (1080P)&quot; data-shorttitle=&quot;VP9 1080P&quot; data-transcodekey=&quot;1080p.vp9.webm&quot; data-width=&quot;1920&quot; data-height=&quot;1080&quot; data-bandwidth=&quot;5181312&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/7/79/Prague_2018-04-19.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;Original WebM file, 1,920 × 1,080 (14.02 Mbps)&quot; data-shorttitle=&quot;WebM source&quot; data-width=&quot;1920&quot; data-height=&quot;1080&quot; data-bandwidth=&quot;14020590&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.120p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;Lowest bandwidth VP9 (120P)&quot; data-shorttitle=&quot;VP9 120P&quot; data-transcodekey=&quot;120p.vp9.webm&quot; data-width=&quot;214&quot; data-height=&quot;120&quot; data-bandwidth=&quot;208120&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.160p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;Low bandwidth WebM (160P)&quot; data-shorttitle=&quot;WebM 160P&quot; data-transcodekey=&quot;160p.webm&quot; data-width=&quot;284&quot; data-height=&quot;160&quot; data-bandwidth=&quot;203248&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.180p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;Low bandwidth VP9 (180P)&quot; data-shorttitle=&quot;VP9 180P&quot; data-transcodekey=&quot;180p.vp9.webm&quot; data-width=&quot;320&quot; data-height=&quot;180&quot; data-bandwidth=&quot;301504&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.240p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;Small WebM (240P)&quot; data-shorttitle=&quot;WebM 240P&quot; data-transcodekey=&quot;240p.webm&quot; data-width=&quot;426&quot; data-height=&quot;240&quot; data-bandwidth=&quot;332296&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.240p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;Small VP9 (240P)&quot; data-shorttitle=&quot;VP9 240P&quot; data-transcodekey=&quot;240p.vp9.webm&quot; data-width=&quot;426&quot; data-height=&quot;240&quot; data-bandwidth=&quot;420560&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.360p.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;&quot; data-title=&quot;WebM (360P)&quot; data-shorttitle=&quot;WebM 360P&quot; data-transcodekey=&quot;360p.webm&quot; data-width=&quot;640&quot; data-height=&quot;360&quot; data-bandwidth=&quot;562368&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;source src=&quot;https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Prague_2018-04-19.webm/Prague_2018-04-19.webm.360p.vp9.webm&quot; type=&quot;video/webm; codecs=&amp;quot;vp9, opus&amp;quot;&quot; data-title=&quot;VP9 (360P)&quot; data-shorttitle=&quot;VP9 360P&quot; data-transcodekey=&quot;360p.vp9.webm&quot; data-width=&quot;640&quot; data-height=&quot;360&quot; data-bandwidth=&quot;726688&quot; data-framerate=&quot;29.97&quot;/&gt;&lt;/video&gt;&lt;/div&gt;"><img alt="File:Prague 2018-04-19.webm" style="width:300px;height:169px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Prague_2018-04-19.webm/300px--Prague_2018-04-19.webm.jpg" /><a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Prague_2018-04-19.webm" title="Play media" target="new"><span class="play-btn-large"><span class="mw-tmh-playtext">Play media</span></span></a></div>
</td></tr>
<tr>
<td><div lang="en" class="description en" style="display:inline;">View of <a href="https://en.wikipedia.org/wiki/Old_Town_Square" class="extiw" title="w:Old Town Square">Old Town Square</a> in <a href="/wiki/Prague" class="mw-redirect" title="Prague">Prague</a>. </div>&#160;
<hr />
<div lang="en" class="description en" style="display:inline;"><a href="/wiki/Commons:Media_help" title="Commons:Media help">Problems playing the file?</a></div>
</td></tr></tbody></table>
</div>
</div>

This contains the Url for the images, the next thing in hand is how to parse these Url's one way that I have found after searching is writing Regex but it is it the best solution or there is some other way too. @maskaravivek @nicolas-raoul Can you please ive your suggestions on how to parse this Url?

[maskaravivek]

IMO, regex would be the best option. Another option is to use jsoup but it would require adding a library. Am not in favor of adding a library just for one small parsing.

I somehow feel that a lot of time and effort is going into this task. It might be okay to take a break from this task if you feel you can invest your time in other more fruitful tasks. It's your choice. :)