MultiMediaViewer is mostly implemented in JavaScript, generating the DOM client-side. It is a very suitable candidate for adopting [[ https://www.mediawiki.org/wiki/Vue.js | Vue.js ]]. This would be a good time to update the user experience.
This task is a collection of targets and features I've been thinking of. It's not an exhaustive list and will change in the future.
==== Targets
1. Massively reduced code size. The resource bundle just for MMV currently weighs in at around 0.5 MiB JavaScript uncompressed, minified. In comparison: WikiWand - using Angular - ships this feature //and everything else needed for reading an article// in about 350KiB JS uncompressed.
1. Updated, smooth UX (minor details, shadow around image, zoom animation).
1. Article visible (dimmed) in the background.
1. Image zooming (long-requested feature: T77423).
1. Jumping between images in the gallery (thumbnails at bottom of the screen, fully fleshed out history navigation - done in patch below).
1. Correct identification of images to show, ex. don't show icon sized images in userboxes (<=46px?), unless the user opens that image specifically. Show small images in `div.thumb` elements, though.
1. Updated tests, possibly replacing all Ruby-Selenium tests.
1. DOM and CSS cleanup, no more positioning with JS - done in patch below.
1. To avoid reinventing the wheel, evaluate existing image lightbox solutions and make use of a suitable, free licensed implementation, preferably a Vue.js component.
==== Expected benefits
1. Faster loading and execution time as a result of smaller code-size and Vue's focus on performant DOM generation.
1. Higher conversion (acceptance) rate in the long-timer community, where MMV usage is very low.
==== New UI Features
====== Zooming
1. Zooming with mousewheel and UP-DOWN, PLUS-MINUS keys.
1. Opening-closing animation zooms between the thumbnail and the full-sized image (like medium.com).
1. Fullscreen with 'F' key.
1. Close viewer when clicking on article.
1. Panning image with drag-n-drop (optional, some lightbox implementations support it out-of-the-box). Useful if the metadata overlays the image and also to view the article behind.
====== Image metadata reskinned
1. Image metadata has transparent background, can overlay the image.
1. Gallery thumbnails at the bottom between the two metadata columns.
1. Toolbar buttons above thumbnails: zoom in, out, reset, previous, next, slideshow, fullscreen.
1. Buttons in bottom-right corner above metadata: share, download, settings, "Open original image", "Open metadata page".
====== Method to extend metadata
1. With a key yet to be determined (used to be UP-DOWN which is used for zooming in many image viewers).
1. Scrolling not connected to it.
1. Open initially: the user can easily zoom or pan the image, if it's obscured by the metadata.
1. Metadata hiding button.
==== Optional
1. Preloading full-size images when thumbnail is scrolled on-screen.
1. Preloading neighbours of viewed image.
1. Use it as image viewer in Reasonator.
==== Personal motivation
Many websites all around the world deliver image viewers with pleasing UX. Viewers of Wiki*edia should have a similar experience.
This story began when as a user of MMV I was frustrated by the scrollbar constantly jumping back to the top of the page, which prompted me to investigate the issue. Alongside removing the source of the issue I've made a massive cleanup of the DOM and the CSS ([[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/560576 | patch 560576 ]]) that nobody dares to review. In the process I've gained familiarity with MMV and its features that are specific to Mediawiki. This knowledge can be turned beneficial with this project.