Info needed for adding Native Mode in iOS about lms-material

[chincheta0815]

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]

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]

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]

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]

Thanks for that info. I got further...

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

[CDrummond]

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]

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]

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]

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.