RTL language causes OSC to malfunction #4878

low-batt · 2024-04-13T21:20:11Z

System and IINA version:

macOS 13.6.3
IINA 1.3.4 + PR feat: enable hebrew locale #4922

Expected behavior:
The on screen controller works properly with right to left languages such as Arabic and Hebrew.

Actual behavior:
Currently IINA does not support any right to left languages. However PR #4922 enables Hebrew. If you build IINA with that pull request and set Hebrew as the language then the slider in the OSC malfunctions. When you click on the slider the knob does not move to where the cursor is. The A-B Loop knobs can not be dragged. If you hover over the slider the thumbnail preview shown is not for the correct position in the video. Some images on the OSC point in the wrong direction.

These problems were reported by @ShlomoCode in issue #4776. As that issue reports quite a few RTL related problems I have created this issue that focuses on the OSC problem due to the malfunctioning behavior of the slider.

Steps to reproduce:

Open the IINA project in Xcode
Under the Product menu open the Scheme menu and select Edit Scheme…
Click on the Options tab
Scroll down to the App Language setting
In the pull down select Right-to-Left Pseudolanguage near the end of the list
Start IINA running under Xcode
Start playing a video
Click on various places in the OSC slider
Notice the knob moves the the wrong place

Or you can build with PR #4922 and set your language to Hebrew.

MPV does not have this problem.

mpv does not support localization.

How often does this happen?
Every time.

The text was updated successfully, but these errors were encountered:

low-batt · 2024-04-13T21:20:33Z

I will be posting a PR soon that corrects the problems.

This commit will: - Change the MainWindowController.updateTimeLabel and PlaySliderCell.knobRect methods to take into account userInterfaceLayoutDirection - Change the get method of the PlaySliderLoopKnob x property to take into account userInterfaceLayoutDirection - Change the language-direction of many OSC icons from Fixed to Left to Right, Mirrors This corrects the problem where clicking the slider in the on screen controller did not position the knob under the cursor when a right to left language is configured. This also corrects other related OSC RTL problems.

low-batt · 2024-04-13T22:03:20Z

@ShlomoCode Do you spot anything wrong in this screenshot?:

I did some more testing and found dragging the floating OSC around is broken. I will add a fix for that once I figure out the proper fix.

ShlomoCode · 2024-04-13T23:41:21Z

@low-batt It looks fine! 👏
If you want me to pull and check the PR locally please let me know

low-batt · 2024-04-14T00:21:40Z

I suggest waiting for me to fix the problem with moving the OSC in floating mode. I may be able to get that done tomorrow.

My understanding is that the IINA project's position is that localization is a priority and must be done right. So please do point out anything you notice that is not correct even if it is minor.

I am expecting this will be an iterative process. First priority is to fix anything that is actually malfunctioning due to RTL.

low-batt · 2024-04-14T18:36:12Z

@ShlomoCode I normally don't work on localization, so I'm still reading and learning, especially about RTL. This morning I'm thinking the orientation of media controls shown by the Quicktime Player and Safari we discussed in issue 4776 was not an oversight and was very deliberate.

From the Apple Internationalization and Localization Guide:

Types of controls and content that should not flip in a right-to-left language are:

Video controls and timeline indicators

Images, unless they communicate a sense of direction, such as arrows

Clocks

Music notes and sheet music

Graphs (x– and y–axes always appear in the same orientation)

Other articles about RTL agree.

From the Mozilla post Building RTL-Aware Web Apps & Websites: Part 1:

Hardware legacy UI is a thing: In MENA (Middle East and North Africa) and other regions where RTL languages are spoken, people use gadgets too. Audio hardware has the same control layout as anywhere else in the world. So buttons like Play, Fast Forward, Next, Previous have always been the same. And because of that, it’s not a good idea to mirror any of those buttons. Please don’t RTL the media player buttons.

From the Medium post Fundamentals of Right to Left UI Design for Middle Eastern Languages

- Media Controls — Media controls like playback buttons and media progress indicators always run LTR. This is because media controls are reflecting the way a cassette players rolls the tape in a cassette. So elements containing a play/pause/stop button will never flip.

From the Media Player Icons section of RTL Styling 101:

