Commit graph

93 commits

Author SHA1 Message Date
Mark Holmquist b2039ad7eb Add "zoom" but really just view-file
The zoom icon should get replaced Real Soon Now - looking at you, pginer

Change-Id: I88c1d4fb95e034e0f2fe618eb7309754ea1c283e
2014-06-10 15:07:12 -07:00
Gilles Dubuc 7161ac3cc4 Record sampling factor in EventLogging calls.
Change-Id: I3966bf5dfe9ed607bda8e87f3b1924de37716dcf
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/619
2014-05-22 09:30:37 +02:00
Gergő Tisza ab7b339143 Revert "Minimal zoom implementation".
Per the design meeting, we are abandoning this feature for now - there is not enough time to ensure it is of acceptable quality.

This reverts commit 4329d453ec.

Change-Id: I27c113ffecb617d442557163722ea5181ed0b2f4
2014-05-15 20:40:41 +00:00
Gergő Tisza 4329d453ec Minimal zoom implementation
Just a link to the full-size file for now.

Since the link must be to a PNG/JPEG/GIF (so possibly a thumbnail),
and we want to cap the size, we might need to get the URL from the
API, but we need to open the new window right away to avoid popup
blockers, making this patch quite complicated.

Change-Id: I9ce9d2a2d27b75470eae2806d9f9ce2f95f4dac2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/588
2014-05-15 01:04:23 +00:00
jenkins-bot eeb5f4bd38 Merge "Improve DurationLogger test code" 2014-05-14 19:35:52 +00:00
jenkins-bot 3353a3e1a2 Merge "Fix IE9 support" 2014-05-14 19:21:14 +00:00
Gilles Dubuc 8a4c062343 Improve DurationLogger test code
More dependency injection, cleaner sinon calls

Change-Id: I4b15a6aa9bca3b89f85ad15eed02e33c291b754d
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/571
2014-05-14 12:24:31 +02:00
Gilles Dubuc 7d5a82c571 Fix IE9 support
- Fix JS error on pushState
- Fix blur issue where blur(0px) filter would blur anyway
- Fix wrapper sizing issue where its size would be 0 when measured

Bug: 65225
Change-Id: If9279cd56f55f71f261ec54dda8228194988b9ae
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/597
2014-05-14 12:06:27 +02:00
Gergő Tisza 40b125565d Extract metadata panel scroll/log/animate logic into separate component
Change-Id: I2441d64c094a9bfbae7a4712ff4c78efa13a62a7
2014-05-13 18:57:38 +00:00
jenkins-bot 9e0df0dd4c Merge "Refactor progressbar & blur handling" 2014-05-01 23:12:22 +00:00
Gergő Tisza fec24e02f7 Refactor progressbar & blur handling
This tries to fix a number of related issues:
* the blurred thumbnail was visible for a split-second sometimes
  when switching back to an already-loaded image. (Presumably when
  JS was sluggish enough to take more than 10 ms to execute.) We
  now check whether the promise is pending before showing a placeholder.
  (More generally, a lot of unnecessary logic was executed when paging
  through already loaded images, like displaying the placeholder, so
  this might make the UI a bit more responsive.)
* the blur could get stuck sometimes - I have seen this a few times,
  but have never been able to reproduce it, so I'm only guessing, but
  maybe the timing was really unfortunate, and we switched back less
  than 10 ms before loading finished. We now remove the blur on every
  branch, just to be sure.
* adding a progress handler to a promise might not have any immediate
  effect, so when switching to an image which was loading, the progress
  bar reacted too late. We now store the progress state per thumbnail
  so it is always available immediately.
* the progress would animate from 0 to its actual state whenever we
  navigated to the image. The change on paging is now instant; the
  progress bar only animates when we are looking at it.
* switching quickly back and forthe between a loaded and a loading
  image resulted in the loading image becoming unblurred. This seems
  fixed now, I'm not sure why. Maybe the "skip on non-pending promise"
  logic affects it somehow.

