Thanks, Julius!

I really appreciate this preliminary evaluation of how Media Viewer v0.2 looks on mobile.

I’m glad that our current version works already, even though we haven’t done anything yet towards mobile support. :)

It’s also good to know about some of the issues that need to be addressed before we can properly support mobile devices with the Media Viewer.

We would like to take on mobile support next quarter, as part of version 0.3, as outlined here:

https://www.mediawiki.org/wiki/Multimedia/About_Media_Viewer#Next_Version

For now, I have added a link to this email thread on our Mingle card for this epic story: 

https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/201

I will ping Kenan and Tomasz next week to determine when would be a good time for our teams to collaborate on developing this Mobile Version of Media Viewer.

Thanks again for his great start … to be continued!


Fabrice


On Feb 28, 2014, at 5:31 PM, Juliusz Gonera <jgonera@wikimedia.org> wrote:

Hi,

As a part of a mobile spike [1], I evaluated the possibility of using MMV on mobile instead of the custom viewer we have right now in beta. The good news is that it works. The bad news is that it's quite heavy compared to what we have right now. We don't know yet when we'd like to see MMV on mobile, but this moment will eventually come.

Let's start with the additional dependencies I needed to add to mobile to make it run:
* jquery.fullscreen - not needed on mobile
* jquery.throttle-debounce - make sure that events fire only once, needed?
* jquery.ui.dialog and dependencies - file reuse dialog, can/will be replaced? (on Multimedia roadmap)
           'jquery.ui.core',
           'jquery.ui.widget',
           'jquery.ui.button',
           'jquery.ui.draggable',
           'jquery.ui.mouse',
           'jquery.ui.position',
           'jquery.ui.resizable',
* jquery.color - what for? can we use CSS transitions?
* jquery.colorUtil - what for? can we use CSS transitions?
* moment

Fortunately, Mark told me that removing jquery.ui.dialog is already planned. I created a simple page with a thumbnail and checked what Chrome reports in Network tab for no multimedia viewer, the viewer we currently have on mobile (in beta) and MMV:

* no viewer: 379KB

* mobile viewer:
** 384KB at page load (all JS + LESS + HTML template)
** 390KB when lightbox shows (images used in LESS + API request)
** 561KB when image is loaded (custom size, in this case 171KB for 746px)
** +6KB, +11KB, +182KB

* mmv:
** 395KB at page load (only bootstrap JS loaded)
** 722KB when lightbox shows (the rest of JS and other assets)
** 2.7MB when image is loaded (129KB for 640px and 901KB for 1920px)
** +14KB, +343KB, +2.3MB

** mmv (without jquery.ui.dialog)
** 395KB at page load
** 573KB when lightbox shows
** 2.6MB when image is loaded
** +14KB, +194KB, +2.2MB

Remaining questions/problems:
* There's no indication of overlay loading (on Multimedia roadmap).
* Can we do animations using CSS transitions?
* Why do we load both 640px and 1920px version of images?
* What is loaded at the end apart from images (+2.3MB, images are ~1MB)?

Related patches:
https://gerrit.wikimedia.org/r/#/c/116155/
https://gerrit.wikimedia.org/r/#/c/116154/
https://gerrit.wikimedia.org/r/#/c/116156/

[1] https://wikimedia.mingle.thoughtworks.com/projects/mobile/cards/1688
--
Juliusz

_______________________________________________
Multimedia mailing list
Multimedia@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/multimedia

_______________________________

Fabrice Florin
Product Manager
Wikimedia Foundation