Some icons are universal, and it doesn't require us to flip them. The reason is that because those playback buttons represent the direction of the tape being played, not the direction of the time.

It goes on to show how the Spotify app looks identical in English and Arabic pointing out the playback icons are not flipped since they are universal icons.

From the OneSky post Right-to-Left (RTL) Localization: What You Need To Know:

For instance, you should flip elements that indicate a progression (e.g., A→B should become B←A). Also, mirror page selectors, sliders, and chat icons. Meanwhile, media controls (e.g., play buttons and progress bar) and circular progress bars (i.e., clockwise direction) should not be mirrored.

From WOMEN IN LOCALIZATION Three Considerations for RTL Languages Localization:

When not to mirror
Media controls

You may assume that media control elements should also be flipped, but they should not. Playback buttons, progress bars – all these elements retain the left-to-right direction because they refer to the progress of tape, not time.

I'm thinking my proposed changes are incorrect and I need to make IINA match up with Quicktime and Safari and not reverse the media controls.

ShlomoCode · 2024-04-16T15:36:45Z

@low-batt Interesting, I never thought about the hardware emulation thing in software.
I personally still think a mirror will be more intuitive for RTL people, but you should probably follow the guidelines of apple, mozilla and google, and not mirror the slider.
Sorry about that!

low-batt · 2024-04-16T18:20:55Z

No problem. Investigating and rethinking is a normal part of development. I looked into this as I was worried about defending not matching up with Quicktime's behavior to the other developers. I will redo the PR to follow Apple's guidelines.

In the meantime I had been looking into the problems with dragging the floating OSC and I now have a fix for that. I also found that resizing the playlist panel was broken as well and I have a fix for that too.

Tuesday is busy for me, so I won't be posting an update today. I should be able to post a revised PR soon.

This commit will: - Add initializers to TimeLabelOverflowedStackView, TimeLabelOverflowedView and TouchBarPlaySliderCell that set userInterfaceLayoutDirection to be leftToRight - Change MainWindowController.windowDidLoad to set oscFloatingTopView property userInterfaceLayoutDirection to be leftToRight - Change constraints from leading/trailing to left/right for several music player OSC components to prevent them from moving when a RTL language is used - Change MainWindowController methods mouseDown and mouseDragged to take into account the userInterfaceLayoutDirection setting during playlist resizing - Change ControlBarView.mouseDragged to take into account the userInterfaceLayoutDirection setting when repositioning the floating OSC - Rename the play property in the Constants struct to be blackRightPointingTriangle - Add a blackLeftPointingTriangle property to the Constants struct - Change PlaylistViewController.tableView to use a right or left arrow based on the userInterfaceLayoutDirection setting - Change the language-direction of the pip and volume related icons and the playlist icon from Fixed to Left to Right, Mirrors This adjusts IINA's behavior to match Apple's guidance that video controls and timeline indicators should not flip in a right-to-left language. Other controls, such as the volume control and the pip and playlist buttons are flipped for RTL languages. This also corrects problems dragging the floating OSC and resizing the playlist when a right to left language is configured.

low-batt · 2024-04-18T04:32:00Z

I've updated PR #4879. These features should be working with RTL:

Floating OSC, including dragging
Bottom and top OSC
Music mode OSC
Touch Bar controls
Playlist, including adjusting the size of the panel

Try it out if you have time. A critical review is always welcomed.

Of course there are still other RTL problems to solve.

This commit will: - Add initializers to TimeLabelOverflowedStackView, TimeLabelOverflowedView and TouchBarPlaySliderCell that set userInterfaceLayoutDirection to be leftToRight - Change MainWindowController.windowDidLoad to set oscFloatingTopView property userInterfaceLayoutDirection to be leftToRight - Change constraints from leading/trailing to left/right for several music player OSC components to prevent them from moving when a RTL language is used - Change MainWindowController methods mouseDown and mouseDragged to take into account the userInterfaceLayoutDirection setting during playlist resizing - Change ControlBarView.mouseDragged to take into account the userInterfaceLayoutDirection setting when repositioning the floating OSC - Rename the play property in the Constants struct to be blackRightPointingTriangle - Add a blackLeftPointingTriangle property to the Constants struct - Change PlaylistViewController.tableView to use a right or left arrow based on the userInterfaceLayoutDirection setting - Change the language-direction of the pip and volume related icons and the playlist icon from Fixed to Left to Right, Mirrors This adjusts IINA's behavior to match Apple's guidance that video controls and timeline indicators should not flip in a right-to-left language. Other controls, such as the volume control and the pip and playlist buttons are flipped for RTL languages. This also corrects problems dragging the floating OSC and resizing the playlist when a right to left language is configured.

