Page MenuHomePhabricator
Create Task
Maniphest T65504

Consolidate code for MediaViewer across desktop and mobile
Open, MediumPublic
Actions

Assigned To
Jdlrobson
Authored By
Jdlrobson
Apr 3 2014, 10:16 PM
Tags
Referenced Files
F57618483: Screenshot 2024-10-15 at 8.36.12 PM.png
Oct 16 2024, 3:43 AM
F57618480: Screenshot 2024-10-15 at 8.35.16 PM.png
Oct 16 2024, 3:43 AM
Subscribers
Aklapper
Izno
Jdlrobson
JScherer-WMF
LikeLifer
Liuxinyu970226
MarkTraceur
View All 13 Subscribers
Tokens
"Like" token, awarded by Liuxinyu970226.

Description

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.

Screenshot 2024-10-15 at 8.35.16 PM.png (988×3 px, 153 KB)

Screenshot 2024-10-15 at 8.36.12 PM.png (434×1 px, 28 KB)

  • Replace mw-mmv-dialog with cdx-dialog
  • Explore whether using Mustache for remaining HTML construction. would reduce code footprint.

Details

Reference
bz63504
SubjectRepoBranchLines +/-
Remove deprecated mmv.bootstrap.autostart and mmv.headmediawiki/extensions/MultimediaViewermaster+1 -9
mmv.bootstrap.autostart module was deprecatedmediawiki/extensions/SearchVuemaster+1 -1
POC: Mobile site should use the desktop media viewermediawiki/skins/MinervaNeuemaster+3 -105
POC: Drop the mobile media viewermediawiki/extensions/MobileFrontendmaster+3 -1 K
POC: Showcase a simplistic version of MMVmediawiki/extensions/MultimediaViewermaster+353 -1 K
Move HtmlUtils from mmv.bootstrap to mmv modulemediawiki/extensions/MultimediaViewermaster+21 -20
Remove the thumbnail blurringmediawiki/extensions/MultimediaViewermaster+24 -260
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 OpenNoneT106267 mobile phone wikitext editor should have edit toolbar
 OpenNoneT106266 Provide a "signature" button in the mobile wikitext editor
 OpenNoneT171974 Improve and consolidate our unified editing platform so that it's great on all devices
 OpenNoneT159971 Provide the VE wikitext editing mode as the mobile wikitext editor
 DuplicateNoneT95952 [Epic] Merge OOJS UI and MobileFrontend View code
 OpenNoneT158181 Aim for workflow equivalence for MediaWiki on desktop and mobile web
 DeclinedNoneT144571 Mobile Media Viewer violates user settings
 OpenJdlrobsonT65504 Consolidate code for MediaViewer across desktop and mobile
 DuplicateNoneT77349 Reduce Javascript Code Size per 2014 Mobile Team recommendation
 OpenNoneT376973 Simplify MediaViewer caption
 DeclinedNoneT77368 Enable full-screen mode on tablets
 ResolvedTheDJT66096 Open in media viewer icon renders over text on android browser
 DeclinedNoneT96202 [EPIC] Rewrite MobileFrontend frontend code in OOUI
 ResolvedJdlrobsonT87253 Create Anchor abstraction
 Resolved• bmansurovT87254 Create button abstraction
 DeclinedNoneT87255 Create input abstraction
 ResolvedJdlrobsonT73181 [Tracking] MobileFrontend should use mw-ui-icon
 InvalidNoneT74653 Issues with icons in alpha. Get fixed so we can move it to beta.
 Duplicate• NirzarT95224 Update all PNG icons in MobileFrontend with SVGs
 OpenNoneT96186 [EPIC] Move VisualEditor code from MobileFrontend to VisualEditor
 ResolvedJdlrobsonT86366 Revisit box-sizing: border-box for everything in MobileFrontend
 DeclinedNoneT88559 VisualEditorOverlay should be written as an OO.ui.ProcessDialog
 ResolvedEsandersT96187 Rewrite VisualEditorOverlay header using OOjs UI
 ResolvedEsandersT96188 Rewrite the edit summary screen of VisualEditorOverlay in OOjs UI
