[BUG] Timeslider style property settings seem to be ignored on Android

[santi-andracchi]

Describe the bug When trying to edit the player style using the configuration properties neither the progress bar nor the thumb are taken into account on Android but they are on IOS.

const PROGRESS_BAR_COLOR = '0000FF';
const THUMB_COLOR = '0000FF';

To Reproduce Try setting up a configuration with a specific color, then run the application on Android.

Expected behavior The thumb and progress bar should look blue as they do in IOS, but they still look red (which is what I understand the default color to be).

Screenshots / Visual evidence

Desktop (please complete the following information): System: OS: macOS 14.4.1 CPU: (8) arm64 Apple M1 Memory: 99.59 MB / 16.00 GB Shell: version: 3.3.1 path: /opt/homebrew/bin/fish Binaries: Node: version: 22.1.0 path: /opt/homebrew/bin/node Yarn: version: 1.22.15 path: /opt/homebrew/bin/yarn npm: version: 10.7.0 path: /opt/homebrew/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.12.1 path: /usr/local/bin/pod SDKs: iOS SDK: Platforms:

• DriverKit 23.4
• iOS 17.4
• macOS 14.4
• tvOS 17.4
• visionOS 1.1
• watchOS 10.4 Android SDK: Not Found IDEs: Android Studio: 2023.2 AI-232.10300.40.2321.11567975 Xcode: version: 15.3/15E204a path: /usr/bin/xcodebuild Languages: Java: version: 17.0.7 path: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.5 wanted: 0.73.5 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Device(s) affected

• Device: Samsung Galaxy A32 5G (SM-A326U)
• OS: Android 13
• Version API 33

Additional context

• I have also tested on a Samsung Galaxy 22 Ultra, same results.
• I have not been able to find in the library documentation the specific properties, I am using the options I see in the library module file.

[santi-andracchi]

I have more information regarding the issue.

I was able to patch the library so that at least the thumb is the desired color, as shown in the image.

One of the problems that exist is that there is an if condition that checks for these legacy properties, and completely ignores the properties that we previously set in the styling.

But beyond that if, I could check that the color of the progress bar is hardcoded somewhere in the Android SDK.

From the RNJWPlayerView.java class I tried several ways to change the color and it remained red. For example,

LayerDrawable layerDrawable = (LayerDrawable) seekBar.getProgressDrawable();
Drawable progressDrawable = layerDrawable.getDrawable(1);
progressDrawable.setColorFilter(Color.parseColor("#" + timeslider.getString("progress")), PorterDuff.Mode.SRC_IN);

I even added a custom_progress_bar.xml with the desired colors, and replaced it. Debugging I can confirm that the change persists, but then it does not impact how it is drawn in the view.

seekBar.setProgressDrawableTiled(AppCompatResources.getDrawable(mAppContext,R.drawable.custom_progress_bar));

There is a very similar issue created in the original repo (the one created by the community) where the same conflict is reported https://github.com/chaimPaneth/react-native-jw-media-player/issues/257

We really need to get this fixed, so I hope someone can at least take a look at it. Thanks!

[Jmilham21]

We primarily moved this styling into the legacy component because it's not ideal for managing the JWPlayerView. This can work, but it's a bit hacky. We recommend overriding JWP styles/colors/drawables as needed on Android, as seen here. The reason this legacy section (even if you move it out of the legacy builder) and your Java solution don't necessarily work is the JWP SeekBar under the hood may be redrawn multiple times. The style colors dictate what color is used, and anything you set will be ignored.

You are on the right track for overriding the JWPlayer styles in XML. The things you want to override are actually colors. There are four for the Seekbar:

1. jw_seekbar_background -- The background color with default value #59787880
2. jw_seekbar_secondary_progress -- The buffer color of the progress bar with default value #80787880
3. jw_seekbar_progress -- The progressed side of the bar with default value #9D1D1D
4. jw_seekbar_thumb -- The thumb with default value #E02929

Since there is no way for us to override this via code, the only option is for you to add overriding colors for the ID's I listed above in your Android app code. Sorry that the codebase is a bit misleading here, I'll add some clarifying comments in the code for you/others that stuble upon this. Also, a demonstration of how to override a color in our Example app.

[Jmilham21]

Marking this as closed as this was more of a documentation issue and has been resolved via comment and code changes.