898993 - the creation of thumbnail size is not compatible to hdpi device

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Video, defect)

Description

[John Hu [:johnhu][:johu][:醬糊小弟]]

The thumbnail size is calculated with 210 * window.innerWidth / 320 and 120 * window.innerWidth / 320. When we use HDPI device (1.5x), the width/height may not be sufficient. It should multiply window.devicePixelRatio to create more sharpened image

Comment 1

[John Hu [:johnhu][:johu][:醬糊小弟]]

Attachment: use devicePixelRatio to get the correct image size

The original implementation about scale ratio may be incorrect.First, It uses window.innerWidth / 320 to calculate the ratio. But in HDPI device, the window.innerWidth is still 320 (css pixel), but the real device pixel is 480. Second, this implementation doesn't take care about orientation of device. When the creation of thumbnail executing, it uses pre-calculated width and height based on scale ratio to create thumbnail. So, the thumbnail will always be 210x120, if it is in portrait mode. If it is in landscape mode, thumbnail will always be 315x180. But in css, it is configured as 21rem x 12rem and centered in the container. So, the thumbnail created in landscape mode will be cropped. This doesn't make sense.

This patch uses devicePixelRatio to calculate the scale ratio. When user uses non-hdpi device, this value is 1 and the thumbnail will be 210x120. When user uses hdpi device, this value is 1.5 and the thumbnail will be 315x180. In css, I configured it as 100% in background-size which makes thumbnail to scale to full size of its container which is 21rem x 12rem.

The attachments are single preview image and its screenshot.

Comment 2

[John Hu [:johnhu][:johu][:醬糊小弟]]

Attachment: device screenshot after patched

Comment 3

[John Hu [:johnhu][:johu][:醬糊小弟]]

Attachment: created thumbnail image.

Comment 4

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Comment on attachment 782500 [details]
use devicePixelRatio to get the correct image size

I'm OK with this patch.

Thanks for your work!

Comment 5

[Wayne Chang [:wchang]]

HD+ UI BUG

Comment 6

[David Flanagan [:djf]]

Comment on attachment 782500 [details]
use devicePixelRatio to get the correct image size

This is a nice simple patch. Thanks for explaining it clearly. I get confused with the high dpi stuff.  Also, nice catch about the bug when the video app is launched in landscape mode!

I have one very minor nit on github, and suggest that you test this patch on a high dpi device with a very small video, like a video recorded as an MMS attachment.  If the video is smaller than the thumbnail size, does it do the right thing?

Comment 7

[John Hu [:johnhu][:johu][:醬糊小弟]]

merged to master:
 https://github.com/mozilla-b2g/gaia/commit/49b1f68b0e2152557bb7c2defb2a5f9d7a0648c6

Comment 8

[Al Tsai [:atsai]]

Hi John, do we need this patch on v1.1hd as well?

Comment 9

[John Hu [:johnhu][:johu][:醬糊小弟]]

merged to v1.1.0hd:
https://github.com/mozilla-b2g/gaia/commit/9036cbea337897593779cb053ae285acc3201e43