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
- this avoids an issue where the arrow wouldn't point to what we
want when near the edge of the screen
- this avoids an RTL issue where the bubble would go outside of
the screen
Bug: 64258
Change-Id: I1cc9683af2743b093a45b19d7142fe7e5e66423f
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/485
The code to replay clicks and clean up the handler was called after
processing each thumbnail, instead of just once at the end.
This might have caused many subtle issues such as clicks on any
but the first image not replaying correctly; more problematically,
of there were no MediaViewer-compatible thumbs, the handler was
never cleaned up and the clicks were never replayed.
Besides fixing that, this commit also adds a try..finally wrapper
so that the click replaying is not broken even if there is an error
in the thumb processing code. This might or might not be a good
idea. The internets say that try..finally without a catch causes
errors in IE8, but only if it is not wrapped in another try..catch,
so we are probably fine. (Adding a catch which just rethrows the
error would be an alternative, but it messes up stack traces.)
Change-Id: I2f645762103274c92c15a0d4b595d18d93b08415
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/497
Bug: 64345
With latest refactorings, the animatin looked like a glitch.
The position of the panel has been adjusted to (a) make the initial
position the same as shown while the progress bar for better continuity,
and (b) make the move more noticeable by increasing the distance the
panel moves.
To test, clear the local storage variable mmv.hasOpenedMetadata
Change-Id: Ie3ed29826fa15bf4c6b38f0fc8bde4bd84563fb9
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
processThumb() is a mess. This change is kept small since we might
want to backport it per the bugzilla comments; I might follow up
with some refactoring in a separate commit.
Bug: 62518
Change-Id: I1f916b88fe1b667c6c7e51c9bdca186d4aa2ef2c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/338
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
Not convinced this is a good thing (file description page still
opens in same window so it is somewhat inconsistent) but suddenly
leaving the lightbox to show the deed feels like a very unintuitive
behavior to me.
Change-Id: I2cca3e4241fd1bb2848c11cf425aa75aad8c4a30
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/472
Works, but awkward - the extension name changes a little later than the button
text itself. This is hard to avoid since we don't know beforehand
what the thumbnail type is - we have to wait for the API request.
(We can't do thumbnail URL guessing here since we cannot catch the 404 error.)
In general the whole API handling here is not so good, with a separate API
request going out when we should just get all size options in a single request,
when the user opens the reuse panel.
Change-Id: I502b7cb4e99d8af348d7d1967eb8343ec0f926fe
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/471
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
...since there probably still is one, and our failure to parse it
just makes it more important that we direct the user to the file
page.
Change-Id: Id31f95021f059ccf4bf9893b1146f3807dcabdcb
Given a sample thumbnail URL and the original width/height
this provider tries to guess the thumbnail url for a given
size.
Change-Id: I2966b60978ab763864475851d8a79370bd422dc4
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
* 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
Adds a Route class hierarchy for various URL schemes and a Router
class to convert Route classes to and from URLs.
Right now we only have two(-ish) schemes, but in the future we want
to be able to show related images which are not present on the current
page and need shareable URLs for those as well; also we might want
to specify other things in the URL than the current image (the reuse
box being open was one thing discussed); this will be a good framework
to add features like that.
The MainFileRoute class will be used by #416.
Change-Id: I489126a0ada37f91a22a2f48a4e686140a28d162
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/371
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
The download button used a dashed black line to separate options.
It has been changed to a dark green line to better fit the style.
Change-Id: I3224027b69c4c1e5cf2568aed8f4f50ee351c369
The CSS to make the favico twice as big was looking horrible in
Firefox and possibly other browsers. Since we're already
special-casing commons, let's apply a proper SVG instead of the
favico.
Change-Id: Ie32302342eba7aa37bd310c013a9f4d7f9ae187e
Two images contained a white background that was limiting their
use over other background colours.
Change-Id: Ic61e0d223ed927968344b132dbe67952c80bbe28
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
maybeDisplayThumbnail is invoked even when the survey is disabled,
which results in calling functions of a null object.
Change-Id: If7a48349e22069f91af20d8c4bb6a82b7339bd66
Also fixes other issues:
- Some code in mmv.lightboxinterface.js wasn't doing anything
- Canvas buttons were being added to the wrong element
- Several CSS rules were being declared twice, a remnant of the multilightbox days
Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409
Errors which were early enough in the life cycle to completely
block the lightbox from displaying were so far invisible to the user.
We display them in a small popup using the core messaging functionality.
Change-Id: Id04fe5d3b54703e24cd216910b15cc8bae786434
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/414
To achieve consistency with the icons in the Media Viewer panel,
the following has been adjusted:
- Colors onf the "share" icon to match the rest of the icons (updated to the new gray values of Agora).
- Size of the Commons icon has been adjusted both in the SVG file and when it is added in the LESS/CSS. Due to the different aspect ratio of this icon, extra spacing has been added to make it visually fit.
Change-Id: Ic14a869ea96ea1a8202c9988f0c5d330ba3e9a70
For download button and size drop-downs, the size labels
have been set to small and normal weight (in the download button,
other rules made it to be bold if no weight was specified).
Change-Id: I7511b307a8459d6e4a01f0b9540528046ad2be8e
This fixes three issues:
* the overlay way multiplied during history navigation, but only
the last one was cleaned up on exit
* the overlay was not cleaned up when loading a #mediaviewer URL
with an invalid file name
* the overlay was not cleaned up when there was an error creating
the viewer object
This is a quick fix, and does not change the fact that
bootstrapping is an unmaintainable mess which should be cleaned up.
Change-Id: I2838e5e709e7c7308b0a5b27eca24a2584d0a01e
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/414
The way categories were handled made it impossible to add anything
after them (they always ended up as the last child of the parent
container). This commit fixes that, and also moves the repo link
behind them (as required by #270).
Change-Id: I7c561c43897054e60028bd524d8ad5ea85f39e36
Only show the survey button if the user's language matches and the site is
enabled, and log which site we are on.
The corresponding site configuration commit is
Ic07432649906890785769ce5127761e2c84316e2
Change-Id: I575bb286f4289489b80505c901f5a9e7aeecec8b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/261
* intializeSelection was removed
* selectItem is replaced by chooseItem, sort of
(selectItem does not always update the UI, I think?)
* remove old workaround, bug was fixed upstream
This fixes the download button and unbreaks lots of unittests.
It does not fix the "Loading" text in the embed tab.
Change-Id: Iec7bf9ad5b516001231c7ba46fda962671aaddd8
- 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
Also make sure that the reuse dialog is positioned right, no
matter where its button is.
Also fixes some minor documentation problem with mw.mmv.ui.canvas
which I noticed in the process.
Change-Id: I86feed07738ebef012e63861ed909f3449b85a53
An empty download attribute means the file name from the URL is
used; any value would override the default file name.
Change-Id: Idf1d78c4b4570eb7ccd58b5da7d5ce10cfd91b70
Also do a bunch of refactoring to:
* keep LESS rules in more sane locations so it is not as hard to get an overview
(most of the metadata panel rules were in mmv.less)
* move mmv.mixins.less up one directory as it is not specific to the UI
* move the SVG icons as all of them were related to the UI
* remove the marging-right hack which was used to keep the title text from
overflowing the button; instead use a float and overflow properties to make
sure text that is too long gets hidden
Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e
Fix of I37a6da620157b9254cdc44eca8b7bd482491e916, see bug 59234
and Ic9fdd081003b694dbd7e413ca25fffe782b912b5 for background.
Fix was done using the script from that commit.
Change-Id: Ic5084f09376ce8107b91cb5651f465958361368a
I think this takes care of all the different mutations of
weird states that happen when going from a small to large
images and transitions in the middle, see card/386.
Change-Id: I80527d746614c0bbda7a1084061d292e5d6394a8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/386
* Following design, use split button to display a pulldown
menu with possible image sizes. The download happens by
sending the special "download" parameter to the server.
* Offer link to preview image in the browser.
Change-Id: Ic9d895fead04c9128186c7376a0bb09f3596335c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/79
At the moment issues in core are preventing Media Viewer
from working on IE < 9. Let's disable it in those browsers for now.
Change-Id: Icdd29f3c00fb8eeb3d463e8b8718d54d6cd01a23
With apologies to anyone who gets a hundred merge conflicts
because of this :)
We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-,
mw-mmv-mmv-, a few unprefixed), which was getting annoying,
and will be confusing to wiki editors who are trying to figure out
where a given style comes from. Such changes are better done before
going live because it breaks all local CSS tweaks on the wiki,
so I am renaming things now (also removing some stuff which wasnt
used anywhere).
Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d
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
Less misleading as we have lots of buttons, and I plan to add a new
button class for the Commons/survey/reuse thing.
Change-Id: I74194e22e9066c58f9c1eba57629458b2b9148b5
Adds site link, license link and long name, replaces internal license name
(we don't have it for most licenses) with short name.
Also fixes some problems in previous changesets that I stumbled on,
renames things to be more consistent/less misleading, and makes
EmbedFileInfo a thin container for existing classes. (That results
in a lot of Demeter's law violations, but it means one less model
to remember, which is a good thing since our property names are
often not very informative (e.g. EmbedFileInfo.url and
Image.url which had completely different meanings))
We always have the site information for embed texts (comes from the repo
API); that part of the tests was pointless, but now that EmbedFileInfo
depends on Repo they became impossible to maintain, hence the
deletion of half the test cases in getThumbnailHtml().
Change-Id: I94e1d0aca14e2a7d5fad983412090add8ad6bfa3
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
This takes care of several minor annoyances:
* centralizes all the text processing functions which have been
floating all around the code, and adds proper tests
* filters out invisible elements (sometimes used for metadata)
* avoids merging separate words on HTML->text transformation
* adds caching since doing all this transformations could be
processing-intensive for big chunks of HTML. (This might or
might not be a good idea. I haven't done performance tests, so
this might be premature optimization, and increases memory use.
OTOH these functions are often called in situations where an
immediate UI response is expected (such as selecting a size
from the list) so even small delays would be perceivable.
Bug: 63126
Change-Id: I1ef1e3a33efdfea17612df00da6b629bf39e07aa
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/388
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
Update schema to rev. 7917896, omitting the redundant 'userAgent' field, which
is already logged as part of the generic event capsule.
Change-Id: I558282ed29a14ba574204b4d5cba2a432449a75e
Gets the text closer to the spec:
* links have #mediaviewer (lots of code duplication, see #373)
* image has alt text (was title in the spec but that made less sense)
* less convoluted logic in getCreditHtml()
Change-Id: I43db84adb7fe29850706f92ee978016939b59aaa
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
Adjustments of several styling aspects for the reuse file panel:
* Border style and colours to match the ones used in similar borders and Agora style
* Highlight the trigger also on hover
* Tweak the margins to avoid info on the embed panel to appear next to the edge.
Change-Id: I3a5448e3e81006ae35d2c18a9b2cbc2a6598210e
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
This change makes the columns on the matadata panel use
a different width (2/3 and 1/3) to emphazize the description
with respect to the more advanced technical details.
Change-Id: I246e3496dd01649f360c1f80b859e2260bb1d87f
* 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
e.g. {{refimprove}} on enwiki - there is an icon of a book that is only
meant to be illustrative on the page. It interferes with the page's image
collection and the flow.
Change-Id: Icd7e5885aaf8b31fffe07bd18cc0feb0f76b848c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/229
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
Make sure it is easy to debug when one of the promises rejects (and
causes the whole promise chain to fail).
I'm not really happy with this, but still seemed better than adding
the same boilerplate error logging code to each provider one-by-one.
Change-Id: Idd2b638f012ef2ff250e350e2f6a60bb8b81899b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/268
changes include:
* Aligning license and usage boxes with content above.
* Limit the maximum size for the licensing box when open.
* Adjust font sizes and colours to adjust the alance in the prominence of each part.
Change-Id: I0e4465baaf7a9f7830b95a8d731256d6b4974e17
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
Quick and dirty fix for a bug that completely breaks the metadata panel.
Should be refactored later (for a ForeignDbRepo, a missing user is
normal, for anything else it should still be treated as an error
condition, although maybe not with a rejection).
Bug: 62019
Change-Id: I433ae2bd1334593d9c5bfe0272ce7207f3fdf723
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/267
Some styling adjustments to:
* Make description fonts not to be de-emphasized in comparison to license terms.
* Avoid metadata on the right to wrap when there is enough space.
Change-Id: I49514060dec200d93489d2b853a1dfdc1bfa5f46
- 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
Fades out the bottom of the text and adds a link to replace it
with the full HTML version. Due to the way it is positioned,
the fade + link will be invisible if the text is less then 3 lines.
The implementation is not very polished; since this will be
replaced by some JS-based ellipsis thing, I didn't want to spend
too much time on it.
Change-Id: Ib30e40fe845b85bfcf9557970efb886d28b3e5c7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118
After a few false starts trying to fix LIP.autoResize(),
I noticed that it has become obsolete by our latest
improvements (bucketing and cashing), so I decided to
get rid of it and let the browser do the resizing.
I tested in Chrome/Safari/FF and this approach seems
to work fine.
Still work in progress and there are many things that should
be cleaned up regarding the image object logic but please take
a look and let me know if you have any objections if I go
this route.
Bug: 56454
Change-Id: I08207d0f1fcc9dcb69ec31c03e96cfd0c0a6c522
Mingle: 239
Displays a blurred version of the thumbnail
while the actual image loads
Displays a progress bar showing the image load progress
Animates into focus once the actual image is loaded
Change-Id: I2b8bc4691c20ffb5b3f16da9a8b9d6fd1796d784
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146
Everything is under mw.mmv now.
(Also, I cut down on the number of direct global instance references a bit.)
Change-Id: I88bb3b62b82ce54126dd069b0aab4412d9404719
The old technique doesn't work in Firefox and
doesn't always work in Chrome depending on
when you call it.
https://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
Also fixes some tests that weren't overloading
the right function and were hitting the real
feature detection check
Change-Id: I0a9d6b5654efb169860ddf7e5e0551efb825920c
