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