1102611 - [RTL][Video] Gap between progress bar and elapsed time

Status: VERIFIED FIXED

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

Description

[Russ Nicoletti [:russn]]

In RTL locales, when playing a video, the elapsed time in the video control bar is right-aligned leaving a noticeable gap between the progress slider and the elapsed time.

Note: there are two use cases that need to be addressed:

1) Playing video from video app
2) "viewing" a video, for example an attachment to an email or from a browser

Comment 1

[Russ Nicoletti [:russn]]

Attachment: Git hub PR: https://github.com/mozilla-b2g/gaia/pull/26369

Comment 2

[David Flanagan [:djf]]

Comment on attachment 8526913 [details] [review]
Git hub PR: https://github.com/mozilla-b2g/gaia/pull/26369

I'm pretty sure you need to fix the margin for the duration text element as well, by changing margin-right to -moz-margin-end because otherwise the thumb overlaps the duration and the end of the video. (It is hard to see the issue otherwise).

If you make that change then r+ and I don't need to review again.

Comment 3

[Russ Nicoletti [:russn]]

I found that wrt the duration text, it is the text alignment that is important. In LTR locales, text-align should be 'right' whereas in RTL locales, it should be 'left'; padding is irrelevant according to my investigation. It appears there is no -moz-text-align property so I have added a 'dir=rtl' section to the css to change the text alignment to 'right'.

Comment 4

[Russ Nicoletti [:russn]]

Correction to comment 3: 

'dir=rtl' section to the css to change the text alignment to 'right'.

should be 

'dir=rtl' section to the css to change the text alignment to 'left'.

Comment 5

[Russ Nicoletti [:russn]]

Master: https://github.com/mozilla-b2g/gaia/commit/725685831f5336cf007e36d9a812aad689604695

Comment 6

[Russ Nicoletti [:russn]]

The approach was to supply left and right padding to elapsed and duration text; this supports both ltr and rtl locales.

Comment 7

[Lancy(Leave from Mozilla)]

Test case has been added in moztrap:
https://moztrap.mozilla.org/manage/case/15348/

Comment 8

[Sue]

Attachment: verify_pass.png

This issue has been verified as pass on latest build of Flame 2.2/3.0 and Nexus 5 2.2/3.0 by STRs:
1. Launch Video app.
2. Tap a video to play it.
3. Observe the video control bar.
4. Launch Email app and login with a valid account.
5. Received a mail with video.
6. Viewing the video and observe the video control bar.
**Step3&Step6: The progress slider goes from right to left, with the played part highlighted in blue at right side. Time played is displayed at right and remaining time is at left.
See attachment:verify_pass.png
Rate:0/3

Device: Flame 2.2 (pass)
Build ID               20150525002504
Gaia Revision          144673a413586f98b5e2c27b781c1a539611f754
Gaia Date              2015-05-25 02:01:14
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/c4db2af40b1b
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150525.041143
Firmware Date          Mon May 25 04:11:54 EDT 2015
Bootloader             L1TC000118D0

Device: Flame 3.0 (pass)
Build ID               20150525160205
Gaia Revision          5bcc08a732163087999251b523e3643db397412c
Gaia Date              2015-05-24 14:44:40
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/b6623a27fa64
Gecko Version          41.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150525.192755
Firmware Date          Mon May 25 19:28:07 EDT 2015
Bootloader             L1TC000118D0

Device: Nexus 5 2.2 (pass)
Build ID               20150525002504
Gaia Revision          144673a413586f98b5e2c27b781c1a539611f754
Gaia Date              2015-05-25 02:01:14
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/c4db2af40b1b
Gecko Version          37.0
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150525.041303
Firmware Date          Mon May 25 04:13:19 EDT 2015
Bootloader             HHZ12f

Device: Nexus 5 3.0 (pass)
Build ID               20150525160205
Gaia Revision          5bcc08a732163087999251b523e3643db397412c
Gaia Date              2015-05-24 14:44:40
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/b6623a27fa64
Gecko Version          41.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150525.192207
Firmware Date          Mon May 25 19:22:24 EDT 2015
Bootloader             HHZ12f