Page MenuHomePhabricator

Video thumbnails not fitting into packed-hover gallery mode
Open, NormalPublic

Description

Issue: Video thumbnails in <gallery mode="packed-hover"> are not packed but have spaces on their right and left side.


Expected: Packed video thumbs.
Reported at COM:BI.
To quote the reporter:

J'en profite également : il y a quelques mois, quand je mêlais photos et vidéos dans mes galeries comme Grand Prix de Denain 2014, les vidéos s'affichaient de façon harmonieuse avec les photos, mais du jour au lendemain elles ont pris une taille fixe tandis que les photos continuaient de s'adapter au contexte.

Event Timeline

Rillke created this task.Dec 9 2014, 1:12 PM
Rillke raised the priority of this task from to Normal.
Rillke updated the task description. (Show Details)
Rillke changed Security from none to None.
Rillke added a subscriber: Rillke.
Aklapper renamed this task from [REGRESSION]: Video thumbnails not fitting into packed-hover gallery mode to Video thumbnails not fitting into packed-hover gallery mode.Dec 9 2014, 1:30 PM
brion added a subscriber: brion.Jul 21 2015, 1:19 AM
Restricted Application added a subscriber: Matanya. · View Herald TranscriptJul 21 2015, 1:19 AM
Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:27 PM

I'm not sure if this is the same bug but creating a gallery with only videos (on English Wikipedia) and using tag mode=packed does not work, the spacing fits to the width of the page rather than keeping the videos packed in the middle of the page.

brion added a comment.Oct 20 2015, 6:25 PM

@Mrjohncummings can you provide a sample page with just a few items and a clear explanation of what it's supposed to look like? Thanks!

@brion Here is an example https://en.wikipedia.org/wiki/User:John_Cummings/gallery_bug as you can see the gallery with just videos is spaced to fit the width of the page rather than being packed. It seems like the formatting is correct for a split second while the page loads but then it goes funny.

brion added a comment.Oct 20 2015, 7:17 PM

Hrm.... what on earth is this 'packed' mode doing under the hood? Is it some combination of CSS and JavaScript that resizes the images again? Presumably it's not working when it doesn't get a simple image...

brion added a comment.Oct 20 2015, 7:27 PM

Ok, the packed mode code (which is all in core, not in TimedMediaHandler) makes assumptions about the structure of inline images, which are violated... badly... ;) but TimedMediaHandler's PopupVideoTransform style output.

The JS is in fact setting the width and height properties on the img element for the thumbnail, but that gets overridden by the inline style definitions on the img. If we set the style, then you get the right size but it's laid out wrong due to more style attributes on the surrounding divs.

Best thing is probably to kill the existing transform output, reform it to be sane, and then things should work as expected.... :P Need to make sure there's no surprises with things that replace the player inline though.

Ok, the packed mode code (which is all in core, not in TimedMediaHandler) makes assumptions about the structure of inline images, which are violated... badly... ;) but TimedMediaHandler's PopupVideoTransform style output.
The JS is in fact setting the width and height properties on the img element for the thumbnail, but that gets overridden by the inline style definitions on the img. If we set the style, then you get the right size but it's laid out wrong due to more style attributes on the surrounding divs.
Best thing is probably to kill the existing transform output, reform it to be sane, and then things should work as expected.... :P Need to make sure there's no surprises with things that replace the player inline though.

I had some code in TMH to make it work, but code was kind of crap and got reverted.

Question: has someone added code to this today? Hover mode on galleries is currently not working properly, the image descriptions are displayed all the time. I've created a new gallery on the page I created for this bug to show what I mean, the descriptions should only appear when you mouse over them

https://en.wikipedia.org/wiki/User:John_Cummings/gallery_bug

Question: has someone added code to this today? Hover mode on galleries is currently not working properly, the image descriptions are displayed all the time. I've created a new gallery on the page I created for this bug to show what I mean, the descriptions should only appear when you mouse over them
https://en.wikipedia.org/wiki/User:John_Cummings/gallery_bug

That happens if you are looking at it in on a touch screen

Question: has someone added code to this today? Hover mode on galleries is currently not working properly, the image descriptions are displayed all the time. I've created a new gallery on the page I created for this bug to show what I mean, the descriptions should only appear when you mouse over them
https://en.wikipedia.org/wiki/User:John_Cummings/gallery_bug

That happens if you are looking at it in on a touch screen

I don't have a touch screen and it was working yesterday, strange, perhaps an issue with an update to Windows 10 or Chrome if the code hasn't been changed.

TheDJ added a comment.Oct 21 2015, 6:06 PM

Code should not make assumptions about thumbnails anyway, since a thumbnail can be 'anything' the renderer determines to be appropriate.

brion moved this task from Backlog to Doing on the TimedMediaHandler board.Oct 23 2015, 10:20 PM

Change 248540 had a related patch set uploaded (by Brion VIBBER):
Fixes for video thumbs in gallery packed-hover mode

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

brion claimed this task.Oct 23 2015, 10:22 PM

Tweaking the output for video thumbnails in 'popup' mode seems to help here, and doesn't have too many obvious side effects.

Change 248572 had a related patch set uploaded (by Brion VIBBER):
Tweak packed-hover gallery mode for better video compat

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

TheDJ added a comment.Oct 25 2015, 8:29 PM

It seems that the patches work fairly well, but there still seems to be an issue with audio files in packed and packed-overlay mode.

TheDJ added a comment.Apr 25 2016, 7:56 PM

Hmm, not really happy.

  1. Gallery code only rly works for image galleries
  2. Gallery packed-mode JS seem to reparse the original image dimensions on every resize... seems a bit over the top and doesn't work if some of the dimensions are flexible
  3. TMH player is not resizable. AT ALL
  4. TMH popup thumbs are 'semi' resizable.
  5. Audio player is a 'very wide screen' thumbnail, which the script also doesn't really handle well, especially not when combined with #3.
  6. TMH/Graphs/Maps are all div's which can potentially be used inline
  7. We have no design to make dimensions styling of thumbnail content consistent in any sort of way. This is why we need 'hacks' like 'a.image img' and '.thumb *:first' etc etc