[S] Update audio quick view layout on media search
Closed, ResolvedPublic

Description

Currently we have a bit of an awkward layout with the audio player inside of the quick view

Screen Shot 2020-07-28 at 12.27.50 PM.png (1×2 px, 288 KB)

Adding margin (32px from the top of the player to the top of the white card and 24px below the player to the file name) around the audio player, centering the player in the space, and removing the bg color we use for images with different aspect ratios could make this layout less awkward.

Screen Shot 2020-07-28 at 12.35.02 PM.png (1×1 px, 388 KB)

Event Timeline

CBogen renamed this task from Update audio quick view layout on media search to [S] Update audio quick view layout on media search.Aug 5 2020, 4:24 PM

Change 618873 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Fix audio player height issue and update layout

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

Change 618873 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Fix audio player height issue and update layout

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

Etonkovidova subscribed.

The QuickView layout looks different in different browser (assuming it's all within acceptable range of expectations).

FFChromeSafari
Screen Shot 2020-08-10 at 5.47.51 PM.png (605×1 px, 87 KB)
Screen Shot 2020-08-10 at 5.47.39 PM.png (657×1 px, 95 KB)
Screen Shot 2020-08-10 at 5.48.05 PM.png (631×1 px, 87 KB)

@Etonkovidova that's expected behavior for now – eventually we plan to introduce the new Audio/Video player library which should unify the experience, but for now we are relying on how each browser natively handles <audio> and <video> elements.

Thanks @egardner for clarification!

Checked on commons wmf.4; the specs in https://gerrit.wikimedia.org/r/618873 seem to be in place.
Ping @mwilliams - it'd be great to confirm that all looks as it should be:

FFChrome
Screen Shot 2020-08-12 at 5.33.03 PM.png (624×1 px, 138 KB)
Screen Shot 2020-08-12 at 5.33.44 PM.png (428×515 px, 42 KB)