ResolvedmatmarexT198765 Move mobile editor code from Minerva skin to MobileFrontend, use it for all skins on mobile (and none on desktop)
 ResolvedmatmarexT202978 Move MobileFrontend's VisualEditor styles back to MobileFrontend
 ResolvedovasilevaT205382 Remove code related to no-anonymous-editing mode of MobileFrontend ($wgMFEditorOptions['anonymousEditing'] = false;)
 ResolvedABorbaWMFT208514 Merge PageIssues Feature Branch to Master
 ResolvedNoneT206178 Feature branch: Remove pageIssues A-B test code
 DuplicateNoneT101276 Overlays should support multiple screens
 DuplicateNoneT104008 Have a consistent way of doing Views within Views
 ResolvedJdlrobsonT125471 Remove Class from MobileFrontend and use OOJS for class inheritance
 ResolvedTheDJT77230 Give feedback while the app is loading
 ResolvedTheDJT71609 Test if replacing the blur effect with pixelation makes loading feel faster
 DeclinedNoneT87184 Establish a user testing framework for perceived speed
 OpenNoneT268899 Not able to close MediaViewer with a physical keyboard in iPadOS 14
 OpenNoneT280732 Image full screen preview lacks caption (description) on Wikipedia mobile website
 ResolvedBUG REPORTTheDJT364942 Fullscreen mediaviewer hides controls on touch devices and they cannot be shown again
 OpenNoneT73423 Make MultimediaViewer responsive and prettier on narrow mobile screens
 ResolvedJdlrobsonT376972 Drop "About Media Viewer" link
 OpenBUG REPORTNoneT378431 MMV below the fold not optimized for mobile display

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson moved this task from Untriaged to Move to Backlog on the Web-Team-Backlog (Tracking) board.Jun 29 2017, 8:21 PM
MBinder_WMF added a project: Multimedia.Aug 7 2017, 5:39 PM
• Ramsey-WMF moved this task from Backlog to Desired epics on the Multimedia board.Oct 13 2017, 11:44 PM
CKoerner_WMF subscribed.Feb 12 2018, 8:42 PM
Jdlrobson removed Jdlrobson as the assignee of this task.Aug 16 2018, 3:40 PM
Jdlrobson edited projects, added Web-Team-Backlog; removed Multimedia, Web-Team-Backlog (Tracking).
Restricted Application added a project: Multimedia. · View Herald TranscriptAug 16 2018, 3:40 PM
Jdlrobson moved this task from Incoming to Tracking on the Web-Team-Backlog board.Aug 16 2018, 5:22 PM
Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.
• JKatzWMF unsubscribed.Sep 4 2018, 4:30 PM
Liuxinyu970226 awarded a token.Nov 11 2018, 12:49 PM
Tgr unsubscribed.Jul 9 2019, 6:03 PM
Jdlrobson closed subtask T96202: [EPIC] Rewrite MobileFrontend frontend code in OOUI as Declined.Aug 2 2019, 5:00 PM
CKoerner_WMF unsubscribed.Dec 12 2019, 4:22 PM
Jdlrobson moved this task from team:other to Tracking on the MobileFrontend board.Jul 24 2020, 2:40 AM
Jdlrobson edited projects, added MobileFrontend (Tracking); removed MobileFrontend.
Aklapper edited projects, added Epic; removed Tracking-Neverending.Aug 15 2020, 2:59 PM
Aklapper added a parent task: T144571: Mobile Media Viewer violates user settings.
Jdlrobson moved this task from Move to Backlog to Untriaged on the Web-Team-Backlog (Tracking) board.Sep 7 2021, 9:06 PM
Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog (Tracking).Sep 21 2021, 8:29 PM
Jdlrobson moved this task from Backlog to Future Unplanned on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Sep 22 2021, 3:00 PM
Jdlrobson moved this task from Future Unplanned to Waiting on other teams on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Nov 4 2021, 8:50 PM
Jdlrobson merged a task: T220558: ImageGateway should utilize browser cache when calling MediaWIki API.Nov 5 2021, 12:04 AM
Jdlrobson added subscribers: • nray, phuedx, • Niedzielski, pmiazga.
Jdlrobson removed a project: Web-Team-Backlog (Needs Prioritization (Tech)).Dec 9 2021, 5:41 PM
Aklapper moved this task from Next to Backlog on the MediaViewer board.Mar 16 2022, 11:34 AM
Jdlrobson added a project: Web-Team-Backlog.Mar 22 2023, 11:46 PM
Jdlrobson renamed this task from Consolidate code for MediaViewer across desktop and mobile (tracking) to Consolidate code for MediaViewer across desktop and mobile.Mar 22 2023, 11:50 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson mentioned this in T235796: The ext.3d.styles module should not be added unconditionally to every page and should set target mobile.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.Apr 6 2023, 5:56 PM
Jdlrobson claimed this task.Jun 22 2023, 5:57 PM
Jdlrobson mentioned this in T342567: Gadgets should provide skipFunctions.Jul 24 2023, 6:51 PM
Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.May 14 2024, 2:37 PM
Jdlrobson moved this task from Backlog to Triaged on the MediaViewer board.May 14 2024, 3:05 PM
Jdlrobson mentioned this in T340258: MMV should use Codex instead of mediawiki ui.May 14 2024, 9:41 PM
TheDJ closed subtask T66096: Open in media viewer icon renders over text on android browser as Resolved.May 14 2024, 9:51 PM
TheDJ closed subtask T77368: Enable full-screen mode on tablets as Declined.May 14 2024, 10:33 PM
TheDJ added a subtask: T77230: Give feedback while the app is loading.May 15 2024, 10:08 AM
TheDJ added a subtask: T71609: Test if replacing the blur effect with pixelation makes loading feel faster.May 15 2024, 10:22 AM
gerritbot added a comment.May 15 2024, 6:43 PM

Change #1032011 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] Remove the thumbnail blurring

https://gerrit.wikimedia.org/r/1032011

gerritbot added a project: Patch-For-Review.May 15 2024, 6:43 PM
TheDJ mentioned this in T95211: Skip MMV on really small screens.May 15 2024, 9:51 PM
TheDJ added a subtask: T268899: Not able to close MediaViewer with a physical keyboard in iPadOS 14.May 15 2024, 10:41 PM
TheDJ added a subtask: T280732: Image full screen preview lacks caption (description) on Wikipedia mobile website.May 15 2024, 10:45 PM
TheDJ added a subtask: T364942: Fullscreen mediaviewer hides controls on touch devices and they cannot be shown again.May 21 2024, 6:43 PM
TheDJ added a subtask: T73423: Make MultimediaViewer responsive and prettier on narrow mobile screens.May 22 2024, 1:51 PM
gerritbot added a comment.May 25 2024, 12:59 AM

Change #1032011 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove the thumbnail blurring

https://gerrit.wikimedia.org/r/1032011

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.7; 2024-05-28).May 25 2024, 1:00 AM
Maintenance_bot removed a project: Patch-For-Review.May 25 2024, 1:30 AM
TheDJ closed subtask T77230: Give feedback while the app is loading as Resolved.Jun 1 2024, 10:06 AM
TheDJ closed subtask T71609: Test if replacing the blur effect with pixelation makes loading feel faster as Resolved.Jun 13 2024, 8:55 PM
Jdlrobson added a subscriber: JScherer-WMF.Sep 17 2024, 4:47 PM
Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Needs Prioritization (Tech)).Sep 25 2024, 12:54 AM
Jdlrobson moved this task from Needs Prioritization (Tech) to Incoming on the Web-Team-Backlog board.
Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog board.Sep 25 2024, 4:24 PM
simon04 mentioned this in T374988: .SVG files not displaying in the right language when zoomed on Android.Oct 4 2024, 10:00 AM
Jdlrobson added a project: Web Team Essential Work 2024.Oct 7 2024, 8:42 PM
Jdlrobson moved this task from Groomed to Epics/Goals on the Web-Team-Backlog board.
Jdlrobson moved this task from Backlog to Freezer on the Web Team Essential Work 2024 board.Oct 7 2024, 9:50 PM
Jdlrobson merged a task: T77349: Reduce Javascript Code Size per 2014 Mobile Team recommendation.Oct 11 2024, 12:34 AM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added subscribers: TheDJ, simon04, Masumrezarock100, MarkTraceur.
Jdlrobson moved this task from Freezer to Merge mobile and desktop media viewers on the Web Team Essential Work 2024 board.Oct 12 2024, 12:56 AM
Jdlrobson edited projects, added Web Team Essential Work 2024 (Merge mobile and desktop media viewers); removed Web Team Essential Work 2024.
Izno subscribed.Oct 13 2024, 11:29 PM
Jdlrobson closed subtask T376972: Drop "About Media Viewer" link as Resolved.Oct 15 2024, 5:50 PM
Jdlrobson updated the task description. (Show Details)Oct 16 2024, 1:17 AM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Oct 16 2024, 3:43 AM
gerritbot added a comment.Oct 16 2024, 11:23 PM

Change #1080832 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/SearchVue@master] mmv.bootstrap.autostart module was deprecated

https://gerrit.wikimedia.org/r/1080832

gerritbot added a project: Patch-For-Review.Oct 16 2024, 11:23 PM
gerritbot added a comment.Oct 16 2024, 11:34 PM

Change #1080834 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Mobile site should use the desktop media viewer

