Lyrics panel alignment?

[boober]

I'm trying to change the lyrics panel from center alignment to left alignment. I'm using the Code Monkey skin. I've looked at the Skinning Guide and searched the forums for hints on how to do this, but I can't seem to find the element that controls the alignment. Is this an easy change, or can someone point me in a more detailed direction than what's available on the wiki?

[drakinite]

It's an easy change!

Code: Select all

[data-id="lyricsParagraph"] {
    text-align: left!important;
}

Most of the knowledge required for skin making involves knowing how to use CSS selectors. I understand the skinning documentation is very sparse in that regard, but hopefully I'll be able to add more in the future.

* Edit: looks like the !important flag is needed in this case, because it looks like the preview panel sets text-align: center; in its style.

[boober]

It's an easy change!

Code: Select all

[data-id="lyricsParagraph"] {
    text-align: left!important;
}

Most of the knowledge required for skin making involves knowing how to use CSS selectors. I understand the skinning documentation is very sparse in that regard, but hopefully I'll be able to add more in the future.

* Edit: looks like the !important flag is needed in this case, because it looks like the preview panel sets text-align: center; in its style.

Thank you!

I'm familiar with CSS, but I'm not versed enough in MM skinning to know where that resides. I could follow most of the pointers, but couldn't for the life of me find anything referencing the lyrics panel.

Would I add this code to skin_base_add or maybe skin_window_base_add? I'm assuming that adding this to a skin .less file will override default skin behavior. Is that right?

Edit: Found it — skin_base_add worked.

[drakinite]

Yup; you got it!
There isn't a critical need to put new styles in any particular file. They all get compiled into the same CSS stylesheet. But if you're making a skin, it'll be a good idea to keep it organized in a similar way to the source / other skins. (e.g. styles relating to buttons go into skin_button_add.less, styles relating to the listview go to skin_listview_add.less, etc.)

[boober]

There isn't a critical need to put new styles in any particular file. They all get compiled into the same CSS stylesheet. But if you're making a skin, it'll be a good idea to keep it organized in a similar way to the source / other skins. (e.g. styles relating to buttons go into skin_button_add.less, styles relating to the listview go to skin_listview_add.less, etc.)

Good to know, thank you!

Now that I have my lyrics aligned, I wanted to add the artist and song title at the top of the panel. In MMW4, I think this was done using an HTML file, but that might have been via a plugin. Can that be done via skinning in MMW5 or is that more of a plugin function?

[Peke]

Hi,

Now that I have my lyrics aligned, I wanted to add the artist and song title at the top of the panel. In MMW4, I think this was done using an HTML file, but that might have been via a plugin. Can that be done via skinning in MMW5 or is that more of a plugin function?

It is more the addon function and https://www.mediamonkey.com/addons/brow ... lbum-view/ is clear example on how it will work.

[boober]

That's a bit beyond my learning right now, but I appreciate the guidepost and your help with alignment!

[drakinite]

That's a bit beyond my learning right now, but I appreciate the guidepost and your help with alignment!

It would actually be much simpler than the 3D album view addon, though it would still require a bit of coding. The contents of the lyrics window are controlled in controls/lyricsWindow.js; see the multiline "div.innerHTML = '<div data-id="header" class="flex row lvHeader" >' + ..."

You can create a script controls/lyricsWindow_add.js and override the code with MM5's built-in Override function:
https://www.mediamonkey.com/wiki/Import ... )#Override
Example:

Code: Select all

LyricsWindow.prototype.override({
  _createlayout: function($super) {
    // $super is the original _createlayout function, if you wish to call it
    // otherwise, put your modified code here
  }
});

[boober]

The contents of the lyrics window are controlled in controls/lyricsWindow.js; see the multiline "div.innerHTML = '<div data-id="header" class="flex row lvHeader" >' + ..."

You can create a script controls/lyricsWindow_add.js and override the code with MM5's built-in Override function:
https://www.mediamonkey.com/wiki/Import ... )#Override

Oh, neat. That's a good seed for me to explore — it would have taken awhile to connect those dots myself. Thanks, again!

[drakinite]

No problem; good luck! Feel free to reach out if you have more questions.

Also, don't forget: the Devtools are your friend. Install a debug build and you can "Inspect Element" by right clicking, opening the same devtools as in a browser.

[boober]

No problem; good luck! Feel free to reach out if you have more questions.

Also, don't forget: the Devtools are your friend. Install a debug build and you can "Inspect Element" by right clicking, opening the same devtools as in a browser.

Ooh — I didn't know that was a thing. That's great. Looks like I'm headed for a debug build. /grin

[drakinite]

Yup! Debug builds are very convenient for development, though EurekaLog makes the performance a bit slower. Personally, I keep a regular build in my non-portable installation for everyday use, and a debug portable build for development.

[boober]

@drakinite Update: I was able to add the artist and track title to the lyrics panel. I'm sure I'm not using best practices — I just copied lyricsWindow, renamed it lyricsWindow_add, then Frankensteined some lines from another file into the _createlayout function in the _add file.

Is this essentially compiling / rendering the panel twice since the code is repeated? I'm probably using the wrong language here.

If I use the code you provided, would I bring in the whole _createlayout function? I'm not clear whether I can just override the variable that holds the HTML, which I think would be:

Code: Select all

var div = document.createElement('div');
div.innerHTML = // my changes here 

[drakinite]

In this case, I believe you would want to copy the entire contents of the _createlayout function and modify it. As such, you wouldn't call the $super function. That's because there's no easy way to modify just the div.innerHTML = ... code and not all the other code.

The $super function is kind of like calling a superclass constructor in a language like Java, but in this context, it's for overriding any method, instead of just a constructor.

Is this essentially compiling / rendering the panel twice since the code is repeated? I'm probably using the wrong language here.

No - though it is still a little bit wasteful. It's basically like doing the following:

Code: Select all

// this section of code is from lyricsWindow.js
var myObj = {
    foo: 'bar',
    init: function() {
        // do some stuff
    },
    method1: function () {
        // do some more stuff
    },
    method2: function () {
        // do some more stuff
    }
}

// lyricsWindow_add.js gets added to lyricsWindow.js at runtime
var myObj = {
    foo: 'not bar',
    init: function() {
        // do some stuff
    },
    method1: function () {
        // do some more stuff
    },
    method2: function () {
        // do some more stuff
    }
}

instead of:

Code: Select all

var myObj = {
    foo: 'bar',
    init: function() {
        // do some stuff
    },
    method1: function () {
        // do some more stuff
    },
    method2: function () {
        // do some more stuff
    }
}

myObj.foo = 'not bar';

The contents of lyricsWindow.js is dedicated to just defining a class. If you copy the entirety of lyricsWindow.js into lyricsWindow_add.js, and just tweak a few things, you're re-defining the entire class instead of only tweaking the parameters/methods you want.

Hope that made sense. If not, maybe this article can help - It seems beginner-friendly enough, and it even uses JS for its examples: https://www.educative.io/blog/object-or ... rogramming

[boober]

That's because there's no easy way to modify just the div.innerHTML = ... code and not all the other code.

This tracks with what I was reading, but I haven't coded (in the loosest sense of the term) in awhile, and never in js. Glad to know this is the case and I wasn't off in left field.

If you copy the entirety of lyricsWindow.js into lyricsWindow_add.js, and just tweak a few things, you're re-defining the entire class instead of only tweaking the parameters/methods you want.

This is how I read what was happening, but I wasn't sure if I could just redefine one part. In retrospect, I guess I was asking whether I could redefine only a part of the function, which doesn't make any sense. I really appreciate your explanation — it's very helpful. Thank you!