Page MenuHomePhabricator

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

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 Medium.
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

In T77988#1742125, @Mrjohncummings wrote:

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

In T77988#1742125, @Mrjohncummings wrote:

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 To sort 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

@brion: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task? Thanks! :)

Aklapper removed brion as the assignee of this task.Jun 19 2020, 4:26 PM

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)

In T77988#1739748, @Mrjohncummings wrote:
Today, logged-out (Kaltura player)
Today, logged-in (videojs Beta feature enabled)

It seems the bug was an artefact of the Kaltura player's HTML structure. Perhaps this can be closed?

Aklapper lowered the priority of this task from Medium to Lowest.Jul 15 2020, 11:49 AM