low-batt · 2024-04-18T19:32:21Z

I had to update the PR today as I lost a fix when cleaning up the XIB files.

Quicktime English:

Quicktime Hebrew:

IINA English:

IINA RTL:

One difference is that the order of the customizable buttons reverses in the IINA OSC.

I did not reverse the full screen button icon. Should that one be flipped?

ShlomoCode · 2024-04-18T22:04:19Z

I did not reverse the full screen button icon. Should that one be flipped?

With Apple itself it is not mirrored in RTL, but it is always the other way around:

One difference is that the order of the customizable buttons reverses in the IINA OSC.

Why is this so? On purpose or by mistake?

ShlomoCode · 2024-04-18T22:50:45Z

The OSD (on screen display) has a playback progress slider while changing the position, and it should be like the slider in the OSC (from left to right, like a tape).
The numbers in the OSD are also not in the right direction, meaning it should be
{current_time} / {remaining_time} (as in the OSC indicator)
and not {remaining_time} / {current_time}
In addition, the OSD should be on the left side of the window and not on the right side

CleanShot.2024-04-19.at.01.46.36.mp4

(If you want you can turn this comment into a new issue for OSD issues)

ShlomoCode · 2024-04-18T23:27:07Z

Quicktime Hebrew:

IINA RTL:

Note that the next/previous arrow buttons are messed up. It should be like in Quicktime Hebrew, arrows pointing outwards and not towards each other.
its also in my mackbbok's keyboard:

low-batt · 2024-04-18T23:54:52Z

On the full screen button icon I think we stick with not flipping it. I had searched around and did not find a consistent standard. I will defer to the senior developers as to whether the IINA icon should be changed to be more like the Apple button.

Let's treat the OSD as a separate issue.

I can't believe I missed the reversed buttons. That must be fixed. I will revise the PR tomorrow. I suspect I broke that when trying to clean up all the extraneous changes Xcode added to the XIB.

ShlomoCode · 2024-04-19T00:29:00Z

@low-batt I opened a new issue for OSD, if you could take a look #4884

ShlomoCode · 2024-04-19T00:31:10Z

Why actualy the order of the customizable buttons reverses in the IINA OSC?

low-batt · 2024-04-19T03:39:40Z

Thanks for opening the OSD issue. I will tackle that once we are satisfied with the PR for this issue.

My thinking on the list of customizable buttons is that they do not fall under the "video controls and timeline indicators" exception. So they should flip, just like the audio controls. The counter argument is that Apple did not reorder the two Quicktime buttons. So I am a little uncertain.

One inconsistency on Apple's part. Quicktime flips the pip icon, so I made IINA's icon also flip. But in the pip window the pip icon to exit is not flipped. Seems incorrect to me. Makes me unsure as to how close we should follow Apple's example.

What are your thoughts?

This commit will: - Add initializers to TimeLabelOverflowedStackView, TimeLabelOverflowedView and TouchBarPlaySliderCell that set userInterfaceLayoutDirection to be leftToRight - Change MainWindowController.windowDidLoad to set the userInterfaceLayoutDirection property of fragControlView and oscFloatingTopView to be leftToRight - Change constraints from leading/trailing to left/right for several OSC components to prevent them from moving when a RTL language is used - Change MainWindowController methods mouseDown and mouseDragged to take into account the userInterfaceLayoutDirection setting during playlist resizing - Change ControlBarView.mouseDragged to take into account the userInterfaceLayoutDirection setting when repositioning the floating OSC - Rename the play property in the Constants struct to be blackRightPointingTriangle - Add a blackLeftPointingTriangle property to the Constants struct - Change PlaylistViewController.tableView to use a right or left arrow based on the userInterfaceLayoutDirection setting - Change the language-direction of the pip and volume related icons and the playlist icon from Fixed to Left to Right, Mirrors This adjusts IINA's behavior to match Apple's guidance that video controls and timeline indicators should not flip in a right-to-left language. Other controls, such as the volume control and the pip and playlist buttons are flipped for RTL languages. This also corrects problems dragging the floating OSC and resizing the playlist when a right to left language is configured.

