This task is proposed as volunteer effort.

MultiMediaViewer is mostly implemented in JavaScript, generating the DOM client-side. It is a very suitable candidate for adopting 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.
2. Updated, smooth UX (minor details, shadow around image, zoom animation).
3. Article visible (dimmed) in the background.
4. Image zooming (long-requested feature: T77423).
5. Jumping between images in the gallery (thumbnails at bottom of the screen, fully fleshed out history navigation - done in patch below).
6. 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.
7. Updated tests, possibly replacing all Ruby-Selenium tests.
8. DOM and CSS cleanup, no more positioning with JS - done in patch below.
9. 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.
2. 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.
2. Opening-closing animation zooms between the thumbnail and the full-sized image (like medium.com).
3. Fullscreen with 'F' key.
4. Close viewer when clicking on article.
5. 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.
2. Gallery thumbnails at the bottom between the two metadata columns.
3. Toolbar buttons above thumbnails: zoom in, out, reset, previous, next, slideshow, fullscreen.
4. 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).
2. Scrolling not connected to it.
3. Open initially: the user can easily zoom or pan the image, if it's obscured by the metadata.
4. Metadata hiding button.

Optional

1. Preloading full-size images when thumbnail is scrolled on-screen.
2. Preloading neighbours of viewed image.
3. 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 (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.