Background
Desktop and mobile use different implementations for displaying a lightbox when images are clicked. There is lots of user value e.g. performance/functionality to consolidating these two experiences. The main reason we have separate experiences is that the desktop version is considerably bloated (see T77349 for more context). If we can reduce the size of this feature and simplify the code we can make use of the desktop across platforms.
The benefits of consolidating the two experience would be:
- One less unmaintained extension in our deployed servers
- More functionality to mobile users
- better frontend performance for desktop users
- The ability to use multimedia viewer across platforms for new media experiences.
Side by side comparison
Features
Additional desktop features: Has support for 3d images; has sharing functionality; additional information in summary; full screen behaviour; keyboard support
Performance
Last checked: October 15th 2024.
Bootstrap modules:
- Desktop: (mmv.bootstrap): 4.8 kB
- Mobile: loaded as part of mobile.startup (0.3kb)
Asynchronously loaded code:
- Desktop: 25.2 kB (CSS = 6.4kb, messages = 1.8kb, mmv/ui/ = 8.7kb, models = 1.9kb, providers = 1.8kb)
- Mobile: mobile.mediaViewer is 3.2KB (the majority of the code is generalized in mobile.startup or Codex)
Technology
- Desktop built using Codex CSS-only components
- Mobile uses non-standard MobileFrontend library that makes use of Codex CSS-only components. Benefits from generalized components such as an overlayManager and a templating engine.
Plan
- 1) Simplify existing entry points:
- Merge MultimediaViewer bootstrap modules. There is no need for them to live in separate modules and they bloat the size of our ResourceLoader startup module unnecessarily
- 2) Reduce reliance on UI code and CSS:
- Consolidate the behaviours for the caption - remove features from desktop - this appears to be the main contributor to the large code size.
- Simplify error handling in mmv.ui.canvas.js to match less detailed solution in mobile.
- Replace mw-mmv-dialog with cdx-dialog
- Explore whether using Mustache for remaining HTML construction. would reduce code footprint.