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

Info needed for adding Native Mode in iOS #924

Closed
chincheta0815 opened this issue Jul 16, 2024 · 9 comments
Closed

Info needed for adding Native Mode in iOS #924

chincheta0815 opened this issue Jul 16, 2024 · 9 comments

Comments

@chincheta0815
Copy link
Contributor

Hej,

I do not know where to ask elsewhere, so please mind me asking here...

I am trying to get a kind of JavascriptInterface working for an iOS app. Just for fun so far.
Unfortunately, iOS does not come with the Android JavascriptInterface...

The question I have now is: How does the mechanism work?

Is there a messageHandler that fires up the message that will be sent to the client when I change something?

If so can you name me the message handle and how to trigger that?

My test url: http://:9000/material/?nativeColors
I am not checking for NativeReceiver and mskNative. Then I changed the Color Theme in the Skin, but I do not receive any message.

Thank you very much in advance.

@chincheta0815
Copy link
Contributor Author

As an addititon: iOS works as described here: https://developer.apple.com/documentation/webkit/wkusercontentcontroller/1537172-add

The user content controller uses this parameter to define a JavaScript function for your message handler in the page’s main content world. The name of this function is window.webkit.messageHandlers.<name>.postMessage(<messageBody>), where <name> corresponds to the value of this parameter. For example, if you specify the string MyFunction, the user content controller defines the window.webkit.messageHandlers.MyFunction.postMessage() function in JavaScript.

The that I use is "mskNative". But nothing happens.

@CDrummond
Copy link
Owner

There is some code already for this, as I considered creating a Gtk version of melodeon - and Gtk uses WebKit.

To make this work you need to pass ?nativeColors=w. Material will then pass a string to this handler. This string has the format:

TYPE
KEY VALUE
KEY VALUE
...

e.g.

MATERIAL-STATUS
PLAYING false
VOLUME 50
COUNT 1
SHUFFLE 0
REPEAT 0
TITLE Waterloo
ARTIST ABBA
ALBUM Gold
DURATION 124.567
TIME 2.63773479652405
TRACKID 195

List of native params/functions(?) is:

  • nativeStatus playback status (as above)
  • nativeColors indicates colours used for top and bottom toolbars
  • nativePlayer current player name and ID
  • nativeUiChanges not supported for this method
  • nativeTheme
  • nativeCover
  • nativePlayerPower
  • nativeAccent
  • nativeTitlebar

@chincheta0815
Copy link
Contributor Author

Wohoooo. There we go.

I could fetch nativeColors and nativeTheme!!! It was a little bit combersome not use a JSON string, but well...
WkWebKit in iOS really needs the handlers as written above...
I would try to add a "=json" or however that would be called, but I do not know whether that would be in your interest.
Another thing: I have to learn how to "pack" .js files before testing or is that not necessary?
Just tell me your thoughts and if you would like me to help.

Concerning the nativeColors I got: Is there a way or rule how I could get the respective "font color" and "markup font color" in addition to the top and bottom background?
I am referring here to the "white/grey" color of the font in dark styles and this "blueish" for active elements like the playing button (see https://github.com/CDrummond/lms-material/blob/master/screenshots/mobile-now-playing-small.png). I need these two values to change the colors in the gui...

Another issue would be to select for a dark or light status bar, but that's tricky in ios...

@CDrummond
Copy link
Owner

This code was originally written for Melodeon, and I assumed string parsing would be quicker than having to call a json decoder each time. The problem with making it json is that I'd then need to add code to build the json, etc. and I'm not convinced its really worth it.

Sorry, no current way to get text colour - but both are actually hard-coded for dark/light, so you could just do that. nativeAccent can be used to get the accent colour.

@chincheta0815
Copy link
Contributor Author

Thanks for that info. I got further...

Now it seems that nativeAccent is not working.
Is that only shown in special cases?

@CDrummond
Copy link
Owner

nativeAccent is only invoked if accent colour is derived from current track. I'd probably just ignore this.

As everything else works, shall I close this?

@chincheta0815
Copy link
Contributor Author

If you just give me a hint on what the AccentColor does as I was not able to figure that out. That would be great.
Nevertheless, I got all I need (so far) ;o)
Thank you very much.

@CDrummond
Copy link
Owner

accentColor is only invoked if the accent/highlight colour is changed due to the current song cover. This was added, AFAIR, for Squeezelite-X

@CDrummond
Copy link
Owner

Just to let you know, for 5.2.0 I'm adding the ability to set top and bottom padding for the page. e.g. for 32px top and 12px bottom you'd pass:

http://server:9000/material/?topPad=32&botPad=12

I've done this so that in my Android APK I can use all the screen - so in the notification (top) and navigation (bottom) areas. As MaterialSkin 5.2.0 will allow the user to have the now-playing backgound fill the whole screen.

Using this is also easier that detecting when Material changes the top/bottom toolbar colours and manually setting the OS areas to the required colour.

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

No branches or pull requests

2 participants