https://gerrit.wikimedia.org/r/1080834

gerritbot added a comment.Oct 16 2024, 11:34 PM

Change #1080422 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] POC: Drop the mobile media viewer

https://gerrit.wikimedia.org/r/1080422

gerritbot added a comment.Oct 17 2024, 10:51 PM

Change #1080428 had a related patch set uploaded (by Jdlrobson; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Move HtmlUtils from mmv.bootstrap to mmv module

https://gerrit.wikimedia.org/r/1080428

Jdlrobson removed projects: MW-1.43-notes (1.43.0-wmf.7; 2024-05-28), Multimedia.Oct 17 2024, 10:52 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed subscribers: • Niedzielski, • nray, • Nirzar, • Fabrice_Florin.
gerritbot added a comment.Oct 17 2024, 10:55 PM

Change #1080428 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Move HtmlUtils from mmv.bootstrap to mmv module

https://gerrit.wikimedia.org/r/1080428

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.28; 2024-10-22).Oct 17 2024, 11:00 PM
Jdlrobson added a subtask: T378431: MMV below the fold not optimized for mobile display.Tue, Oct 29, 1:32 AM
phuedx unsubscribed.Fri, Nov 1, 9:57 AM
gerritbot added a comment.Sat, Nov 2, 12:53 AM

Change #1085682 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MultimediaViewer@master] POC: Showcase a simplistic version of MMV

https://gerrit.wikimedia.org/r/1085682

Jdlrobson added a comment.Sat, Nov 2, 1:14 AM

Just an update here that I've been talking to a few people about what to do here. The sense I'm getting is that we likely want to keep the mobile media viewer as is as it presents a better experience for readers - most of the desktop features do not work nicely on mobile and are likely not as important to readers (who will click through to the file page if they want that information).

What I haven't worked out is how to get that state. A few options I am considering are:

  1. ) Adding a bunch of styling rules to the desktop version in a skinStyle to make it look more mobile like.
  2. Refactoring the existing desktop code so that we can have two versions of the media viewer in MultimediaViewer that share UI code - a simple version for mobile and a more complex for desktop. This would entail refactoring our classes and two modules - an advanced and simple media viewer making use of the refactored files.
  3. Complete rewrite of the desktop version in Vue
  4. Replacing the mobile version with the desktop version
  5. Keeping the status quo of two separate experiences.

Today I explored 2 and I spent some time building a proof of concept to see how much multimedia viewer could be simplified to render the existing mobile experience. The existing mobile experience could be achieved with 12.3 kB of code (compared with 25.3kb for desktop). I'm pretty sure that can be cut down further by refactoring / simplifying the calculation of thumbnail widths and heights.

Given there is no team actively maintaining and building out MMV right now, I would personally recommend working towards an approach where we would do:

  • 1 on the short term (but avoid if possible)
  • 2 on the medium term (through refactoring existing code paths)
  • 3 on the long term

Thoughts?

LikeLifer subscribed.Mon, Nov 4, 7:53 PM
Jdlrobson moved this task from Epics/Goals to Groomed on the Web-Team-Backlog board.Wed, Nov 13, 11:21 PM
Jdlrobson edited projects, added Web-Team; removed Web-Team-Backlog.Wed, Nov 13, 11:40 PM
Jdlrobson moved this task from Product Backlog to Legacy backlog on the Web-Team board.Wed, Nov 13, 11:56 PM
gerritbot added a comment.Tue, Nov 26, 5:34 PM

Change #1080832 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] mmv.bootstrap.autostart module was deprecated

https://gerrit.wikimedia.org/r/1080832

Jdlrobson mentioned this in rESVU4d662d535ab1: mmv.bootstrap.autostart module was deprecated.Tue, Nov 26, 5:36 PM
Jdlrobson added a comment.Tue, Nov 26, 5:38 PM

@simon04 would you be able to post a patch to remove mmv.bootstrap.autostart and mmv.head module ? If not, no worries, I can post that next week when I'm back from vacation and find someone to review :-).

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.6; 2024-12-03).Tue, Nov 26, 6:00 PM
gerritbot added a comment.Tue, Nov 26, 9:02 PM

Change #1098146 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Remove deprecated mmv.bootstrap.autostart and mmv.head

https://gerrit.wikimedia.org/r/1098146

gerritbot added a comment.Tue, Nov 26, 9:39 PM

Change #1098146 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove deprecated mmv.bootstrap.autostart and mmv.head

https://gerrit.wikimedia.org/r/1098146

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits