Page MenuHomePhabricator

Investigate: Video/Media of the day in search carousel
Closed, ResolvedPublic

Assigned To
Authored By
AMuigai
Dec 18 2019, 2:30 PM
Referenced Files
F31536276: Capture.PNG
Jan 28 2020, 7:01 AM
F31507767: 07 - Search - updated with mid-size cards.png
Jan 10 2020, 8:31 PM
F31507775: Video thumbnail.png
Jan 10 2020, 8:31 PM
F31507769: 07 - Search - updated with large cards - video.png
Jan 10 2020, 8:31 PM
F31507772: Video - Play video.png
Jan 10 2020, 8:31 PM
F31507771: Video - Media player - Info.png
Jan 10 2020, 8:31 PM
F31507661: 07 - Search - updated with mid-size cards.png
Jan 10 2020, 6:29 PM
F31507662: 07 - Search - updated with large cards - video.png
Jan 10 2020, 6:29 PM

Description

Why are we doing this?

We would like to provide a way for KaiOS users to interact with video content from Wikiprojects easily

User story

As a KaiOS user I would like to be able to watch the video of the day from Commons on my phone. I would also like to be able to watch videos embedded within an article

Design

Design needed for:

  • search carousel
  • video player
  • in article video icon
  • in article mediaviewer
Engineering
  • Optimize video (or other media) from Commons Media of the day to play well on a KaiOS device

Proposed designs

Search carousel option 1Search carousel option 2Video playerVideo player info overlayIn article video thumbnail
07 - Search - updated with mid-size cards.png (640×480 px, 182 KB)
07 - Search - updated with large cards - video.png (640×480 px, 232 KB)
Video - Play video.png (640×480 px, 333 KB)
Video - Media player - Info.png (640×480 px, 96 KB)
Video thumbnail.png (640×480 px, 150 KB)
https://zpl.io/Vxvg3Pxhttps://zpl.io/aNnAxXehttps://zpl.io/aMnzoO3https://zpl.io/aBplzMkhttps://zpl.io/2yEQ3nL

Design details

  • Utilize the same video player for both the video from the search carousel and the videos from within the article view

API

Note that the MediaSource API may be useful here: https://developer.kaiostech.com/api/mediasource

Event Timeline

@AMuigai here are two possible designs for the search carousel card for video:

With wordmarkOriginal design
07 - Search - updated with mid-size cards.png (960×720 px, 367 KB)
07 - Search - updated with large cards - video.png (960×720 px, 462 KB)

My personal preference is for the original design as the new design feels a bit cramped to me personally, but happy to defer to you.

Makes sense @cmadeo Let's use the option two design (original design) that has:

  • "Search Wikipedia" help text within the search box
  • Larger card for video

Does it mean the current main search screen will be replaced by this design?

Current screen
Capture.PNG (434×364 px, 6 KB)

@hueitan yes, once the cards for the main screen have been developed, it would be great to switch to this updated style.

@hueitan will do a technical investigation to figure out if this is even possible on the target devices and if so, what are the limitations in terms of format and size of the videos. A subset of recent media of the day will be used for testing.

AMuigai renamed this task from Video/Media of the day in search carousel to Investigate: Video/Media of the day in search carousel.Feb 10 2020, 8:39 AM

Pictures of the day API:

Fetching the POTD File example
https://en.wikipedia.org/w/api.php?action=query&format=json&formatversion=2&prop=images&titles=Template:POTD_protected/2020-02-11

Fetching the File Information example
https://en.wikipedia.org/w/api.php?action=query&format=json&prop=imageinfo&iiprop=url&titles=File:Giuseppe%20Verdi,%20Lombardi%20alla%20prima%20crociata.%20Libretto,%201843%20-%20Restoration.jpg

Medias of the day Feed:

There isn't Rest API available, therefore we need to parse the following feed
https://commons.wikimedia.org/w/api.php?action=help&modules=featuredfeed

the Feed API is not available and getting the CORS error

Access to XMLHttpRequest at 'https://commons.wikimedia.org/w/api.php?action=featuredfeed&format=json&feed=motd&formatversion=2' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[...]

Access to XMLHttpRequest at 'https://commons.wikimedia.org/w/api.php?action=featuredfeed&format=json&feed=motd&formatversion=2' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This URL needs &origin=* to work.

[...]

Access to XMLHttpRequest at 'https://commons.wikimedia.org/w/api.php?action=featuredfeed&format=json&feed=motd&formatversion=2' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This URL needs &origin=* to work.

True! It works !!!! Thanks @SBisson, that's good news! Will continue on that

Personally I don't like this idea. I have a very small screen and having a clean, fast, readable search screen is enough. Please do not clutter those tiny displays....

The investigation is done!

PR code is here : https://github.com/wikimedia/wikipedia-kaios/pull/154

Upon checking on the device, there is a poor user experience when playing around the video player, especially when the user switches the video, it seems like it keeps loading and the user will lose the patience with it.

Therefore moving back to the Idea Column.

hueitan moved this task from Backlog to ideas on the Inuka-Team board.
AMuigai lowered the priority of this task from High to Medium.Apr 17 2020, 9:26 AM
AMuigai claimed this task.

Closing this ticket as the focus was on investigation.