Also removes some unused things / renames some things which were
confusing, and makes an unrelated fix in the image provider, which kept
amassing fail handlers.

Change-Id: I580becff246f197ec1bc65e82acd422620e35578
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-05-01 21:09:28 +00:00
Gilles Dubuc 8ab6ef23c8 Adds new performance metrics
- duration between early click and replayed click
- duration between replayed/post-replay click and first image display
- duration between replayed/post-replay click and first metadata display

Change-Id: Ia308db7580fd89538b9a9c8b0fea89fa2a4c77d2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/515
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/508
2014-04-29 14:08:49 -07:00
Gergő Tisza 7ee0cf3fcd Make progress bar less erratic
Solves the bug, and makes the code slightly cleaner, but it
still does not inspire confidence (e.g. use of viewer flags
by a bunch of callbacks that can run for a background image).
Also, the tests seem underspecified.

I'll follow up with some more refactoring.

Change-Id: I2557abcec173691ffce21185bf1a939f1644ba8c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
2014-04-24 23:55:26 +00:00
Gergő Tisza ec883d84ef Skip userinfo request if no message depends on the gender.
Change-Id: I85bc617efc87ed1c4526eb74470bb6182910d9fc
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/435
2014-04-23 00:59:23 +00:00
jenkins-bot 2b665e6ff0 Merge "Track more user actions" 2014-04-22 18:41:28 +00:00
jenkins-bot 5007968d4f Merge "Split the progress bar into a component of its own." 2014-04-22 09:19:41 +00:00
jenkins-bot 61b5de0d22 Merge "Cache API responses" 2014-04-22 08:58:44 +00:00
Gergő Tisza 284a936aff Cache API responses
Cache API responses, both on Varnish and in the user's browser.
The imageinfo request is not cached, since that would make it very
hard to test metadata template edits. Everything else is cached for
one day.

Change-Id: I9149cf40d4448a424073eefd1eb442c70c977687
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/435
2014-04-22 10:56:52 +02:00
Gilles Dubuc 700df1ecc2 Track more user actions
- metadata open/close
- next/prev
- view terms
- author
- source
- hash load
- history navigation

Change-Id: I4ea7e0b008b46577322050d692359d46374a0929
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/290
2014-04-22 10:20:36 +02:00
Gergő Tisza c9e92da374 Split the progress bar into a component of its own.
Change-Id: I131b0d1b8ec992a7c7ad388021febea5a0303d16
2014-04-21 22:27:59 +00:00
Gergő Tisza bfbc58fce0 Disable preloading of fullscreen-sized image
Fullscreen clicks are only about 5-10% of image views, and there
are a lot of complaints about the app being slow, so until the
speed can be improved in other ways, there is no point in
preloading for the fullscreen mode. Unlike the normal preloading,
it is not queued, and it slows down the normal image loading.

Bug: 64135
Change-Id: Ic145c8a1d5c3729f684e2f6c96f7d84869ef4087
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/474
2014-04-19 15:53:28 +00:00
Gergő Tisza dd9a9718c3 Use thumbnail guessing
Change-Id: I2335af257fd23c9367b6839dfc6050840a905aa2
2014-04-17 10:35:33 +02:00
jenkins-bot fff6c55695 Merge "Fix bug when exiting Media Viewer while image is loading" 2014-04-16 20:39:23 +00:00
jenkins-bot 8217b97462 Merge "Load moment.js on demand" 2014-04-16 20:32:21 +00:00
Gilles Dubuc 9d51e534da Fix bug when exiting Media Viewer while image is loading
Which would cause the image to never appear, even when reopening
Media Viewer. The source of the issue was an uncaught exception in
ThumbnailWidth.

Unfortunately this cannot be covered by E2E because the image
loads too fast in that context, and cucumber/selenium doesn't
have time to catch the placeholder.

