Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

seekBar/volumeBar mirrored in RTL mode (solution) #59

Open
dalgard opened this issue Nov 20, 2011 · 3 comments
Open

seekBar/volumeBar mirrored in RTL mode (solution) #59

dalgard opened this issue Nov 20, 2011 · 3 comments
Labels

Comments

@dalgard
Copy link

dalgard commented Nov 20, 2011

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!

@thepag
Copy link
Contributor

thepag commented Nov 25, 2014

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

@thepag thepag added the Bug label Nov 25, 2014
@hrmoh
Copy link

hrmoh commented Sep 1, 2017

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 added a commit to hrmoh/jPlayer that referenced this issue Apr 2, 2021
@hrmoh
Copy link

hrmoh commented Apr 2, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants