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

VERIFIED FIXED in 2.2 S1 (5dec)

Status

defect
VERIFIED FIXED
5 years ago
4 years ago

People

(Reporter: rnicoletti, Assigned: rnicoletti)

Tracking

unspecified
2.2 S1 (5dec)
x86
Gonk (Firefox OS)
Dependency tree / graph
Bug Flags:
in-moztrap +

Firefox Tracking Flags

(feature-b2g:2.2+, b2g-v2.2 verified, b2g-master verified)

Details

(Whiteboard: [ft:media])

Attachments

(2 attachments)

Assignee

Description

5 years ago
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
Assignee

Updated

5 years ago
Blocks: video-rtl

Updated

5 years ago
Assignee: nobody → rnicoletti
feature-b2g: --- → 2.2+
Whiteboard: [ft:media]
Target Milestone: --- → 2.2 S1 (5dec)
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.
Attachment #8526913 - Flags: review?(dflanagan) → review+
Assignee

Comment 3

5 years ago
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'.
Assignee

Comment 4

5 years ago
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'.
Assignee

Comment 5

5 years ago
Master: https://github.com/mozilla-b2g/gaia/commit/725685831f5336cf007e36d9a812aad689604695
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Assignee

Comment 6

5 years ago
The approach was to supply left and right padding to elapsed and duration text; this supports both ltr and rtl locales.
Test case has been added in moztrap:
https://moztrap.mozilla.org/manage/case/15348/
Flags: in-moztrap+

Comment 8

4 years ago
Posted image 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

Updated

4 years ago
Status: RESOLVED → VERIFIED
QA Whiteboard: [MGSEI-Triage+]
You need to log in before you can comment on or make changes to this bug.