Change-Id: I9386f6e857a7974166ddb5eeb7ea731d943eddcf
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/450
2014-04-16 13:59:45 +02:00
Gergő Tisza 9b1e756c3b Replace current URL generation logic with routing classes
* deduplicates URL generating/parsing code
* gets rid of spaces in URLs
* fixes error for file names with / in them (in case they exist;
  current MediaWiki seems to disallow such names anyway)

Change-Id: I5aad43f6af1b99523c597c39befcc9db1ecab83a
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/371
2014-04-16 12:51:38 +02:00
Mark Holmquist 0ed174a306 Do not load too-big thumbnails for SVGs
Change-Id: Iae75105151bfcd0e974fc292794802c77eb26ea4
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/448
2014-04-15 11:21:05 -07:00
Gilles Dubuc 7ff5b22873 Load moment.js on demand
Change-Id: I881d38ea201f314fcf364766bb589f56c9e6b057
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/444
2014-04-15 14:13:27 +02:00
jenkins-bot a3cb95e2d2 Merge "Restore article scroll after closing Media Viewer" 2014-04-14 19:23:15 +00:00
Gilles Dubuc 09374fc9dd Restore article scroll after closing Media Viewer
There used to be a CSS trick with the order we added things to the
page and removed them from it, but it doesn't seem possible anymore
with the new order of execution, with the overlay appearing
immediately and being taken care of inside bootstrap.

The main cause of the bug, however, was the hash reset happening
after the interface was closed.

Doing the scroll restore with jQuery.scrollTo is more future-proof
and testable in QUnit.

Additions were also made to the cucumber E2E test because QUnit
alone wouldn't have caught the hash issue.

This also cleans up custom events a little and reintroduces
pushState on browsers that support the history API.

Change-Id: I63187383b632a2e8793f05380c18db2713856865
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/439
Bug: 63892
2014-04-14 18:04:30 +00:00
Gilles Dubuc eb6386bb5b Load oojs-ui on demand when "use this file" is clicked
Change-Id: Ia3b6b91c7ff0cb223f5f312eb901726fb6adcf35
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/426
2014-04-14 11:50:05 +02:00
Gergő Tisza 7da686cb2f Shuffle things around so original file sizes are easier to access
Make original file width/height part of LightboxImage, and pass it
to the image loading function.

This adds a bit to the big steaming pile of technical debt that is
mmv.js. To be cleaned up later.

Change-Id: I84b8ae75cd1cc3e94c6cf03d174473764cfbf86f
2014-04-10 01:56:38 +00:00
Gilles Dubuc 22bdbd4041 Show tooltip when all sorts of conditions are met
Change-Id: I987d5d517c3db2409e138b85b90115260d9116bd
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/261
2014-04-08 18:33:24 +00:00
Gilles Dubuc 3df526b919 Fixes various bugs in IE
- error caused by select() called during focus event
- HTMLElement not existing in older IEs
- filter rotation for older IEs causing black background bug in IE9
- IE9 lacking progress would have its progress bar never reach 100% and disappear
- Handle e.which value for clicks on IE < 9

Change-Id: I5727ef3f2a9f9aa77eac930f93320e6ce5964c78
2014-04-07 22:00:11 +00:00
jenkins-bot 21ba529db0 Merge "Display thumbnail placeholder ASAP" 2014-03-31 21:05:45 +00:00
Gilles Dubuc 685f42f05f Display black overlay while the viewer JS is loading
I went for this option because it was the fastest to implement.
I think we should wait until we make the change to core to expose
image dimensions before we consider switching to another strategy.

Change-Id: I61c9342a2d6d6fc24a24e0988b3cf7f9a06859a2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/248
2014-03-30 09:53:20 +02:00
Gilles Dubuc 2080e28a83 Display thumbnail placeholder ASAP
- Exposes file width and height through data attributes
- If the attributes are present, display the placeholder immediately

Change-Id: I3dfa80b02073984dc2d3d7784cb3744b7e4e2cc8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/293
2014-03-28 20:02:12 +01:00
Gergő Tisza c7ae4a36ba Handle image loading rejections
Displays the rejection error message when loading something fails, so that the
user knows what's going on and can send meaningful error reports.

