Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix for retina thumbnails being massive #2439

Merged
merged 10 commits into from
Apr 9, 2019
Merged

Fix for retina thumbnails being massive #2439

merged 10 commits into from
Apr 9, 2019

Conversation

ara4n
Copy link
Member

@ara4n ara4n commented Jan 14, 2019

todo: ideally need to cap maximum thumbnail size to 800x600 rather than expand to arbitrary widths. actually, having fullwidth images are probably fine, as long as we cap the height at 600px (which we do already)

need to check that luke's funky timeline code doesn't get confused between naturalWidth and infoWidth etc because we're taking an image which claims to be 1600x1200 and then shrinking it to 800x600 because we realise it's retina. But if the code asks for naturalHeight (which it does) it'll get 1200 rather than 600...

also need to consider whether to encode a resolution metric in the event rather than lying about resolution. <-- in the long run we certainly should.

element-hq/element-web#2985

ara4n added 2 commits January 14, 2019 17:10
needs server to support 1600x1200 thumbnails for retina large ones.
ideally need to cap maximum thumbnail size to 800x600 rather than expand to arbitrary widths.
need to check that luke's funky timeline code doesn't get confused between naturalWidth and infoWidth etc.
also need to consider whether to encode a resolution metric in the event rather than lying about resolution.
@bwindels bwindels changed the base branch from experimental to develop April 5, 2019 12:50
@bwindels
Copy link
Contributor

bwindels commented Apr 8, 2019

Ready for review. Checked that naturalWidth is only used as a fallback for when info.w/h is missing. Tested the following cases as well an:

  • sending with correct (/2) size
  • receiving on pixelRatio=1 device should thumbnail
  • receiving on pixelRatio=2 device should not thumbnail for image with dimension > 800 | 600

Seems to work well.

@bwindels bwindels changed the title experimental fix for retina thumbnails being massive Fix for retina thumbnails being massive Apr 8, 2019
@bwindels bwindels requested a review from a team April 8, 2019 13:40
@bwindels
Copy link
Contributor

bwindels commented Apr 8, 2019

Also looking to write an MSC for a better solution independent of this.

@turt2live turt2live self-requested a review April 8, 2019 17:41
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also downsize the dimensions when posting hidpi images? Similar to how stickers are handled: the physical image dimensions are 512x512, however we render them at 256x256 by recommendation of the spec (and because the sticker event intentionally halves the dimensions)

src/ContentMessages.js Outdated Show resolved Hide resolved

// Polyfill for Canvas.toBlob API using Canvas.toDataURL
import "blueimp-canvas-to-blob";

const MAX_WIDTH = 800;
const MAX_HEIGHT = 600;

// scraped out of a macOS hidpi (5660ppm) screenshot png
// 5669 px (x-axis) , 5669 px (y-axis) , per metre
const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to define the macOS header here? The spec defines pretty clear behaviour for how to handle the chunk

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there isn’t anything macOS specific here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess not macOS specific, but the resolution has to be an exact match due to line 134

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@turt2live what were you thinking of here? we're already parsing the png correctly into chunks, and then checking whether the pHYs chunk contains hidpi metrics of any flavour.

The only slight cheekiness is that it only applies this fix if the DPI is 5660 pixels-per-metre (which macOS uses for its screenshots) rather than trying to support arbitrary resolutions, but the reason for this is that absolute DPI values for screen use (as opposed to print use) are illdefined at the best of times. After all, who's to say that 1024x768 should be viewed on a 15" or 17" monitor, etc?

We could refine this perhaps by assuming that anything higher than 96dpi (3780ppm) should be randomly halved in size when being viewed in Riot/Web, but i can easily see there may be some source of higher-DPI images out there where the human intention is to be viewed at 1-image-pixel = 1-screen-pixel rather than being halved, as is the intent for macOS screenshots. So let's start like this, and then broaden it when we find other images getting mishandled, rather than overshoot.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not check that the pHYs header has hipdi metrics of any flavour, only that they have the flavour we want (5669 pixels per metre). I don't think it's impossible for us to handle other sizes. and I do think we should even if other sources of hidpi images are uncommon. We definitely do not need to handle a unit of zero (unknown) though - that's just a nightmare.

@ara4n
Copy link
Member Author

ara4n commented Apr 8, 2019

Should we also downsize the dimensions when posting hidpi images?

isn’t that what this is doing? or do you mean something else by hidpi?

@turt2live
Copy link
Member

oh it is, I got confused by img.onload

@bwindels bwindels requested review from turt2live and removed request for turt2live April 9, 2019 08:56
@bwindels
Copy link
Contributor

bwindels commented Apr 9, 2019

Doesn't seem to work in FF, canceling review request for now.

@bwindels
Copy link
Contributor

bwindels commented Apr 9, 2019

Works now in FF as well

@bwindels bwindels requested a review from turt2live April 9, 2019 10:33
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good enough to me for the RC tomorrow, although I would really like to see the resolution not be hardcoded into the source code.

@bwindels
Copy link
Contributor

bwindels commented Apr 9, 2019

Looks good enough to me for the RC tomorrow, although I would really like to see the resolution not be hardcoded into the source code.

Yep, plan is to parse resolution and add it as metadata to content.info in a later PR/MSC.

@bwindels bwindels merged commit 0592a17 into develop Apr 9, 2019
@ara4n
Copy link
Member Author

ara4n commented Apr 9, 2019

see #2439 (comment) for why i think it's correct to hardcode the resolution for now.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants