910094 - [Video] - UI Fixes in Gallery View and Video Player

Status: RESOLVED FIXED

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

Description

[Punam Dahiya [:pdahiya]]

In Gallery view and Video player following UI fixes are needed

- In Gallery view, the divider shouldn't extend to the edge of the screen.
- In player view, the player should be flush with the divider like (>) shouldn't have a gap.
- The scrubber should be longer.

See https://bugzilla.mozilla.org/show_bug.cgi?id=902995#c15

Comment 1

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

cc patryk in this bug, since it is mentioned by patryk.

Comment 2

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

Attachment: player view

Hi Patryk, 

I had made the scrubber longer, as the attached image. But if we drag the scrubber node to left most and right most, it is too close to the elapsed text and duration text. This case will become worse when we have the video more than a hour, like your original image. Partial digital may be covered, I will upload another screenshot about this. May you confirm we still need to make scrubber longer??? The size of scrubber is always be that from the bug 819059.

BTW, I found the font size is different, too. In spec, the elapsed text and duration text looks like 12px, but we use 14px from bug 818928 landed to now.

Comment 3

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

Attachment: player view with digital partial covered.

Comment 4

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

Sorry, I fotgot one thing. The attached image uses 12px as its font size in elapsed text and duration text.

Comment 5

[Patryk Adamczyk [:patryk] UX]

Hey John, it should be long enough that it doesn't touch any of the text... there should be a 2px gap between the scrubber knob and the text (based on comment 3).

Comment 6

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

Attachment: spec of player view.

Comment 7

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

Attachment: spec of gallery view.

Comment 8

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

Attachment: modified player view

Comment 9

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

Attachment: modified player view with hour digitals

Comment 10

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

Hi Patryk, 

I had changed the css style of player view. Please find the new version at comment 8 and comment 9. Note, if I use the same width from the spec, comment 6. The scrubber knob will be too close to text. So, I enlarge the space between scrubber bar and text to 4px. When the length of video is less than 1 hour, the space between them will look larger, comment 8.

Comment 11

[Patryk Adamczyk [:patryk] UX]

Thanks that's better now.

Comment 12

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

Attachment: make css fixings to meet the ux requirement.

fix css to meet the ux requirements.

Comment 13

[David Flanagan [:djf]]

Comment on attachment 801326 [details]
make css fixings to meet the ux requirement.

The code changes look fine to me.

Comment 14

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

merged to master:
https://github.com/mozilla-b2g/gaia/commit/63f420b811fe00e8744f8c11e30de849d5ebd3d1