Needs non-crappy design.

Change-Id: I7d2914d89549b598bd1070ed40c6f1c9d45b55f0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/271
2014-03-19 18:51:01 +00:00
Gergő Tisza 466735fc10 Add HTML text to embed tab
Change-Id: Idcafe6dad9ffb17ffac365a350feff3903b37ff3
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/148
2014-03-19 05:47:47 +00:00
Gilles Dubuc 56f923ae21 Add share panel, replace reuse
Mingle: 147

Change-Id: I5678002ac84965a80f5e63635151032e6c293194
2014-03-19 02:06:21 +00:00
Gilles Dubuc c6683b7e3f Make the panel animation more subtle
Also turns it into a CSS animation, which allows us
to clean a lot of code

Change-Id: Id6705b63b26d8be341e77352924cad6ac4b73da1
2014-03-14 09:04:28 +01:00
Gergő Tisza 5a3d56f81b Merge MultiLightbox into LightboxInterface
Change-Id: I4363095e0504dd941793ba3addc7ee3cbe835536
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/178
2014-03-08 01:14:07 +00:00
Gilles Dubuc c386719cdb Some refactoring to get LightboxInterface closer to a proper UI component
* remove reference to MultimediaViewer
* move hash handling to MultimediaViewer
* make it inherit from Element, remove code duplication
* cleaner event handling life cycle (register on attach,
  unregister on unattach)

Change-Id: Ida8f68dead758a6ae3c429eb85c548af61e46801
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/178
2014-03-08 00:26:44 +00:00
jenkins-bot 0fa8f80942 Merge "Get rid of global viewer instance" 2014-03-05 17:52:18 +00:00
Gilles Dubuc 8beca0b106 Get rid of global viewer instance
- split event handler setup out of bootstrap and viewer creation
- simplify the tests setup/teardown

Change-Id: Icde1db81efd6191207ba35757192c800ea2d2e91
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/278
2014-03-05 02:33:06 +00:00
jenkins-bot 44b9fa127a Merge "Fix resize issues (Part III, Fin)" 2014-03-05 00:16:16 +00:00
Aaron Arcos 6b7de4b129 Fix resize issues (Part III, Fin)
Last round of fixes and refactorings regarding resize issues
and the Canvas component:
  * Consolidate all the width calculation logic inside the Canvas component
  * Consolidate image resizing logic in the Canvas component
  * Fix size problem with SVG images
  * Clean up comments and tests

Change-Id: I0198cc1e3a45f7287b9a7494f73a8f158303f886
Bug: 56454
Mingle: 239
2014-03-05 00:14:54 +00:00
Gilles Dubuc b7488716d8 Add events for image views and "use this file"
Change-Id: I9ba37038e41d81bbb8dfa96b8a7766b35d24fa5a
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/54
2014-03-03 16:30:38 -08:00
Aaron Arcos fedaa553b4 Fix resize issues (Part II)
I was going to stage this but better give you the whole enchilada,
it is not that bad, ;-). This is what I am doing:

- Delete  things that are not used anymore.
- Componentize image ui element (Canvas).

Bug: 56454
Change-Id: Ib5461639a86d9f8e0a150f6d9543a20058d31e00
Mingle: 239
2014-02-28 10:22:21 +01:00
Gilles Dubuc 9d9fff1871 Bugfixes and improvements for the progress bar
- the bar now starts at 5% for a visual indication that
something is going on
- the bar animates (fast) to 100%, instead of
disappearing immediately
- the animation logic has been fixed to avoid seeing
the bar go backwards
- added sanity check in all the callbacks to make sure
that we don't apply any changes to an image we are
not looking at anymore (including progress updates)

Bug: 58055
Change-Id: I765a61c16513e9330a412c5ec96387623ae7dbc7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/242
2014-02-27 02:13:03 +01:00