low-batt · 2024-04-20T00:53:10Z

I've updated PR #4879 with fixes for speed buttons. I did not change the behavior of the customizable buttons. I'm waiting to hear your thoughts. I'm still unsure on what the correct behavior should be, but still thinking they should flip like the audio controls as the these buttons are not video controls.

ShlomoCode · 2024-04-21T01:27:03Z

I did not change the behavior of the customizable buttons. I'm waiting to hear your thoughts. I'm still unsure on what the correct behavior should be, but still thinking they should flip like the audio controls as the these buttons are not video controls.

But a true inversion should be of the entire layout (ie the group of customizable buttons will be on the left side of the window), not just the order within the group.

low-batt · 2024-04-21T02:18:26Z

True. I did not do that because Apple didn't do that with the audio controls. They left them on the left side of their OSC and reordered within the audio group. And yes I am confused by this.

low-batt added bug type: localization priority: high feature: osc labels Apr 13, 2024

low-batt self-assigned this Apr 13, 2024

low-batt linked a pull request Apr 13, 2024 that will close this issue

Fix RTL language causes OSC to malfunction, #4878 #4879

Open

2 tasks

low-batt added the progress: pr ready label Apr 13, 2024

low-batt mentioned this issue Apr 13, 2024

design issues in RTL layout #4776

Open

ShlomoCode mentioned this issue Apr 19, 2024

Incorrect directionality in RTL OSD #4884

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RTL language causes OSC to malfunction #4878

RTL language causes OSC to malfunction #4878

low-batt commented Apr 13, 2024 •

edited

low-batt commented Apr 13, 2024

low-batt commented Apr 13, 2024

ShlomoCode commented Apr 13, 2024 •

edited

low-batt commented Apr 14, 2024

low-batt commented Apr 14, 2024

ShlomoCode commented Apr 16, 2024 •

edited

low-batt commented Apr 16, 2024

low-batt commented Apr 18, 2024

low-batt commented Apr 18, 2024

ShlomoCode commented Apr 18, 2024 •

edited

ShlomoCode commented Apr 18, 2024 •

edited

ShlomoCode commented Apr 18, 2024 •

edited

low-batt commented Apr 18, 2024

ShlomoCode commented Apr 19, 2024

ShlomoCode commented Apr 19, 2024

low-batt commented Apr 19, 2024

low-batt commented Apr 20, 2024

ShlomoCode commented Apr 21, 2024

low-batt commented Apr 21, 2024

RTL language causes OSC to malfunction #4878

RTL language causes OSC to malfunction #4878

Comments

low-batt commented Apr 13, 2024 • edited

low-batt commented Apr 13, 2024

low-batt commented Apr 13, 2024

ShlomoCode commented Apr 13, 2024 • edited

low-batt commented Apr 14, 2024

low-batt commented Apr 14, 2024

ShlomoCode commented Apr 16, 2024 • edited

low-batt commented Apr 16, 2024

low-batt commented Apr 18, 2024

low-batt commented Apr 18, 2024

ShlomoCode commented Apr 18, 2024 • edited

ShlomoCode commented Apr 18, 2024 • edited

ShlomoCode commented Apr 18, 2024 • edited

low-batt commented Apr 18, 2024

ShlomoCode commented Apr 19, 2024

ShlomoCode commented Apr 19, 2024

low-batt commented Apr 19, 2024

low-batt commented Apr 20, 2024

ShlomoCode commented Apr 21, 2024

low-batt commented Apr 21, 2024

low-batt commented Apr 13, 2024 •

edited

ShlomoCode commented Apr 13, 2024 •

edited

ShlomoCode commented Apr 16, 2024 •

edited

ShlomoCode commented Apr 18, 2024 •

edited

ShlomoCode commented Apr 18, 2024 •

edited

ShlomoCode commented Apr 18, 2024 •

edited