jPlayer icon indicating copy to clipboard operation
jPlayer copied to clipboard

seekBar/volumeBar mirrored in RTL mode (solution)

Open dalgard opened this issue 14 years ago • 3 comments

When making a site in a bidi-language like Arabic or Persian (which read right-to-left) it is standard practice to set the attribute dir="rtl" on the documentElement (typically) which flips the page, making elements begin at the right instead of the left edge of their parent.

Calculations such as event.pageX still begin from the left edge, however, which gives a mirrored value when clicking inside a seekbar that is now progressing from the right.

In jPlayer e.pageX are used with seekBar and volumeBar and there is an easy yet stable solution that you might consider incorporating:

Search the source for the string x/w and replace the first match with:

((this.css.jq.volumeBar.closest("[dir]").attr("dir") === "rtl") ? 1 - (x/w) : x/w)

... and the second match with:

((this.css.jq.seekBar.closest("[dir]").attr("dir") === "rtl") ? 1 - (x/w) : x/w)

It is important to use closest since sometimes the direction is only set on individual page elements. This little trick could be improved by caching the value of dir for the specific player - BUT please notice that in some cases the language and thus the direction may be changed for the page without a refresh!

dalgard avatar Nov 20 '11 23:11 dalgard

I suppose this deserves an option in jPlayer. I will flag this as a bug.

thepag avatar Nov 25 '14 18:11 thepag

Thanks to @dalgard I've attached fixed script for version 2.9.2. Changes have been applied at lines 2308 and 2446 in jquery.jplayer.js (Alternatively you can find those lines searching for "rtl"). Additionally making the 'by ' string in jplayer.playlist.js addon a user option (which in my case I need it to become an empty one) makes jplayer more compatible with non-English websites. You can check jplayer (applied those fixes) in a right-to-left context at this url.

jplayer-fixed-rtlseekandvolumebar.zip

hrmoh avatar Sep 01 '17 10:09 hrmoh

You can see the bug in RTL web sites using jplayer for example check the following url here: http://www.golha.co.uk/fa/programme/20#.YGc6Gj8VTgk (clicking the seek bar near the end causes it to seek in reverse mode). The fix has been applied to this web site: https://ganjoor.net/hafez/ghazal/sh1/ Please accept the pull request or provide another working solution so that we do not need to patch files. Thanks!

hrmoh avatar Apr 02 '21 15:04 hrmoh