1129551 - [RTL][Video] The Progress bar slider overlaps the video total time when using the fast forward button to navigate to the end of the video.

Status: VERIFIED FIXED

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

Description

[Joshua Mitchell (Inactive)]

Attachment: 2015-02-04-13-38-07.png

Description:
When watching a video in a RTL language, the video slider will progress from right to left. If you fast forward to the end of the video the slider (shuttle-jog) will cover the right side of the total video time (shown at the left end of the progress / time bar). If you allow the video to fully play at normal speed the slider will overlap momentarily and then the video will reset to the beginning (visually and on the progress bar), but if you use the fast forward button to get to the end, the video will not auto-reset causing the bug to be much more visible. This occurs in Portrait and Landscape mode.


Repro Steps: (In a RTL language such as Arabic) 
1) Update a Flame to 20150204010225
2) Launch Video App (record a video if necessary)
3) Select and play a video
4) Fast-forward to the end of the video using the fast forward button. 

Actual:
Progress slider overlaps total time

Expected:
the slider will not overlap other important information

Environmental Variables:
Device: Flame 3.0
Build ID: 20150204010225
Gaia: dfebaaa8aab43470f482d09d71137bab840c3ae9
Gecko: 0c2f7434c325
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

Repro frequency: 15/15
See attached: screenshot

------------------------------------------------------------------------------------------------------
This issue DOES reproduce in 2.2 

Device: Flame 2.2 (KK - Nightly - Full Flash)
Build ID: 20150202002507
Gaia: d6141fa3208f224393269e17c39d1fe53b7e6a05
Gecko: be206fa2fb60
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 37.0a2 (2.2)
Firmware Version: v18d-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 1

[Joshua Mitchell (Inactive)]

Peter - Can you reopen the Meta bug that this issue now blocks.

Comment 2

[Russ Nicoletti [:russn]]

Attachment: Link to github PR

Comment 3

[David Flanagan [:djf]]

Comment on attachment 8559446 [details] [review]
Link to github PR

I assume that what is going on here is that in ltr languages you are positioning the play head by setting style.left and that in rtl languages you are positioning it by setting style.right.

I haven't tested the patch, but I assume you have, I suppose this works.

I think this would be cleaner if it explicitly set margin-left and margin-right and was commented. Maybe something like this:

/* if we set style.left, position the play head 1.15 rems to the left of that */
margin-left: 1.15rem;

/* if we set style.right, position the play head 1.15 rems to the right */
margin-right: 1.15rem;

Comment 4

[Russ Nicoletti [:russn]]

Updated PR based on review comments, landed, master:

https://github.com/mozilla-b2g/gaia/commit/f8e12544861fc2da9d78d4e238b4449286b68a3a

Comment 5

[Coler]

This issue has been verified successfully on Flame3.0.
Reproduce rate:0/5.
Attachment:Verify_RTL_ProgressBar.png

Flame 3.0 build:
Gaia-Rev        e280a660955bbdab265d50f8d9e009de34082332
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/650863f6987b
Build-ID        20150211160231
Version         38.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20150211.192431
FW-Date         Wed Feb 11 19:24:42 EST 2015
Bootloader      L1TC000118D0

Comment 6

[Coler]

Attachment: Verify_RTL_ProgressBar.png

Comment 7

[Pi Wei Cheng [:piwei] (inactive)]

This issue is verified fixed on Flame 3.0 master. Video progress bar slider no longer obscure the time at the end when in RTL language.

Device: Flame 3.0 Master
BuildID: 20150224010314
Gaia: 31ac1cd7a029d5e46dd7c92537b5c973c5d9826e
Gecko: 368c62292249
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 39.0a1 (3.0 Master) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0

2.2 is also affected but since there's no indication on uplifting, I'm not adding a verifyme tag for 2.2.

Comment 8

[Alissa（leave from Mozilla）]

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

Comment 9

[Sue]

Attachment: 2015-03-11-01-57-55.png

Hi Josh,
Could you help to request uplift on v2.2? Thanks!
This issue still exists on Flame 2.2, after fast-forward to the end of the video using the fast forward button, progress slider overlaps total time.
See attachment:2015-03-11-01-57-55.png
Rate:5/5

Flame 2.2 build:
Build ID               20150310002536
Gaia Revision          166491b92278dc9e648f8d49ab02d9ca00d74421
Gaia Date              2015-03-06 18:26:27
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/1cda026f8996
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150310.042346
Firmware Date          Tue Mar 10 04:23:56 EDT 2015
Bootloader             L1TC000118D0

Comment 10

[Josh Cheng [:josh]]

Hi Russ,
Could you please raise 2.2 approval request as RTL is shipping in 2.2?
Thanks!

Comment 11

[Russ Nicoletti [:russn]]

Attachment: 2.2 approval request

Comment 12

[Russ Nicoletti [:russn]]

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Not a regression

[User impact] if declined: Poor user experience in RTL locales

[Testing completed]: Manual testing

[Risk to taking this patch] (and alternatives if risky): low (one line css change)

[String changes made]: None

Comment 13

[bhavana bajaj [:bajaj]]

Comment on attachment 8576097 [details]
2.2 approval request

minor css change for RTL , low risk , hence approving for 2.2

Comment 14

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/a4c51967235c46a0ff93dc470dff59180fccc6df

Comment 15

[Sue]

Attachment: video_slider.png

This issue has been verified successfully on Flame 2.2, after fast-forward to the end of the video using the fast forward button, the slider will not overlap other important information.
See attachment:video_slider.png
Rate:0/5

Flame 2.2 build: pass
Build ID               20150315162500
Gaia Revision          a6b2d3f8478ec250beb49950fecbb8a16465ff6f
Gaia Date              2015-03-15 14:33:22
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/18619f8f6c5c
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150315.195030
Firmware Date          Sun Mar 15 19:50:42 EDT 2015
Bootloader             L1TC000118D0

Comment 16

[SandKing]

Attachment: Video: Flame.3GP

This bug does not exsit on latest Flame v2.5&v2.6 and Aries KK v2.6.

STR: Same as comment 0

Actual results: After fast-forward to the end of the video using the fast forward button, the slider will not overlap other important information.
See attachment: Flame.3gp
Reproduce rate: 0/10

Aries v2.6:
Build ID               20151107001102
Gaia Revision          c3436122d678911d04b8f491724596116890ff9b
Gaia Date              2015-11-06 18:22:03
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e2a910c048dc82fc3be53475f18e7f81f03e377b
Gecko Version          45.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151106.232924
Firmware Date          Fri Nov  6 23:29:32 UTC 2015
Bootloader             s1

Device: Flame KK 2.5 512mb 
Build ID               20151108004501
Gaia Revision          577948202ae12154524a2bd2bd6d467838ad50b8
Gaia Date              2015-11-07 10:00:59
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/ae7b8b1fd9e1504347b938820f99d75058049386
Gecko Version          44.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151108.045623
Firmware Date          Sun Nov  8 04:56:35 EST 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Device: Flame KK v2.6 512mb (master)
Build ID               20151108150206
Gaia Revision          c3436122d678911d04b8f491724596116890ff9b
Gaia Date              2015-11-06 18:22:03
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e2a910c048dc82fc3be53475f18e7f81f03e377b
Gecko Version          45.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151108.183921
Firmware Date          Sun Nov  8 18:39:33 EST 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0