Fixed Stretched video and image thumbnail preview on mobile devices

[Moshe1010]

Affected version

2.2.10 Patch 1

It seems that If an image or video has lower than expected dimensions/resolution, the preview thumbnail (before playing the video for example) is starched and looks quite awful on mobile devices. Tested with iPhone 14 Pro, iOS 16.0.2.

Example is here:

Won't fix - Navbar graphic glitches with Safari on iOS

When scrolling a page, a white line appears on the top the navbar menu. Tested with iPhone 14 Pro, iOS 16.0.2

xenforo.com

Could also be seen here:

XF 2.2 - Progressive web app

Mobile first. We hear it again and again, and with over half of all web traffic coming from mobile devices, it's more important than ever to provide your mobile visitors with a great experience. Of course, XenForo 2 is built on a fully responsive design that gracefully adapts to any display...

xenforo.com

 

[Kirby]

I think this is caused by XF.VideoInit.hasSeeked()

const width = this.target.offsetWidth
const height = this.target.offsetHeight
const canvas = XF.createElement('canvas', {
    width: width,
    height: height
})
const context = canvas.getContext('2d')

context.drawImage(this.video, 0, 0, width, height)

This draws the video to a canvas that has the size of the target element which is always landscape.
So if the video is in portrait mode, this will most likely significantly stretch the image to fit the canvas.

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.3.7).

Change log:

Fix manual video thumbnail generation on iOS

There may be a delay before changes are rolled out to the XenForo Community.