need help skinning microplayer please

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

Volny
Posts: 18
Joined: Thu Nov 01, 2012 8:29 pm

need help skinning microplayer please

Post by Volny »

Some time ago I built a MM4 Microplayer skin that basically puts everything I need right into the Windows taskbar. I love it, and I now can't imagine using MM any other way. It's unobtrusive, always on hand, and doesn't take up any space at all. (I would have released it publicly, but didn't because some other parts of the skin are incomplete and/or cannibalised from existing skins).

Here's a screenshot (cropped horizontally somewhat to fit on the forum):

Image

Anyway, now that MM5 is official, I'm keen to try it out, but only if I can successfully port my microplayer skin. Could someone please give me some help with how to go about doing that?

I have a rudimentary understanding of CSS (I was a web designer in a past life, though I hated CSS then as I will now). I find syntax-based programming painful. MM4 skinning was pretty painful too, but at least there was a comprehensive guide for it on the wiki - I can't find anything like that for MM5.

Thanks in advance
drakinite
Posts: 532
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: need help skinning microplayer please

Post by drakinite »

Hi there,

The introduction to how to create and package a MediaMonkey 5 addon can be found here, and the beginning of the skinning guide can be found here. I'll be honest, I've kinda been stuck with coming up with more to write about. What do you think would be helpful? Examples, perhaps?

What you'll want to do in your addon is override dialogs/microPlayer.html. And if you want to inject additional scripting functionality to the microplayer, you can create a file dialogs/microPlayer_add.js and add any additional code you want there. (It'll be appended to the microPlayer.js script when the application loads it.) You may need to do that, in fact, to override the default background color of the body.

If you have a debug build installed, you can right click on the MicroPlayer and click Inspect Element or Open DevTools in Chrome. If you have a regular build installed, you can still inspect the HTML through a different method. Go to localhost:9222/ in a browser, and you should get a list of Inspectable WebContents. Click on microPlayer.html and you'll get a devtools window that allows you to inspect the entirety of the MicroPlayer page.

Here's a simple example of what to do if you, for example, wish to increase the size of the player buttons in horizontal mode. First you'll want to create skin/skin_player_add.less. This will be added to the end of skin_player.less when the program loads your skin, allowing you to override class styles or create new ones. Inside skin_player_add.less, you can add this:

Code: Select all

.microPlayerFrameHorz .playerMicroButton {
    width: round(@fontSize*1.6);
    height: round(@fontSize*1.6);
}
You can also see where default styling definitions are for the microplayer inside skin/skin_player.less (and there's one line in skin_slider.less). Do a text search for "microPlayerFrame" and you'll see all the microplayer-related definitions.

If you need additional help with CSS, here are some great resources:
- A basics tutorial: https://www.codecademy.com/learn/learn-css
- A more beginner/intermediate-oriented reference: https://www.w3schools.com/cssref/default.asp
- A more advanced, comprehensive reference: https://developer.mozilla.org/en-US/ (The Mozilla Developer Network has detailed definitions of everything in the W3 spec. They're a bit less beginner friendly, but I often find myself searching there for everything I need. For example if I want detailed description of the requestAnimationFrame method, I'll just google "mdn requestanimationframe")

I hope you find this helpful. Please let me know if there's anything you need more info on. Best of luck; looking forward to seeing your skin! (And when it's done, don't forget to submit it to the addons site here)
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
Volny
Posts: 18
Joined: Thu Nov 01, 2012 8:29 pm

Re: need help skinning microplayer please

Post by Volny »

Thanks very much for taking the time to write such a lengthy response, drakinite! Unfortunately, looking through those html, .less and .js files made my eyes bleed. I think the learning curve is going to be too steep, and the skinning process too adhoc, for it to be worth the trouble. Looking through the new features of MM5, I can't actually see anything that is relevant to me anyway. I was hoping that at least the core MM5 engine would be faster and/or more stable, but it seems about the same, if not actually a little laggier. I guess I'll check back in a year or so and see if anything's changed.

To answer your question about what would improve the Skinning Guide, below are my thoughts:

#1 Specific, Specific, Specific!

The current skinning guide is too general. It provides a rhetorical overview without offering much hard information at all. For example, notice that it mentions HTML files, yet nowhere does it even mention any of the files by name, or mention that they're in the "dialogs" folder (which is not at all a self-explanatory folder name). If not for your post, I wouldn't have even seen them.

And there's no mention of what to do with any of the files once you've found them. A few code snippets showing how to change a font, a color, a popup, etc. would go a long way.

#2 Use the MM4 version as a guide

The MM4 skinning guide is pretty good. It's not long, but it's relatively comprehensive, and spells out most of the necessary specifics of which parameters do what. If you managed to replicate this in a MM5 version you'd probably be more than halfway there.

#3 Where are the in-file comments?!

I can't believe that in over 5 years of development, no one bothered to comment the public-facing skinning files. The only comments in microplayer.html are a generic license message and something labelled "!important" that musn't be very important since the whole block is inexplicably commented out. Yet the users are left to themselves to figure out what the meanings of flex column verticalCenter, tickPlacement, flex row static, flex row dynamic, npwindow, and flex row are. for example.

#4 Avoid links - they are often a cop out

The current MM5 skinning guide gives an elevator pitch about LESS, links to lesscss.org and that's it. If you don't know much about CSS, lesscss.org is useless, since it assumes a knowledge of CSS then bombards you with technical details about the added syntax and complexities that LESS adds on top of it.

Even if I read and understood everything on lesscss.org, and learned about CSS by taking the codeacademy course you linked to - signed up, and styled a whole demo website about a hamburger shop - there'd still be no guarantee that I'd come back and automatically understand how exactly Ventis have implemented the tools that I've just spent a week learning about.

If you want to write a guide, you have to write it. Pointing people to encyclopaedic resources is of some use, but what people really need is for you to use your experience to distill and filter that information into something that's bite-sized and immediately relevant to them. Most people learn best by doing, not by reading a generalist overview of the topic. Help them along by giving them some simple but tangible directions for how to do something specific (change a font color, add 100px of padding, see the difference between em, px, and %, etc.). If people want more general resources they'll just Google them anyway.

#5 Learn to see Gobbledygook

The following is gobbledygook.

Code: Select all

.innerDlg .innerDlgHeightWithoutPadding {        
    height: ~"calc(100% - (2 * @{innerDlgPadding}))";
}

 <div data-id="npwindow" class="smallText clickable playerMicroButton paddingSmall paddingColumn" data-icon="song" style="height: 1em; width: 1em"></div>

  rgb = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
        for (var i = 0; i < rgb.length; i++) {
            rgb[i] = (i === 3 ? 1 : 255) - rgb[i];
        }
If your programming expertise means you can no longer see it as gobbledygook, then you need to sit down with someone who can. Chances are that anyone who doesn't see this as gobbledygook won't feel the need to read your guide anyway.

Even a 'simple' snippet of CSS like this is gobbledygook:

Code: Select all

.narrowControl, .flex > .narrowControl {
    min-width: round(@fontSize*6.0);
}
There are more questions contained in that snippet than answers. Why is there a dot in front of some phrases and not others? what does the comma do? What about the semi-colon or the > ? Why is narrowControl given twice? what exactly is being rounded? Why is there an @? Where do I find out where the actual font size is? And what is a font size anyway - a pt value, the height of a capital letter, or what? What determines how one reaches the minimum width? And what if I want an unchanging width? (Don't answer these - I'm listing them rhetorically)

For the beginner, these questions represent a mountain to climb before they can get anywhere. For the intermediate, they represent a digestible but still tedious jumble of rules and procedures that must be kept afloat in working memory alongside the actual problem-solving work of skinning. The less the user has to wade through this stuff on their own, the better. In my view, one of your main jobs is to help the user navigate this gobbledygook by guiding them away from the gobbledygook they can ignore, and specifying explicitly how to deal with the gobbledygook that they need to modify.

Hope that helps!
drakinite
Posts: 532
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: need help skinning microplayer please

Post by drakinite »

Thank you very much for that response and explanation, Volny. That really does help enlighten what I need to focus on when writing documentation. I really appreciate it. I'll let you know when I have a draft going.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
Post Reply