878042 - [MMS] Apply this image place holders and specs for different cases

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::SMS, defect, P1)

Description

[Victoria Gerchinhoren [:vicky]]

The thumbnails set has been updated in order to well cover all common and edge cases. Please follow this specs and use this assets:

Use of Thumbnails

- GENERIC for other file formats
- VIDEO Files
- MUSIC files
- IMAGE with no preview
- IMAGES WITH PREVIEW (RULES): Images will be used with the real preview and aspect ratio, the image size will be determined by the larger side being a maximum of 12rem (X max size in landscape and Y max size in portrait). When an image's shorter size turns to be less than 4 rem, that side will be filled with a background color to complete 8 rem both for landscape and portrait

Also there has been designed:
ICON to overlay files that cannot be opened
ICON to overlay files that are broken

Comment 1

[Peter La]

Attachment: Exported image assets

Comment 2

[Peter La]

Attachment: Preview Thumbnail Spec (for landscape images)

Comment 3

[Peter La]

Attachment: Preview Thumbnail Spec (for portrait images)

Comment 4

[Peter La]

Attachment: Spec for blue frame

Comment 5

[Peter La]

Please take a look at all 4 attachments.  Particularly the 3 specs.

For the case of very long images with aspect ratio greater than 1:5:1, whether landscape or portrait, there are 3 options.

Whichever option is chosen, it should be the same one for both landscape and portrait.

Comment 6

[Peter La]

Attachment: Screens to illustrate how things look in context

Comment 7

[Peter La]

Attachment: Preview Thumbnail Spec (for portrait images)

Corrected some typos in the spec.

Comment 8

[Peter La]

Attachment: Preview Thumbnail Spec (for landscape images)

Box.com link to latest version of spec:
https://mozilla.box.com/s/miprycvuqmap0w0w17fy

Comment 9

[Peter La]

Attachment: Preview Thumbnail Spec (for portrait images)

Box.com link to latest version of spec:
https://mozilla.box.com/s/miprycvuqmap0w0w17fy

Comment 10

[Peter La]

Attachment: Spec for blue frame

Box.com link to latest version of spec:
https://mozilla.box.com/s/miprycvuqmap0w0w17fy

Comment 11

[Peter La]

Attachment: Preview Thumbnail Spec (for landscape images)

Changed images to make examples clearer.

Comment 12

[Peter La]

Attachment: Preview Thumbnail Spec (for portrait images)

Changed images to make examples clearer.

Comment 13

[Fabien Cazenave [:kaze]]

Taking the Gaia part.

Comment 14

[Fabien Cazenave [:kaze]]

Attachment: link to pull request

https://github.com/mozilla-b2g/gaia/pull/10268

Comment 15

[Corey Frang [:gnarf]]

Comment on attachment 759880 [details]
link to pull request

Flipping reviewer to julien - I'm @ a conference this week

Comment 16

[Julien Wajsberg [:julienw]]

discussed on IRC and on github: some work is still needed, we'll try to factorize the 2 functions where we resize images. The main difference is when we calculate the ratio: one function needs to calculate the ratio so that the resulting image is about 300 kB, the other unction needs to calculate the ratio so that it fits a certain size. The remaining code is the same.

Apart from that, this is mostly nits.

Comment 17

[Julien Wajsberg [:julienw]]

Comment on attachment 759880 [details]
link to pull request

r=me with the nits

please run all the tests + linter + test on the device before merging please :)

Comment 18

[Fabien Cazenave [:kaze]]

The unit tests have been trickier than expected, but it’s done:
https://github.com/mozilla-b2g/gaia/commit/bad6ca6977451321f7528e02f320308b0a6fba53

Comment 19

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted bad6ca6977451321f7528e02f320308b0a6fba53 to:
v1-train: 5108e3525fb41dfd58620cee21ceb7c1ab5b6f8f

Comment 20

[John Ford [:jhford] CET/CEST Berlin Time]

1.1hd: 5108e3525fb41dfd58620cee21ceb7c1ab5b6f8f

Comment 21

[Peter La]

Attachment: Exported Image Assets with @2x Res (Updated June 18)

Update to image assets.  @2x set added.

For the @1x size, fixed the 3 overlay icons' canvas size.  They were mistakenly saved out at 82x80, when they should have been 82x82.  This is now corrected.

Comment 22

[Fabien Cazenave [:kaze]]

Hi Peter, I’m afraid we landed and uplifted this bug last week. Could you open a new bug please?

(In reply to Peter La from comment #21)
> For the @1x size, fixed the 3 overlay icons' canvas size.  They were
> mistakenly saved out at 82x80, when they should have been 82x82.  This is
> now corrected.

Note that I cropped all attachment icons to 80x80 pixels: following comment 10, I used 80x80 px icons for the inner of the <iframe>, and applied a 1px blue border with rounded corners to the <iframe> itself.

Comment 23

[Peter La]

Hi Kaze,

Thanks for pointing that out.  I created a new bug here:
https://bugzilla.mozilla.org/show_bug.cgi?id=884975

Let me know if there are any problems with it - I wasn't sure if this is for the same target and what the priority should be so I set them to be the same for now.

Comment 24

[Victoria Gerchinhoren [:vicky]]

Calculations for the 2x images are a bit wrong... Can you take a second look Peter? Thanks!

Comment 25

[Fabien Cazenave [:kaze]]

Victoria, please see bug 884975 for any issue regarding 2x images. Thanks!

Comment 26

[Peter La]

Clearing my needsinfo as I spoke to Vicky about this via email, and my input is no longer needed.